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.
Sorting is fully supported in the Side by Side skin, using the sort bar above the listing list in the left panel.
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).
The Side by Side skin can incorporate a search form to filter the listings in the left panel:
-
Search Shortcode: Select the Listdom Search form you want to use. For example, if you have a search form that includes fields like keyword, category, or location, you might choose that here to let users refine the list of listings.
-
Search Position: Determine where the search form is shown. Common positions for this skin:
- Top: The search form will appear above the listing list (and above the sort bar).
- Bottom: The search form will appear below the listing list.
- Before Listings: In this skin, “Before Listings” typically places the search form in the left panel above the sort bar but after any map (since there’s no map here, it’s effectively the same as Top).
- Left/Right: These would place the search form in a side column. The Side by Side layout doesn’t have an extra side column aside from the main split, so left/right are generally not applicable; stick to Top or Bottom.
In practice, Top is often used so users see search filters immediately.
-
AJAX Search: Enable this to make the search filter the listings dynamically without a full page reload. In the Side by Side context, AJAX search will refresh the left panel list to show results matching the search criteria, while keeping the right panel intact or updating it if needed. If disabled, using the search will reload the entire page to show filtered results in the same Side by Side layout. AJAX is smoother and is supported in Pro. (Listdom Lite will default to page reload since AJAX is a pro feature.)
For example, you might include a search form with category and location filters at the top of the page. A user can select a category to narrow down the listing list on the left, and the results will update instantly (with AJAX on) showing only listings from that category. They can then click on any listing to see details on the right.
Remember, the search form fields themselves are configured when you create the search shortcode. Here you’re just placing that form in the layout.
As with other skins, you can pre-filter which listings are shown in the Side by Side view using filter options. This is handy for making a specific page that only shows certain listings (for example, “Top 10 NYC Restaurants” could be a side-by-side list filtered to NYC and a specific tag).
The filter fields are the same as described for other skins:
- Include/Exclude Categories: Limit the listings by category. Include only certain categories (and implicitly exclude others), or explicitly exclude some categories.
- Include/Exclude Locations: Likewise, filter listings by location taxonomy.
- Include/Exclude Tags: Filter by listing tags.
- Include/Exclude Features: Filter by features (amenities).
- Include/Exclude Labels: Filter by labels (requires Labelize).
- Include/Exclude Authors: Filter by the author (listing owner).
For example, if this shortcode is meant to show “My Listings” for a particular agent, you might set Include Authors to that agent’s user account. Or to show only “Open House” properties, you might include a certain tag and exclude any that are sold.
The logic is the same: multiple includes mean listings must meet all includes; excludes remove any matching listing. These filters apply before the listings are displayed and before any user search. The user’s search will then act within the subset defined by these filters.
Use these settings to tailor the content of the Side by Side view to your needs.
Real Estate Listings Browser
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 Favorite Favorite 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.
