Portfolio Masonry

The Portfolio Masonry widget allows you to display portfolio items in a dynamic masonry masonry layout using Elementor. Unlike standard masonry layouts, masonry arranges items based on available vertical space, creating a visually balanced and modern portfolio display.

This layout is particularly useful when portfolio images have varying heights, allowing projects to fit together seamlessly without leaving empty spaces.

Widget Controls

The widget settings are divided into several sections inside the Content tab in Elementor

1. General Section

• Extra Class: Add a custom CSS class for additional styling or advanced customization.

2. Query Section

• Excerpt Length: Controls how many words are displayed in the portfolio excerpt.
• Author: Filter portfolio items by selecting specific authors.
• Categories: Select categories to include in the portfolio masonry.
• Exclude Categories: Select categories that should not appear in the portfolio masonry.
• Include Posts: Manually select specific portfolio posts to display.
• Exclude Posts: Remove selected posts from the masonry.
• Order By: Sort portfolio items by ID, title, date, or other available options.
• Order: Choose ascending or descending order.

3. Layout Section

• Post Items: Drag-and-drop layout builder to enable or disable portfolio elements such as feature image, title, excerpt, read more button, categories, tags, and author.
• Post Overlay Items Options: Enable or disable elements that appear in the overlay when hovering over an portfolio item.
• Post Overlay Items: Configure which elements appear inside the overlay.
• Top Meta: Configure metadata displayed above the portfolio content such as categories, author, or date.
• Bottom Meta: Configure metadata displayed below the portfolio content.
• Post Heading Tag: Choose the HTML heading tag used for portfolio titles (H1–H6).

4. Masonry Section

• Post Masonry Gutter: Adjust the space between the posts in the masonry grid.
• Lazy Load: Enable lazy loading for portfolio images.
• Post Masonry Infinite: Enable infinite scroll for portfolio posts.
• Infinite Loading Message: Customize the message to display when loading more posts.
• Infinite Ending Message: Customize the message to display when there are no more posts to load.
• Infinite Loader Image URL: Upload a custom image to be used as a loader.

5. Read More Section

• Read More Text: Customize the label of the read more button.
• Icon: Add an icon to the read more button.
• Icon Position: Choose whether the icon appears before or after the text.
• Icon Spacing: Adjust the spacing between the icon and the button text.

6. Image Section

• Thumbnail: Choose the image size used for portfolio thumbnails.
• Image Behavior: Control how the portfolio image behaves when hovered.
• Overlay Options: Configure overlay effects and hover behavior for portfolio images.

7. Effects

• Enable Mouse Hover: Enable or disable the mouse hover effect.
• Choose Text to show on Hover: Choose wheter to show title, categories and tags on hover.

Styling Options​

All elements of the Portfolio Masonry widget can be styled using Elementor’s Style tab.

• Typography and color controls for titles and excerpts
• Masonry grid spacing and column gaps
• Image borders, radius, and hover effects
• Overlay background styling and animations
• Metadata styling for categories, tags, and author
• Read more button styling including hover effects and typography

Summary

The Portfolio Masonry widget provides a visually dynamic way to display portfolio projects in Elementor. It supports:

• Flexible masonry grid layouts
• Advanced portfolio query filtering
• Drag-and-drop control of portfolio elements
• Customizable metadata placement
• Image overlays and hover effects
• Full styling control through Elementor

This widget is ideal for photography portfolios, creative agencies, design studios, and project galleries where images have varying heights.