Property Masonry

The Property Masonry widget in Zozonest is a creative display tool that organizes property cards in a staggered, Pinterest-style grid, where items are positioned based on available vertical space rather than fixed rows.

1. Layout & Content Configuration

These settings allow you to define the structure and data source for the masonry grid:

• Number of Columns: Specify how many columns the masonry grid should use (typically between 2 and 4).

• Items per Page: Set the total number of properties to load in the initial view.

• Layout/Skin: Choose between different card designs to change how images and meta-data (like price or location) appear within the masonry blocks.

• Pagination Type: Select from “Load More” buttons, standard numbering, or infinite scrolling to manage how additional results are revealed.

2. Query & Filtering Options

Use these controls to curate which properties appear in the masonry layout:

• Filter by Taxonomy: Restrict the view to specific property categories, types, or statuses (e.g., only “Featured” or “Villas”).

• Location Filtering: Target specific regions, cities, or neighborhoods to create location-specific masonry galleries.

• Sorting Order: Arrange properties by date (newest/oldest), price (high/low), or alphabetically.

• Featured Only: Use a toggle to ensure the grid only displays high-priority listings marked as “Featured”.

3. Image & Media Settings

Since masonry grids rely on varied image heights, these options are critical for the visual flow:

• Image Size Selection: Choose the appropriate WordPress image resolution to balance load speed with visual clarity.

• Image Proportions: Some versions allow you to maintain specific aspect ratios or allow the “natural” height of the photo to dictate the block size.

• Hover Effects: Enable animations or overlays that reveal the property price or title when a user hovers over a masonry card.

4. Advanced Styling

Elementor’s styling tab provides deep control over the masonry appearance:

• Gutter/Spacing Control: Adjust the horizontal and vertical gaps between individual property cards.

• Border Radius: Apply rounded corners to the cards or images to achieve a softer, more modern aesthetic.

• Typography & Colors: Customize the font styles and colors for property titles, prices, and status badges to match your branding.