Create advanced image gallery using Elementor

Advanced Image Gallery for the free version of Elementor is an amazing components that offers the most advanced styling and customizing options to create a responsive image gallery that is both easy to maintain and scalable for future enhancements.
This widget offers a lot of options for displaying images with five differents layout, play with filter, show the images on a Fancybox, apply a ratio to them and showcase your content as a card, overlay or partial overlay.

Accessibility for Advanced image gallery widget

Use the component Advanced Image Gallery

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

Advanced Image Gallery icon
Use Advanced image gallery

Add a custom link for each image and keywords to build a filter

Using default links

The media library screen lets you see which media are attached to a post (Uploaded to column). If you select an attachment (Image) linked to a post, this link will be used as the default URL.

View media library column Uploaded to
Uploaded to column from Media library screen

Activate a link and add keywords to the filter

Because we don’t want to add new fields without your consent, you need to activate an option to enable this feature knowingly.
Of course, if you disable this option, the fields will be removed from the media library, but the values will be retained for future use.

From the dashboard EAC components settings, WordPress tab and enable Media custom fields option.

Two new fields have now been added to each image in the media library.
EAC custom URL: to create an image-specific URL
EAC categories: to add image-related keywords that will be used to build the filter.

Activate media fields
Add new fields for images
New images fields on the media librairy
Custom URL and categories

Add images you want to insert in the gallery

There are four ways to insert images into the gallery

Select the images and fill the fields to display the right content

Click on the media library button and select multiple images and they will appear after your selection.

Advanced image gallery new image
Advanced image gallery select image
Images inserted in the gallery

The set of fields that will be used to display the content of each item.
Fields can be filled in directly when selecting images in the dialog box and saved after clicking on the ‘Insert gallery’ button.

Advanced image gallery fill fields
Fields used to display content

Using dynamic tags to create a gallery

After clicking on the wrench icon you have two tags if the Woocommerce plugin is installed.
EAC post/Image gallery create a gallery from attachments (images) associated with the current post, chapter Using default links.

EAC Woocommerce/Product image gallery create a gallery of a product and related images (Product gallery).

EAC Woocommerce/Category image gallery create a gallery of a category with related images.

Advanced image gallery dynamic tags
Dynamic image gallery tags

Configuring image gallery global settings

This section provides numerous tools, which allow you to entirely personalize the features of your gallery, slideshows, image lightbox and more.

Layout select one of five render types such as Masonry, Grid, Metro, Justify and Slider.
Number of columns per device, random display and right/left display direction.
Content layout you can display content in three ways: as a card, with an overlay or partial overlay in wich you define the height of the overlay.
Content alignment vertical alignment and horizontal alignment for the content.
Image select resolution, delayed loading and apply ratio to images.

Advanced image gallery settings
Configure the image gallery

Select the content you want to display

Filters display the filter created from the keywords associated with each image. Chapter Activate a link and add keywords to the filter.

Post show or hide certain content elements.

Links add the ‘nofollow’ attribute to all links, especially external links. The link should be on the image or on the title, and activate the Fancybox on images.

Advanced image gallery content
Select the elements you want to display

Customize the style of image gallery elements

In the style tab, you’ll find all the elements of the selected content and can apply styles to them in line with your graphic guidelines.
You can choose from nine global styles and define the margins between items as well as the background color for the widget.

If the filter is active, you can define its position, apply a shape for each keyword, their color and the background color.

For images, you can define a border, its shape and apply CSS filters.

Title color and typography.

And finally, if you’ve chosen the overlay to display content, you’ll define its color, opacity and internal margins.

Advanced image gallery style
Style of displayed elements

Leave a Comment