The Directorist Elementor Integration allows you to build and customize Directorist pages using the Elementor editor. It provides dedicated Directorist widgets for listing information, custom fields, search results, archive pages, author information, reviews, and other directory content.
You can use the integration in two ways:
- Design regular WordPress pages using Directorist Elementor widgets.
- Create dynamic Directorist templates through Elementor Theme Builder.
This guide explains the requirements, where to find the available options, and how to choose the appropriate workflow.
Requirements #
Before getting started, make sure the following plugins are installed and activated:
- Directorist Core Plugin
- Elementor & Elementor Pro
- Directorist Elementor Integration
Elementor Pro is required when creating dynamic Directorist templates through Elementor Theme Builder.
Depending on the widgets used in a template, you may also need the corresponding Directorist extension. For example, a widget associated with a separate Directorist extension may not render its content when that extension is inactive.
Step -1: Install and activate the extension #
To install Directorist Elementor Integration:
- Go to WordPress Dashboard → Plugins → Add New Plugin.
- Click Upload Plugin.
- Select the Directorist Elementor Integration ZIP file.
- Click Install Now.
- After installation, click Activate Plugin.
Once activated, the extension adds Directorist widgets to the Elementor editor and registers Directorist-specific template types in Elementor Theme Builder.
Two Primary Workflows: #
1. Design a static WordPress page #
Use this method when creating a regular page such as:
- All Listings
- All Categories
- All Locations
- Homepage Search
- Pricing Plans
- Author Profile
- A custom directory landing page
In this workflow, you create a WordPress page, open it with Elementor, and add the required Directorist widgets.
2. Create a dynamic Directorist template #
Use this method when designing a layout that should be applied dynamically to Directorist content, such as:
- Single listings
- Listing category archives
- Listing location archives
- Listing tag archives
- Author profiles
- Homepage search results
Dynamic templates are created through Elementor Theme Builder and applied using display conditions.
Find Directorist widgets in Elementor #
After activating the extension, open a page or Directorist template with Elementor.
The available widgets are organized into several groups in the Elementor widget panel.
Directorist Listings Archive #
This group contains widgets intended for directory pages and listing collections, including widgets such as:
- Listings Loop
- Homepage Search
- Pricing Plans
- Author Profile
- All Listings
- All Categories
- All Locations
- Map Card Template
Directorist Others Fields #
This group contains listing actions and larger functional components, including:
- Back
- Bookmark
- Share
- Report
- Author Info
- Review
- Claim Listing
- Contact Owner Form
- Related Listings
Additional widgets may appear when their corresponding Directorist extensions are active.
Directorist Preset Fields #
This group contains common listing information provided by Directorist, including:
- Listing Title
- Listing Address
- Listing Category
- Listing Pricing
- Listing Rating
- Listing Phone
- Listing Email
- Listing Website
- Listing Images Slider
- Listing Thumbnail
- Description
- Listing Location
- Gallery
- Booking
- FAQ
The available widgets may vary according to the installed Directorist extensions.
Directorist Custom Fields #
This group allows you to display fields created through the Directorist Directory Builder.
The available widget types include:
- Custom Text
- Custom Number
- Custom Select
- Custom Checkbox
After adding one of these widgets, select the specific Directorist custom field from the widget settings.
Workflow 1: Design a static page #
To use Directorist widgets on a regular WordPress page:
- Go to WordPress Dashboard → Pages → Add New Page.
- Enter a title for the page.
- Click Edit with Elementor.
- Find the required Directorist widget in the Elementor panel.
- Drag the widget into the page layout.
- Configure its content, layout, and style settings.
- Add any other required Elementor or Directorist widgets.
- Publish the page.
These are native Elementor widgets provided by the integration. They are not rendered through the standard Directorist shortcodes.
Because of this, the design may not inherit customizations that specifically target Directorist’s shortcode-rendered layouts. This includes certain styles or layout modifications added by other extensions.
Workflow 2: Create a Directorist template #
Directorist templates are available inside Elementor Theme Builder.
To find them:
- Go to WordPress Dashboard → Elementor → Theme Builder.
- Review the available template types in the left sidebar.
- Select the template type you want to create.
- Click Add New.
- Build the template using Directorist and Elementor widgets.
- Configure the applicable display conditions.
- Publish the template.
When Directorist Multi Directory is being used, Elementor Theme Builder can provide a separate Single Listing template type for each directory.
This allows each directory type to have a different listing-page design.
Go to Elementor → Theme Builder.
Capture the complete Theme Builder screen with the left sidebar visible.
Highlight or add a red outline around the Directorist template types:
- Single Listing: Rent
- Single Listing: Sell
- Listing Category Archive
- Listing Location Archive
- Listing Tag Archive
- Author Profile
- Homepage Search Result
Do not highlight Elementor’s native Header, Footer, Single Post, Single Page, Archive, Search Results, Loop Item, or Error 404 template types.
Create a directory-specific single-listing template #
To create a template for a particular directory:
- Open Elementor → Theme Builder.
- Select the appropriate directory-specific template from the left sidebar. For example, select Single Listing: Rent.
- Click Add New.
- Close the Elementor template library if you want to begin with an empty layout.
- Add a container to the canvas.
- Add the required Directorist widgets.
- Save the template as a draft or proceed to configure its display conditions.
Display a Directorist custom field #
Custom-field widgets must be connected to fields created in the relevant Directorist directory type.
For example, to display a custom text field:
- Add the Custom Text widget to the template.
- Open the widget’s Content settings.
- Use Preview Listing to select a listing when preview data is required.
- Open the Custom Field option.
- Select the field that should be displayed.
- Choose whether to show its icon and label.
- Configure the HTML tag where appropriate.
Only compatible custom fields from the applicable directory type will be available for selection.
For example:
- Custom Text displays text fields.
- Custom Number displays number fields.
- Custom Select displays dropdown fields.
- Custom Checkbox displays checkbox fields.
Preview listing data #
A template may appear empty when the selected preview listing does not contain data for a particular field.
When a widget provides a Preview Listing option:
- Open the widget’s Content settings.
- Select a listing from the relevant directory type.
- Confirm that the listing contains values for the fields being used.
The preview listing is used only inside the Elementor editor. It does not restrict the published template to that listing unless a corresponding display condition is configured.
Save and publish the template #
Elementor provides the following options for a Directorist template:
- Save Draft
- Save as Template
- Display Conditions
- Publish
Use Save Draft when the template is not ready to be displayed on the website.
Before publishing, configure the display conditions to control where the template will be used. Depending on the template type, conditions can target a directory type, taxonomy archive, or individual listing.
Difference Between Static pages and Theme Builder templates #
| Static Pages | Theme Builder |
|---|---|
| A static page is a regular WordPress page containing one or more Directorist Elementor widgets. | A Theme Builder template is a dynamic layout that Elementor applies to matching Directorist content. |
| Use a static page when you need a fixed page with a specific collection or directory component. | Use a Theme Builder template when the same layout must dynamically display information from different listings, categories, locations, tags, or authors. |
