Ce contenu n’est pas encore disponible dans votre langue.
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.)
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:
Style 1: Displays listing categories and social share buttons on the card.
Style 2: Displays the listing location on the card (in place of categories) and omits share buttons for a cleaner look.
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:
Image: Enable or disable the listing’s featured image on the card. By default this is enabled to showcase each listing visually. If turned off, the image section is removed. Enabling the image also unlocks additional image settings:
Image Method: Choose how to display listing images. Cover shows only the featured image as a static image. Slider shows all gallery images in a slider on the card, allowing users to click or swipe through multiple photos. (Cover is default; slider provides an interactive gallery on each card.)
Image Fit: Control the image object fit. Cover (default) will crop/zoom the image to fill the space, while Contain will letterbox the image to show the whole image without cropping. This setting helps ensure images display nicely within their container.
Contact Info: Toggle the listing’s contact information (such as phone or email icons, or a contact button) on each card. When enabled, a small contact detail section or icon appears, allowing users to quickly see how to reach the listing’s owner.
Location:(Style 2 only) Show the listing’s location taxonomy (e.g. city or region) on the card. If enabled, the location name will appear (usually near the title or meta info). This is useful if your directory uses Locations and you want to highlight where each listing is.
Categories:(Style 1 only) Show the listing’s category labels on the card. If enabled, the category (or categories) assigned to the listing will display, helping users identify the type of listing at a glance.
Share Buttons:(Style 1 only) Show social share buttons on each card. If enabled, small icons (e.g. Facebook, Twitter) allow users to share the listing on social media directly from the listing card. This option requires the Social Sharing component in Listdom. By default, Listdom Pro supports share buttons for listings.
Price: Show or hide the listing’s price. If your listings have pricing (for example, a property price or product price), enabling this will display the price on the card. This option is only meaningful if the Pricing feature is enabled in Listdom (which it is by default in Pro).
Title: Show or hide the listing title. Usually you will keep this on (default) so that each listing’s name is visible. If turned off, no title will appear (which is rarely recommended).
Claim Status: If the Claim addon is active, you can toggle the Claim Status indicator. Enabling this will show a badge or marker on listings that have been “claimed” by their owners. (Unclaimed listings might show an “unclaimed” notice, for example.) If the Claim addon is not installed, this option will not be available.
Labels: Toggle the display of listing labels. Labels are custom markers (like “Featured”, “New”, etc.) that can be assigned to listings, and enabling this will show them on the card (usually as a ribbon or badge on the image).
Favorite Icon: If the Favorite addon is installed, you can choose to show a Favorite icon (often a heart) on each card. When enabled, users can click the heart to save the listing to their favorites list. If the Favorite addon is not active, this option will be hidden, and the favorite icon won’t appear.
Compare Icon: If the Compare addon is installed, you can show a Compare icon on each card. This lets users add the listing to a comparison list. (Without the addon active, the compare icon option is hidden.)
Review Rating: If the Reviews addon is active (enabling user reviews and ratings), you can toggle the display of the listing’s average rating (star rating) on the card. Enabling this will show star icons or a rating value so users can see how the listing is rated.
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:
Map Provider: Choose the map service for the map component. The default is Leaflet (OpenStreetMap), which works out-of-the-box. If you have the Advanced Map addon (or if using Pro’s advanced map features), you can also select Google Maps here. Selecting Google Maps will utilize Google’s mapping service (requiring a Google Maps API key, configured in Listdom settings).
Map Position: Determine where the map will appear in relation to the listings. Options are Top (map above the listing cards) or Bottom (map below the listing cards). For example, choosing “Top” will place a full-width map at the top of the Mosaic view, showing pins for each listing before the list; “Bottom” will show the map after the list of listings. The default position is Top.
Map Height: Specify the height of the map display. You can enter a value with units (e.g., 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.
Mouse Wheel Zoom: Enable or disable zooming the map via mouse wheel/trackpad scroll. Disabled is the default to prevent accidental zooming while scrolling the page. Toggle to Enabled when you want scroll-to-zoom behavior.
Clustering: Enable or disable marker clustering. When clustering is enabled (default is on), nearby listings on the map will be grouped into cluster markers (with a number indicating count) instead of overlapping. This makes the map easier to read when many listings are close together. You can turn this off to show all individual markers, but it’s recommended to keep it on if you have a dense map.
Cluster Images: If using clustering, you may provide custom cluster marker images or styles. (This is an advanced option; by default, Listdom provides a standard cluster icon.) This field accepts an image URL or preset for cluster icons. It’s primarily useful with the Advanced Map add-on for further customization of cluster appearance.
Map Style: Apply a custom style theme to the map. This setting is mainly applicable to Google Maps. You can enter a style JSON or select a predefined style (if provided). For example, you might use a dark theme map style here. If left blank, the default map style is used.
Marker/Shape On Click: Choose what happens when a user clicks a marker on the map. Options include Open Infowindow (default) or directly opening the listing’s single page. Open Infowindow keeps users on the same page, while a direct open will navigate them to the listing detail page.
Info Window Trigger: Appears when Marker/Shape On Click is set to Open Infowindow. Choose Show on click (default) or Show on hover to control how the infowindow opens. This applies to markers only (not shapes).
Map Search Synchronization: Enable Map Search to allow the map to interact with the listings. When this is enabled, the listing results will update based on the map’s viewport – for example, only listings visible in the current map area will show (and panning/zooming the map can load new listings). This feature is disabled by default and requires Pro. When enabled, it provides an interactive “search as I move the map” experience.
Automatic Geolocation (Auto GPS): If enabled, the map will attempt to automatically center on the user’s location (with their permission) when the page loads. This helps show relevant local listings first. Auto GPS supports both Google Maps and OpenStreetMap (Leaflet). This feature requires Advanced Map and HTTPS.
Map Controls:(Advanced Map Add-on) If you are using Google Maps via the Advanced Map add-on, a sub-section called Google Maps Controls will appear. Here you can toggle various controls on the Google map, such as Zoom buttons, Street View Pegman, Map Type toggle (Map/Satellite), Fullscreen control, etc. These allow you to fine-tune the user interface of the Google map. For example, you might disable Street View and fullscreen buttons for a cleaner look or enable the scale bar. These options only apply to Google Maps; for Leaflet maps, the controls are minimal and not separately configurable in this interface.
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:
Disabled: No pagination controls are shown. Only the first set of listings (up to the limit) will display, and users cannot load more from the front-end.
Load More Button: A button labeled “Load More” will appear below the listings. Users can click it to load the next set of listings (appending to the list).
Infinite Scroll: Listings will automatically load as the user scrolls down, without the need for a button. This provides a continuous scrolling experience.
Numeric Pagination: Traditional page numbers are shown (1, 2, 3, …) allowing users to navigate to specific pages of results.
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:
Default Sort By: Choose the field by which listings are sorted when the page first loads. Options include Date (usually by publish date), Title (alphabetical), Price (if pricing is enabled), Rating (if using reviews), Views (if tracking views), or Random. For example, you might set the default sort to “Date (Newest First)” to always show newest listings first.
Default Order: Choose Ascending or Descending for the Default Sort field. For instance, if Default Sort By is Date and Default Order is Descending, the newest listings will appear first (this is the typical default). If you chose Title and Ascending, listings would default to A→Z alphabetical order.
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:
Date: Sort by publish/creation date.
Title: Sort alphabetically by title.
Price: Sort by price (requires pricing feature enabled).
Rating: Sort by average review rating (requires Reviews addon).
Views: Sort by view count/popularity (requires Stats or another view-tracking feature).
Random: Include a random sort option (so users can randomize the order).
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.
Use the Search tab to embed a search/filter form directly with your Mosaic view. This is useful if you want users to narrow down the listings they see in the Mosaic view:
Searchable: Toggle to enable or disable search for this shortcode. When enabled, the Mosaic view 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 Mosaic view. 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 Mosaic view:
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 Mosaic view and select it here. That way, users can refine what they see without leaving the page.
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 Mosaic view, 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 Mosaic view.
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 Mosaic 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.
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.
