Grid View Shortcode Configuration
If you want to use the Grid View layout on your website, you first need to create the correct shortcode. Once you have this shortcode, you can place it anywhere on your website. This will display your directories in a grid format.
In your WordPress admin panel navigate to Listdom → Shortcodes. Press the Add Shortcode button.
The Grid View shortcode on the “Add New Shortcode” page, has these options:
1. Add Title: Type a name for this shortcode.
2. Skin: Select the skin type. Here we choose Grid View.
3. Style: Choose between 3 different styles for listing cards. You can select either the pre-made styles or make new ones with Elementor.
👉 You can build custom styles for listing cards with Listdom Elementor Add-on.
4. Map Provider: With the Grid view, you have the flexibility to place a map either above or below the listing items. This map displays items according to their geographical locations. As with all Listdom maps, you can choose the map source. You have the option to use either Google Maps or Leaflet (OpenStreetMap). The map settings are enclosed within a dashed border for easy identification. If you prefer, you can also choose to disable the map entirely and display only the listing items in the Grid view.
👉 The Leaflet is only available on Listdom Pro Addon.
If the Leaflet is selected, then the Map Style, Bubbles, and Map Search options are disabled.
If you choose to disable the map, all settings and options associated with the map will be hidden. This allows for a cleaner interface focused solely on the listing items.
5. Position: Determine the position of the map related to the listing items.
- Show Before Grid View: Shows the map above the items.
- Show After Grid View: Shows the map under the items.
6. Map Style: Change the default style of Google Maps. Here you can choose one of these choices:
- Default Style
- Apple Maps Esque
- Blue Essence
- Blue Water
- CDO
- Intown Map
- Light Dream
- Midnight
- Pale Down
- Shades of Grey
- Subtle Grayscale
- Ultra Light
📺 You can see the different map styles on Listdom demo. Click Here
👉 Custom Styles can be added with the Listdom Advanced Map Add-on.
7. Clustering: This functionality aggregates markers on the map into groups when viewed from a zoomed-out perspective. Each group displays a count, representing the number of markers it holds. As you zoom in, the count decreases and individual markers start to appear. Zooming out reassembles the markers into groups.
8. Bubbles: Change the style of the cluster bubbles. It has three classic, modern, and clean styles.
👉 The Clean style is available in the Listdom Advanced Map Add-on.
9. Marker/Shape On Click: This setting defines the action that occurs upon clicking the listing icons on the map.
- Open Info Window: Showcases a summary of the listing item in a map popup.
- Redirect to Listing Details Page: Directs to the detailed page of the listing.
- Open Listing Details in Lightbox: Displays the complete details of the listing in a lightbox (without reloading the page).
- None: No action is performed.
10. Map Search: This functionality enables users to filter listings based on the current map position. Users can drag the map to their desired location and the listings will be filtered to only show those available in that area.
👉 The Map Search feature is only available on Listdom Pro Addon.
11. Map Limit: This setting applies to the map and sets the number of the listings items allowed to be shown on the map. Increasing the limit beyond 300 may cause the page to load slowly. It’s advised to use filter options to only display the preferred listings.
12. Advanced Map add-on features: The following 5 features are added by the Listdom Advanced Map add-on. Learn more about these features.
- Marker Type
- Infowindow Style
- External Direction Link
- Global Restrict Bounds
- Auto GPS
👉 Install and activate the Listdom Advanced Map Add-on to use these features.
13. KML Layers: Select the KML layers added to the site. Learn more.
👉 The KML Layers are available in the Listdom KML Add-on.
14. Listing Per Row: Choose the number of listing cards to display per row. Options include 2, 3, 4, or 6.
15. Limit: This sets the maximum number of listings to display before loading more.
16. Pagination Method: By default, the number of listings is limited to the set amount. You can choose how to display additional items.
- Load More Button: Adds a ‘Load More’ button at the end of the list.
- Infinite Scroll: Loads more items as you scroll down.
- Disabled: No additional items are added to the list.
17. Listing Link: Decide where the listing links will open:
- Same Window: Opens the listing detail page in the same browser window.
- New Window: Opens the listing detail page in a new window.
- Open in Lightbox: Shows the listing detail in a lightbox.
- Disabled: Deactivates the link.
18. Display Image: This option gives you the ability to disable the listing image.
👉 The Listing Link and Display Image features are only available on Listdom Pro Addon.
19. Image Method: If the listing has an image gallery, this option can display the gallery in place of the feature image. It presents a slider with navigation arrows on the card.
20. Display Labels: Choose whether to display the listing labels on the image.
21. Display Share Buttons: Enabling this option adds a share icon to each item. Hovering over this icon reveals the share buttons.
22. Display Matched Bookables: This option shows the Matched Bookables. Learn more.
👉 The Display Matched Bookable Option is available in the Listdom Booking Add-on.
The remaining options on the page are common across different types of skins shortcodes. You can read about Skins Shortcodes Common Settings.
Finally, click the Publish button.
To use this shortcode and display the listings in Grid View, you can insert the shortcode anywhere on your site.
