Divi Estate Documentation

All the information you need!

Getting started

In order to install this child theme, you must first purchase a membership to Elegant Themes and download the Divi theme package. The Divi Theme is NOT included with this child theme.

This version of Divi Estate is fully compatible with versions 3.0+. Some features or elements may not be compatible with previous versions. Please ensure that you’ve downloaded the latest version of Divi.

Please note:
Ensure you have the Divi Theme installed and activated prior to installing the Divi Estate Child Theme.

To avoid any issues during installation it is highly recommended that you use this child theme on a fresh installation of WordPress.

INSTALLING CHILD THEME
IMPORTING DEMO CONTENT
THEME OPTIONS
THEME CUSTOMIZATION
CUSTOM MODULES
USING DIVI ESTATE
SUPPORT
CHANGELOG

Installing child theme

Step 1: Install Divi Theme (if not installed yet)

Once you’ve downloaded the Divi theme package, login to your WordPress website and go to Appearance > ThemesFind and upload the Divi parent theme. Next click on the Add New Theme

Step 2: Install and activate Divi Estate

Click on Upload Theme and then Choose file.

In the downloaded package find and select DiviEstate.zip file, then click on the Install Now button.

 

 

Completing the upload, you will need to activate the theme by clicking on the Activate button.

Step 3: Activate your product

To activate your product and get updates please go to Divi > Divi Estate Activation and enter your API Key and API Email.

To see your API Keys please log in to your account.

 

 

 

Step 3: Installing plugins

DiviEstate requires 6 plugins: ACF: Google Map Extended, Advanced Custom Fields, Breadcrumbs NavXT, Caldera Forms, One Click Demo Import and Recent Post Widget With Thumbnails. We have made installing process very simple. After DiviEstate child theme is activated system will ask you to install all missed plugins. Click Begin installing plugins.

 

 

 

On the next screen select all plugins, choose “Install” from the dropdown menu and click Apply.

 

Step 5: Import Breadcrumbs settings

Go to Settings > Breadcrumb NavXT and expand “Help” section.

Select Import > Export > Reset tab and click Upload File.

In the downloaded package find and select bcn_settings.xml file, then click on the Import button. 


Step 6: Permalinks setup

Go to Settings > Permalinks, select “Post name” and click Save Changes.

Step 7: Google Map API

In order to make property map working we need to get Google API Key.

Go to Divi > Theme Options, find “Google API Key” and paste your code.

How to create new API key?


Step 8: Disable Visual Text Editor

DiviEstate uses custom icons which are applied via span classes. This is unfortunately not supported by WordPress and when we have Visual Text Editor enabled this causes issues, icons disappear.

To disable Visual Text Editor please go to Users and click your user account.

Find Visual Editor option located at the very top and mark box Disable the visual editor when writing.

This will prevent icons disappearing.


 

Importing demo content

Step 1

Now you will need to install the library and all theme settings which allows you to have your site just like the demo version.

Go to Appearance > Import Data Demo, and click on the Import Demo Data button.

Note: This may take even several minutes, depends of internet connection speed. Please be patient.

 

 

Step 2

The theme has 3 pre-built forms. They need to be imported from download package. Go to the Caldera Forms tab located in your WordPress Dashboard and click Import button. Select “contact-form.json” file located in Import Files > Caldera Forms folder and click Import button. Follow the same steps for all other forms.

Theme Options

General

 

 

DiviEstate updates – Enabled/Disabled (disabling this option is not recommended)
Site Currency –
 Input field.
Currency position – Left/Right
Disable Top Bar – ON/OFF
Area Unit – (Sq/ft ) (Sq/m) (m2)
Agents Header Image – upload header background for agent pages.
Agents Image Crop – Enabled/Disabled (if enabled, agent image is crop to square)
Text displayed if price not specified – input field.
Phone Number Text – text displayed for the phone number in header

