Skip to main content
Download pre-made MyListing Elementor Kit templates from the MyListing Pro community to get a jumpstart. When instructions ask you to create a new template, remember that these templates are available.
MyListing Elementor Kit widgets are designated with a letter so you know where each widget typically applies. It doesn’t mean it’s the only place they can be used.
If the styling applied through the MyListing Elementor Kit isn’t taking effect, check for any custom CSS added to your site (e.g., code snippets), as it may be overriding your templates.
No. The Elementor module covers listing contact forms, header CTA popups, Elementor Coming Soon Bypass, sortable template columns, and other related admin tools. MyListing Elementor Kit gives you complete freedom to build areas of the MyListing theme with Elementor.
  • MyListing Pro with MyListing Elementor Kit enabled
  • MyListing Theme
  • WooCommerce
  • Elementor & Elementor Pro
My clients receive Elementor Pro for free.

​
Headers

Headers are the site-wide (or per-page) navigation bars that visitors typically see on every page. MyListing’s default header is powerful, but you can only have one header across your site, and customizing it often requires custom development. MyListing Elementor Kit lets you build your header any way you want, using Elementor, while including MyListing’s default elements (Quick Search, Direct Messaging, Cart Modal, User Menu, and more.)
We give you a pre-made header template that 100% replicates the default MyListing header to give you a jumpstart so you can learn how to put everything together.
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Elementor → Editor → Theme Builder
  3. **Add New Template → Template Type → **Header
  4. Give your template a meaningful name for easy identification and start building
  5. Build out your template as desired
  6. Elementor Publish Button Dropdown → Display Conditions → Add Condition → Select the desired condition (Note: Your site can have as many headers as you would like. Using Elementor’s Display Conditions, you can assign a header to your entire site, to select pages, to select listing types, etc.)
  7. Publish

​
Single Listings

While the MyListing default single listing builder is powerful, one of the most requested features of the MyListing community is to build listings with Elementor. MyListing Elementor Kit brings you this much-awaited feature, giving website owners the ability to build listings using any Elementor widget.
Before you jump in and start building a template, it’s highly recommended that you first edit the pre-made Single Listing template so you have an idea of how the pieces go together.
Your site can have as many Single Listing templates as you would like. Using Elementor’s Display Conditions, you can assign a Single Listing template to all listing types, select listing types, or select listings.
While you have the freedom to use any Elementor widget, not every widget lets you add a block heading and icon, similar to what MyListing allows by default. The Listing Block widget gives you that capability. Ensure that widgets needing a label and/or icon are added as a child, under the Listing Block widget, within the Elementor editor.To learn more, refer to the MyListing Elementor Kit - Single Listings video on the MyListing Club YouTube channel or edit the pre-made Single Listing template to see how it’s done.
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Elementor → Editor → Theme Builder
  3. **Add New Template → Template Type → **Single Post
  4. Give your template a meaningful name for easy identification and start building
  5. Build out your template as desired
  6. Elementor Publish Button Dropdown → Display Conditions → Add Condition → Select the desired condition
  7. Publish

​
Shortcode

The Shortcode widget outputs listing data. Use it within the following templates: What You Can Fill In Type a field key from the listing type, like [[phone]] or [[price]]. On a listing page or card, the widget replaces it with that listing’s text.
If any placeholder in the box produces an empty result, the shortcode will fail.Example: If you enter [[title]] - [[tagline]] but the listing doesn’t have a tagline, there will be no output. i.e., the listing title [[title]] will not show either.So use Shortcodes with fields you know most listings have, or split important text into its own Shortcode widget so that one missing field does not wipe out the rest.
You can also use fields you added yourself. In the listing type editor, copy the field’s key and wrap it in double brackets, like [[price]]. Some fields can show a cleaner version of the value:
  • Dropdown: [[price.label]] shows the choice people see, not the hidden stored value
  • Date: [[event-date.date]] shows only the date, [[event-date.time]] shows only the time
  • Upcoming event date: [[event-date]] shows the next date
Extra Listing Info These fields are not included in the listing type, but they can still be filled in from the listing. These look almost the same, but they are two different dates.
  • [[:date]] (with the colon) is when the listing went live on the site.
  • [[date]] (no colon) is a date the listing owner typed in, such as an event date or founding date. That only works if the listing type has a field whose key is date.
Add the colon if you want the date the listing was published. Leave the colon out if you want a date the owner entered on the listing.

​
Action Button

The Action Button widget adds a listing-aware button with a ton of possible actions (call, directions, bookmark, share, Quick View, claim, message, and more, or a manual URL when you need a normal link). Style it like any Elementor button. Use it within the following templates: Usage examples:
  • Leave a Review: Takes the user to the Review feature
  • Report: Takes the user to the Report feature
  • Claim: Takes the user to the Claim feature if claiming is allowed
  • Share: Opens the share options for this listing
  • Message: Starts a conversation with the owner
  • And more!
  • Quick View: Peek without leaving the feed
  • Bookmark: Save the listing
  • Call Now or Get Directions: Do the action without opening the full listing
  • And more!
  • Call Now, Website, Get Directions, Message: Do the action without opening the full listing
  • Bookmark or Share: Save the listing or share after the peek
  • View Listing: Open the full listing
  • And more!
  • View Listing: Open the full listing
  • Call Now, Get Directions, Website: Do the action without opening the full listing
  • Bookmark: Shows already saved with the ability to remove the save
  • And more!
