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
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
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.
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 five display modes, Masonry, Grid, Grid equal height, Justify and Slider.
You can select the ‘Equal height‘ option for grid mode so that each row has the same height.
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.
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
