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”.
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.
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.
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.
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.
Configure if and how a search form integrates with your grid of listings:
Searchable: Turn this on to allow this grid to be filtered by a search form. If enabled, you can embed a search form shortcode to let users refine results. If disabled, the grid will always show the same listings and ignore any search inputs.
Non-searchable shortcodes (Searchable = off) display a fixed list of listings that doesn’t change with user input.
Search Form: Select a Listdom search form to attach to this grid. If you have created one or more search forms (via Listdom → Search Forms), they will appear in this dropdown. For example, choose a “Listing Search Form” that has filters for keyword, category, location, etc. If left empty, no search form will be shown with this grid.
Search Form Position: Determine where the search form appears relative to the grid:
Top – Above the grid.
Bottom – Below the grid.
Left – To the left side of the grid (with the grid on the right).
Right – To the right side of the grid.
Before Listings – Directly before the listings container (which is effectively the same as Top in most cases).
If using Left or Right, ensure your page layout can accommodate a sidebar. The grid will resize to occupy the remaining width.
Using a search form with the grid skin allows dynamic filtering. For instance, a user can select a category or input a keyword in the search form, and the grid will update to show matching listings (usually the page will refresh or use AJAX to filter the results, depending on configuration).
If your grid is intended to show all listings or a pre-filtered set (see Filter Options below), you might leave Searchable off or not include a form. But if you want user-driven filtering, enable this and pick a suitable form.
Pre-filter which listings appear in your grid by setting include/exclude rules:
Just like with the List skin, the Filter Options tab for the Grid skin provides Categories, Locations, Tags, Features, Labels, Custom Fields, and Authors sub-sections. You can mix and match these to create a focused set of listings.
For each type of filter:
Use the Include sub-tab to specify which listings to show (e.g., include only certain categories or tags).
Use the Exclude sub-tab to omit certain listings (e.g., exclude a category or an author’s listings).
If you leave both include and exclude empty for a filter type, it means “all are allowed” for that attribute.
For example:
Categories: If you include “Real Estate” and “Vehicles”, only listings in those categories will be shown. If you exclude “Jobs”, then all categories except “Jobs” will be shown.
Locations: Include specific cities or regions to limit listings to those locations; exclude ones to hide those.
Tags: Perhaps include only listings tagged as “Sale” or exclude those tagged “Sold”, etc.
Features: If your listings have feature checkboxes (like “Pet Friendly”, “Free Wi-Fi”), you could include only listings that have a certain feature by using the include on that feature term.
Labels: Use this to, say, only show “Featured” listings by including the “Featured” label, or exclude “Featured” to omit those if you plan to show them elsewhere.
Custom Fields: Select values of custom fields to filter. For instance, if you have a custom field “Property Type” with values like Apartment, House, you might include only “Apartment” to show only apartments.
Authors: Include listings by specific authors or exclude certain authors. For instance, if you have multiple vendors and you want a grid of listings from only a particular vendor, include that author.
Keep in mind:
Exclude options are a Pro feature (Pro). If you are using Listdom Lite, you can set include filters, but the exclude fields will be disabled with a notice.
You can combine filters. The shortcode will then show listings that meet all the include criteria and none of the exclude criteria. (Internally, Listdom intersects the includes and subtracts the excludes.)
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.