Yes. There’s a Track Clicks in Analytics setting that you can turn on within the Action Button widget.Action Button clicks are reported in the Button Clicks area of the MyListing stats dashboard (/my-account/).

​
EmbedSocial

Shows EmbedSocial reviews (e.g., Google Views) within a Single Listing template. This widget can read from two Widget ID Sources:
  • A listing field (e.g., [[google-reviews]]), which is the most common usage
  • A single hardcoded Custom Widget ID
MyListing Elementor Kit loads EmbedSocial’s official script. If the listing has no ID, the block stays hidden on the live page.

​
Preview Cards

Preview cards are the listing cards visitors see in Explore, listing feeds, Similar Listings, Related Listings, and other listing grids. MyListing Elementor Kit gives you complete freedom to build Listing Preview Card templates with Elementor, replacing the default MyListing cards. You design the card with Elementor widgets such as Card Cover, Card Title, Card Meta, Card Footer, Card Gallery, Card Logo, Bookmark Listing, Compare Listing, Priority Badge, and Verified Badge. Optionally, you can make the entire Listing Preview Card clickable, which is something you can’t do with MyListing’s default cards.
No. Listing Previews is for those who want to use static, custom-built Listing Preview designs. MyListing Elementor Kit gives you complete freedom to build custom Listing Previews with Elementor.
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Elementor → Editor → Theme Builder
  3. **Add New Template → Template Type → **MyListing Preview Card
  4. Give your template a meaningful name for easy identification and start building
  5. From the list of Elementor widgets, add the Preview Card widget to the page
  6. Build out your template as desired
  7. Elementor Publish Button Dropdown → Display Conditions → Add Condition → Select the desired condition
  8. Publish
  9. Edit Listing Type → Preview Card → Preview Card → Design → Template → Choose the template you just created
  10. Save Changes
  11. View the Explore page, a listing feed, etc., that displays the listing type, and confirm that your new card design appears
  12. OPTIONAL: MyListing Pro → MyListing Elementor Kit → General → Make Preview Cards Clickable → Enable this to make the entire Listing Preview Card clickable, which you can’t do with MyListing’s default cards

​
Quick View

Quick View is the popup or overlay that visitors can open from a listing card without going to the full listing page, and it’s a feature provided by default with the MyListing theme. MyListing Elementor Kit gives you the ability to create and fully customize unique Quick Views.
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Elementor → Editor → Theme Builder
  3. **Add New Template → Template Type → **MyListing Quick View
  4. Give your template a meaningful name for easy identification and start building
  5. From the list of Elementor widgets, add the Quick View widget to the page
  6. Build out your template as desired
  7. Publish
  8. Edit Listing Type → Preview Card → Quick View → Design → Template → Choose the template you just created
  9. Save Changes
  10. View the Explore page, a listing feed, etc., that displays the listing type, and confirm that your new design appears
No. You can use MyListing’s default Preview Cards while using custom Quick Views.
Yes. One thing is being able to display working links from text-based fields. For example, MyListing’s Quick Views strip out links from Description field, whereas MyListing Elementor Kit display them as working links with proper styling.

​
Listing Feeds

Listing Feeds display a grid or carousel of listings on any Elementor page. MyListing’s default Listing Feed widget is powerful and flexible. MyListing Elementor Kit offers even more features with its Listing Feed widget.
  • Block Heading: Add a label and icon above the feed.
  • Listing Previews: Pull in your custom Preview Card templates created with MyListing Elementor Kit.
  • Styling: Apply custom styling to the Block Heading (Label and Icon) or the feed itself (background, border, padding, box shadow, etc.).
  • Custom Preview Cards: Choose a custom Preview Card template to apply unique styling per feed.
You have two options for populating the feeds. Use the default Preview Cards or use custom Preview Card templates.MyListing Default Preview Cards
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Publish at least one Preview Card template
  3. Edit the listing type, open Preview Card, and select that template
  4. Edit a page with Elementor and add the Listing Feed widget
  5. Adjust the Listing Feed settings as desired
  6. Publish
Custom Preview Cards (MyListing Pro)
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Publish at least one Preview Card template
  3. Edit a page with Elementor and add the Listing Feed widget
  4. Listing Feed → Preview Card → Choose the Preview Card template
  5. Adjust the remaining Listing Feed settings as desired
  6. Publish
