Showcasing actual property belongings listings for your website online is a huge mission, nevertheless it doesn’t should be a troublesome one. With the useful design of Divi’s Actual Property Structure Pack and the capability of the WordPress Assets Listings (WPL) by means of Realtyna, you’ll be amazed at how simple it’s to get your actual property web page up and operating.

The WPL plugin is catered to Divi in that it even has 8 integrated Divi Modules to make it more straightforward to make use of their shortcodes. And as the plugin shortcodes paintings inside of Divi Modules, you’ll use the Divi Builder to customise the design of the web page.

Let’s get began.

Sneak Peek

Here’s a sneak peek of the valuables checklist pages and seek bar we will be able to be developing.

use case sneak peek

What you Want

Concerning the WPL Plugin

The WordPress Property Listing (WPL) Real Estate plugin is excellent for actual property companies taking a look to run an actual property website online with Divi. The database control at the again finish is powerful and versatile. And the front-end capability works strangely smartly with the Divi Builder. There are a variety of modules which were constructed particularly for the Divi builder plus many shortcode choices that may mean you can upload belongings checklist options inside of your Divi layouts. They actually have a Divi demo site to see the plugin in action.

WPL Settings

Basic Settings

First, let’s arrange our settings for the plugin. Navigate to WPL > Settings from the WordPress Dashboard.

From the Basic tab, you’ll see a listing of choices to customise the plugin in your wishes. Replace the next choices:

Set the Theme Compatibility method to “Enabled”. This is essential as a result of it is going to lend a hand the plugin inherit design and capability from the Divi Theme. It is a refreshing characteristic, as maximum plugins don’t have this selection particularly for Divi.

Then create and input a Google API Key in order that the maps will display for your belongings listings.

Set you base forex.

Scroll all the way down to the Complicated Markers sub class and make a selection the standing to “enabled”. This may give your tabs a pleasant customized icon and colour to show at the google map.

Then set your colours for each and every of the checklist sorts as follows:

For Sale: #3c39e6
For Hire: #fa7f28
Holiday Apartment: default

You’ll additionally make a selection a customized icon for each and every sort as smartly.

Don’t put out of your mind to click on Save.

If you wish to get some pattern houses up and operating for trying out, you’ll click on the “Upload Pattern Houses” button to deploy six houses. You’ll click on it greater than as soon as for extra houses. It is a nice method to get a headstart at the setup procedure.

WPL General settings

Gallery, Places, search engine optimization, and Notification Settings

For probably the most phase, you’ll go away the default settings for the remainder of the WPL Settings. The Gallery choices are helpful for putting in how you need to resize pictures all the way through your house checklist shows. The Places choices are helpful for putting in location key phrases. The search engine optimization choices will let you customise your permalink constructions. And the Notifications choices mean you can set your sender identify and electronic mail for notification emails.

As soon as performed, you are prepared to start out including your listings.

Upload Your Listings

For those who selected so as to add pattern houses to your listings below settings, you’ll have already got some listings to paintings with. To peer the ones listings, you’ll navigate to WPL > List Supervisor and click on to edit any some of the pattern listings to peer how it’s setup.

listing manager

So as to add a brand new checklist from scratch, move to WPL > Upload List. Below the Fundamental Main points tab, replace the entire choices that follow in your checklist. The next choices are required:

  • Assets Name (that is what’s displayed when the valuables is displayed inside the web page content material all the way through your web page)
  • Assets Web page Name (that is the identify of the one belongings web page designated for that individual belongings)
  • Assets Sort
  • List Sort
  • Worth
  • View
  • Bedrooms
  • Bogs
  • Sq. Pictures

Options and Home equipment

Proceed putting in your checklist with any options and home equipment within the Options and Home equipment tabs.

Deal with Map

Below the Deal with Map tab, you’ll input the placement knowledge to your checklist. This data can be displayed for your checklist in addition to generate map coordinates for exhibiting the finding pin on google maps.

real estate use case location options


The group choices mean you can display group comparable options to your checklist.

Symbol Gallery

Below the picture gallery tab, you’ll add the entire pictures you need to show to your checklist. You those pictures can be used to generate pictures to your checklist via your web page (ie. a thumbnail to your belongings checklist web page and slider pictures for the one belongings web page).

You’ll even designate the picture class as symbol or ground plan and prepare the order of pictures by means of dragging the transfer icon to the appropriate.

real estate use case image gallery settings

Video, Attachments, and Specialties

