How to Build a Real Estate Website in Elementor
Building a real estate website in Elementor is not a complex task if you utilize the correct tools and plugins.
This example does not require purchasing a template as the entire structure will be created manually, without much effort. This gives you complete control over the look and functionality of the site and an opportunity to create data fields and filters that you may need. You will need two crucial plugins from the crocoblock family – JetEngine, and JetSmartFilters. These plugins are tested, reliable, and worth the investment. Jet Engine is a tool to create all custom post types, taxonomies, and custom fields. Smart filters will allow us to create an array of real estate filtering options, including dependent search fields. All other functionality will be created using Elementor. Follow the screenshots to set up your website.
1. Step 1 – Create the correct infrastructure
For the website to run correctly, we recommend using a light theme. If you are committed to the theme you always use, just remember that the theme is just a necessity from a WordPress dev perspective, but it does not necessarily create the infrastructure you will need to build a real estate website. All elements, including the header and footer, are created in Elementor, hence there is no need to use a complex theme.
2. Step 2 – Build out your pages and menus.
As with any website, you will have to build out the content first. Build and design your pages in Elementor and leave spaces for your listings display. We will be implementing a listing grid in places where you want to display the listing preview cards. You can refer to other parts of our blog to learn how to build Elementor pages and complete a real estate website in Elementor.
3. Step 3 – Building out Property and Agent Post Types
Go to JetEngine> Post Types > Add New
- First, you will create a Property Post Type.
- Under the Property Post Type you will add all of the property meta fields like Price, SF, Rooms, and Bedrooms. This has to include each field that you want to feature inside of each listing. Expand the screenshot below to see all of the fields we have included. The meta field must be assigned the proper Field Type. You will have many options, but remember, if you want that field to have a slider in the filter, you will have to use a number field.
- For your Photo Gallery, we have included a screenshot – you want to select “Gallery” and for Value Format “Media URL”. The majority of your other fields will be text fields (like City, address, etc.).
- Do not include fields that you want to use as taxonomies (These may include the following listing status: active, sold; state or country, listing type: single family, condo, etc.). In the next step, we will create taxonomies.
4. Step 4 – Create Taxonomies
Go to JetEngine> Taxonomies > Add New
In the below screenshot, you can see the complete list of taxonomies we have created for this website. There is a set attached to the Property Post Type and Agent Post Type depending on what situation your setup requires. You can decide what taxonomies to include. You will see that the taxonomy has to be attached to a “Post Type”. That’s where you will make the selection. In the Advanced Settings tab you can keep all of the out-of-the-box toggles but if you want the taxonomy to have a hierarchy like a standard category would, in the
5. Step 5 – Agent Setup
You will repeat the above two steps for the agent fields.
6. Step 6 – Creating a Connection Between Real Estate Agent and Listing in Elementor
Go to JetEngine> Relations > Add New
Copy the settings from the below screenshot. In the Relation type, you will select the option that applies to your listings. For example, if one agent has multiple listings you will select one too many with a parent object being Agent. If agents co-list the listing you will need an option Many to Many as Many Agents can List Many Properties.
7. Step 7 – Building Property and Agent Templates and Listing Grids
Refer to the next blog articles for the above topics and complete a real estate website in Elementor (see below).
