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.
What you Want
- Divi Theme
- Actual Property Structure Package deal
- WordPress Property Listings (WPL) Plugin by Realtyna – I’ll be the use of the loose model of the plugin however their could also be a pro version.
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.
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.
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.
Group
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.
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.
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.
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.
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.
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.
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
Now save your settings and your web page and take a look at the reside model of the web 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.
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.
Input the Place of the job with the next:
wpl_property_listing_image
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.
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.
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.
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”.
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.
Now take a look at the reside web page.
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