このコンテンツはまだ日本語訳がありません。
The Mosaic Skin presents your listings in a visually striking alternating layout. Each listing card’s image and details are laid out side-by-side in alternating positions (one listing with image on the left and details on the right, the next with image on the right and details on the left), creating a mosaic effect. This skin is ideal for directories that want a creative, magazine-style listing grid.
To use the Mosaic Skin, navigate to Listdom > Shortcodes (or the Listdom block settings) and select Mosaic View from the skin selection grid. Once selected, the following options specific to Mosaic become available:
Skin Description: The Mosaic skin alternates listing card layouts to add visual variety. It does not show a map alongside listings by default, focusing on the listing cards themselves.
Availability: Because of its alternating design, the Mosaic skin works best with an even number of listings per page to maintain the pattern. (You can still use an odd number, but one side of the last row will be empty.)
Once Mosaic is selected, you can choose a style variation and control which elements appear on each listing card:
Select the Style: Use the dropdown to choose the style variation for Mosaic. By default, Style 1 is used. If the Mosaic skin offers additional styles (for example, Style 2), you can select them here. Style variations slightly change the design of the listing cards:
If you have created a completely custom layout for Mosaic (via the Listdom Layout Builder), that custom style will also appear in this dropdown. In most cases, you will use the provided styles.
After choosing a style, you can toggle the visibility of various elements on the listing cards. This allows you to simplify or enrich the information shown at a glance:
By customizing these element visibility switches, you can control how much information is presented in the Mosaic view. For example, you might disable Contact Info and Share Buttons for a cleaner look, or enable Labels and Favorite icons to encourage interaction.
Unlike some other skins, Mosaic can optionally include a map, but it doesn’t display a map by default in its layout. Instead, you have the option to show an overview map either above or below the listing grid. The Map settings allow you to configure this:
500px or 70vh). If left blank, a default height (typically 500px) is used. Adjust this if you want a taller or shorter map. For instance, using a percentage or viewport height (100vh) can make the map fill the screen.Layout options control the overall structure and pagination of the Mosaic view:
Listings Per Page (Limit): Set the maximum number of listings to display per page in the Mosaic view. The default is 300. You can lower this to only show a subset of listings. For example, setting Limit to 12 will show 12 listings at a time. Because Mosaic’s pattern works best in pairs, it’s recommended to use an even number here (e.g., 12, 14, 16). If you set an odd number, the last row will have one listing without a counterpart on the other side.
Pagination Type: Choose how additional listings are loaded when there are more listings than the per-page limit:
By default, the Mosaic skin uses a Load More button for a modern feel. You can switch to Numeric if you prefer pages, or Infinite Scroll for a seamless feed.
Columns: Specify the number of listing columns per row. Mosaic is fundamentally a two-column layout (one listing on the left, one on the right for each row). By default, it’s set to 2 columns. You can technically set a different number, but note that the Mosaic design alternates content in pairs, so using an odd number of columns may disrupt the intended pattern. It’s recommended to keep this at 2 columns for the proper mosaic effect.
The Mosaic skin supports full sorting controls, allowing users to reorder the listings according to various criteria. The Sort settings are divided into Default Sort and Sort Bar Options:
Under Default Sort, you can define the initial sorting order of listings in this shortcode:
Together, these define the initial listing order for the Mosaic view until the user changes it.
Under Sort Options, you can configure how and whether the sort bar is displayed to users:
Display Sort Bar: Toggle this option on to show sorting controls on the front-end. If enabled, users will see the sort interface (either a bar with dropdowns or a single dropdown, depending on style). If you turn this off, the listings will remain in the default order and users won’t be able to change sorting.
Sort Bar Style: Choose the layout for the sort controls. Default Style shows the sort options in a horizontal bar (e.g., a dropdown for sort field and toggles or indicators for order). Drop Down style condenses the sorting into a single dropdown menu (which might list options like “Newest first, Oldest first, A-Z, Z-A, etc.”). The dropdown style is compact, whereas the default may display separate controls.
Available Sort Options: You can select which sorting criteria are available to the user. Typical options are:
You can check or uncheck each to determine which options the user sees. For example, if you don’t want users sorting by title, you can disable that option. Or if your directory doesn’t use pricing, you would disable the Price sort. By default, all relevant sorts are enabled. Each enabled sort will appear as an option in the sort UI on the Mosaic listing page.
Configure these to match your use case. If, for instance, freshness is key, you might only enable Date and maybe Rating; if alphabetical browsing matters, include Title.
The Mosaic skin can integrate with Listdom’s search module, allowing you to place a search bar or form that filters the listings:
Search Shortcode: Select which Listdom Search form to use with this listings shortcode. Listdom allows you to create custom search forms (via Listdom Search shortcodes). In this dropdown, you’ll see the list of available search form shortcodes by their titles/IDs. Choose the one that fits this listing view. For example, if you have a “Directory Search” form, select it here to pair it with the Mosaic listings.
Search Position: Decide where the search form appears in relation to the listings:
Common choice is Top so that users can refine results immediately.
AJAX Search: Enable this to make the search form filter results without reloading the whole page. With AJAX search on, when a user submits the search or changes a filter, the Mosaic listings will update dynamically beneath the search form. If this is off, using the search will reload the page with the filtered results. AJAX provides a smoother experience and is recommended if your site supports it. (This requires Listdom Pro – in Listdom Lite, search will always reload the page.)
Once set up, the search + mosaic combo allows users to narrow down the displayed listings. For example, if they search a keyword or apply a category filter in the search form, the Mosaic list will update to show only matching entries, all while maintaining the mosaic layout.
Filter Options let you pre-filter which listings appear in this Mosaic view, regardless of user search. These settings act as conditions to include or exclude listings by certain criteria. They are especially useful if you want a shortcode to show only a specific subset of listings (like only one category, or excluding certain entries).
You can combine Include and Exclude rules. Include rules restrict the listings to only those that match the chosen criteria, while Exclude rules remove listings that match certain criteria. Here are the available filter settings:
Include Categories: Select one or more categories to display. Only listings belonging to those categories will be shown. (If left empty, listings from all categories are allowed.) For instance, if you choose Restaurants, the Mosaic view will show only listings in the “Restaurants” category.
Exclude Categories: Select categories that should be excluded from results. Listings in any of those categories will not appear. For example, if you exclude Closed Businesses, no listing tagged as a Closed Business will show up.
Note: Include and exclude can be used together. If both are set, Listdom will first include only the selected include categories, then remove any of those that are in the exclude list.
Include Locations: Choose specific locations to show. Only listings assigned to those location terms will be shown. For example, include New York to only show listings located in New York.
Exclude Locations: Choose location terms to omit. Listings in those locations will be filtered out (e.g., exclude California to hide any listings in California).
Include Tags: If you use listing tags, you can include only listings with certain tags. For instance, include the tag Featured to only show listings marked Featured (if you use tags that way).
Exclude Tags: Filter out listings with certain tags. For example, exclude the tag Expired to hide any listings marked as expired.
Include Features: If you have listing features (amenities) taxonomy, select which features to require. Only listings that have all the selected features will be shown. For example, include Wi-Fi to show only listings that have Wi-Fi amenity.
Exclude Features: Select features to exclude any listing that has them. For instance, exclude Outdoors if you want to hide listings that are marked with an “Outdoors” feature.
Include Labels: If using Labelize (listing labels like “Featured”, “New”), you can include listings that have certain labels. e.g., include Featured label to only show featured listings.
Exclude Labels: Exclude listings that have specific labels. For example, exclude the Featured label to show everything except featured listings.
Include Authors: Choose specific listing authors to include. Only listings posted by those user accounts will show. This is useful if you want a shortcode to display listings from specific vendors or agents.
Exclude Authors: Choose authors whose listings should be hidden. Any listing created by those users will not display in this Mosaic view.
Each filter field is multi-select, so you can pick one or many terms/users. If multiple Include filters are set (e.g., include Category A and Location X), a listing must match all of them to appear (i.e., be in Category A and Location X). The Exclude filters remove any listing that matches any of the exclude criteria.
Note: Filter Options are purely for the shortcode’s initial query. Users can still further filter via search (if you provided a search form) which will layer on top of these filters. For instance, if your shortcode is filtered to Category = Restaurants, and the user searches within that, they’ll only be searching Restaurant listings.
City Guide Mosaic
An tourism website uses the Mosaic skin to showcase attractions. Each listing’s featured image is on alternating sides, giving a lively magazine-like layout. The site owner enabled share buttons and favorite icons on each card – visitors can quickly save attractions they like or share them to social media. With a map positioned at the top, users get an overview of attraction locations in the city, and they can scroll down to see each spot in the stylish alternating format.
Real Estate Gallery Slider
A real estate directory leverages Mosaic skin with the image Slider option. House listings display a photo slideshow on each card that users can click through without leaving the page. Important info like price and location are shown on each card, while less critical details are hidden to keep it clean. The result is an eye-catching property gallery where buyers can browse listings visually, then click a listing to learn more. Infinite scroll is enabled so new properties load automatically as users scroll.