In this guide, we will show you how to use the “Masonry & Justified Gallery widget” on your Elementor website. The Masonry & Justified Gallery widget lets you create beautiful image and video galleries with flexible layouts. Choose between a masonry grid that keeps original aspect ratios or a justified layout for perfectly aligned rows. It’s ideal for showcasing portfolios, photography, or media galleries in a clean and responsive design.
Let’s explore the customization options available in the “Masonry & Justified Gallery widget” for Elementor below.
Add a Free Masonry & Justified Gallery to Elementor
Add a Free Masonry & Justified Gallery Widget to an Elementor Page
Elementor Masonry & Justified Gallery Widget General Settings
Gallery Items Source
Selects the method for sourcing the images (e.g., Gallery, Image And Video Items, Posts, Products, Instagram).
Choose Images
Allows you to select and manage the images for the gallery.
Image Title Source
Determines what text is used for the image title (e.g., Image Auto, Alt, Caption).
Image Description Source
Determines what text is used for the image description (e.g., Image Description).
Thumb Image Size
Selects the size of the thumbnail images displayed in the gallery.
Big Image Size
Selects the size of the image when viewed in a lightbox or other large format.
Gallery Type
Selects the layout style for the gallery.
Tile As Link
Toggles whether the gallery tiles act as direct links.
Tile Enable Icons
Toggles whether icons are displayed on the gallery tiles.
Tile Enable Image Effect
Toggles whether image hover effects are applied to the tiles.
Minimum Number of Columns
Sets the lowest number of columns the gallery can display.
Lightbox Type
Selects the type of lightbox used to view larger images.
Elementor Masonry & Justified Gallery Widget Style Settings
Tiles Align
Control the horizontal position of the entire group of tiles (e.g., set them to align Left, Center, or Right).
Tiles Column Width
Define the minimum width that individual columns should maintain. This is key to controlling the number of tiles per row at different screen sizes
Tiles Space Between Cols
Adjust the horizontal spacing (gutter) between tiles for desktop and tablet views.
Tiles Space Between Cols Mobile
Controls the overall spacing/margin around the navigation dots element.
Dot Space Between
Set the transparency level of any color overlay applied to the tiles (value ranges from 0.0 to 1.0).
Tile Overlay Color
Select a specific color to be used as a layer on top of the tile, often used for visual effects or on hover.
Tile Background Color
Choose a solid color to fill the background area of the tile elements.
Tile Enable Border
Toggle a border on or off for each tile.
Border Color
Select a specific color for the border line around the tiles.
Tile Border Width
Set the thickness of the border line, measured in pixels.
Tile Border Radius
Adjust the roundness of the tile corners (increasing the radius creates more rounded corners).
Tile Enable Border
Toggle a border on or off for each tile.
Border Color
Select a specific color for the border line around the tiles.
Tile Border Width
Set the thickness of the border line, measured in pixels.
Tile Border Radius
Adjust the roundness of the tile corners (increasing the radius creates more rounded corners).
Tile Enable Shadow
Toggle a shadow effect on or off beneath the tile (currently set to Yes).
Tile Shadow Color
Select the color of the shadow (currently set to Dark Gray/Black).
Tile Shadow Horizontal Offset
Control the shadow's horizontal position (current value is 0).
Tile Shadow Vertical Offset
Control the shadow's vertical position (current value is 0).
Tile Shadow Blur
Adjust the softness/feathering of the shadow effect (current value is 5).
Tile Shadow Spread
Control the size of the shadow's area without blur (current value is 0)
Tile Panel Bg Color
Choose a background color for the area that holds the title and description text.
Tile Text Panel Title Color
Select the color of the title text.
Tile Text Panel BG Opacity
Adjust the transparency of the text panel's background color.
Tile Text Panel Title Text Align
Set the alignment of the text panel content (e.g., Left, Center, Right).
Tile Text Panel Padding
Control the inner spacing (the distance between the text and the panel edge).
Title Typography
Customize the font, size, weight, and style for the tile title text.
Description Typography
Customize the font, size, weight, and style for the tile description text.
Message Typography
Customize the font, size, weight, and style for the text displayed when the gallery is empty.
Message Color
Select the text color for the empty gallery message.
Message Background Color
Choose a background color for the empty gallery message box.
Message Padding
Control the spacing inside the message box, separating the text from the edges.
Message Text Align
Set the horizontal alignment of the empty message text.
Message Border Type
Choose the style of the border around the message box (e.g., Solid, Dashed, or None).
Message Border Radius
Adjust the roundness of the corners on the message box.
Masonry & Justified Gallery Widget Design Examples For Elementor
Here are some live use cases for the Masonry & Justified Gallery widget.
Masonry Gallery with WooCommerce Products.
Masonry Gallery with Custom Gallery.
Thank you for using the Masonry & Justified Gallery widget for Elementor! This powerful and flexible tool lets you create stunning image and video galleries in either a dynamic masonry layout or a clean justified grid. Designed to highlight your visuals beautifully, it offers full customization options to match your site’s aesthetic. For support or inspiration, feel free to get in touch or explore our demo.
