Back to contents

How to create an attractive image grid, masonry or justify layout with JetElements Images Layout widget for Elementor

This tutorial reveals the process of creating amazing Grid, Masonry and Justify image layouts, using one of JetElements widgets for Elementor.

If you are looking for a way to exhibit the portfolio, to make the gallery of your works, the Images Layout widget of JetElements plugin is definitely the right tool for you! It’s a great way to showcase the pictures creatively.

This tutorial will take you through the process of creating head-spinning Grid, Masonry or Justify image layouts using the Images Layout widget.

Images Layout widget

Creating an image layout using JetElements Images Layout widget

Step 1 — Firstly, let’s start from logging in to your website. Open the page where you want to use the Images Layout widget. Click the Edit with Elementor option at the top panel.

Step 2 — Secondly, find the Images Layout widget, drag and drop it into a new section.

Images Layout widget

Step 3 — Afterwards, move to the Content > Items block, where you are able to upload as many images as you want. To add a new image click the Add Item button.

Items settings

Step 4 — You can also include some extra information about each item, such as the Title, the Description, and pick an Icon. In the Link type option, you are able to choose what you want to happen to the image on click. It can either be opened in a Lightbox, or you can be redirected to another website where this picture is displayed or kept if you add an External link.

Items block

Step 5 — Consequently, proceed to the Content > Settings block and select the way your pictures will be positioned on a screen in the Layout type option. There are four of them available to use: Masonry, Grid, Justify and List.

By the way, you can change the layout whenever you want in the future! Here as well you can pick the preferable number of columns (1-6) from the Columns dropdown.

Content settings

Step 6 — The last step is to get to the Style block. Here you can customize the Icons, the Titles, the Descriptions, the Overlay. You can make it classic, gradient or even use a picture as an overlay layer; make it less transparent so that the text is more readable using the Opacity option. In the Content Order and Alignment, you can fix the order of the title and the content and set the position of the elements at the overlay.

Style settings

Let your fantasies unwind and use your imagination to the fullest! Enjoy!