As we said in this article, Elementor is more than just a page builder plugin. It is a multipurpose plugin that can replace several WordPress plugin types at once. One of the plugins that can be replaced with Elementor is the image gallery plugin. With Elementor, you don’t need to install an extra plugin to create an image gallery on your WordPress site. There are two widgets offered by Elementor to create an image gallery: Basic Gallery and Gallery.
The Basic Gallery widget — which is available on Elementor Free — allows you to create a basic image gallery, while the Gallery widget allows you to 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 post, we will show you 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 done so (read Elementor Free vs Elementor Pro). There are many advantages you will get by using Elementor Pro, including the ability to create a WordPress theme without coding.
In this example, we are going to create a landscape photo gallery. The photos are divided into three types: mountain, sea, and waterfall. We will create three tabs to host each landscape type plus one tab to view all photos.
To get started, create a new page and edit with Elementor. Or you can also edit an existing page. Add a section and drag the Gallery widget to it.
Under the Settings block under the Content tab, set the Type option to Multiple.
By default, your gallery contains only one tab. To add new a new tab, simply click the ADD ITEM button.
Open one of the items (tabs). Set the tab label on the Title field. 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 haven’t had one, simply upload ones. Click the Create a new gallery -> Insert Gallery button to add the gallery to gallery tab.
Open the rest items (tabs) and repeat the steps above to set the tab label and add the images.
Customizing the Gallery
Once done adding the images to each tab, you can customize your gallery. On the Settings block, you can set the layout, row height, space between images, and image size. There is also an option to enable Lazy Load.
Open the Filter Bar block to set the main tab label (the “all” tab), pointer, and animation.
Open the Overlay block to enable the overlay. You can display the image title and description when hovering over an image by setting the Title and Description.
If you want to display the Title and Description on mouser hover, you need to edit the individual image in the gallery and add the parameter you set (alt text, title, caption, or description).
Open the Style tab to style up your gallery. There are 4 blocks you can open: Image, Overlay, Content, and Filter Bar.
This block allows you to set the border color of the image, hover border color, border width, border radius, CSS filter, and hover animation.
This block allows you to set the overlay color, hover overlay color, blend mode, and hover animation.
This block allows you to customize the image content. Content refers to the image title and description. You can set the alignment, vertical position, padding, text color, and typography (font style, font family, and font size).
This block allows you to customize the filter. You can set the alignment, normal color, hover color, active color, text color, space between tabs, and typography.
You can play around until you get satisfied with the result. Once done, click the PUBLISH/UPDATE button on the bottom side on the left panel to publish/update your page.