Side By Side View Shortcode

Side By Side skin helps you to have directories listed in one column and the details of each of them in the other column. This skin is useful for making directory sites that need a quick review of each item without reloading the page each time.

Table of Contents

👉 Side By Side view is only available on Listdom Pro Addon.

The lists column can be displayed with different widths of 30%, 35%, 40%, 45%, and 50%. Plus, the listings feature image can be disabled.

Configuration Guide

To use the Side By Side skin on your site, first, you should make the appropriate shortcode and then you can use the shortcode anywhere on your site.

In your WordPress admin panel navigate to Listdom → Shortcodes. Press the Add Shortcode button.

Now on the “Add New Shortcode” page, you can build your desired shortcode to show listings in different skins. Here we want to make a Side By Side shortcode.

Let’s review the options:

1. Add Title: Type a name for this shortcode.

2. Skin: Select the skin type. Here we choose Side by Side view.

3. Style: Select the style of the listing cards. You can select either the pre-made style or make new ones with Elementor.

👉 You can build custom styles for listing cards with Listdom Elementor Add-on.

4. Layout Width: Choose the width of the list column and details column. They can be:

  • 50%-50%
  • 45%-55%
  • 40%-60%
  • 35%-65%
  • 30%-70%

5. Limit: Determine the number of items that this shortcode shows.

6. Pagination Method: Select the method of loading more listings.

  • Load More Button: Adds a button at the end of the items. By pressing that the new listings will be loaded without reloading the page.
  • Infinite Scroll: Loads the new items while the user scrolls the directories list down.
  • Disabled: Only shows the items as many as the Limit option.

7. Display Image: Disable or enable the feature image of listings.

The other options on the page are common between different types of skins shortcodes. You can read about Skins Shortcodes Common Settings.

Finally, press the Publish button.

To use this shortcode and show the listings in Side By Side view, you can put the shortcode anywhere on your site.

Responsive Design

Due to appearance concerns, the Side-By-Side skin design in mobile and small screens changes, and the listing details will not be displayed live. The user should click on each listing to load and open the listing details page.

Still Stuck? We’re Here to Help.

Share:

LET'S GET STARTED

Start a directory site today!

Join thousands of Listdom users and build a directory and classified website.

Table of Contents