Elementor Masonry Gallery Tutorial
Articles Blog

Elementor Masonry Gallery Tutorial

August 16, 2019


Hi everyone, welcome to this tutorial. In
this video we’re creating a masonry gallery layout with the help of Elementor page builder. To create this sort of layout you will need JetElements plugin
that you can get if you follow the link in the description down below. First of
all you will need an Images Layout widget. You can find it if you type in
the word “images” and here this “images layout is. Simply drop it onto a new
section and here’s what it gives you. First I have added six items so I have
the images to show you an example and every single item has an icon, title,
description and the possibility to add a link, so the image can be opened either
in the lightbox or with an external link, like so. And
once you drop this widget onto a section you start with a grid layout,which crops
the images to keep the same width and the same height for all the pictures. To
change this grid layout to masonry layout you go to layout type and choose
masonry and here we go. The widget now has created the masonry layout with
your images. The type of layout called masonry retains the same column
width so here you can set the number of columns and in the style tab we can
change the general style settings, the style of an icon, title, description, set
an overlay for your images and change the content order and alignment. Like so, now you know how to simply
create a masonry layout with the help of Elementor page builder and
JetElements plugin. If you liked this video, leave a thumbs
up and subscribe to our channel. Thank you for watching.

Only registered users can comment.

  1. Thanks for the great tutorial. Unfortunately, Elementor has made the "Masonry" layout an 'upgrade' — even if you have ELementor Pro (which I do), I now have to buy an add-on pack to get the Masonry layout option. 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *