The Side by Side Skin provides an interactive split-view experience. In this layout, your page is divided into two sections: a list of listings on the left, and a details panel on the right. When a user clicks on a listing in the list, the listing’s full details (the single listing page) are displayed on the right side without navigating away. This allows users to browse and view details of listings on one screen seamlessly. It’s an excellent skin for improving user experience by reducing page loads, especially useful for real estate, job boards, or any directory where users want to rapidly preview multiple listings.
To use this skin, select Side by Side View from the skins in the Listdom shortcode builder or block settings. Once selected, the interface will present options specific to Side by Side:
Layout Description: The side by side skin splits the screen into a listings panel and a details panel. Initially, the listings panel (left side) shows the list of listings, and the details panel (right side) may be empty or show a placeholder. When a user selects a listing, its single listing content appears in the right panel.
Interactive Detail Panel: This skin is designed so users do not need to navigate to a new page to see listing details. Keep in mind that the right panel essentially loads the single listing page of whichever item is clicked (often via an iframe or AJAX). This provides a faster browsing experience.
There are no unique “skin-specific” fields to configure here beyond understanding how the layout works. Simply choosing the skin will activate the split view functionality on the front-end.
After choosing the Side by Side skin, you can configure the style and which elements appear on the listing cards in the left panel. The right panel will display the full single listing content.
Select the Style: Currently, the Side by Side skin comes with a default style (Style 1). If additional styles become available, they would appear in this dropdown. Style 1 is the standard layout for this skin. You can also create a custom style with the Layout Builder; if you do, it would appear here as a numeric ID (indicating a custom template). For most cases, you will use Style 1 for Side by Side.
Because this skin shows the single listing page in a panel, you have an option to choose which single listing template style to use:
Single Listing Style: This dropdown allows you to pick the design template for the listing detail that appears on the right panel. By default, it is set to Inherit From Global Options, meaning it will use whatever single listing layout is set in Listdom’s global settings (Customizer or Settings). If you want to override it for this view, you can select a specific single listing style (for example, a template with a gallery, or a simplified layout). This is useful if you want the detail view in this context to have a different appearance than the default single listing page.
For instance, you might have a special compact single listing design that’s better suited for the smaller panel, and you can choose it here. (This option is only available in Pro, since multiple single listing styles are a Pro feature.)
In the left-side listings list, each listing is shown as a compact card (usually one per row, with an image thumbnail and some text). You can toggle which elements appear on those listing cards:
Image: Enable or disable the featured image thumbnail on each listing in the list. By default this is enabled, showing a thumbnail on the left side of each listing row. If you turn it off, no image will display, the listing title and info will stretch full width. (In most cases, leaving the image on is recommended for visual context.)
Address: Toggle the listing’s address on the listing card. If enabled, the address (or a shortened version of it) will appear, giving users quick location context. This relies on the Map & Address component being active (it is active by default). If your listings have physical addresses, showing it can be useful; if not (e.g., an online-only listing), you can disable this to remove unnecessary info.
Price: Show or hide the price on the listing card. For example, in a property listing, this would show the price of the property. Only applicable if pricing is enabled for listings. By default, if pricing exists, it will show. Disable it if price is not relevant or you want a cleaner list.
Favorite Icon: If the Favorite addon is active, you can display a heart icon on each listing row for users to save it to their favorites. Enable this to allow quick favoriting. (Without the addon, this option is hidden.)
Compare Icon: If the Compare addon is active, you can show a compare icon (often two arrows) on each listing row. Users can click it to add the listing to their comparison list. Enable if you want users to compare listings side by side. (Hidden if Compare addon isn’t active.)
Review Rating: If using the Reviews addon for ratings, you can choose to display the star rating or review score on each listing entry. Enabling this will show something like ”★★★★★ (4.5)” near the title, indicating the listing’s average rating. This quickly conveys quality to users browsing the list.
Title: Enable/disable the listing title. This is enabled by default and it’s highly recommended to leave it on – the title is the primary identifier of the listing. Only in very special cases would you hide the title on listing cards.
Unlike some other skins, the Side by Side listing cards are meant to be succinct. You might notice options like categories, labels, or location taxonomy are not present here – that’s because by design the side-by-side listing snippet focuses on essential info (image, title, maybe price) to keep the list simple. More detailed info is seen when the listing is opened in the right panel.
The Side by Side skin does not include a map in its layout. The screen’s right side is dedicated to listing details, not a map. Therefore, the Map settings in the shortcode builder do not apply to this skin:
You cannot display a map in the Side by Side layout (any map position setting will be ignored for this skin).
The Google Maps Controls and other map provider settings are not relevant here, since no map is shown alongside the listings.
In the shortcode builder UI, the Map tab may either be hidden or any options set there will simply have no effect for this skin. If you need to show a map with listings, consider using the Half Map skin instead. Side by Side is focused on listing content and detail viewing.
The layout settings for Side by Side let you adjust the proportions and pagination of the listing list:
Layout Width: This option controls the width split between the listings panel and the details panel. You can choose ratios such as 50-50%, 45-55%, 40-60%, 35-65%, or 30-70% (listed as 50-50, 45-55, etc.). The first number is the percentage width of the left listings column, and the second is for the right details column. By default, this is 40-60% (left panel is 40% of the container, right panel is 60%). If you want the listing list to have more space (and the detail pane slightly less), you might choose 50-50. Or if the detail area is more important, 30-70 makes the right side much wider. Pick the balance that works for your site’s design. You can adjust this live and see how the panel sizes look.
Listings Per Page (Limit): Set how many listings to load in the left panel listing list initially. The default is 300, but you might set a smaller number for performance or design reasons. For example, you could set 20 so that 20 listings show, and additional ones require the user to load more (if you have a lot of listings). Typically, you’ll want to allow loading all relevant listings through pagination rather than showing only a fixed subset.
Pagination Type: Choose how the listing list is paginated or extended:
Disabled: No pagination; only the first X listings (per the limit) show, with no way to see more via the interface.
Load More Button: A “Load More” button will appear at the bottom of the listing list. Clicking it loads the next set of listings (appending to the list).
Infinite Scroll: Listings will automatically load when the user scrolls to the bottom of the list, without clicking a button.
Numeric Pagination: Traditional page numbers (1, 2, 3, …) will appear under the list. Clicking a page number will refresh the listing list to that page’s items.
The default for Side by Side is typically Load More, giving an interactive feel. Infinite Scroll can also work well here to seamlessly load listings as the user scrolls the left panel.
Columns: The Side by Side listing list is a single-column vertical list (each listing takes the full width of the left panel). There is no multi-column grid in this layout. Thus, this setting is fixed to 1 listing per row. (In the builder UI, you may not even see a Columns option for this skin, or it will be inactive.) The design is intended to show one listing per row for clarity.
Set the default sort field and order for the listings:
Default Sort By: Choose the initial sort criterion (e.g., Date, Title, Price, etc.). If you want newest listings first by default, pick Date. If you prefer alphabetical, pick Title.
Default Order: Choose Descending or Ascending for that field. For instance, Date + Descending means newest to oldest (common default). Title + Ascending would mean A → Z initially.
The default sort ensures the listing list is ordered in a meaningful way on first load (before the user interacts with sort controls).
Configure how the sort bar appears and what options users have:
Display Sort Bar: Turn this on to show sorting controls to the user. If off, the listing list will remain in default order and users won’t see sort options at the top.
Sort Bar Style: Choose between Default Style (a horizontal bar with possibly separate controls) or Drop Down (a single dropdown menu for sorting). In Side by Side, space is somewhat limited in the listing header area, so using a Drop Down might save space. However, the default style is also fine if you have room.
Available Sort Options: Select which sorting options users can choose from. The typical options include:
Date: sort by published date.
Title: sort alphabetically.
Price: sort by price amount.
Rating: sort by average rating (requires Reviews).
Views: sort by number of views or popularity (requires Stats).
Random: randomize listing order.
You can enable all relevant sorts or limit them. For example, if pricing isn’t used on your site, uncheck Price. If you want to encourage viewing top-rated listings, leave Rating enabled (assuming you have the Reviews addon and ratings data).
On the front-end, the sort bar will appear above the listings (usually right below the search bar, if one is present, or at top of the left panel). Users can change the order in which listings are listed, which updates the list instantly (for large result sets, it may reload that panel).
Use the Search tab to embed a search/filter form directly with your Side by Side view. This is useful if you want users to narrow down the listings they see in the Side by Side view:
Searchable: Toggle to enable or disable search for this shortcode. When enabled, the Side by Side view 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 Side by Side view. 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 Side by Side view:
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.
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.
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 Side by Side view and select it here. That way, users can refine what they see without leaving the page. When AJAX Search is enabled, it typically refreshes the listing panel while keeping the Side by Side layout in place.
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 Side by Side view, 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 Side by Side view.
Exclude CategoriesPro: 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 LocationsPro: 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 TagsPro: 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 FeaturesPro: 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 LabelsPro: 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 AddonRank: Added by the Listdom Rank add-on. Filter listings by rank using minimum and maximum values, or leave them blank to skip ranking filters.
MembershipsMembership: 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 Side by Side 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.
A real estate website uses the Side by Side skin to let users quickly scan through properties. On the left, a list of houses is shown with thumbnail, price, and address. When a user clicks a house, the full property details (photos, description, contact info) load on the right panel. The agent enabled the FavoriteFavorite icon, so users can save interesting properties without leaving the page. Users love this because they can compare details of several homes in one view, using the Load More button to fetch additional listings as they scroll.
Job Board Split View
A job directory implements Side by Side view for job listings. The left panel lists job titles and companies, and the right panel shows the full job description when clicked. A search form at the top lets visitors filter by keyword and location. The site owner chose a 50-50 layout width for a balanced look. With AJAX Search enabled, as soon as a candidate filters for “Engineering” jobs in their city, the left list updates and they can click each job to read details on the right. This fast, interactive experience helps job seekers browse postings much more efficiently.
