Create Real Estate Custom Post Types in Breakdance Builder

Planning to build a landing page for a new property listing? How about designing a website dedicated to real estate agents or companies selling properties?

The first thing that probably comes to your mind is WordPress.

But why not? After all, it’s one of the most popular and robust platforms for building websites. 

Plus, it has a user-friendly interface and a vast array of plugins and themes. For professionals with little experience in coding, this platform is one of the best go-to solutions for web development.

But here’s the thing. WordPress has its limitations when it comes to catering specifically to the real estate niche. For instance, the default post types may not efficiently represent some crucial details like property name, price, and address.

A more organized and tailored way to input and display property details on your website is to create custom post types.

With Breakdance builder, you’ll be surprised how easy it is to create one. No coding knowledge required.

Follow the steps in this guide to learn how. Let’s go!

What Should Real Estate Pages Include?

First things first. Before creating a custom post type, let's identify the key components of a real estate page.

The specifics of a real estate webpage can vary based on your branding, whether you're a real estate agent or a property-selling company. However, certain elements must be present in your page to boost your potential sales or rentals.

Some of the must-haves for any real estate page are:

• Property Listings - Concise details about each house, including its name, features, price, size, and address.
• Property Description - A detailed breakdown of the property, highlighting unique features, nearby amenities, and any recent renovations.
• Client Testimonials - Feedback from past clients can help build trust and credibility.
• Mortgage Calculator - A tool for potential buyers to calculate monthly payments based on property price, down payment, and interest rate.
• High-Quality Images - Clear, high-resolution photos of the property, both interior and exterior, to give visitors a visual idea of the space.
• Contact Information - Details for potential buyers or renters to get in touch, including the real estate agent's phone number, email, and possibly a contact form.

For simplicity, let’s focus on creating a property listing. We'll make a special section where we can easily put in all the important details for each property.

How to Create Custom Post Types for Real Estate in Breakdance

First, you’ll need to create a custom header and footer for your page. If you don’t have one yet, make sure to check these separate tutorials we’ve created:

• Create a Page Header in Breakdance Builder
• Design a Sticky Header With Smooth Transitions in Breakdance
• Create a Floating Header in Breakdance Builder
• Create a Page Footer Using Breakdance Builder 

Once you have the header and footer, follow the steps below to create a custom post type for our real estate listing.

1) Install the Necessary Plugins

Go to Plugins > Add New. Find, install, and activate CPTUI and Advanced Custom Fields.

2) Create a New Post Type

With the plugins on, you'll see CPT UI on the left side of your dashboard. Enter your post details like slug and labels, then hit ‘Add Post Type.’

3) Add Your Custom Fields

Go to ACF > Add New. Put in your field details.

To add more fields, click ‘+ Add Field.’ You can drag them to reorder.

Under settings, set a rule so Post type is 'House'. Then, hit ‘Save Changes.’

4) Add a New House

Go to Houses > Add New. Enter a title and add in the house details, like the image, description, pricing, etc. 

Once you’re done, click ‘Publish.’

5) Create a Real Estate Page on Breakdance

Head over to Breakdance > Templates.

Click ‘Add Template’ and select ‘Add Custom Template.’ Enter the template title and set the location to Single/ Houses. Click ‘Add Template.’

6) Style It Up

Time to style the template. Click edit in Breakdance. 

Here, you can add a section, picture, title, and text for house details. Click save. 

7) Make Your Text and Photos Dynamic

For photos, hit the 'dynamic' button and choose the right photo from the ACF field. Like 'House-photo.'

Do the same for the title and other texts. Here, I choose the address as the heading and normal text for other details.

Then, adjust the layout and background colors as you like.

8) Create a Global Block 

Go to Breakdance > Global Blocks and click ‘Add Global Block.’

Name it and then style it up in Breakdance. You can copy a past design or start fresh.

Save the changes.

9) Show Off Your Listings on a New Page

Make a new page for your property listings and edit in Breakdance.

Add a ‘Post Loop Builder.’ Choose your global block from the dropdown, like ‘Individual-House.’

Adjust the settings to show your property listings. For this, we're using 'House.'

Edit the other fields as desired. Then, finish with ‘Apply Query.’

10) Finishing Touches on the Layout

Tweak the layout how you want it to look. For instance, to show 3 houses per row, pick ‘grid’ with 3 items per row under the Style tab. Save your work when everything looks perfect. 

Here’s the final view of our House Listing page:

Wrapping It Up

And there you have it, your very own House Listing page is ready to go!

You’ve just learned how to create custom post types for a real estate page using Breakdance.

But guess what? Breakdance has even more to offer. Try using Breakdance forms and connect them to your other apps. It's a nifty way to grab info from people interested in your properties.  

Interested? We’ve covered separate tutorials for this, so go ahead and check these out:

• Send Breakdance Builder Forms to Drip
• Send Breakdance Builder Forms to MailerLite
• Send Breakdance Builder Forms to ActiveCampaign
• Send Breakdance Builder Forms to GetResponse
• Send Breakdance Builder Forms to ConvertKit
• Send Contact Form to Slack with Breakdance Builder
• Send Contact Forms to MailChimp Using Breakdance Builder

Having trouble with any of the steps above? Just leave a comment below, and we'll do our best to sort it out with you!