Table Of Contents

Thumb Gallery widget

How to Use Thumb Gallery Widget

At times, we need to keep/store images in a single space and normally think about the gallery. Thumb gallery widget that mainly keeps images in small size image but represents larger one through the link. In the documentation below, you’re exactly going to learn to Use Thumb Gallery widget. Most importantly, you will be able to know about the way of representing larger images via small images.

So, let’s dive into the doc.

To Insert Widget

inserting Thumb Gallery widget

To insert a widget into the section actually is fun. Simply, drag and drop the image gallery widget that you want to use for your project. As you see in the screenshot above.


Content Tab

Using the Content Tab, you’ll be able to make a layout of a particular part of a website. And in this regard, some handy sections in the tab will assist you a lot in designing the Thumb Gallery widget.

Now, I’m going to show the sections of the tab and how they work behind the widget.

Layout

thumbgallerywidget 2 - BdThemes

Simply, go to the Content tab > Layout.

In this section, you can generally set image height, position, and width of Content, and also the image limit. By switching On/Off options you might easily manage the content related to the options.

Mostly, the Strip Shortcode switcher will help you to wipe out the shortcode of your text if your text includes any shortcode by chance. And Fullscreen switcher will let you display the image on the full screen.

Custom Content

Most importantly, from the Skin control, you can select Custom skin with Default skin. When you select Custom skin, you will find another section named Custom Content on the gallery widget.

N.B: If you select Custom skin, then you’ll find the Custom Content section.

thumbgallerywidget 3 - BdThemes

Therefore, go to Layout > Skin > select Custom. After that, go to Custom Content.

Button

thumbgallerywidget 4 - BdThemes

Come to the Button section from the Content tab. Then add Text to the button and set the Icon with the button.

Navigation

thumbgallerywidget 5 - BdThemes

From this section, you’ll be able to set the layout of Navigation. Just go to the Content tab > Navigation and take a look at the image above.

Query

This section works for setting the source location of data that you need to display by the reference like Author, Categories, Tags, and Formats for the Thumb Gallery widget. The references can be different in accordance with the source location. Read more 

N.B: If you select Default skin, then you’ll find the Query section.

For example, 

A.  Go to Source ➤ next select data location( as posts, pages, etc.) 

B. Then, write the author’s name in the Author field. Similarly, in the Categories and Tags field.

C. On the other hand, select categories from the Categories field.

D. Order By and Order controls are here to arrange the data you want to display through Random, Title, Date, or Menu order wise and also with ascending or descending order.


Style Tab

Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Content

thumbgallerywidget style 1 - BdThemes

Here, in this section, you might add Background color, Padding, and Border Radius. Also, you can select Border Type(Solid, Dotted, Double, etc.) and Content Transition(Fade, Scale-up, etc).

Title and Text

thumbgallerywidget style 2 - BdThemes

Go to the sections one by one.

Look, these two sections will let you add Background and Text color to the Title and Text on the Thumb Gallery widget. Take a look at the image above.

Button

Go to the Style tab > Button.

This section includes two modes (Normal and Hover). The modes will allow you to add Text and Background color to the button of the image gallery.

Besides, you can usually set Box Shadow, select Border Type, and Radius with Padding and Typography. See the image example above.

Normal:

thumbgallerywidget style 3 - BdThemes

Hover:

thumbgallerywidget style 4 - BdThemes

Navigation

Simply go to Content tab > Navigation.

Arrows:

thumbgallerywidget style 5 - BdThemes

Here, you can style the arrow. See the image above.

Thumbnavs:

thumbgallerywidget style 6 - BdThemes

This sub-section will let you add Overlay color, Box Shadow, and adjust Space Between for the WordPress gallery.

Position:

thumbgallerywidget style 7 - BdThemes

From this section, you’ll be able to adjust Offset using the scroll bar here. Look at the image above.

Animation

thumbgallerywidget style 8 - BdThemes

The animation section is here to help you to manage the animation everything on the Thumb Gallery widget.

Video Assist

At the end of this documentation, I hope you’ve noticed what is Thumb Gallery Widget is, developed by Bdthemes, and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
Be cool in Summer with up to 40% OFF on our products | Coupon: SUMMERSALE

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design.

Changed your Mind?

Please Suggest us how to improve

Up to 40% OFF

Grab the best summer deal and enjoy awesome Elementor web design tools in your hands now! This is a limited-time offer so get it before time runs out.