IDX Plugin for Elementor, Step by Step
The full Elementor setup, from pasting your first search form to making the IDX Broker pages match your site.
Written by IDX Plugin, an independent IDX Broker Developer Partner, not affiliated with IDX Broker.
On this page
In short
- Search and listings sit anywhere on your Elementor pages.
- Your IDX pages carry your header, footer and styling.
- We add our own templates, so IDX pages look like your site.
- Needs an IDX Broker account and a free IDX Plugin account.
The search form and the listing row below are live. This is what an Elementor HTML widget renders once you paste the code.
You need a WordPress site with Elementor, an IDX Broker account for the MLS data, and a free IDX Plugin account where you create and style the widgets. No IDX Broker account yet? You open your own through our link, we help you pick a plan and set it up, with the $100 setup fee waived through us.
Step 1: Add a search form to your page
-
1
Open the page
From your WordPress dashboard, go to Pages, find the page you want to edit and click its title.
-
2
Edit with Elementor
Click the Edit with Elementor button.
-
3
Find the HTML widget
In the Elementor panel on the left, search for "HTML".
-
4
Place it
Drag the HTML widget into the section where you want the search form to appear.
-
5
Get your embed code
Open your IDX Plugin dashboard. Find the widget you want to use, click the three-dot menu and choose Show Embed Code.
-
6
Copy the code
A popup appears. Copy the code with the green COPY button.
-
7
Paste it in Elementor
Back in Elementor, paste the code into the HTML widget you just placed.
-
8
Save and preview
Click Publish or Update and preview the page. The widget appears exactly where you placed it and shows the data from your IDX Broker account in your site's styling.
Step 2: Show IDX pages inside your WordPress layout with a dynamic wrapper
IDX Broker generates its own pages for search results, listing details and lead tools like Schedule a Showing or Home Valuation. A dynamic wrapper is a special WordPress page that tells IDX Broker where to inject its content, so your header and footer sit around every IDX page.
-
1
Create a new page
In your WordPress admin panel, go to Pages › Add New Page.
-
2
Name it and open Elementor
Name the page something like "IDX Wrapper" and click Edit with Elementor.
-
3
Set the page layout
Click the cogwheel icon in the lower-left corner to open Page Settings. Choose a layout like Page No Title so only your header and footer show, with an empty middle area for IDX Broker's content.
-
4
Add a new element
Click the + icon to add a new element.
-
5
Add the HTML widget
Search for the HTML widget and drag it into the empty section.
-
6
Paste the wrapper tags
Paste the two tags shown below. They mark the beginning and end of where IDX Broker inserts its content.
-
7
Publish and copy the URL
Click Publish and copy the full URL of your new page, for example https://your-site.com/idx-wrapper.
-
8
Set the wrapper in IDX Broker
Log in to IDX Broker, go to Design › Website › Wrappers, open the Global tab, paste the URL into the Dynamic URL field and click Save Changes. IDX Broker keeps a cached copy of the wrapper page, which you can refresh on this same screen after you change the page.
<div id="idxStart"></div><div id="idxStop"></div>All IDX Broker pages, like search results and property details, now load inside your WordPress layout, using your site's header, footer and styles.
Step 3: Put your own layout on the IDX pages
The wrapper solved the frame: your header and footer now sit around every IDX page. Our page templates set the layout in between, so you do not have to design those pages yourself. We publish our templates into your IDX Broker account and you activate them page by page, a few minutes of clicking. Here is the search results page, the one visitors spend the most time on, running on our template. It links to the live version, open it and run a search.
The templates appear in your account once we are assigned as your IDX Broker Developer Partner, which is free. Which template goes with which page, and how to switch them, is covered in How Our IDX Broker Templates Work.
Step 4: Style everything to match your website
With the templates in place, one set of style settings covers the whole path: the search form on your page, the listing widgets and the IDX pages. There are two levels, global and per widget.
Global Styles
In your dashboard, open Global Styles. Colors, typography, spacing and effects live in one place, and they carry across your widgets and the IDX pages you just switched over.
Individual widget styling
If you want a specific widget to have a different look, for example a homepage search form that pops, open the widget from your dashboard, go to the Appearance tab and adjust background, padding, text size and more. These changes apply only to that widget.
Ready to get started?
Create a free IDX Plugin account and start adding widgets today. If you have questions at any step, our team will help you through the setup.
Get Started, it's free You only pay IDX Broker. The $100 setup fee is waived through us.