Properties Archive Page Slug – by default “properties”
Properties Dashboard Label – determine what text is displayed for Properties dashboard tab (WordPress menu)
Agents Archive Page Slug – by default “agents”
Agents Dashboard Label – determine what text is displayed for Agents dashboard tab (WordPress menu)
Regions Archive Page Slug – by default “agents”
Regions Dashboard Label – determine what text is displayed for Regions tab located in WordPress menu.

Agents per page – this field defines how many agents are displayed on Agents page.
Results per page – this field defines how many properties are displayed on listing page.

Preloader

 

 

Preloader – Enabled/Disabled
Preloader Size – define preloader size: width and height
Preloader Images – select preloader image
Preloader Image Uploader – you can upload your own preloader/gif image
Preloader background color – define background color for preloader
Preloader Effects – define effect FadeOut/SlideUp
Preloader Delay time – define preloader delay time
Body Delay time – define body delay time
Preloader Body opacity – define background opacity
Preloader Fadeout speed – define speed of preloader fadeout effect

Theme colors

Here you can define your website accent color. It applies for all custom modules that color cannot be changed in Divi Customizer.

 

Gradient colors

We have made it extremely easy to use gradients on your website. You just need to specify 2 colors and you are ready to go.

To use gradient background for a module, section or row just add re-gradient class.

 

Map options

Map Parallax – Turn on/Turn off parallax effect on the map
Map Marker Images – Select map marker from 6 predefined colors
Map Marker Image Uploader –  upload your own map marker
Map Marker Custom Size – Width & Height

 

 

 

Property Box

 

 

 

 

 

Languages

Translate DiviEstate into any language! There are 11 languages already available (German, Spanish, French, Polish, Portuguese, Sweden, Russian, Italian, Turkey, Dutch).

For more translations please install Loco Translate plugin.

 

 

Integration

Integration tab allows adding custom php code if required

 

 

 

Email Template

Visitors can easily send property listing link to their friends by clicking Send in Email located on the property page, below the map.

Email Subject – I wanted you to see this property
Email text before link – Check out this property text
Send in Email text – Send in Email

Custom Icons

DiviEstate offers 3 variables that are displayed along with the icons.

In this panel we can replace all 3 icons.

Theme Customization

CSS Edits

If you are going to add your own custom edits – please place all your CSS code inside Theme Customizer’s Custom CSS tab or in Divi Theme Options, as all the changes made within child theme files will be lost with the automatic update. If you wish to edit or add any files in the child theme folder please do not use the automatic update feature.

Divi Estate Custom Modules

DiviEstate comes with 7 custom modules that can be used within Divi Builder.

1 Agent

2 Modal Video

This module allows you to display videos in a popup modal window. Simply upload your desired video in .MP4 format, or type in the URL to the video you would like to display and use this module on the page you want.

3 Property Slider/Listing

This module is used to display properties on pages. We can select 1 of 3 predefined layouts (Horizontal, Grid & Grid Slider), apply the filter and select how many properties should be displayed.

Available Filters:

  • All
  • Featured
  • For Sale
  • For Rent
  • By Region
  • By Category

4 Property Search Bar

Search Bar Module settings allow you to control header and description. In Design tab we can change fonts, sizes and colors.

5 Property Swiper Slider

This powerful module can be used for displaying an attractive and responsive property sliders on any page you want. It allows you to display only specific category, region, or by status.

6 Regions

Regions is another custom post type added to DiviEstate. You can add Regions/Communities to our website and display specific properties on each region page.

7 Search CTA

Search CTA module allows you to display a beautiful Call To Action section. After button is clicked, Advanced Search Popup shows up. We can edit heading text, subheading text and customize button settings.

8 Map Module

Properties Map module allows you to insert properties map on any page you want.

Display Properties By: All / Featured / By Region / By Category / By Status

Map Height – Set Map height (px)

Properties Count – determine how many properties will be displayed on the map.

Using Divi Estate

1. How to Add/Duplicate property

There are 2 ways to add new properties. You can simply go to Properties/Add New or duplicate/edit one of the current properties with all its settings (recommended).

To duplicate posts you will need Post Duplicator plugin. After it is installed new option Duplicate Property is added to Properties Dashboard screen.