MyListing provides Quick Search functionality for their header (Theme Tools → Theme Options → Header → Show Quick Search) and the ability to create a Quick Search shortcode (Theme Tools → Shortcodes → Quick Search) that you can drop anywhere on your site. MyListing’s Quick Search has done the job until now, but that’s because we didn’t have anything better. MyListing Elementor Kit gives you MyListing search capabilities on steroids through a highly customizable Elmentor widget.
  • Sources: Choose to search all listing types, specific listing types, categories, regions, tags, custom taxonomies, and blog posts.
  • Skins: Choose between Classic, Minimal, and Full Screen.
  • Button: Attach a button to your search input and have complete control over its design and functionality (label, icon, link, colors, etc.).
  • No Results: Unlike MyListing defaults, you can style the search when there are no results to show, including the ability to set a custom link.
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Edit an element (page, post, template, etc.) with Elementor
  3. Add the MyListing Elementor Kit Search widget to the page
  4. Customize the Search styling as desired
  5. Select the sources (listing types, categories, regions, etc.) that can return Search results

​
Account Dashboard

Before diving into the information below, optionally learn more about the MyListing Account Dashboard as part of MyListing 101.

​
Stats

MyListing provides a My Account endpoint (/my-account/) where listing owners see analytics (Listing Stats) for their listings. They can filter by listing type or per-listing stats. Theme Tools → Listing Stats controls which stat blocks appear. Users who cannot add listings will see a simpler alternate dashboard. MyListing doesn’t provide any customization options for this page. MyListing Elementor Kit gives you complete freedom to build this endpoint with Elementor.
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Elementor → Editor → Theme Builder
  3. **Add New Template → Template Type → **Page
  4. Give your template a meaningful name for easy identification and start building
  5. Build out your template as desired
  6. Publish
  7. MyListing Pro → WooCommerce → My Account → Account Endpoints Manager → Dashboard (/my-account/) → Content → Select the template you created above
  8. Review the **Stats **page as a logged-in user

​
Bookmarks

MyListing provides a Bookmarks endpoint (/my-account/my-bookmarks) that displays the listings saved by users. The listings are displayed as cards. There’s very little you can do to customize the Bookmark Cards or the Bookmarks Page itself. MyListing Elementor Kit gives you complete freedom to design the Bookmark Cards, Bookmark Feed, and the Bookmarks Page (endpoint).
Once you go down the path of using custom Bookmarks with MyListing Elementor Kit, you must be prepared to use/complete all phases (Bookmark Card, Bookmarks Feed, and Bookmarks Page.)

​
Bookmark Card

The Bookmark Card widget automatically sets you up with the Card Cover and Card Footer widgets to give you a jumpstart. We start you off with a design that resembles MyListing Preview Cards, but you can add/remove Elementor widgets as desired. When saved as a MyListing Bookmark Card template, your design can be pulled into the Boomarks Feed widget.

​
Bookmark Feed

The Bookmark Feed widget shows the logged-in user’s saved listings as Bookmark Cards. Add this widget to a MyListing Account Bookmarks template and choose your desired MyListing Bookmark Card template. The Bookmark Feed widget lets you filter the feed by listing type, which is useful for building unique Bookmark Page pages (endpoints) under our WooCommerce module with unique Bookmark Card designs for each.

​
Bookmarks Page

Once you have your Bookmark Card and Bookmarks Feed ready to go, it’s time to build and design the Bookmarks Page.
  1. MyListing Pro → MyListing Elementor Kit → Enable
  2. Elementor → Editor → Theme Builder
  3. Add New Template → Template Type → MyListing Bookmark Card
  4. Give your template a meaningful name for easy identification and start building
  5. From the list of Elementor widgets, add the Bookmark Card widget to the page
  6. Finish building out your template as desired and publish it
  7. Elementor → Editor → Theme Builder
  8. **Add New Template → Template Type → **Page
  9. Give your template a meaningful name for easy identification and start building
  10. From the list of Elementor widgets, add the **Bookmark Feed **widget to the page
  11. Click on the Bookmark Feed widget 
  12. Content → Bookmark Card dropdown → Choose the Bookmark Card template from the  previous steps
  13. Finish building out your template as desired and publish it
  14. MyListing Pro → WooCommerce → My Account → Account Endpoints Manager → Bookmarks (/my-bookmarks/) → Content → Select the template you created above
  15. Review the Bookmarks page as a logged-in user

​
Listing Count

Listing Count outputs the total number of published listings. You can count the whole directory or restrict the total using widget filters. You can display digits only or a number plus customizable singular/plural labels.

​
Listing Terms

We cloned the MyListing Listing Terms widget, which lets you show a grid of MyListing taxonomies (category, region, tag, or custom taxonomy) and the number of associated listings that are published across the entire site. Then we enhanced it, adding the ability to dynamically filter the taxonomy grid based on the listing type, which is super handy for building dynamic SEO-optimized pages.
Let’s look at an example scenario where we are building listing type pages for SEO purposes, and one of our listing types is Business. The goal is to dynamically display a grid for a specific MyListing taxonomy based on the listing type page.
  1. Create a page named Business, which naturally then has a URL slug of domain[.com]/business
  2. Add our Listing Terms widget to the page
  3. Listing Terms → Taxonomy → Choose the taxonomy to display
  4. Listing Terms → Terms Source → Listing Type
  5. Configure the rest of the widget as desired
  6. Save changes
Now, when the Business page is visited, the taxonomy grid will automatically show the taxonomy you chose for only listings under that listing type. So, let’s say you chose Coffee Shop as your Category to show. The grid will display all published Coffee Shop listings under the Business listing type.