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
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.
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.
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.
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.
Therefore, go to Layout > Skin > select Custom. After that, go to Custom Content.
Come to the Button section from the Content tab. Then add Text to the button and set the Icon with the button.
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.
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.
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.
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.
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 Title and Text on the Thumb Gallery widget. Take a look at the image above.
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.
Simply go to Content tab > Navigation.
Here, you can style the arrow. See the image above.
This sub-section will let you add Overlay color, Box Shadow, and adjust Space Between for the WordPress gallery.
From this section, you’ll be able to adjust Offset using the scroll bar here. Look at the image above.
The animation section is here to help you to manage the animation everything on the Thumb Gallery widget.
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.