Elementor Page Builder × Smart Directory Pro

Smart Directory Pro ships with native Elementor support, nine widgets and eleven dynamic tags, all in a dedicated “Smart Directory” widget category in the Elementor panel. You can build a directory homepage, a category archive, a single-listing template, or a custom landing page entirely in Elementor with no shortcode wrangling. Every widget renders through the same templates the rest of the plugin uses, so visual output matches between Elementor-built pages and the auto-generated ones.

Setup: activating both plugins

1. Make sure Elementor (free) is installed and active. The integration uses Elementor’s stable widget API, so the free version is enough for the core widgets. Elementor Pro is only needed if you want to use Smart Directory widgets inside Elementor Pro Theme Builder templates (single-listing template, category archive template).
2. Activate Smart Directory Pro. The widget category appears in Elementor automatically once both plugins are active.
3. Open any page in Elementor. Search the widget panel for “Smart Directory” or scroll to the dedicated category.

The nine Smart Directory widgets

The eleven dynamic tags

Dynamic tags are Elementor’s way of binding a widget setting (button URL, text content, image source, etc.) to a piece of data that resolves at render time. They show up as a small ⚡ icon next to most input fields in Elementor; clicking it lets you pick from any available tag.

Smart Directory Pro registers eleven tags under the “Smart Directory” namespace, all bound to the listing currently being rendered (so they’re most useful inside a Single Listing widget or an Elementor Pro single-listing template):

• {{phone}}, the listing’s phone, perfect for tel: button links.
• {{email}}, the listing’s email.
• {{website_url}}, the listing’s website URL.
• {{address}}, full address.
• {{rating}}, average rating, e.g. 4.5.
• {{review_count}}, number of approved reviews.
• {{opening_hours}}, formatted opening hours block.
• {{latitude}}, for map widgets and structured data.
• {{longitude}}, same.
• {{primary_category}}, the first sdp_category term name.
• {{location}}, the first sdp_location term name.

Walkthrough: building a directory landing page

Step 1. Hero with search

Create a new page, edit with Elementor, drop a Section with a background image. Inside, drop a Heading (“Find every local business in one place”) and a Listing Search widget. In the widget settings, enable the AI/Standard mode toggle if you want users to pick between exact-match and AI semantic search.

Step 2. Featured carousel

Drop a Featured Carousel widget below the hero. In its content tab, set source to “Featured listings” (or top-rated, popular, recent, your call). The carousel autoplays unless you turn that off.

Step 3. Category navigation

Drop a Category Grid. By default it shows every sdp_category with at least one listing, sorted by count. Trim to top 8-12 if you have many; the widget settings include a “Limit” field.

Step 4. Location card mosaic

Drop a Location Card widget. It renders an asymmetric mosaic of sdp_location terms with their cover images. Set the first card as larger by picking “Hero layout” in the widget settings.

Step 5. Save and preview

Publish. End result:

Building a single-listing template

If you have Elementor Pro, you can build a custom single-listing template via Theme Builder:

1. Templates → Add New → Single Post. Pick “Smart Directory Listing” as the post type.
2. Build the layout using regular Elementor widgets (Title, Featured Image, Heading) plus Smart Directory widgets (Single Listing, Listing Reviews).
3. Where you’d normally type static text, like “Call now” button URL, click the ⚡ dynamic tag icon and pick the matching SDP tag (e.g. {{phone}} for tel: links, {{address}} for the address block).
4. Set the “Display Conditions” to “All Smart Directory Listings” so the template applies to every listing.
5. Save. Every single-listing URL now renders through your template.

Styling that survives Elementor

Each widget exposes its own Style tab in the Elementor panel, colours, typography, spacing, hover states. The widgets are designed so that everything that visually matters is controllable from there, without you needing to write custom CSS. A few specific patterns worth knowing:

• Card height & shadow. Listing Grid + Featured Carousel both expose card height, border radius, and shadow controls per breakpoint.
• Empty state styling. The “No listings found” empty state inherits typography from the widget’s regular state, set once.
• Hover effects. Each card supports lift-on-hover, image zoom, or fade overlay. Pick from the Style tab.
• Brand colour. Set the accent in the Listing Grid’s Style tab; it cascades to badges, rating stars, and the hover card on inline mentions.

FAQ

Does this work with Elementor’s free version?

Yes for the widgets themselves. The Theme Builder integration (single-listing template, category archive template) needs Elementor Pro.

Will my existing pages break if I activate Elementor?

No. Smart Directory’s default templates and the shortcodes you’ve used elsewhere keep working untouched. Elementor adds widgets in parallel, it doesn’t replace anything until you explicitly set up a Theme Builder template.

Can I use dynamic tags inside regular Elementor widgets?

Yes. Any Elementor field that has the ⚡ icon supports Smart Directory tags. So you can put {{phone}} in a regular Button widget’s URL field, or {{rating}} in a Heading widget’s text, they resolve at render time on single-listing templates.

What if I’m not using Elementor at all?

The Elementor integration is opt-in. If Elementor isn’t active, the integration code doesn’t load. You can still use SDP’s shortcodes, blocks, or PHP templates exactly as before.

Are the widgets accessible?

Yes, every widget renders through the same templates as the rest of the plugin, which means proper landmark roles, ARIA labels on interactive elements, keyboard navigation on filters, and full visible focus states. The Listing Map widget uses Leaflet’s accessibility-compliant keyboard controls.