You additionally have the opportunity of including a video to your checklist by way of an embed code below the Video tab. You’ll additionally upload some other information you need as attachments below the Attachments tab. The Specialties tab lets you assing a different tag in your checklist (ie “Featured”, “Sizzling Be offering”, “Open Space”, “Foreclosures”. Those tags will also be useful as a result of you’ll select to turn them for your checklist’s thumbnail for a greater consumer enjoy.

This is an instance of what the ones tags will appear to be.


IMPORTANT: Don’t put out of your mind to click on the blue Finalize button on the best of the checklist menu tabs to put up your checklist.


Upon getting sufficient listings created (no less than 6 will have to do it), it’s time to create our Assets List Web page.

Design Houses Web page

The plugin mechanically creates a couple of pages for you. One of the vital pages has the identify “houses” and is the WPL primary web page for exhibiting your house listings (it’s the only with the /houses permalink within the url). In finding that web page on your WordPress Dashboard below Pages after which click on to edit the web page. Subsequent click on to make use of the Divi Builder then the Visible Builder.

properties page

Import the Listings Web page Structure

Import the Listings Web page Structure that includes the Actual Property Structure pack by means of clicking Load Structure and deciding on the web page format from the Premade templates tab within the popup.

add listings layout

From the visible builder, delete the hunt bar within the header. Then within the phase beneath the header, delete the entire modules within the 3 column row. Then replace the row column construction to have one column.

Then upload a textual content module to the row and delete the entire different sections beneath within the format you don’t want.

add text module

The plugin is designed to paintings smartly with Divi’s back-end builder so we will be able to be the use of it so as to add shortcodes to the format.

Save your settings and click on to edit the web page the use of the back-end builder. Then click on to edit the textual content module you simply added.

edit text module

Upload the Assets List Shortcode

Within the content material editor of the textual content module settings, make a selection the WPL Shortcode Generator icon then go away the choices to their default (which will have to record all houses in 3 columns) and click on the Insert button.

That is what the shortcode this is generated seems like:


Replace Textual content Module Settings

At this level you’ll deploy the visible builder and make some changes to the textual content module that accommodates your shortcode. It is a nice method to customise the textual content show of your house checklist.

text module settings

Replace the next within the textual content module settings:

Textual content Font: Lato
Unordered Record Font: Lato (for the type menu)
Heading 3 Font: Lato (Heading 3 controls the valuables titles)
Heading 3 Textual content Dimension: 26px;

Notice: You will have to almost definitely set your default theme font within the theme customizer to no matter you need the plugin to make use of. This may increasingly simplify the method.

Replace the Row Settings

Now make some changes to the row that accommodates your textual content module in order that it is going to glance higher on cell. Here’s what I modified below the Row settings design tab.

Customized Padding: 15px Best, 2% Proper, 60px Backside, 2% Left
Column Customized Padding: default
Field Shadow: None

row settings

Now save your settings and your web page and take a look at the reside model of the web page.

final listings page

NOTE: Don’t set the Houses web page because the default wordpress house web page as a result of this creates issues of the plugin. If you need this as a homepage, you will have to do that similar procedure on a web page with a permalink rather than “/houses”.

Now take a look at the one belongings web page that presentations each time you click on on a belongings.

final single page

Use the Task Supervisor to Keep watch over How Your Content material is Displayed

One of the vital robust options of WPL is the power to customise minor main points to get your content material exhibiting how you need. The way in which that you are making those customizations is thru developing actions all the way through the Task supervisor.

This is an instance. Let’s say you need to customise the checklist gallery of thumbnails that display for your belongings checklist web page. To try this you would have to first make a selection the listing_gallery job from the dropdown on the best proper of the web page after which click on the plus icon so as to add it to the record.

add activity

Input the Place of the job with the next:


This tells the plugin to make use of those atmosphere to replace the photographs particularly on the location of the valuables checklist content material.

Then you’ll replace the remainder of the choices to customise what or how content material is displayed.

For instance, that is the place you may make a selection to turn tags at the thumbnails.

modify activity

You might also in finding that you want to regulate the best way pictures are displayed for your unmarried belongings checklist web page. To try this it is very important customise the listing_gallery job with the pshow_gallery place. Then you’ll replace the picture dimensions to suit your wishes. One trick I discovered is to set the picture width however no longer the picture top. That means the picture doesn’t get skewed.

pshow gallery activity

Upload Seek Widget in your Homepage

The WPL plugin has widgets that can be utilized so as to add plugin content material/capability to any web page the use of the Divi builder. One of the vital widgets you’ll use is named the WPL Seek widget. This may mean you can create a customized seek bar for your homepage.

Navigate to Look > Widgets and drag the WPL Seek widget into the WPL Hidden widget house. Then click on the view fields button.

add search widget

Within the Seek Fields Configurations popup, make a selection the Deal with Map tab and drag within the Location box from the ground of the popup. This make a selection Complicated Location Textsearch possibility from the dropdown inside the textual content box choices. Then replace the location-placeholder to have the textual content “Seek by means of Town”.

add location to search bar

This may create a easy seek bar with a textual content enter box that may pull up seek choices dynamically as you sort into the hunt enter box.

Upload Widget to House Structure

Now move to web page that has your Actual Property House Web page Structure and edit the format the use of the Divi Builder.

In finding phase you need to position the hunt widget and upload a row with a customized width of 400px. This may be certain that the hunt bar doesn’t span the whole width of the web page.

Then click on so as to add a brand new module to the row.

That is the place issues get thrilling. You are going to realize that you’ve 8 WPL modules within the record of Divi modules!

NOTE: The modules which can be customized to WPL would possibly not paintings utterly (particularly within the Visible Builder) or have the entire design choices you may need, however no less than this makes it simple so as to add widgets and shortcodes in your pages.

Make a selection the WPL Seek Widget module so as to add it in your row. Then within the settings modal, make a selection the widget from the dropdown and save settings.

search module

Now take a look at the reside web page.

search gif

Ultimate Ideas

The loose model of the WPL plugin in truth works strangely smartly with Divi out of the field. Despite the fact that they’re restricted in design choices, the plugin even has customized modules constructed particularly for Divi! This makes issues so much more straightforward at the backend. And, the pro version of the plugin turns out to have a ton of significant upgrades as smartly if you have an interest. Realtyna additionally has a variety of answers for actual property, together with reside MLS integration.

All in all, I feel you’ll like the overall end result. The valuables listings are simple to compare the design of the Actual Property format pack, however most significantly, you’ll have a functioning platform for exhibiting and managing your house listings.

The submit How to Add Real Estate Property Listings to Your Website with Divi seemed first on Elegant Themes Blog.

WordPress Web Design

[ continue ]