Image gallery is one of the plugin types that can be replaced with Elementor. With Elementor installed and activated on your WordPress site, you don’t need to install a new plugin to create a beautiful image gallery. Elementor has two widgets that you can use to create an image gallery: Basic Gallery and Gallery. You can use the Basic Gallery widget to create a basic image gallery. While for the Gallery widget, you can use it to create a more advanced gallery.
In case you haven’t known about it. Elementor is a page builder plugin for WordPress. You can use it to create a beautiful web page on your WordPress without having to deal with CSS. You can read our beginners’ guide to learn the basic use of Elementor.
How to create an image gallery in WordPress with Elementor
Before getting started, make sure you have installed and activated Elementor on your WordPress site. You can add the image whether on a post or a page. To edit a post/page with Elementor, click the Edit with Elementor button above the Gutenberg editor.
You will be taken to the Elementor editor after clicking the Edit with Elementor above. Before getting started to add content to the canvas area, you can set the page layout first. To do so, open the settings panel by clicking the gear icon on the bottom-left corner. You can set the page layout on the Page Layout option.
Creating an image gallery using the Basic Gallery widget
Once you are ready, add a new section by clicking the plus button on the canvas area and drag the Basic Gallery widget from the left panel to the canvas area.
Click the image selector to select the images you want to add to the gallery. If the images don’t exist on your WordPress media gallery yet, simply upload them.
Click the Create a new gallery button to add the selected images to the gallery.
You can set the image size, the number of columns, and the lightbox on the Image Gallery block under the Content tab.
You can go to the Style tab to style up the gallery. You can set the spacing and border type on the Images block. To style up the caption, you can open the Caption block.
Creating an image gallery using the Gallery widget
The Gallery widget offers more customization options than the Basic Gallery widget. You can use three different layouts: Grid, Justified, and Masonry. You can also set the overlay color, description, hover animation, and so on.
Please note that the Gallery widget is only available on the pro version of Elementor (read the differences between Elementor Free vs Elementor Pro)
To start creating an image gallery with the Gallery widget, drag the Gallery widget from the left panel to the canvas area. Click the image selector and select the images you want to add to the gallery just like did above. Once done adding the images, click the Settings block under the Content tab. Set the gallery type on the Type option.
The Gallery widget allows you to create an image gallery with multiple tabs like the following. Simply select the Multiple option if you want to create a gallery with multiple tabs like the one below.
Still on the Settings block, set the gallery layout, number of columns, space between images, aspect ratio, and image size.
Open the Overlay block to enable the overlay. You can display the image title and description on overlay hover if you want it.
If you opt to display the image title or the image description, you need to edit the individual image in the gallery. Edit the alt text, title, caption, or description according to what you want to display on image hover.
Go to the Style tab to style up your gallery. There are 3 option blocks (4 if you create multiple tabs gallery).
- Image block
From this block, you can set the border color of the image, border radius, image over animation, and CSS filter.
- Overlay block
This block allows you to customize the overlay. You can set the overlay color, hover animation, and blend mode.
- Content block
This block allows you to customize the content of your image. Content refers to the image title and description you set on the Overlay block on the Content tab.
You can set the alignment, vertical position, padding, text color, typography (font style, font family, font size), and hover animation.
Once you are done customizing your gallery, you can click the PUBLISH button on the bottom side on the left panel to publish your page. You can also preview your page first by clicking the eye icon.