The Masonry & Justified Gallery widget for Elementor by Unlimited Elements is a powerful and versatile tool for creating stunning image galleries that adapt seamlessly to your website’s design. This widget offers a dynamic masonry layout, ensuring your images are displayed in an elegant and visually appealing format, regardless of their dimensions. Perfect for photographers, designers, and businesses, the widget provides customizable features, including hover effects, lightbox integration, and responsive design, to create a truly immersive user experience.
Let’s look at each of the options in the Masonry & Justified Gallery widget for Elementor below.
Add a Masonry & Justified Gallery Widget to Elementor
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Masonry & Justified Gallery”
- Hover over the widget in the search results and click install
- Add the “Masonry & Justified Gallery” widget to any Elementor Page
Gallery Source Settings
Gallery Item Source
Determine the type of content that will populate your gallery. The available options include:
- Image and Video Items
Manually upload or select specific images and videos to create a custom gallery. This option provides full control over the content displayed. - Instagram
Fetch and display content directly from your Instagram account. Ideal for showcasing social media posts and engaging with your audience. - Posts
Populate the gallery with images or featured media from your WordPress posts. You can specify post types, categories, or tags to refine the selection. - Products
Display product images sourced from your WooCommerce store or any product catalog. Useful for eCommerce galleries. - Current Product Gallery
Automatically pull images from the current product being viewed on a WooCommerce product page. Streamlines galleries for individual product pages. - Current Product Variations
Highlight images from the variations of the currently viewed product, such as different colors, sizes, or styles. - Current Post Metafield
Use custom metadata from the current post to generate the gallery content. This is ideal for advanced dynamic galleries tied to specific fields.
Image Title Source
Select the image title source from below options:
Image Auto (title or alt or caption): This option automatically selects the title from the first available source in this priority order:
- Title (if provided).
- Alt text (alternative text describing the image).
- Caption (a description or annotation of the image).
Image Title: This uses the actual title attribute of the image as the source for its title.
Image Alt: This uses the alt (alternative text) attribute of the image as the title source.
Image Caption: This uses the caption associated with the image as its title source.
Image Description Source
This option allows you to choose where the description of the image should come from.
- Image Description: This pulls the description specifically written for the image.
- Image Title: This uses the name or title you gave to the image.
- mage Alt: This takes the alt text (alternative text) written for the image. Alt text is used to describe the image for visually impaired users or when the image doesn't load.
- Image Caption: This option uses the caption text, which is typically shown below the image on a website.
Thumb Image Size
This dropdown allows you to select the size at which thumbnail images of gallery will be displayed, ensuring they are optimized for your website's layout, performance, and purpose.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
Big Image Size
This dropdown allows you to select the size at which big images of gallery will be displayed, ensuring they are optimized for your website's layout, performance, and purpose.
- Full
- Large (max width 1024)
- Medium Large (max width 768)
- Medium (max width 300)
- Thumbnail (150x150)
- 1536x1536 (max width 1536)
- 2048x2048 (max width 2048)
- WooCommerce Thumbnail (300x300)
- WooCommerce Single (max width 600)
- WooCommerce Gallery Thumbnail (100x100)
General Settings
Gallery Type
Choose how the gallery displays images.
- Columns
- Justified
Gallery Max Width
Controls the maximum width of the gallery as a percentage of the container width.
Enable Tile Text Panel
Toggle to show or hide a text panel overlay on gallery tiles.
Tile As Link
Enables each gallery tile (image) to act as a clickable link.
Tile Link New Page
If enabled, linked tiles open in a new tab or page.
Tile Enable Icons
Adds icons to gallery tiles for extra functionality like zoom.
Tile Enable Image Effect
Activates special visual effects on hover (e.g., black & white, blur, or sepia).
Minimum Number of Columns
Defines the minimum number of columns in the gallery layout.
Lightbox Settings
Lightbox Type
Defines the display style of the lightbox.
- Wide: A wider layout for showcasing content.
- Compact: Displays the lightbox content in a more condensed and smaller layout, saving screen space.
Lightbox Hide Arrows On Video Play
By turning this on, navigation arrows will be hidden when a video is playing in the lightbox.
Lightbox Show Numbers
Enables or disables the display of numbers (e.g., “1/5”) for items in the lightbox gallery.
Lightbox Show Text Panel
Controls whether a text panel is displayed within the lightbox.
Lightbox Swipe
Allows users to swipe between items in the lightbox on touch devices.
Lightbox Zoom
Allows users to zoom in on items within the lightbox.
Lightbox Text Panel Align
Specifies the alignment of the text panel within the lightbox.
Autoplay Video In Lightbox
Determines whether videos in the lightbox start playing automatically when opened.
Mute Video
Defines whether videos in the lightbox are muted by default.
Masonry & Justified Gallery Widget Styling
There are a number of styling options that allow you to control every aspect of the widget’s design. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Tile Styling
Set the tile alignment, column width, spacing, opacity, overlay color and background color.
Tile Border Styling
You can set the tile border color, border width and border radius.
Tile Shadow Styling
Set the tile shadow color, horizontal and vertical offset, shadow blur and shadow spread.
Tile Text Panel Styling
Here, you can set the tile text panel title color, background, alignment, padding and typogrpahy.
Lightbox Styling
You can set the lightbox overlay color, opacity, border, color and opacity.
Masonry & Justified Gallery Design Examples For Elementor
Here are some live use cases for the Masonry & Justified Gallery Widget.
Masonry gallery with woo products.
Masonry gallery with tabs filter.
Thank you for exploring the Masonry & Justified Gallery Widget for Elementor! We hope this tool helps you create stunning and dynamic galleries that elevate your website’s visual appeal.
For more queries or assistance, feel free to reach out to our support team. We’re always happy to help!
