Choose the List + Grid skin in your shortcode settings if you want to allow both types of views. This skin will render a toggle on the front-end, enabling users to flip between a traditional list format and a multi-column grid format for the same set of listings. It’s useful when you want to cater to user preference – some may like a compact list, others a visual grid.
When List + Grid skin is active, you will have additional settings to control the default view and behavior of each view.
In the Style tab for List + Grid, you can customize the appearance of listings in both list and grid modes. Similar to the individual skins, you’ll choose a style variation and which elements to display on the listing cards.
First, select a Style for the combined skin. The style you pick will apply to both views (list and grid) in terms of design template. You can choose Style 1, 2, 3, or 4 – each style defines how listing information is structured in both list item and grid card.
Display Image: Toggle to show listing images in the results. (Pro feature Pro.) If enabled, listings will show a featured image or image slider whether in list or grid view.
Image Method: Choose Cover to show a single featured image cover, or Slider to show all images as a slider for each listing.
Image Fit: Choose Cover to have images cover the frame or Contain to fit them fully within the frame.
These image settings apply to how images appear in both the list and grid layouts of this combined skin.
If Display Image is turned off (in Pro), neither view will show images for listings (useful if you want a very compact text-only list).
Display Description: Toggle to show a short description/excerpt for each listing. This will affect both the list item and grid card (whenever the chosen style supports it).
When on, you can configure:
Content Length: The number of words from the listing description/excerpt to display (default might be 12 words).
Content Type: Whether to pull from the full Description or the Excerpt field for that text.
This option is particularly effective in styles that include a text blurb (e.g., Style 2 and Style 3). In styles that are more minimal (like Style 1 or Style 4), a description may not be part of the design.
If a style doesn’t usually show description text, the content might not appear even if enabled. The UI will automatically hide or show these fields depending on style (Style 2 and Style 3 typically allow description content).
Configure which elements to display on the listing previews. For List + Grid skin, these toggles affect both views (the list view entries and the grid view cards):
Contact Info: Show contact details or a contact button in the listing entry. (This appears in styles that support it – Style 1 and Style 4 layouts.)
Location: Show the location name of the listing. (Supported in Style 2 layouts.)
Price Class: Show the price classification label (if used, e.g., dollar signs). (Requires pricing component; shown in Style 3 layouts.)
Price: Display the listing’s price field. (Requires pricing enabled; visible in Style 1, Style 2, and Style 4.)
Share Buttons: Include social share icons on the listing preview. (Requires social component; available in Style 1, Style 2, and Style 4.)
Address: Show the address of the listing. (Requires Map component; visible in Style 1, Style 3, and Style 4 for this combined layout.)
Work Hours: Show open/closed or working hours information. (Requires work hours feature; included in Style 2 and Style 3.)
Categories: Display the listing’s categories. (Available in Style 2 and Style 3 for List + Grid skin.)
Labels: Show any labels (like “Featured”) on the listing. By default, this is enabled if the style supports it (commonly yes).
Title: Toggle the listing title. Normally left on (so each listing shows its title). If turned off, neither view will display listing titles, which is generally not recommended.
Favorite Icon: Show the favorite heart icon for saving listings. (Requires Favorite add-on Favorite.)
Compare Icon: Show the compare icon for adding to comparison list. (Requires Compare add-on Compare.)
Review Stars: Show star rating indicators if listings have reviews. (Requires Reviews add-on Reviews.)
Claim Status: Show a claimed badge on listings that have been claimed by owners. (Requires Claim add-on Claim; appears in Style 3 and Style 4 when Title is enabled.)
The List + Grid skin also supports an optional map, though typically if you want a map alongside results, you might choose a Half Map or similar skin. Still, you can configure a map to display with this combined view.
Map Search: Enable to let the map’s viewport filter the listings (so the list/grid only shows what’s on the map). (Pro feature: requires Pro.)
When enabled, panning or zooming the map will dynamically update the listings shown, which can be a powerful way for users to explore.
(If an Auto GPS or geolocation option is provided by an add-on, it can be integrated here to center the map on the user’s location, but by default List + Grid doesn’t include that without an add-on.)
Map Limit: Set a maximum number of listing markers for the map (default 300). Keep this at a reasonable number to avoid performance issues. With List + Grid, since users can toggle views, you’ll usually want the map to reflect whichever view is active.
(Note: List + Grid toggling uses the same set of listings; the map will typically display markers for all loaded listings, regardless of whether the user is currently viewing the list or grid. It’s one combined shortcode.)
The Layout settings for List + Grid skin have some unique options because this skin encompasses two layouts in one:
Default View: Choose which view is shown first when the page loads. Options:
Grid View – Display the grid layout first (multiple columns).
List View – Display the list layout first (single column list).
By default, this may be set to Grid. If you know your audience prefers lists, you can set it to List instead. The user will still have a toggle to switch views manually.
Listings Per Row (Grid): Choose how many columns to use in the grid view (when users switch to Grid). Options are 2, 3, 4, 6, with 3 per row as the default. This setting affects only the grid layout; the list layout is always 1 per row.
Limit: Set the number of listings to display per “page” or initial load. Default is 12. As with the Grid skin, using a multiple of the columns (if possible) is ideal for the grid’s last row to be filled. For example, if 3 per row, a limit of 12 shows 4 full rows.
Pagination Method: Select how to load additional listings beyond the first set:
Load More – Show a Load More button below the listings (works for both list and grid views; clicking will load more in whichever view is active).
Numeric Pagination – Show page numbers (will reload the shortcode for the new page; the user will remain in whichever view they were using).
Disabled – No pagination; only the first {Limit} listings are ever shown.
By default, Load More is active. If you switch to numeric pagination or disable it, it applies to both views.
Listing Link: Choose how listing detail pages open on click. (Pro feature.) Options are the same:
Normal (open in current page),
Lightbox, Right/Left/Bottom Panel, etc. If any pop-up or panel is chosen, the Listing Style in Lightbox dropdown will appear to select the single listing layout.
This setting covers both list and grid items since they are the same listings. For example, if you choose Lightbox, clicking a listing title or image in either list or grid view will open the lightbox detail view.
Choose the initial sort field and order (e.g., date descending, or price ascending) that will be applied when the listings load. For instance, you might sort by Newest first by default.
This default sort will be in effect regardless of whether the user is looking at the list or grid view.
Display Sort Options: Toggle on to show sort controls to the user. Typically, the sort dropdown or list will appear above the view toggle, so users can sort the results.
Sort Style: Choose Drop Down or List style for the sort UI.
Available Sort Options: Enable/disable and reorder the criteria as described for the Grid skin. You can allow sorting by various fields (Date, Title, Price, Rating, etc.) and rename them if needed.
The sort options, when used by the user, will affect the ordering of listings in whichever view is active at the time (and if they switch views after sorting, the order remains, because it’s the same listing set).
For example, if you enable sorting by Price and Rating, a user could sort by Price (Low to High) while in grid view, then toggle to list view and see the listings still in that price order.
The Search functionality for List + Grid is identical to other skins:
Searchable: Turn on to allow the shortcode’s listings to be filtered by a search form. If off, the shortcode will ignore any search inputs and just show a fixed set of listings.
Search Form: If searchable, select a search form to display. You might have, say, a “Combined Search Form” with various filters. If chosen, that form will appear alongside the view toggle and listings.
Search Form Position: Choose Top, Bottom, Left, Right, or Before Listings.
If Left or Right, the search form plus toggle and listings container will need to share space, which could squeeze the toggle and view. Usually, Top is a safe bet for List + Grid.
The search form will filter the listing results no matter which view is displayed. For instance, if a user searches while in list view, the results update; if they then switch to grid view, the grid will show the same filtered results (and vice versa).
Having a search form combined with List + Grid makes for a powerful listing page: users can filter down results and choose their preferred view to browse them.
Filter Options for List + Grid allow you to preset which listings are included/excluded, just like for List or Grid alone:
You will see the same sub-tabs: Categories, Locations, Tags, Features, Labels, Custom Fields, Authors with Include/Exclude choices.
Use them in the same way:
Include certain terms to only show listings that match those.
Exclude certain terms to hide listings that match those.
All the logic (must match all included, exclude any that match excluded) applies the same.
For example:
You can configure a List + Grid shortcode to include only Category “Events” and exclude any with the tag “Canceled”. Then the shortcode will show only event listings that are not canceled. Users can switch between list and grid view of those event listings.
Or include Location = “New York” and “Los Angeles” to show listings in those big cities only (across both views).
Remember:
Exclude fields require Pro. If you don’t have Pro, you can still include specific terms, which implicitly excludes others (since only selected ones show).
This combined skin doesn’t change how filters work; they apply to the dataset of listings before rendering either view.
Dual-View Directory: A business directory site implements the List + Grid skin so that users can choose their view. By default, the grid view is shown (3 cards per row). Users can click a “List/Grid” toggle to switch to a full-width list view if they prefer reading descriptions. The site owner enabled the map on top, showing pins for all businesses. This gives a very flexible browsing experience: map + list or map + grid.
Property Listings Toggle: A real estate portal uses List + Grid to satisfy both detail-oriented and visual users. The default view is set to List (so it starts as a vertical list with lots of details like address and description). However, a toggle at the top lets users switch to Grid view, which shows larger photos in a gallery style. The shortcode is filtered to include only “For Sale” properties (using Filter Options) and has a search form on the left side to refine by price range and bedrooms. This one shortcode page effectively serves multiple user preferences in one place.
