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)
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.
The Masonry skin can display a sort dropdown if multiple sort options are enabled:
Default Sort: Set the initial sort order of listings in the Masonry grid. Options include:
List Date (Newest/Oldest) – Default in many cases is Newest first.
Listing Title (A–Z or Z–A)
Last Update
Comments
Listing ID
Choose the one that makes sense as default. For example, you may want the newest listings to show first.
Sort Options: 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.
You can add a search form to the Masonry view to further allow users to filter/search listings:
Search Shortcode: Select an existing search form shortcode to display on the Masonry page. This could be an advanced search form you created.
Search Position: Choose Top to show the search form above the Masonry grid (typically above the filter bar), or Bottom to show it below the listings. Often, Top is used so users can filter by text or other criteria in addition to the Masonry filter bar.
AJAX Search: If On, when users use the search form, the Masonry listings will update dynamically without a full page reload (requires Pro for AJAX functionality). The combination of Masonry + AJAX search can give a seamless filtering experience. If Off, using the search form will reload the page with the filtered results.
Using a search form is optional. The Masonry already has the taxonomy filter bar; the search form can complement it by adding keyword search or other filters (like searching by text, or filtering by additional fields not covered by the Masonry filter bar).
For example, you might include a keyword search or a dropdown for a second taxonomy. A user could search by keyword to narrow down the Masonry items, in addition to clicking the category tabs.
Filter Options let you predefine which listings appear in the Masonry grid (similar to other skins):
Categories / Locations / Features / Labels: You can set these to restrict the listings that feed into the Masonry. For instance, if you want this Masonry to only show “Events”, you might set Category = Events. Or if it should only show listings in New York, set Location = New York. Only those listings that match all chosen filters will be displayed initially (and in the filter tabs, the “All” would effectively mean “All of the filtered set”).
Tags: You can include or exclude specific tags as well.
Custom Attributes: Filter by specific attribute values if needed (only listings having those attribute values will be loaded).
Author: Limit to specific listing authors or exclude certain authors.
Include/Exclude Listings: Directly specify particular listings to always include or always exclude.
Radius: (If applicable) Not commonly used in Masonry shortcode filters, but if integrated with Advanced Map, you could set a default radius filter for the initial set.
Essentially, Filter Options for Masonry allow you to define the scope of what “All” means in your filter bar. For example, if you’re creating a Masonry of Restaurants, you might set the Category filter to “Restaurants.” Then, the filter bar will still show terms from the selected “Filter By” taxonomy that exist among all listings).
If no filter options are set, the Masonry will consider all published listings for display (and the filter bar will show terms from the selected “Filter By” taxonomy that exist among all listings).
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 Search form) so visitors can filter the events by date alongside using the Masonry category filter.
