How to Use 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 gallery. Thumb gallery that mainly keep images in small size image but represents larger one through 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 image via small image.

So, let’s dive into the doc.

To Insert Widget

To insert a widget into the section actually is a fun. Simply, drag and drop your 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.

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

Layout

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. Switching On/Off options you might easily manage the content related to the options.

Mostly, 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.

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

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

Button

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

Navigation

From this section, you’ll be able to set the layout of Navigation. Just go 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. The references can be different in accordance with the source location. Read more 

N.B: If you select Default skin, then you’ll find 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

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

Go to the sections one by one.

Look, these two sections will let you add Background and Text color to the to Title and Text. 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.

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

Normal:

Hover:

Navigation

Simply go to Content tab > Navigation.

Arrows:

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

Thumbnavs:

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

Position:

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

Animation

The animation section is here to help you to manage the animation everything.

Video Assist

At the end of this documentation, I hope you’ve noticed what is Thumb Gallery Widget 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.


About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.


Up to 50% OFF

Missed The Black Friday offer this year? Get up for flat 50% discount right now.