跳到內容

Listdom Grid Skin Documentation

View Demo

本頁內容尚未翻譯。

Select the Grid skin when creating or editing a Listdom shortcode to present your listings in a card-based grid layout. Once the Grid skin is selected, you can adjust how many columns to display, what details each listing card shows, and other layout preferences. The grid format is great for showcasing listings with images, as it provides a magazine-style card view.

In the Style tab for the Grid skin, choose a style template and control which information appears on each listing card. First, pick a Style (Style 1, 2, 3, or 4) for the grid layout. Each style defines a different card design for the listings.

  • Display Image: Toggle to enable or disable the featured image on listing cards. (This option is part of the Pro features Pro.) When enabled, the listing’s image or image slider is shown at the top of the card. If disabled, no image will appear on the cards.
    • Image Method: If images are displayed, choose between Cover (show only the featured image as a static cover) or Slider (show all listing gallery images in an interactive slider on the card).
    • Image Fit: Determine how the image fills the card frame. Cover (default) will crop/zoom the image to cover the area, while Contain will fit the whole image within the area (which may show blank space if aspect ratios differ).
    • Note: The image toggles and settings only appear when using Listdom Pro, as the free version does not include image display options in the listing cards.
  • Display Description: Toggle this on to show a short description or excerpt on each listing card. If the selected grid style supports text content, enabling this will add the listing excerpt text to the card.
    • Content Length: Specify how many words of the description/excerpt to display (e.g., 10, 20 words). This defines the cutoff for the text shown.
    • (In the Grid skin, the description content is primarily used in Style 3. Other styles may not show a description even if enabled.) If the current style doesn’t have a description section, this option may not have any effect.
  • When Display Description is off, listing cards will not include any excerpt text, showing only the title (and other chosen elements).

Customize the visibility of various listing details on the grid cards. Depending on the style, some elements might not be applicable (they will only appear if the style layout includes them):

  • Contact Info: Toggle the display of contact information (such as a contact button or icon) on the card. (This element is visible in grid Style 1 and Style 4 designs.)
  • Location: Show the listing’s location name. (Visible in grid Style 2 design, where location is part of the card layout.)
  • Price Class: Show the price classification (if using price categories like $, $$, $$$). (Requires pricing components enabled; appears in Style 3.) For example, a listing could show ”$$” to indicate a moderate price range.
  • Price: Display the actual price or cost of the listing (if applicable). (Requires pricing feature; available in Style 1, Style 2, and Style 4.) When enabled, the price (or price label) will show on the card, e.g., “$1000” or “Starting at $50”.
  • Display Matched Bookables: If the Listdom Booking add-on is active, show matched bookable items right on the grid card so visitors immediately see what can be booked.
  • Share Buttons: Show social sharing buttons on each card, allowing users to share the listing on social media. (Requires social sharing component; shown in Style 1, Style 2, and Style 4.)
  • Address: Display the listing’s address on the card. (Requires Map component; shown in Style 1 and Style 3 cards.) If enabled, the address or location details will be printed on the card (for styles that support it).
  • Work Hours: Show the “work hours” or availability status (like open/closed or business hours). (Requires the work hours feature; appears in Style 2 and Style 3.) For instance, a listing might show “Open now” if currently within working hours.
  • Categories: Display the category tags of the listing (e.g., “Restaurant, Cafe”). (Visible in Style 2, Style 3, and Style 4.)
  • Labels: Show any special labels on the listing, such as “Featured” or custom labels. This toggle is on by default for all styles that include labels.
  • Title: Toggle the listing title on/off. Typically this should remain on, as it’s important for users to see the name/title of each listing. If turned off, the listing cards will not show their titles (not common).
  • Favorite Icon: Show a heart icon for users to save listings to their favorites. (Requires the Favorite add-on Favorite.) When enabled, users can click the heart to favorite a listing.
  • Compare Icon: Show a compare icon (often depicted as scales) on each card, so users can add the listing to a comparison list. (Requires the Compare add-on Compare.)
  • Review Stars: Display star ratings on the card if the listing has reviews/ratings. (Requires the Reviews add-on Reviews; often used in conjunction with Style 3 or other styles that include ratings.)
  • Claim Status: If using the Claim Listing add-on, show a claimed badge or indicator on listings that are claimed by their owners. (Requires the Claim add-on Claim; visible in styles that support a claim badge, e.g., Style 3 and Style 4.) This will typically show an icon or text like “Claimed” on applicable listings.

