Would you like to know how to create an image gallery with Elementor ?

The image gallery is one of the types of plugins that can be replaced by Elementor. By Elementor installed and activated on your website WordPress, you don't need to install a new plugin to create an 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 an image gallery. While for the Gallery widget, you can use it to create a more advanced gallery.

Read also: How to create a gradient progress bar in Elementor

In case you didn't know, Elementor is a WordPress Plugin page creation. You can use it to create a web page on your website without having to deal with CSS.

How to create an image gallery in WordPress with Elementor

Before you begin, make sure you have Elementor installed and activated on your website WordPress. You can add the image whether on an article or on a page. To edit an article/page with Elementor, click on the button Edit with Elementor above the Gutenberg editor.

You will be taken to the Elementor Editor after clicking Edit with Elementor above. Before you start adding content to the edit box, you can first set the layout. To do so, open the settings panel by clicking on the gear icon in the lower left corner. You can set the layout in the option Layout.

Create an image gallery using the Basic Gallery widget

Once you're ready, add a new section and drag the Basic Gallery widget from the left panel to the edit box.

Click the image picker to select the images you want to add to the gallery. If the images don't exist on your WordPress media gallery yet, just upload them.

Click on the button Create a new gallery to add the selected images to the gallery. Then rearrange them.

See also: How to add image to text in Elementor

You can set the image size, the number of columns and the light area in the block Image Gallery under the Content tab.

You can access the tab Style to customize the gallery. You can set the spacing and border type on the block images. To customize the legend, you can open the block Legend.

Create 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, pointing animation, etc.

Read also: How to fix video autoplay not working in Elementor

Please note that the Gallery widget is only available on the pro version of Elementor.

To start creating an image gallery with the Gallery widget, drag it from the left panel into the edit area. Click on the image picker and select the images you want to add to the gallery like you did above.

Once you have finished adding images, click on the block Settings under the tab Content. Set the gallery type to the option Kind.

The Gallery widget allows you to create an image gallery with multiple tabs as follows. Simply select the option Multiple if you want to create a gallery with multiple tabs like the one below.

Still in the block Settings, set the gallery layout, number of columns, space between images, aspect ratio and image size.

Open the block Overlay to activate the overlay. You can display the title and description of the image on the overlay hint if you want.

If you choose to display image title or image description, you need to edit the individual image in the gallery. Edit the alt text, title, caption, or description depending on what you want to display on the image score.

Go to the tab Style to customize your gallery. There are 3 option blocks available (4 if you are creating multiple tab galleries).

• Image

From this block you can set image border color, border radius, image animation and CSS filter.

• Overlay

This block allows you to customize the overlay. You can set the overlay color, point animation, and blend mode.

• Content

This block allows you to customize the content of your image. Content refers to the title and description of the image you defined in the block Overlay tab Content.

You can set alignment, vertical position, fill, text color, typography (font style, font family, font size) and pointing animation.

Once you are done customizing your gallery, you can click the button PUBLISH at the bottom on the left panel. You can also preview your page first by clicking on the eye icon.

Get Elementor Pro Now!

Conclusion

Here is ! That's it for this article which shows you how to create an image gallery with 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.

...