Advanced image gallery – Elementor Addon Components

Advanced Image gallery for the free version of Elementor is an incredible new component with which you can easily build a new gallery to showcase your creations, display attractive visual content and develop your online business.
On the other hand, you’ll enhance the user experience (UX); how visitors feel when browsing your site.

Follow this link to learn how to build a new Advanced image gallery.

Table of Contents

Three ways to add images to the gallery

You can add as many images as you like simply by using the media library directly in the widget, or use Elementor’s dynamic tags (Image gallery) to display images related to the current post, or if you’ve installed and activated the Woocommerce plugin you’ll use the dynamic tag (Image gallery) to display images related to a product.

Define links and keywords for each image

By activating an option available in the plugin, two new fields will be added for each image in the media library.
The first field lets you add a specific internal or external URL.
The second field lets you add a list of keywords specific to the image, which will be used to create a filter relative to the gallery.

Define layout mode and display content

In this section (Settings) you’ll define one of the five display modes available (Masonry, Grid, Metro, Justify, Slider), the number of columns for each device, images displayed randomly and from right to left.
The dimensions of each image and apply a ratio for a best visual rendering.
Select content rendering as a card, with an overlay or partial overlay that can be scaled.

Select the content you want to display

You can choose which elements you want to display globally as content.
Activate the filter defined on the basis of the keywords previously entered, the title and its level, the description and a button to switch to the target link.
The URL can be assigned to the title, image or button. However, to comply with accessibility rules, the link must be on a single element.
And finally, activate the Fancybox (Lightbox) for images that will be displayed in a more user-friendly way.