2. Property Details

To edit property details you go to Properties tab located in your WordPress dashboard and click on a property title.

Single Property admin page by default features Divi Builder section and 18 custom fields. This fields/filters can be edited in Custom Fields tab.

Divi Builder section is used to display Gallery and Modal Video module.

Custom Fields:

  1. Property ID
  2. Featured Property – YES/NO
  3. Display Custom Ribbons – YES/NO
  4. Custom Ribbon Color
  5. Property Description
  6. Price
  7. Address
  8. Region
  9. Status
  10. Bedrooms
  11. Bathrooms
  12. Area
  13. Agent
  14. Property Type
  15. Built in
  16. Zip Code
  17. Country
  18. Property PDF

3. Editing status and property type settings

DiviEstate is based on Custom Post Type. To edit Property Setting go to Custom Fields tab located in your WordPress Dashboard and select Property Settings.

Here you can Edit / Add New statuses and property types.

Note: Do not edit Field Name.

4. Managing Regions

Regions is another powerful Custom Post Type that enables you to create Communities/Regions with ease and assign properties to different areas. Each Region/Community page is built with Divi Builder and can be customized.

To Add New Region go to Regions/Add New or use Duplicate Region option (recommended).

DiviEstate comes with 8 regions added. Each region uses a different template.

5. How to Add New Agent

To add new agent go to Agents and click Add New.

Agent settings page features Divi Builder section where agents bio is added and 11 custom fields:

  1. Contact Form Shortcode
  2. Phone
  3. Mobile
  4. Email
  5. Website
  6. Facebook
  7. Twitter
  8. Google +
  9. LinkedIn
  10. Address
  11. Agent Title

6. How to Duplicate Contact Forms

To assign a form to specific agent go to Caldera Forms tab located in your WordPress Dashboard.

By default, you will find Agent Form sample form added. This Form Shortcode is added to each agent on DiviEstate demo.

Click Clone and type agents name in Form Name field and click Create Form.

7. How to edit Email Recipients

To edit Email Recipients go to Email tab and type agent email address, click Save Form

8. How to assign form to the agent

To assign form go to Caldera Forms tab located in your WordPress Dashboard and click Get Shortcode.

  1. Copy shortcode
  2. Go to Agents tab
  3. Select an agent you want to assign a form to.
  4. Paste code to Contact Form Shortcode field
  5. Update page

9. Code Snippets


/* CHANGE HEADER SIZE */
#main-header {
   top: 63px; height: 120px; padding-top: 15px;
}
 
/* ENABLE DEFAULT DIVI FOOTER */
.et-social-icons {
   text-align: right !important;
   padding-top: 0px !important;
   float: right  !important;
}
#footer-info {
   float: left  !important;
   padding-bottom: 0px !important;
   padding-top: 5px !important;
   text-align: left !important;
}
.et-social-icons li {
    padding: 5px !important;
}
 
/* HIDE MAP ON LISTING AND SINGLE PROPERTY PAGE */
.property-map {
display: none;
}
 
/* HIDE MAP ON SEARCH RESULTS PAGE */
.property-archive-map {
display: none;
}
 
/* HIDE MAP ON SINGLE PROPERTY PAGE */
.single-property .property-map {display: none;}
 
 
/* HIDE ADDRESS AND MAP ON AGENT PAGE */
.agent-address {
    display: none !important;
}
 
/* HIDE SIMILAR PROPERTIES ON SINGLE PROPERTY PAGE */
.property-agent {
    display: none;
}
 
/* CHANGE DEFAULT ICONS COLOR */ 
.property-icon {
    color: #e7ecf0;
}
 
/* HIDING GREY STRIPE ELEMENTS ON PROPERTY PAGE */
.features-stripe div.property-stripe-feature:nth-child(1){display:none;}
.features-stripe div.property-stripe-feature:nth-child(2){display:none;}
.features-stripe div.property-stripe-feature:nth-child(3){display:none;}
.features-stripe div.property-stripe-feature:nth-child(4){display:none;}
.features-stripe div.property-stripe-feature:nth-child(5){display:none;}
.features-stripe div.property-stripe-feature:nth-child(6){display:none;}
/* HIDE FULL GREY STRIPE */
.features-stripe {display: none;}
 
