Need to create tabbed image gallery in Elementor ?
As we constantly say, Elementor is more than just a page builder plugin. It is a versatile plugin that can replace multiple types of WordPress plugins at a time. One of the plugins that can be replaced with Elementor is the image gallery plugin.
With Elementor, you don't need to install any additional plugin to create an image gallery on your WordPress website. There are two widgets offered by Elementor for creating an image gallery: Basic Gallery and Gallery.
The Basic Gallery widget - available on Elementor Free - lets you create a basic image gallery while the Gallery widget lets you create a more advanced image gallery, including a tabbed image gallery.
This is great if you want to create a gallery on a photography website. In this article, we are going to show you how to create a tabbed image gallery in Elementor.
How to create a tabbed image gallery in Elementor
The Gallery widget is available on the pro version of Elementor. So make sure you have upgraded your Elementor to the pro version if you haven't. There are many benefits you will get by using Elementor Pro including the ability to create a WordPress theme without coding.
Read also: How to create a tabbed image gallery in Elementor
In this example, we will create a landscape photo gallery. The photos are divided into three types: mountain, sea and waterfall. We are going to create three tabs to house each type of landscape plus a tab to display all photos.
To get started, create a new page and edit it with Elementor. You can also edit an existing page. Add a section and drag the Gallery widget into it.
Under the block Settings under the tab Content, set the option Type on Multiple.
By default, your gallery contains only one tab. To add a new tab, just click on the button ADD AN ELEMENT.
See also: How to create a gradient progress bar in Elementor
Open one of the items (tabs). Define the tab label in the field Title. Click the plus button to select the images you want to add to the tab.
Select the images from your WordPress media library. If you don't have one, just download them. Click on the button Create a new gallery -> Insert gallery to add the gallery to the tab.
Open the other items (tabs) and repeat the above steps to set the tab label and add the images.
Customize the gallery
Once adding images to each tab, you can customize your gallery. In the block Settings, you can set the layout, row height, space between images and image size. There is also an option to activate the Lazy Load feature.
Open the block Filter bar to define the label of the main tab (the "All" tab), the pointer and the animation.
Open the block Overlay to activate the overlay. You can display the image title and description when you hover over an image by setting the title and Description.
If you want to display the title and description on mouse over, you need to edit the individual image in the gallery and add the parameter you defined (alt text, title, caption or description).
Open the tab Style to customize your gallery. There are 4 blocks you can open: Image, Overlay, Content and Filter Bar.
Image
This block allows you to set the image border color, pointing border color, border width, border radius, CSS filter and pointing animation.
Overlay
This block allows you to set the overlay color, hover overlay color, blend mode, and hover animation.
Content
This block allows you to customize the content of the image. Content refers to the title and description of the image. You can set alignment, vertical position, fill, text color, and typography (font style, font family, and font size).
Filter bar
This block allows you to customize the filter. You can set alignment, normal color, pointing color, active color, text color, space between tabs and typography.
You can manipulate these settings until you are satisfied with the result. Once done, click on the button PUBLISH / UPDATE at the bottom on the left panel to publish or update your page.
Get Elementor Pro Now!
Conclusion
Here is ! That's it for this article which shows you how to create tabbed image gallery in Elementor. If you have any concerns on how to get there flet us know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
