Introduction
The Listdom List+Grid view has the features of both Grid view and List view. The user can switch between these two skins with a toggle button.
Shortcode Configuration
To display your directories in a List+Grid style on your site, you first need to make a specific shortcode. After creating this shortcode, you can put it anywhere on your site. This will show your directories in the List+Grid style.
In your WordPress admin panel navigate to Listdom → Shortcodes. Press the Add Shortcode button.
The List+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 List+Grid View.
3. Style: Choose between 3 different styles for listing cards.
4. Map Provider: In the List+Grid view, you can conveniently position a map either above or below the items in the list. This map shows items based on their geographic locations. Like all Listdom maps, you can pick the source of the map. You can choose between Google Maps or Leaflet (OpenStreetMap). The settings for the map are marked with a dashed border for easy spotting. If you like, you can also turn off the map completely and only show the items in the List+Grid view.
👉 The Leaflet is only available on Listdom Pro Addon.
If the Leaflet is selected, the Map Style, Bubbles, and Map Search options are disabled.
If you opt to turn off the map, all related settings and options will be concealed. This results in a more streamlined interface that is exclusively dedicated to the display of listing items.
5. Position: Determine the position of the map related to the listing items.
- Show Before List+Grid View: Shows the map above the items.
- Show After List+Grid View: Shows the map under the items.
6. Map Style: You can modify the default style of Google Maps. Here are the options you can select from:
- 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 feature groups markers on the map when you’re zoomed out. Each group shows a count, which is the number of markers it contains. As you zoom in, the count goes down and individual markers begin to show. Zooming out groups the markers again.
8. Bubbles: This changes how the cluster bubbles look. You can choose between three styles: Classic, Modern, and Clean.
👉 The Clean style is available in the Listdom Advanced Map Add-on.
9. Marker/Shape On Click: This setting decides what happens when you click 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 feature lets users filter listings based on the current map position. Users can drag the map to a location they want and the listings will be filtered to only show those in that area.
👉 The Map Search feature is only available on Listdom Pro Addon.
11. Map Limit: This setting is for the map and sets the number of the listing items allowed to be shown on the map. If you increase the limit beyond 300, the page might load slowly. It’s recommended to use filter options to only display the listings you want.
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. Default View: select the default view to be the Grid or List view.
15. Listing Per Row: Pick the number of listing cards to show per row. You can choose 2, 3, 4, or 6.
16. Limit: This sets the maximum number of listings to show before loading more.
17. Pagination Method: By default, the number of listings is limited to the set amount. You can choose how to show more 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.
18. 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.
19. 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.
20. Image Method: If the listing has an image gallery, this option can show the gallery instead of the feature image. It shows a slider with navigation arrows on the card.
21. Display Labels: Choose whether to display the listing labels on the image.
22. Display Share Buttons: Turning this on adds a share icon to each item. Hovering over this icon shows the share buttons.
23. 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 rest of the options on the page are common across different types of skin shortcodes. You can read about Skins Shortcodes Common Settings.
Finally, click the Publish button.
To use this shortcode and show the listings in Grid+List View, you can put the shortcode anywhere on your site.
