In this article, you will learn how to create Justified Gallery layout with Elementor Page Builder. To create this type of layout, you will need the JetElements plugin that you can get if you follow this link. And now let’s create it step by step.
- First, you will need a widget that will help you create the Justified Gallery. You can simply search for Images Layout in the Elements panel search field. You can also find it if you scroll down the list of widgets available under the JetElements tab.
- Now grab it and drop it on the needed section in the center. Now you will start off with a grid.
- Here, you can add images by clicking “Choose your Image” on each.
- On the left side menu in the section Content under the tab Settings, you can change the number of columns and the Layout type: Masonry, Grid, Justified, and List.
- By default, the images are cropped to create a square so they will have the same height and width.
- Choosing Justify Layout will retain the aspect ratio of an image.
- You can also change the height in the field below – if you play around with this value you can create some really interesting layouts depending on the aspect ratios of your images.
- Notice, you can see that every single item has some additional settings that you can apply: an icon that appears when you hover over an image, the title, the description, and the link type with two options.
- The Lightbox option will open this image in a light box and the external link will take the user to the link that you type in the field below. In addition, you can set this link to be opened in a new window.
- You can also apply the style settings for your layout in the Style section: increase or decrease the gap between the images, change border type and radius, icon, title, description, content order and alignment, and set an overlay for your images.
Final Say
And that’s it for this guide. Now you know how to create a Justified Gallery Layout with the help of JetElements plugin. Thank you for reading this article. If you have any questions, I’ll be glad to read and answer them in the comments below.
Read Also
Elementor From A to Z: Sheer Selection Of “How To” Tutorials
Elementor Tip: Add Gradient to Circle Progress – Elementor Tutorial