How to Display an Image Gallery in Elementor

How to Configure and Style Image Grid/Slider/Carousel #

Elementor Image Grid, Slider, Carousel Widgets gives you the opportunity to add transition effects on how the Image carousel will appear and make it absolutely breath taking for your landing page. The purpose of this element is to let you organize and place your images in one place. With the help of it, you can nicely display the listing of your images.

How to Activate Image Grid/Slider/Carousel #

To use this Spexo Addons element, find the ‘Image Grid/Slider/Carousel‘ element from the Search option under the ‘ELEMENTS‘ tab. Simply just Drag & Drop the ‘Image Grid/Slider/Carousel’ into the ‘Drag widget here‘ or the ‘+’ section.

Image galleries, sliders, and carousels can become heavy when every image is uploaded in its original format. You can convert JPG or PNG images to WebP before building the gallery, so the final layout stays lighter without changing your design workflow.

After you are successfully done with this step, this is how the element is going to look like.

Prepare your images before adding them to the grid #

Grid and carousel layouts display multiple images on a single page. Every image you add contributes to the total page weight, so preparation before upload makes a measurable difference to load speed and visual consistency.
Keep dimensions consistent across all grid images. A grid breaks visually when some images are landscape and others are portrait. Decide on a standard ratio before you start — 4:3 works well for most gallery grids and 16:9 suits carousels and feature sliders. Use the aspect ratio calculator to confirm your chosen dimensions scale cleanly to the grid width your layout uses.
Resize images to the actual display size. Uploading a 4000 pixel wide image into a grid column that renders at 600 pixels sends unnecessary data to every visitor. Use the free image resizer to bring each image down to the size your grid actually needs before upload.
Compress before uploading to WordPress. Each image in a grid adds to the page’s Largest Contentful Paint time. Compressed images keep individual file sizes small without affecting the visual quality visitors see. The image compressor shows the exact size saving before you download.
Convert to WebP for modern browsers. WebP files are typically 25–34% smaller than JPEG at the same visual quality. Convert your grid images to WebP using the image to WebP converter and upload the WebP versions to your WordPress media library. The Spexo Image Grid widget works with any browser supported format including WebP.

How to Configure the Content Settings #

Under the ‘Content’ tab, you will be able to configure ‘Query’, ‘Layout’, ‘Elements’, ‘Media Overlay’, ‘Image Effects’, ‘Lightbox Popup’ & ‘Pagination’.

Query #

From this section, you can choose the ‘Selection’ of your query from where the contents will be retrieved and displayed. You can use the drop-down to select one of these as your selection: Auto & Manual Selection.

After choosing your preferred ‘Selection’, you can filter your contents by ‘Author’. You have the flexibility to choose multiple options and add as many authors as you wish. If you do not want certain image to appear, you can simply ‘Exclude’ those contents as well.

Moreover, you can set the number of ‘Items Per Page’, ‘Offset’ and ‘Not Found Message’ as well.

Layout #

From this section, you can change your layout and image size. You can use toggle for enable / disable pagination, use the drop-down to select one of these as your animation: Default, Fade and Zoom.

Besides, you can use the drop-down to change columns number, horizontal and vertical gutter for supported all devices.

Elements #

From this section, you can use the drop-down to select element and change element location and display type. You can change horizontal and vertical align, use toggle for hide or display element supported all devices and enable / disable media overlay and animation transparency. Moreover, you can change extra text display (None, Before element and After element), extra icon position (None, Before element and After element) and select icon options.

Besides, You can set animation, animation duration, animation delay, animation timing and also change animation size as well. To add more elements, simply click on the ‘+ ADD ITEM’ button from the bottom.

Media Overlay #

From this section, you can change overlay width & height supported all devices. Use toggle for enable / disable for animation transparency.

Moreover, you can change animation, animation duration, animation delay, animation timing and amination size as well.

Image Effects #

From this section, you can change effects. If you can select animation then you can change animation duration, animation delay, animation timing and animation size as well.

Lightbox Popup #

From this section, you can change autoplay speed. You can use toggle for enable / disable autoplay slides, show progress bar, show caption, show counter, show arrows, show zoom button, show full screen button and show download button as well.

Pagination #

From this section, you can change pagination type, set load more text, finish text, select loading animation and alignment as well.

Click to see Live Demo #

How to Style Image Grid/Slider/Carousel #

To customize Image Grid/Slider/Carousel, click on the ‘Style’ tab, and you will find many different options here.

Grid Item #

From here, you can change background color, border color and padding.  Moreover, you can styling to border and border radius as well.

Grid Media #

From here, you can styling to border and border radius as well.

Others #

From the ‘Media Overlay’ settings, you can you can set background color and border radius. On the other hand, customize your ‘Title’, ‘Caption’, ‘Date’, ‘Time’, ‘Author’, ‘Lightbox’, ‘Separator 1’, ‘Separator 2’, ‘Taxonomy 1’ and ‘Taxonomy 2’ from these settings.

Besides, you can also customize your ‘Navigation’ and ‘Pagination’ from these settings.

Final Outcome #

By following the basic steps and a bit more modifying, you can style your Image Grid/Slider/Carousel as per your preference.

This is how you can easily showcase your images and carousel styled content with an attractive & interactive layout using Image Grid/Slider/Carousel.

Getting stuck? Feel to Contact Our Support for further assistance.