The Grid skin can be paired with a map to give users both a visual grid and a map view. Configure map settings in the Map tab.

  • Map Provider: Select your map provider (e.g., Leaflet or Google Maps). By default, this follows the global Listdom setting (Leaflet by default). This field may be grayed out if you’re using the global default. If Google Maps is chosen, ensure you have configured the Google API key in Listdom settings.
  • Position: Choose where the map appears relative to the grid:
    • Top – Map above the grid.
    • Bottom – Map below the grid.
    • Left – Map to the left side of the grid (grid on the right).
    • Right – Map to the right side of the grid.
  • Map Style: (For Google Maps only) If using Google Maps, you can select a custom map style theme. Otherwise, leave blank for the standard map appearance.
  • Map Height: Set the height of the map area (e.g., 400px or 50vh). If left empty, a default height will be used. Adjust this to ensure the map is comfortably visible on your page.
  • 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.
  • Marker/Shape On Click: Define the action when a user clicks on a map marker corresponding to a listing:

    • Open Infowindow – Open an info popup on the map (showing a snippet of listing info) – this is the default.
    • Redirect to Single Listing Page – Navigate directly to the listing’s detail page.
    • Open Single Listing in a Lightbox – Open the listing details in a modal/lightbox over the current page.
    • None – Do nothing on marker click.

    Choose the interaction that best fits your user experience. Lightbox and panel options allow users to view details without leaving the listing 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).

  • Enable Clustering: Turn on to cluster nearby listing markers on the map into a single group icon. Useful if you expect many markers in close proximity.
  • Bubbles: When clustering is enabled, select the style of cluster icons (bubbles). Listdom provides a set of cluster icon styles (different colors and sizes). Choose one that fits your site’s design. This setting only affects Google Maps clusters (Leaflet clusters may use a default style).
  • Map Search: Enable map-bound search filtering. When on, moving or zooming the map will filter the grid listings to those within the map’s viewport. (Pro feature: this toggle is only functional with Listdom Pro.) If disabled or unavailable, moving the map will not automatically change the listings.
  • Auto GPS: (If an “Auto GPS” or similar option is present via add-ons, it would allow automatically focusing the map on the user’s location. This is typically handled via an add-on or custom code and would be mentioned here if applicable.)
  • Map Limit: Set the maximum number of listing markers to load on the map. Default is 300. To maintain performance, avoid setting this number too high. If you expect more than 300 listings, consider using filters (so not all are shown at once) or inform users that not all results are on the map at the same time. Lowering this number can improve load times if you only need to show a subset of listings on the map.

(KML layers or additional map overlays can be enabled by other extensions if needed, but by default Listdom will just show listing markers.)

The Layout tab for Grid skin primarily controls the grid’s pagination and card arrangement:

  • Listings Per Row (Grid): Choose how many listing cards to display per row in the grid. Options are 2, 3, 4, or 6 columns. The default is 3 per row. For example, selecting 3 means three columns of listings will appear on desktop (and automatically fewer on smaller screens). Choose a number that fits your site’s layout.

  • Limit: Set the number of listings to show per page (or per “load” segment). Default is 12. Ideally, use a multiple of the Listings Per Row for a balanced layout (e.g., if 3 per row, use limits like 6, 9, 12, 15, etc.). This ensures the last row is filled.

  • Pagination Method: Determine how additional listings beyond the first page are loaded:

    • Load More – A “Load More” button appears below the grid. When clicked, it loads the next set of listings and appends them to the grid.
    • Numeric Pagination – Standard page numbers appear (Page 1, 2, 3, …) for navigating through listings pages.
    • Disabled – No pagination or load more. Only the first set of listings (up to the Limit) will display, with no way to see more via the interface.

    By default, if “Load More” is enabled, Listdom sets Pagination Method to Load More. If you uncheck Load More (in older versions), it defaults to numeric or disabled. Ensure the setting matches your desired user experience.

  • Listing Link: Configure how clicking a listing card opens the listing’s detail page. (Pro only setting, not available in free version.) Options:

    • Normal – Open the listing in the current window (standard behavior).
    • Lightbox – Open the listing details in an overlay/lightbox on the same page.
    • Right Panel / Left Panel / Bottom Panel – Open the listing details in a sliding panel on the right side, left side, or bottom of the screen.

    If a Lightbox or Panel is chosen, you can also select the Listing Style in Lightbox/Panel (which single listing template to use for the content). If left at “Inherit From Global Options, ” it will use the default single listing design. These interactive opening methods let users view listing info without navigating away, but they are part of Pro features.

