Este conteúdo não está disponível em sua língua ainda.
With the Masonry skin, you can display listings in an interactive grid layout. The Masonry skin supports both a Grid view and an optional List view, and includes a convenient filtering bar at the top for users to filter listings by a taxonomy (like categories). This skin is great for directories where users might want to filter items (for example, filtering portfolio items by category).
The Masonry skin arranges listings in a grid with responsive positioning (masonry-style arrangement). At the top of the listings, it can show a filter bar with tabs (e.g., “All”, “Category 1”, “Category 2”, etc.) that users can click to filter the visible listings without reloading the page.
Key characteristics of Masonry skin:
Listings appear as cards in a grid. You can choose how many cards per row (columns) or allow a switch to list view.
A filter bar can appear above the grid, allowing filtering by a chosen taxonomy (Category by default).
The layout dynamically re-flows items (masonry effect) when filtered, providing a smooth user experience.
The Masonry skin comes with multiple style variations and element display options:
Style: Choose a style variation for the Masonry cards. Available options include Style 1, Style 2, Style 3, Style 4. Each style defines a different design for the listing cards (e.g., image placement, overlay effects, info layout).
Style 1: A classic card layout.
Style 2: A variation that might emphasize certain elements (for example, showing location prominently).
Style 3: Another variation (perhaps including price class or description differently).
Style 4: A unique layout (in some cases Style 4 might be a two-column special layout or similar).
(The exact differences can be seen in the demo, but you can switch styles to see which you prefer.)Default: Style 1.
Under the style settings, you can toggle the visibility of various elements on the listing cards. Depending on the selected style, some elements may not apply or will always be hidden. You have the following options to show or hide:
Contact Info: Toggle to show contact information (usually a snippet of phone/email or a contact icon) on the listing card. Applicable in Style 1 and Style 4. (Default: On)
Location: Show the location name or address on the card. Applicable in Style 2. (Default: On for Style 2)
Price Class: Show the price category (e.g., $/$$/$$$) on the card. Applicable in Style 3, and only if the pricing feature is enabled. (Default: On for Style 3 if pricing is enabled)
Description: Show a short description or excerpt of the listing on the card. (Default: On for relevant styles) When enabled, an excerpt of the listing description will appear. If disabled, the card will not display the description text.
If Description is enabled, you can control how many words are shown in the excerpt via Description Length (under Layout settings, applicable to Style 3).
Address: Show the listing’s address on the card. Applicable in Styles 1, 3, 4. (Default: On)
Work Hours: Show the listing’s availability or work hours status (e.g., “Open now” or hours range) on the card. Applicable in Styles 2 and 3. (Default: On if work hours component is active)
Categories: Show the listing’s category tags on the card. Applicable in Styles 2 and 3. (Default: On)
Price: Show the price field on the card (for example, a price or price range). Applicable in Styles 1, 2, 4 (pricing must be enabled). (Default: On)
Display Matched Bookables: When the Booking add-on is active, show matched bookable items on the Masonry card so users can see what can be booked at a glance.
Share Buttons: Show social share buttons on the listing card (icons for Facebook, Twitter, etc., allowing users to share the listing). Applicable in Styles 1, 2, 4. (Default: Off; toggle On to display share icons)
Labels: Show listing labels (like “Featured”, “New”, etc.) on the card. (Default: On – enabled by default so any labels will appear as badges on the listing thumbnail or title)
Favorite Icon: If the Favorite add-on is installed, show a “favorite” heart icon on each card, allowing users to favorite/unfavorite the listing. (Default: On if available; requires Favorite add-on)
Compare Icon: If the Compare add-on is installed, show a compare icon on each card, allowing users to add the listing to a comparison list. (Default: On if available; requires Compare add-on)
Review Rates: If the Reviews add-on is installed, show star ratings on the listing card (e.g., average rating out of 5). (Default: On if available; requires Reviews add-on)
Title: Show the listing title on the card. (Default: On – usually you want the title visible. If turned off, make sure you have some way for users to identify the listing.)
Claim Status: If the Claim add-on is installed, show a claim/verified badge on the listing (often appears next to the title). For example, a checkmark if the business owner has claimed the listing. (Default: On for Styles 3 and 4 when available; requires Claim add-on)
Image: Show the listing’s featured image on the card. (In Listdom Lite, this is always on for Masonry; in Pro you can toggle it Off.) If enabled, you can further choose how images display:
Image Method: Choose how images are shown:
Cover: Show only the featured image (cover image) on the card.
Slider: Show all images in a slider on the card (the user can click or swipe through multiple images).
(Default: Cover. Slider is useful if you want to showcase multiple images per listing on the card itself. Note that Slider is a Pro feature.)
Image Fit: If showing images, choose the CSS fit:
Cover: Image covers the area (cropping as needed to fill).
Contain: Image will be contained entirely (no cropping, might letterbox).
(Default: Cover for better fill.)
Description Length:(Appears when Description is enabled, Style 3) Set the number of words to show from the listing description on the card. Default is 10 words. You can increase or decrease this to show a longer snippet. For example, set to 20 to show a longer excerpt.
After toggling these elements, the listing cards will show exactly the information you want. For example, you might disable Description and enable Labels and Share Buttons if you prefer a compact card with just icons and title.
The Masonry skin primarily focuses on listing cards and filter, and it does not include an integrated map component in its layout. Therefore, Map tab settings are generally not relevant for Masonry. (Masonry is a non-map view.)
If you need a map alongside a Masonry view, consider using the Half Map skin or connecting a Masonry shortcode to a Single Map via the Advanced Map add-on, but within the Masonry skin itself, there are no map settings.
The Layout tab for Masonry controls grid specifics, filtering taxonomy, pagination, and view mode:
Filter By: Choose the taxonomy used for the filter tabs above the Masonry grid. Default: Categories. Options:
Categories: Create filter tabs for each listing category.
Locations: Filter tabs for each location.
Features: Tabs for each feature.
Labels: Tabs for each label.
If set to Categories, the Masonry will show tabs like “All, Category 1, Category 2, …”. Users can click these to filter the visible items. Only listings belonging to the selected taxonomy term will be shown.
All Listings Tab Label: Customize the label for the “All” filter tab. Default is “All”. You can change it, for example, to “All Listings” or another word. This is the tab that shows all items (no filtering).
Limit: The number of listings to display per batch (per page load) in the Masonry grid. Default: 12. This should typically be a multiple of the Listings Per Row for best layout distribution. For example, if Listings Per Row is 3, choose limits like 6, 9, 12, 15, etc.
This limit applies to the initial load and each page of results.
List View: Toggle whether users can switch to a list view. Off by default (meaning the Masonry will display as a grid). If List View is turned On, a small toggle button will appear (usually in the filter bar or above the grid) allowing users to switch between the grid layout and a standard list layout.
Use this if you want to give an alternate view (some visitors may prefer a simple list).
Listings Per Row: (Visible when List View is Off, i.e., grid mode active) Select how many listing cards to display per row in grid view. Options are 2, 3, 4, 6. Default: 3 per row. This determines the column count:
For example, 3 per row means three listings will sit side by side on desktop (cards will wrap on the next line after every 3).
On mobile, the layout will automatically adjust to fewer columns (generally 1 column on narrow screens).
If you enable List View (which shows one per row), this setting is not used for list mode, but still applies to grid mode.
Animation Duration: Set the animation duration (in milliseconds) for the masonry reflow and filtering. Default: 400ms. This affects how quickly the listings re-arrange when a filter is selected or when loading more:
A value of 0 will disable the item reflow animation (items will appear instantly in their new positions).
Higher values (e.g., 600) will slow down the animation.
Pagination Method: Choose how additional listings are loaded beyond the initial set:
Disabled: No pagination; users will only see the first Limit number of items, and cannot load more via the interface.
Load More: A “Load More” button will appear below the grid. Clicking it loads the next batch of listings (the next page of results) and appends them to the grid.
Infinite Scroll: Listings automatically load as the user scrolls down, without a button.
Default: Load More (unless changed). This setting determines how users can access listings beyond the first page.
Listing Link:Pro The Masonry skin, like others, allows configuring how a listing opens when clicked. This setting is part of Pro features:
Normal: Clicking a listing card (or its “read more” button) goes to the single listing page in the same tab.
New Tab: Opens the listing detail in a new browser tab.
Lightbox / Panel: Opens the listing detail in a lightbox overlay or side panel.
If Pro is active, you’ll find Listing Link under Layout to choose one of the above. Additionally, for Lightbox/Panel, you can choose the single listing style to display. In Masonry, by default, listing links are Normal (no special behavior) in Lite.
Toggle which sorting criteria the user can choose from in the front-end. If you enable some options here, a “Sort By” dropdown will appear above the Masonry grid (usually next to the filter bar). Common options to provide might be Date and Title. If you have the Reviews add-on, you might enable sorting by Rating, etc.
By default, Listdom enables a couple of basic sorts (Date and Title) and leaves others off.
Simply check (enable) any sort fields you want users to use. Disabled ones will be hidden from the dropdown.
For example, if you enable Title and Date, the user can sort the Masonry grid alphabetically or by newest/oldest. Sorting will reorder the items on the page accordingly.
If no sort options are enabled, the Masonry will just use the default sort and users won’t see a sort dropdown.
Use the Search tab to embed a search/filter form directly with your Masonry grid. This is useful if you want users to narrow down the listings they see in the Masonry grid:
Searchable: Toggle to enable or disable search for this shortcode. When enabled, the Masonry grid can be filtered by a search form. When disabled, the shortcode shows fixed results that do not change based on search queries.
Search Form: Select which Listdom search form to display with this Masonry grid. This dropdown will list any search forms you have created by their titles. Choose a form that has fields relevant to these listings.
Search Form Position: Choose where the search form appears in relation to the Masonry grid:
Show on top
Show on bottom
Show on left
Show on right
Show before the listings
Top or bottom placement usually works best. Left or right can be used as a sidebar, and “Show before the listings” places the form ahead of the listing content.
Sticky Search Form: When using Show on left or Show on right, enable this option to keep the sidebar form visible while scrolling. If the form is taller than the viewport, Listdom automatically adds a vertical scrollbar.
Sticky Offset (px): Set the top spacing for sticky sidebar forms. This helps prevent overlap with fixed headers. Leave it empty to use default spacing.
Disabled: Submit normally with a full page reload.
On Submit: Apply filters via AJAX when the user submits the form.
On The Fly: Update results as the user changes fields.
The fields users see come from the selected search form itself. The Search settings here only control placement and behavior.
Usually, you will create a custom search form tailored to the listings shown in the Masonry grid and select it here. That way, users can refine what they see without leaving the page. Masonry already includes its own taxonomy filter bar, so the search form is most useful for keyword searches and extra field-based filters.
To build and configure those forms, see Create Search & Filter Form and Search Form Fields and Options. For a practical walkthrough, see Listdom Search Forms.
The Filter Options tab lets you predefine criteria to limit which listings are shown in this Masonry grid, even before any user search or interaction. These filters work behind the scenes to include or exclude listings based on taxonomy terms or other attributes.
For each filter type below, you can configure an Include list or Exclude list of terms. “Include” means only show listings that have those terms. “Exclude” means hide any listings that have those terms. If you leave a filter category blank, it imposes no restriction on that aspect.
Categories: Filter by listing categories.
Include Categories: Choose one or more categories; only listings in those categories will appear in this Masonry grid.
Exclude CategoriesPro: Choose categories to omit; any listing in those categories will be left out.
Locations: Filter by location taxonomy.
Include Locations: Only show listings that are in the selected location(s).
Exclude LocationsPro: Omit listings that are in the selected location(s).
Tags: Filter by listing tags.
Include Tags: Show listings that have at least one of these tags.
Exclude TagsPro: Do not show listings that have any of these tags.
Features: Filter by features (these are like amenities or boolean attributes of a listing).
Include Features: Listings that have any of the selected feature(s) will be included.
Exclude FeaturesPro: Exclude listings that have any of the selected features.
Labels: Filter by label terms.
Include Labels: Show only listings that have one of these label(s) (for example, only “Featured” listings).
Exclude LabelsPro: Hide listings that have any of these labels.
Author (Listing Owner): You can restrict by listing author (the user who posted the listing).
Select one or more authors under Include to show only listings by those user accounts.
Or select authors under Exclude Pro to hide listings by those users.
Custom Fields: If you have custom fields associated with listings, they appear here for filtering based on the field type. Use these to include listings based on custom metadata (exclude options are not available for custom fields).
Checkbox: Enter the checkbox value to match.
Time: Pick a time value.
Date: Select a date.
Tel: Enter a phone value.
Textarea: Enter text to match the textarea content.
Text: Enter text to match the field value.
Number: Set a minimum and/or maximum range (two numeric inputs).
Dropdown: Choose one or more values from the dropdown list (multi-select).
Radio: Enter the radio value to match.
Datetime: Select a date and time value.
URL: Enter a URL value.
Email: Enter an email value.
Image: Image fields are not available as filters in this section.
Rank AddonRank: Added by the Listdom Rank add-on. Filter listings by rank using minimum and maximum values, or leave them blank to skip ranking filters.
MembershipsMembership: Added by the Listdom Membership add-on. Filter listings by membership packages using checkboxes.
You can combine multiple filters. A listing must satisfy all the Include filters and none of the Exclude filters to appear. Within a single filter type, if multiple terms are included, a listing that has any one of those terms will pass (logical OR for included terms within one filter type). Exclusions work similarly: if a listing has any one of the excluded terms, it will be filtered out.
If no Filter Options are set, the shortcode shows all eligible listings by default.
These pre-filters form the base dataset for the shortcode. If you also attach a search form, that search refines this pre-filtered set rather than replacing it.
Using Filter Options, you can create a Masonry shortcode that is targeted to a specific subset of listings. For example, you might include one category and one location, or exclude one tag, label, or author, to keep the output focused on exactly the content you want. In Masonry, these pre-filters also define what the All button in the filter bar includes.
Portfolio Gallery: Using the Masonry skin, a website displays a portfolio of projects. Filter By is set to Categories (each project is categorized by type: Design, Development, Marketing). The Masonry shows a beautiful grid of project cards. Users can click “Design”, “Development”, etc., in the filter bar to see only those projects. The List View toggle is off to emphasize the grid. Important elements like the project Title, an Image, and Labels like “Award-winning” are enabled on each card, while extraneous details are hidden for a clean look.
Events Directory: An events listing site uses the Masonry skin to show upcoming events. They enabled List View toggle, so users can switch between a grid and list. The Filter By is set to Labels (using labels like “Free” or “Paid” events). Users can filter to see only free events, etc. The Load More button allows them to fetch more events beyond the first 12. A search form is placed on top with a date range picker (from an Advanced Portal Search form) so visitors can filter the events by date alongside using the Masonry category filter.
Listdom on WordPress.orgLearn more about the Listdom plugin, read reviews, and find the download on the official WordPress repository.
