Image gallery

Create amazing image gallery using elementor

by

With this tutorial you will learn how to make an amazing image gallery with the Image gallery component for Elementor.
Define the number of images to display with the repeater, the gallery display mode (Masonry, Grid, Justify and Slider), the presentation of the content as a card or in an overlay and style all the elements.

Activate the component Image gallery

The plugin Elementor is installed and active.
The plugin EAC components is installed and active.
From the settings panel (EAC advanced) you have to drag & drop the ‘Images gallery‘ icon on the panel preview.

Image gallery icon

Add an image and its content

You must select the image and define the content of each element by

  • its title,
  • its description,
  • fill in the keywords separated by commas to constitute the filters,
  • add a link which will be displayed as a button identified by its label.

Define layout mode and content

The component has four display modes, Masonry, Grid, Justify and Slider.
For the Slider mode you will find in this post the description of the elements and their behavior.

Image gallery layout

In the Content section you can retain only the elements that will be displayed like Title, Description…
Select the content display mode, either in an overlay or as a card.

Apply aspect ratio to images and style elements

For the Grid mode, you can assign a ratio to the images and their vertical position.
The component comes with twelve different styles applicable to each item. Change the margin between items and the background color. For each element you can define the size of the font, its color.

Leave a Comment