/* REMOVE STATUS FROM HOMEPAGE SEARCHBAR */
.et_pb_b3_properties_searchform .searchform-status.bootstrap-select > .dropdown-toggle {display: none;}
.et_pb_b3_properties_searchform .location-icon:before {left: 20px;}
.et_pb_slide_description .et_pb_b3_properties_searchform_form input[type="text"] {padding: 0 150px 0 40px !important;}
 

Support

Elegant Themes

For additional assistance with using the Divi theme framework, Elegant Themes offers free technical support to all their members. Log in to your account at Elegant Themes website.

Divi Communities

You can also find support on Facebook or Google+ by posting your questions in the community group:
Divi Theme | Extra Theme | Help & Share
Google+ Divi Community

Divi Lover Support

For additional questions or support please log in to your Customer Account to submit a support ticket.

Change Log:

2017 December 29th – Version 1.4.3
– NEW: Export/Import properties
– Top Header performance improved
– Agent box hover shadow issue fixed
– Search Engine improved, bug fixed
– Property archive page responsive view improved
– Social Icons settings moved to General tab
– Top Header menu color issue fixed
– Divi 3.0.92 and WP 4.9.1 compatible

2017 December 12th – Version 1.4.2
– more options to Area dropdown added
– Agent and property thumbnail size fized
– Property Full Width Slider improved, price added
– map tooltip image and title clickable
– more social media icons added
– More Features section added
– Visual Builder issue fixed
– Related Properties mobile navigation fixed
– Search Button and status dropdown fixed
– Advanced Search price range improved
– option to change tab icons added
– Email Template options added
– CSS cleanup
– Divi 3.0.91 and WP 4.9.1 compatible

2017 October 25th – Version 1.4.1
– Advanced Search module issue fixed
– translations updated
– disable update notification option added
– CSS improved
– documentation updated
– Divi 3.0.84 compatible

2017 October 12th – Version 1.4
– Email Sign Up section CSS fixed
– New Map Module added
– Upload Custom Icons functionality added
– Integration tab for custom PHP code added
– Agent user role added
– IE search field height issue fixed
– DiviEstate options regrouped
– Advanced Search area and price filters issue fixed
– backend property filtering issue fixed
– Display Featured filter added to property listing page
– Custom Ribbons added to Fullwidth Property Slider
– option to change slug for Regions added
– options to rename WP tabs
– translations updated, new strings added
– CSS code cleanup
– 2nd header color customization issue fixed
– Header Customizer issue fixed
– property images clickable
– Divi 3.0.79 compatibility checked

2017 July 27th – Version 1.3
– property slider image clickable
– custom fields status issue fixed
– My Properties module on agent page fixed
– phone number text option added
– Search Bar module bug fixed
– Advanced Search improved
– option to disable top bar
– option to add custom URL to Property Slider
– map marker custom size option added
– Property Listing/Slider module category filter added
– parallax map zoom option added
– ribbon colors issue fixed
– menu slide animation issue fixed
– option to change Properties and Agents slug
– documentation updated

2017 June 26th – Version 1.2.1
– related properties issue fixed
– back-end property searching improved

2017 June 7th – Version 1.2
– property ID added to agent contact form
– custom property ribbon feature added
– swedish translation fixed
– gradient issue fixed
– Agents page pignation added
– footer credentials issue fixed
– missed homepage layout added
– option to assign 2 agents to property
– agent image clickable
– CSS improved
– agent box responsive issue fixed

2017 May 3rd – Version 1.1
– multilingual support (translations ready)
– front-end property submission added
– responsive issues fixed

2017 March 31st – Version 1.0.1
– property description white text issue fixed
– contact/add property form issue fixed
– paddings issue on the blog feed fixed
– property status issue fixed
– more options to advanced search functionality added

2017 March 22nd – Version 1.0
– Release date

Pin It on Pinterest