Divi Estate Documentation
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.
- Modal Video
- Property Slider/Listing
- Property Search Bar
- Property Swiper Slider
- Search CTA
- How to Add/Duplicate Property
- Property Details
- Editing status and property type settings
- Managing Regions
- How to Add New Agent
- How To Duplicate Contact Forms
- How to edit email reciepients
- How to assign form to the agent
Step 1: Install Divi Theme
Once you’ve downloaded the Divi theme package, login to your WordPress website and go to Appearance > Themes.
Find and upload the Divi parent theme and activate it. Next click on the Add New Theme.
Step 2: Install and activate DiviEstate
Click on Upload Theme.
Click on 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 Settings > DiviEstate Activation and enter your API Key and API Email.
To see your API Keys please login to your account.
Step 4: Install 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 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
To make the Contact Form Popups working, Permalinks Settings have to be setup to “Post name”.
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.
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.
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.
Site Currency – Input field.
Currency position – Left/Right
Disable Top Bar – ON/OFF
Area Unit – select Sq/ft or Sq/m
Agents Header Image - allows to upload header background that is displayed on 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”
Agents Archive Page Slug – by default “agents”
Agents per page – this field defines how many agents is displayed on one page.
Results per page – this field defines how many properties is displayed on one page.
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
3 Theme color
Here you can define your website accent color. It applies for all custom elements that color cannot be changed in Divi Customizer.
4 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 module, section or row just add re-gradient class.
5 Map options
Map Parallax – Turn on/Turn off parallax effect on the map
Map Marker Images - Select map marker from 6 predefinied colors
Map Marker Image Uploader – upload your own map marker
Map Marker Custom Size – Width & Height
6 Property Box
Translate DiviEstate into any language! There is 11 languages already available (German, Spanish, French, Polish, Portuguese, Sweden, Russian, Italian, Turkey, Dutch).
For more translations please install Loco Translate plugin.
DiviEstate comes with 7 custom modules that can be used within Divi Builder.
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 filter and select how many properties should be displayed.
- 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.
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.
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.
- Property ID
- Featured Property - YES/NO
- Display Custom Ribbons - YES/NO
- Custom Ribbon Color
- Property Description
- Property Type
- Built in
- Zip Code
- 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.
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 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:
- Contact Form Shortcode
- Google +
- Agent Title
6. How to Duplicate Contact Forms
To assign 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 Reciepients
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.
- Copy shortcode
- Go to Agents tab
- Select agent you want to assign form to.
- Paste code to Contact Form Shortcode field
- Update page
For additional assistance with using the Divi theme framework, Elegant Themes offers free technical support to all their members. Login to your account at Elegant Themes website.
You can also find support on Facebook or Google+ by posting your questions in the community group:
B3 Multimedia Solutions
For questions or support please visit your account and submit support ticket:
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