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.
Table of Contents
Accessibility for image gallery widget
Tab / Shift-Tab keyboard keys to navigate between filter labels
Enter / Space keyboard keys to activate a filter
aria-label text 'Filter results by + filter label'
Tab / Shift-Tab keyboard keys to navigate between links
Home keyboard key to move focus to the first link
End keyboard key to move focus to the last link
Escape keyboard key exit the grid
aria-label text 'View post + post title' on each link
Use image gallery component
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.
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 layout: 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 and horizontally.
In the Content section you can retain only the elements that will be displayed like Title, Description.
The link should be on the image, on the title or by activating the ‘Read more’ button.
Apply the previously selected link to the entire item. This option is only visible if you have selected a link before.
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.
Hi, When I use Dynamic I can’t select the ACF field.
Hello Fernando,
If you could describe the context a little, what type of ACF field, with what widget.
You can simply add a textfield, select dynamic tags and tell me which dynamic tags you see in the list.
Rgds