IDX Plugin for Elementor, Step by Step

What you get with this integration

• Live, auto-updating MLS listings from your IDX Broker feed directly on your WordPress site.
• A fast, mobile-friendly property search form with filters, map options and location autocomplete.
• Interactive listing widgets anywhere, on the homepage or neighborhood pages.
• IDX search results and listing detail pages that use your site's navigation and footer.
• Lead generation with saved searches, listing alerts and contact forms.
• Indexable MLS content that helps your site rank for local real estate keywords.
• No syncing or manual listing management, and no load on your own server, since IDX Broker serves the data.
• Widget styles customized globally or per widget to match your site's look.

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. The $100 IDX Broker setup fee is waived through us.

Step 1: Add a search form to your page

1. 1 Open the page

   From your WordPress dashboard, go to Pages, find the page you want to edit and click its title.

   
2. 2 Edit with Elementor

   Click the Edit with Elementor button.

   
3. 3 Find the HTML widget

   In the Elementor panel on the left, search for "HTML".

   
4. 4 Place it

   Drag the HTML widget into the section where you want the search form to appear.

   
5. 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. 6 Copy the code

   A popup appears. Copy the code with the green COPY button.

   
7. 7 Paste it in Elementor

   Back in Elementor, paste the code into the HTML widget you just placed.

   
8. 8 Save and preview

   Click Publish or Update and preview the page. The widget appears exactly where you placed it and shows live MLS data 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. By default those pages do not inherit your theme's header and footer. A dynamic wrapper is a special WordPress page that tells IDX Broker where to inject its content, so IDX pages visually match the rest of your site.

1. 1 Create a new page

   In your WordPress admin panel, go to Pages › Add Page.

   
2. 2 Name it and open Elementor

   Name the page something like "IDX Wrapper" and click Edit with Elementor.

   
3. 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. 4 Add a new element

   Click the + icon to add a new element.

   
5. 5 Add the HTML widget

   Search for the HTML widget and drag it into the empty section.

   
6. 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. 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. 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.

   

All IDX Broker pages, like search results and property details, will now load inside your WordPress layout, using your site's header, footer and styles. Your visitors get a seamless, professional look across the entire website.

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. What lives between them is still the layout IDX Broker ships by default. You don't have to design those pages yourself. We publish our own 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 IDX Plugin is set as your 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. Set colors, fonts, button shape, spacing and corner radius once, and they apply to every widget and to 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.

What your Elementor site becomes

• Works with any theme (Astra, Hello, MyHome and others) through Elementor's familiar interface.
• Live MLS listings that update automatically, with no manual uploads or maintenance.
• Visual customization to match your branding without touching code.
• Professional lead generation with contact forms, saved searches and listing alerts.
• IDX pages that inherit your theme's header, footer and styling.

Keep reading