Create amazing image gallery using elementor

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.

Accessibility for image gallery widget

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

Layout: the component has four display modes, Masonry, Grid,  Justify and Slider.
Select the number of columns  for each device mode.
For the Slider mode you will find in this post the description of the elements and their behavior.
Image: you can choose their size, activate lazy loading and apply a ratio to them.
Content layout: display content either as an overlay or as a card, and align content vertically.

Image gallery layout mode settings

In the Content section you can retain only the elements that will be displayed like Title, Description and button ‘Read more’.
If the ‘Read more’ button is not active, select the element on which the link will be positioned. You can also display images in a Fancybox.

Image gallery content settings

Stylizing elements

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 font-size and its color.

Image gallery style

Leave a Comment