Elementor Addon Documentation

The Listdom Elementor Addon enhances your listing experience by allowing you to design the Listing Details Page, Listing Cards, and Map InfoWindows with the powerful Elementor page builder. It offers flexibility and control over how your listing elements are displayed, letting you create custom designs to match your website's aesthetics.

Table of Contents

Installation and Setup

Once you install and activate the Listdom Elementor Addon, you’ll notice a new section in the Listdom → Settings → Addons tab, confirming that the addon has been successfully installed.

Additionally, a new Elementor Style menu appears in the Listdom section, which allows you to add and customize different layout styles. Click on the Add Style button to create a new style.

On the “Add New Style” page:

  1. Enter a name for the style.
  2. Select the Style type. The available options are
    • Listing Detail: Customize the design of your listings’ detail pages.
    • Listing Card: Control the layout of how individual listings appear in grid, list, etc. formats.
    • Map Infowindow: Define how listings are shown when a user clicks on them on a map.
  3. Finally, click on the “Edit with Elementor” button to edit the style.

Listing Details Page Style

The Listing Details Page is where all the comprehensive information about a particular listing is displayed. This page can include elements like titles, images, owner details, reviews, features, pricing, availability, and more.

Using the Listdom Elementor Addon, you can design this page by adding and arranging widgets to match your desired layout. For example, you might want to prominently feature the listing’s images at the top with contact details and availability below. By creating different designs for various types of listings, you can control the layout for each category, improving user experience.

Once you design the page, you can assign the style to the listings in different levels e.g. global style, category style, package style, and individual listing style.

Listing Cards Style

Listing Cards represent a more compact version of listing data, often used in grid or list views where multiple listings are displayed at once. They typically show a summary of the key details, such as the title, price, main image, and a brief description or excerpt.

With the Listdom Elementor Addon, you can fully control the layout and appearance of these listing cards by adjusting elements like:

  • Listing Title: Displays the name of the listing prominently.
  • Listing Image: Displays the main image of the listing, often used as a background or primary visual element.
  • Price: You can showcase the listing price clearly for quick user reference.

You can style these cards using the available Elementor widgets and assign them for different Listdom views and skins, creating a sleek and customized presentation.

Map InfoWindows Style

Map InfoWindows are small pop-up windows that display key information about a listing when a user clicks on a marker within a map. These are crucial for providing users with a quick glimpse of the listing without needing to open the full details page.

With the Listdom Elementor Addon, you can customize what information appears in the infoWindow. This could include:

  • Listing Title: The name of the listing.
  • Listing Address: The location of the listing.
  • External Direction Link: Show a text and icon that are linked to the external direction app/website.
  • Main Image: A thumbnail or small image for visual context.
  • Price: For listings where cost is important, the price can be highlighted.

By styling the map InfoWindow with Elementor, you can ensure it aligns with your site’s design and serves as a useful tool for quick information access.

Listdom Elementor Widgets

In addition to the customizable layout elements, the Listdom Elementor Addon introduces a set of widgets that can be used to build and design the Listing Details Page, Listing Cards, and Map InfoWindows. Here’s a more detailed explanation of each widget:

  1. Listing Title: Adds the listing’s title. Style it with different fonts, colors, and placements.
  2. Listing Address: Shows the listing’s address, which can be customized with different text layouts.
  3. Claim Button: Allows users to claim ownership of a listing.
  4. Favorite Button: Lets users mark a listing as a favorite for later viewing.
  5. Listing Locations: Displays one or multiple locations of the listing.
  6. Listing Owner: Shows who owns or manages the listing.
  7. Report Abuse: A form allowing users to report inappropriate content.
  8. Listing Attributes: Lists the specific attributes or features of the listing.
  9. Listing Availability: Shows whether the listing is currently available today or not.
  10. Listing Categories: Displays the categories the listing belongs to.
  11. Listing Content: Displays the full content or description of the listing.
  12. Listing Excerpt: A shortened version of the listing description, perfect for previews.
  13. Listing Remark: Adds a remark or special note related to the listing.
  14. Listing Features: Lists the unique features of the listing (e.g., pet-friendly, parking).
  15. Listing Map: Embeds a map of the listing location.
  16. Listing Image: Displays the main image associated with the listing.
  17. Listing Gallery: Adds a gallery of images related to the listing.
  18. Listing Embeds: Allows embedding of videos, virtual tours, or other media.
  19. Listing Labels: Displays any custom labels (e.g., “Featured”).
  20. Listing Price: Shows the listing’s price.
  21. Listing Price Class: Adds information about the pricing tier.
  22. Listing Share: Adds social sharing buttons.
  23. Listing Tags: Shows the tags associated with the listing.
  24. Contact Info: Displays the listing’s contact information.
  25. External Direction: Show a text and icon that are linked to the external direction app/website.
  26. ACF Addon: Custom fields can be added and styled if using the ACF Addon.
  27. Franchise Addon: Displays the information of the parent or child listing.
  28. Auction Addon: Displays auction-related information when using the Auction Addon.
  29. Stats Addon: Shows stats related to the listing’s views or interactions.
  30. Booking Addon: Adds booking functionality if the Booking Addon is installed.
  31. Review Addon: Displays reviews and ratings form for the listing.
  32. Jobs Addon: If the Jobs Addon is enabled, this widget shows the application form.

These widgets give you extensive control over how listings are displayed, letting you create unique and appealing designs that reflect the nature of your site and listings.

Elementor Pro Dynamic Tags

The Elementor Pro Dynamic Tags feature adds incredible flexibility to your designs by allowing you to integrate dynamic content into your Elementor templates. With the Listdom Elementor Addon, you can seamlessly use listing attributes as dynamic content within Elementor Pro.

Dynamic content in Elementor Pro enables you to assign unique, data-driven content to various fields in your design. For instance, when creating a listing details page, you might want a button to display a unique link for each listing. This is easily achieved by using a custom field (attribute) to store the link for each listing. Then, in Elementor Pro, you can configure the button to dynamically retrieve and display the corresponding URL from the custom field.

This functionality is particularly useful for creating tailored user experiences, such as:

  • Displaying specific images, titles, or descriptions for each listing.
  • Generating unique call-to-action links based on listing data.
  • Showcasing attributes like prices, contact details, or locations dynamically.

By leveraging Elementor Pro Dynamic Tags in combination with Listdom’s attributes, you can ensure your pages are not only visually appealing but also dynamically driven and content-rich.

There are also other elements of the listings available in the dynamic tags. For example the listing URL, listing image, listing title, etc.

Final Thoughts

The Listdom Elementor Addon makes customizing listing displays within your website much easier by combining the power of Elementor with the versatility of Listdom. By using the Elementor widgets provided by this addon, you can create unique and highly functional layouts for Listing Details Pages, Listing Cards, and Map InfoWindows to meet your website’s design needs. For more information on the addon, you can refer to the following resources:

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