Manage how your grid listings are sorted and what sorting controls users see.

Set the initial sort order for the grid:

  • Default Sort Field: Select which field listings are sorted by initially. Common choices are date (to show newest listings first), title (alphabetical), price (lowest/highest), rating, etc.
  • Default Sort Order: Choose Descending or Ascending for that field. For instance, “Date – Descending” will list newest to oldest. “Price – Ascending” would list from lowest price to highest.
  • The default sort ensures that when the page loads, listings are presented in a predictable order. Users can later change the sort (if you allow sort options).

Decide if users can sort the grid differently, and which options to offer:

  • Display Sort Options: Toggle on to show a sort control (either a dropdown or list of sort choices) on the front-end. If off, users will not see any sort menu and cannot change the ordering.
  • Sort Style: Choose how the sort control is displayed:
    • Drop Down – A compact dropdown menu listing sort criteria.
    • List – A visible list of sorting options (could be links or buttons).
  • Available Sort Options: Customize which sorting methods are available for users:
    • You will see a list of possible sort options (Date, Title, Price, Rating, etc., as well as any custom sort like by views or distance if applicable).
    • Drag-and-drop to reorder these options in the list; the order here is the order they’ll appear to the user.
    • Click the toggle (checkmark/minus icon) to enable or disable each option. Enabled options will be selectable by users; disabled ones will be hidden.
    • For each option, you can rename it by editing its Name field (for instance, you might rename “post_date” to “Date Added”) and set the default order (Ascending/Descending) for that option.
  • Example: You might enable Date, Price, and Rating sorts, and disable Title if alphabetical order isn’t useful for your listings. You could order them so “Price” appears first in the dropdown, then “Date”, then “Rating”.
  • Remember to leave at least one sort option enabled if Display Sort Options is on, otherwise the sort interface will have no choices.

Use the Search tab to embed a search/filter form directly with your grid. This is useful if you want users to narrow down the listings they see in the grid:

  • Searchable: Toggle to enable or disable search for this shortcode. When enabled, the 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 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 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. When you place the form on the left or right, remember that the sidebar takes space away from the grid itself.

  • 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.

  • Ajax Search Advanced Portal Search: Choose the search behavior when AJAX is available:

    • 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 grid 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 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 grid.
    • Exclude Categories Pro: 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 Locations Pro: 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 Tags Pro: 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 Features Pro: 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 Labels Pro: 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 Addon Rank: Added by the Listdom Rank add-on. Filter listings by rank using minimum and maximum values, or leave them blank to skip ranking filters.
  • Memberships Membership: 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 grid 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.

Real Estate Listings Grid: A real estate website uses the Grid skin to showcase properties. They set Listings Per Row = 3 to have three property cards per row. Each card shows the property photo (image slider enabled), price, and a “Favorite” heart Favorite for users to save listings. The map is positioned on the right, so when viewing on a wide screen, users see listings on the left and an interactive map of properties on the right.

Travel Packages Gallery: A travel agency lists tour packages in a grid format. Using Style 2, each package card shows a thumbnail image, the destination, and starting price. They disabled the description for a cleaner look. The sort options are enabled, allowing visitors to sort packages by Price or Rating. A search form is placed on top so users can filter tours by destination or duration. The result is an engaging, user-friendly gallery of travel packages.