Divi theme is a remarkable product for WordPress themes industry which is used by number of top popular sites in the web and thousands of new WordPress sites consider Divi to startup their business website or blog with a powerful drag and drop page builder that enhances your website design layout and content presentations from many sides you may not know indeed.
Divi theme is a All-in-one WordPress page builder theme that incorporates website design and development, advanced navigation system, ads management, Search engine optimization, WooCommerce integration and many more things in one place. You can create any sort of webpage with powerful Divi builder and Elegant Themes builder plugins.
In this Divi theme review program I will discuss about Divi theme functionalities, possibilities and availability for WordPress.
Divi Theme Version Releases
After appearing in WordPress themes industry Divi theme developers brought up number of remarkable updates and version releases from their work space. Divi theme first released as Divi 1.0 in 2013 which was announced on Elegantthemes blog by the founder and lead designer Nick Roach. The initial version of Divi contained very poor features and page building tools as it was in developing stage but within a year Elegantthemes developers launched the next version of Divi 2.0 which contained seamless update to the current Divi, and provided users ability to create dynamic website with newly integrated page building elements, modules and layouts.
Divi 2.4 brought up the biggest update in Divi’s history including over 1,000 new module design settings and theme customizer controls, as well as an all-new fluid grid and a re-imagined set of flexible modules that are more versatile and easy-to-customize than ever.
Divi 2.5 included more amazing features like Undo & Redo in Divi page builder tool which can help you to make changes and easily restore the previous version if you don’t like new changes. This version also included a remarkable update like Right Click Controls. Whenever you right click on something within the builder, you will now be presented with quick access to commonly-used functions, as well as some entirely new tools such as: copying and pasting modules from one place to another, locking content from being edited by other users, and disabling items within the builder from appearing on the front end.
2016 is the existing year for Divi theme as in this year Divi released two new version updates Divi 2.6 and Divi 2.7. In Divi 2.6 the Elegantthemes developers added an updated Divi Builder, including new modules, improved modules and their new responsive editing controls.
Divi 2.7 is the most recent and latest version release from Elegantthemes which included the Divi leads split testing system, improved portability & much more.
You can always find latest news and Divi version releases at Elegantthemes Theme Releases section
Divi Theme Installation & Activation
Once you signed up for Elegantthemes membership (Developer or Lifetime) account you will be given access to all the premium plugins and themes including the powerful Divi theme to use on multiple WordPress sites you want. Elegantthemes subscription is annually and lifetime access basis and they offer a 30 day full money back guarantee (refundable) so joining is 100% risk free.
We have organized a complete Divi theme installation and license activation tutorial for beginner which is very comprehensive to learn and begin with Divi Theme.
Click below link to read Divi theme installation and activation procedures.
Update Divi Theme Version
Once you have bought Divi theme from Elegantthemes you have to install the main theme files on your WordPress site in addition with other important plugins like Elegant Themes Updater, Divi Builder, Elegant Builder etc.
To update your Divi theme you have to get your Personal Elegant Themes API and use on your Elegant themes updater panel to activate your Elegant Themes License. After that you can update your Divi version with general WordPress updater mode.
Following guide can help you to learn updating Divi Theme
Install Recommended Divi Theme Plugins
So you have installed Divi theme and activated the theme for your WordPress site, right?
Now you have to install two recommended plugins that enhance Divi theme performances and help you create dynamic WordPress site in just moments.
While Divi theme creates website design and represents the changes made in WordPress backend but Divi builder gives the power in page building elements, and tools with seamless drag and drop modules and layouts options.
Divi Builder is a simple plugin that you can find in your Elegant Themes account panel under “Plugin Downloads” section
Download the latest version of Divi Builder plugin then install and activate on your WordPress site
Learn more about Divi Builder and Divi Builder Documentations
Elegant Themes Builder
Elegant Themes builder give an extra power to create custom static page (landing page) to promote your products and businesses.
To download ET Building plugin simply scroll down the page a little bit and you will see ET Builder (legacy)
Download the plugin package of ET Builder then install and activate the plugin on your WordPress site.
Learn more about Elegant Themes Builder and Plugin Documentations.
Divi Layout Builder
When you have installed and activated Divi theme on your WordPress site you will be given countless options and features to build your pages without having to type a single line of code yourself.
Divi Layout Builder is a powerful layout building tool that allows you to create any kind of content layout organizing different sections, widgets, banners, Call-to-actions, video, image slider, button, toggle and tab, pricing tables, testimonial and much more.
To work with Divi Layout Builder simply open a new page and switch to “Use The Divi Builder”
Now you can build your page with any of the two building tools (1) Layout Builder (2) Page Builder
I will show you the functions of Divi Layout Builder and how you can create essential webpage with this tool.
Divi Layout Builder contains three options elements to create your pages.
- Add a Module
- Add a Column
- Sample Layout
Add a Module
The module section provides 17 unique modules (drag and drop modules) to create your page layout.
First module is Logo which you can drag and drop onto your canvas
After adding logo click on “Edit” icon on right edge and make changes in Logo settings options. You can add a Logo image, give the logo proper placements also can assign new class for this section.
When you’re done click on “Save Changes” and your layout will be saved
Paper is another module of Layout Builder that allows you to add text on your page. You can add button on your text with paper module.
Testimonial is an important module to embed user’s feedback on your webpage about any product or service. With Divi Layout testimonial module you can add the reviewer photo, name, company’s positions, Site URL and testimonial text. When you’re done editing testimonial simply click “Save changes”
Image Slider is a popular slider tool that allows you to add multiple images with different slider effects, animation duration, animation speed, play/pause slider on hover, slider with description, and slider URL.
Button module with Divi Layout Builder works super attract user’s attention and bring you more clicks and conversions. To add a button module simply drag and drop Button onto canvas and click Edit icon. Then make changes on your button regarding button color, size, URL, open link in new window, text and button alignment.
Add a New Column
Divi Layout Builder allows you to add six types of columns in your layout page. To add a new column simply tap on “Add a Column” and choose any of the given preferred columns i.e 1/2 Column, 1/3 Column, 1/4 Column, 2/3 Column, 3/4 Column and Resizable Column.
You can add columns in combination with
1/2 — 1/2
2/3 — 1/3
3/4 — 1/4
1/4 — 1/2 — 1/4
See below image
When you have added modules in combination with columns then it will look as following image
Sample layout is a quick and handy readymade layout building element that can be found on “Sample Layout” section in Divi layout builder.
You can use Sample Layout to quickly build your page and later modify the content of your page replacing the existing content with your own content.
The sample layout page should look like following in your WordPress front page
Delete a Module
To delete any module simply press on cross icon on any module you want to delete and then click “Yes” to permanently delete the module.
Clear All Layout
With clear all button you can remove all the content in your layout with one click.
Create Sample Layout
To create a new sample layout you have to create a new layout using “Add a Module” and “Add a Column” sections.
When you have created a new layout you can save your layout in “Sample Layout” section by clicking on “Create Sample Layout” button
Give a name to your sample layout and click “Create” layout button
After updating and refreshing your page you will see your newly created sample layout in “Sample Layout” section
You can remove the sample layout anytime by clicking on red “Cross” button
You can create multiple sample layouts using Divi Layout Builder
If you’re satisfied with your layout then click on “Save Changes” and then “Publish” button to publish your layout as a page or post.
Divi Page Builder
The Divi Builder is the most versatile and powerful page building tool yet that boosts your page building experiences and allows you to create any type of page you want.
It’s one step advanced page building tool than layout builder (I already discussed earlier).
On your Divi Builder tool you will be allowed to “Insert Column(s)” in any format you want i.e 1/2 Column, 1/3 Column, 1/4 Column, 2/3 Column, 3/4 Column etc.
When you have added column click on “Insert Module” button
Now you can explore over 37 essential modules in Divi page builder and add one for the appropriate placement in your page.
Remember choosing columns depend on your module performances. Suppose if you want to add “Blog” module then you may choose 1/1 column
If you add “Button” module then you may choose 1/2 or 1/3 column
So before adding columns with Divi Builder it’s recommended to understand the functions and performances of each module so that you can create productive and useful pages that grab user’s attention.
Now I will discuss the functions and performances of Divi Builder
The Divi Builder starts with inserting module(s) on your layout. To add a module click on “Insert Module” link and choose any of your preferred modules you want to display on your page.
You have made changes to your module but you felt you left something that you need to apply on your existing module, in this case you can open your module by clicking on “Module Settings” link which remains on left of the module
If you want to make a similar module of any existing module then use “Clone Module” link to create an autotype of the existing module
To remove any module from page building layout simply click on “Remove Module” link
Insert More Modules
To insert more modules below an existing module click on “Insert Module(s)” link. You can add up multiple modules in this way
Row Module Settings
To bring changes in Row Structure simply click on “Row Settings” link and make changes in your row module
To make a similar row then click on “Clone Row” link and a new similar row will be created
If you want to change Row Structure suppose Row columns then click on “Row Structure” link and choose your preferred columns
You may want to delete row by clicking on “Delete Row” link
Section Module Settings
If you want to make changes in Section module suppose adding background image, background video, parallax effect, custom padding etc. then click on “Section Module Settings” link
To create a similar section then click on “Clone Section” link and a similar section will be created
To remove your section simply click on “Delete Section” link
Add Standard Section
To add a standard section click on “Standard Section” link and a new standard section will be added
To add a section will fullwidth view then click on “Full Width” section and a new fullwidth section will be created
To add special designed columns in your section then click “Specialty Section” link and choose any of your preferred columns structure
Save to Library
After adding different sections, rows and modules you’re ready to publish your page on the web. If you want you can save your layout on Divi Library so that you can use the same layout structure on many other pages you want. Also export the layout and use on other WordPress website you want.
Load From Library
You can load any predefined layout from Divi library to your page layout by using Load from Library option. On Predefined layouts you will find different types of premade layout which you can use for different purposes like Case study, Product features, Homepage shop, Portfolio, Page fullwidth, Portfolio grid, Portfolio fullwidth carousel, Blog masonry, Blog standard, Maintenance mode, Coming soon page and much more.
Clear layout can remove all the changes made with your Divi page builder. If you want to remove all of your current page content then you can use “Clear Layout” option, a popup window will tell you to click “Yes” to remove all of your current page content.
If you don’t want to clear your existing layout then forget about this option.
Undo, Redo, and See History
These features are added in Divi 2.6 that allow you to play Undo, Redo while editing with The Divi Builder also see your most recent changes made on your page layout with Divi Builder with See History menu.
The funny part is that you can apply Undo (using Ctrl+Z in windows) when you have made any mistake in editing or cancel Undo by proceeding through Redo (using Ctrl+Y in windows)
See History records all your previous changes made with Divi page builder, you can easily switch to previous layout or continue with current version
Adding a Blog
Divi Blog module allows you to display grid style of posts defining layouts, posts numbers, categories, featured image, content types, pagination, and more.
To add Blog module add 1/1 column first then choose Blog from modules lists
Now you have to make changes in your Blog module settings like
Layout: Choose either Fullwith or Grid layout
Posts Num: Number of posts to be displayed per page
Include Categories: Include categories from lists
Show Featured Image: Display/Hide featured image
Content: Show either Excerpt or Content
Text Color: Choose text color either Dark or Light
Disable On: You may want to disable the module on particular platform
Advanced Design Settings
Advanced design settings are for savvy users who know least web design and development. If you’re beginner to WordPress then you can’t play good with this option so you have to avoid advanced design settings.
For tutorial purpose I will show you how to play with Advanced Design Settings
Header Font: The header font is set to default, but you may want to change the module header font also font styles with bold, italic, underline etc.
Header Font Size: Change header font size which is set default to 18px
Header Text Color: You can select any of your header text color
Header Line Height: Header line height is set to 1em but you can change it
Meta Font: Custom meta font is set to default but you can change meta description font as well as font styles
Body Font: Body font is set to default but you change body font to any font you want also change body font styles
USE Border: Border is not assigned with this module but you can enable border for this module and apply custom border styles on your module
Custom CSS allows you to assign ID or Class for that specific module and then apply styling for that module using ID or Class name.
If you want to add Custom CSS you can add CSS code BEFORE, MAIN ELEMENT, AFTER your Blog module class name.
Make sure you add Custom CSS for exact module section otherwise it may disable any specific design of your module section.
To instantly watch your changes on front page simply click on “Preview” icon and you will see the changes you made on your module
Save & Add to Library
You can save your module and add to your existing library list by giving a unique name
Save & Exit
Save your module and simply exit the window
Divi Modules Explanations
Divi theme is powered by 37 awesome modules that enable a user to build any page with any content he/she wants. With Divi modules you can represent your content that look fresh and more visual to your customers and drive 2x conversions and sales.
The following are the most effective tutorials on Divi Modules.
The accordion module is a great way to consolidate information within a single system. Accordions are very similar to tabs, except that the items are displayed within a vertical list. Learn more about Divi Accordion
Blog module is so incredible to display a fullwidth or grid lists of blog posts on a page within your site. You can select specific category, exclude categories, posts and add more styling effects on your blog with Divi blog module. Learn more about Divi Blog Module
The blurb module is a simple and elegant combination of text and imagery. Blurbs are a great way to showcase small bits of important information, and are often used in rows to display skills or features. Learn more about Divi Blurb
Sliders can be placed anywhere, spanning the full width of whatever column structure they are in. Learn more about Divi Slider
Call to Action
Divi Call to action is most successful module I have ever tried and tested on many of my sites and achieved success. To many WordPress users creating a Call to action page is much crucial and time consuming but with Divi Call to action module you don’t have to think about conversion rate, just setup CTA page incorporating your content and rest of the tasks will be handled by Divi CTA module. Learn more about Divi Call to Action Module
Divi Theme Options
Divi theme options are the most important configuration around your WordPress website regarding navigation and layout setup, ads management, SEO configuration and other integrations.
To manage your website with Divi theme options simply navigate Divi > Theme Options
Divi theme options consist of six important integrations as follows
In general settings you can bring changes on following
Website Logo − Add your website logo
Favicon – Add favicon
Fixed Navigation Bar − enable/disable fixed navigation bar
Enable Divi Gallery − default to disabled
Color Pickers Default Palette − you can change color palette for Divi builder
Blog Style Mode − this option is default to Disable
Shop Page & Category Page Layout for WooCommerce − Here you can choose Shop Page & Category Page Layout for WooCommerce.
MailChimp/Aweber Authorization − add mailchimp or aweber API key to setup email marketing
Social icons to display on homepage − you can enable social icons for Faceboo, Twitter, Google+ and other social networks
Social profile URL − you can add your channels social profile URL for Facebook, Twitter, and Google+
Date Format − Change date format
Responsive shortcodes − Enable this option to make shortcodes respond to various screen sizes
Note: To learn more about any option simply click on Question mark icon to get instant help documentation.
In navigation options you can apply changes through Pages, Categories, and General Settings.
On pages you can exclude pages from the navigation bar
Show dropdown menus – This option is default to enable
Display Home link – Homelink is default to enable
On categories you’re about to make the same changes you done with Pages and in General settings you can enable/disable “Disable top tier dropdown menu links” option.
In layout settings you can bring changes on Single post, page and general settings.
In single posts layout you can choose items to display in the postinfo section suppose, Author, Date, Categories and Comments. If you want to select any then click on that item. You can select all the items you want to display.
Show comments on posts and Place thumbs on posts are default to enable but you can disable those options.
In single page layout Show comments on pages and Place Thumbs on Pages and remaining together disable but you can enable them.
In Ads management you can enable single post banner (which remains disable as default) also input 468×60 advertisement banner image URL or Adsense ad code for 468×60 adsense code.
SEO (Search Engine Optimization) configurations in Divi theme options include separate SEO settings for Homepage, Single Post Page and Index Page.
In Homepage SEO you can enable custom title, meta description, meta keywords, canonical URL’s
If custom titles are disabled, choose autogeneration method which can be BlogName | Blog Description, Blog Description | BlogName, BlogName Only.
Define a character to separate BlogName and Post title – The title separator is default to | but you can add another character.
In single post page SEO you can add the same changes you did on Homepage SEO but a little bit change like “If custom titles are disabled, choose autogeneration method” which can be Post title | Blog name, BlogName | Post title, and Post title only.
Index page SEO is almost similar to Homepage and single post page SEO.
When you’re done editing Divi theme options don’t forget to Save changes you made.
To learn more about Divi theme options setup head to Elegant Themes Documentations.
Divi Theme Customizer
With Divi theme customizer option you can customize your Divi WordPress theme content and layout presentations on homepage and static post pages. Divi theme customizer allows you to make changes on general settings, header & navigation, footer, buttons, blog, mobile styles, color schemes, menus, widgets and static front page settings.
Learn more about Divi Theme and module customizer
Divi Module Customizer
Divi module customizer allows you to customize modules active on your WordPress site. The major changes you can make on any Divi module including Background color, Font size, Font style, Padding etc.
Divi role editor allows you to enable or disable roles to access any specific section in your website as Administrator, Editor, Author and Contributor. You can restrict your blog contributors and authors to access not all the paths in your website those paths should be kept private for administrator only.
Learn more about Divi Role Editor
Divi library is a directory of your saves layout templates that you created with Divi builder and saved on Divi library using different names. You can edit your existing layouts, remove from Divi library and add more Layouts using “Add New” button.
Learn more about Divi Library
Divi Theme Plugins
Divi theme is undoubtedly a powerful WordPress drag and drop page builder theme which allows you to build any website in minutes. We know Divi theme is quite powerful yet but still it needs supports from third party plugins to work super fine without making any issue.
The following plugins are important for Divi theme and you can consider downloading them if you want maximum productivity from Divi theme
Divi Module Editor 2.4 for WordPress − Divi Module Editor Pro puts professional CSS edits of the Divi Theme right into your hands. The effect you want is never more than a click away.
LayerSlider Responsive WordPress Slider − LayerSlider WP is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects, even from your WordPress posts and pages.
Monarch Social Sharing Made Easy Plugin − Social Sharing Made Easy with Monarch Social Sharing Plugin for WordPress. Take Social Sharing to the Next Level with MONARCH, a Social Media Plugin with Style.
CSS Hero | Customize WordPress Themes Live − CSS Hero is the definitive WordPress plugin to easily customize every property of your themes with an easy and intuitive point and click interface.
Divi Booster Plugin for WordPress − Divi Booster is an easy to install, easy to use WordPress plugin. It comes with free updates for life, a 60 day no-questions money back guarantee, and is licensed for use on unlimited sites.
You can learn more about Divi required plugins in Divi Theme Plugins section
Divi Example Sites
Divi theme is used by thousands of WordPress websites around the web to run businesses in different industries. Before to create a website with Divi theme you may want to get enough inspirations by watching demo sites created with Divi theme.
We have arranged some of the best collections of Divi theme demo sites listing in different categories like Business, Blog, Enterprise, Gaming, Health and Fitness etc.
To download Divi theme you need to join Elegant Themes purchasing a subscription plan.
There are three types of subscription plans Elegantthemes offer
Personal – With Personal plan you can access to all themes, get perpetual theme updates, premium technical support, and unlimited website usage
Pricing: $69 per year
Developer – With Developer plan you can access to all themes, get perpetual theme updates, premium technical support, unlimited website usage, complete access to all plugins, layered photoshop files
Pricing: $89 per year (with 20% discount you can buy this plan only at $70)
Lifetime Access – With lifetime access you can get all the premium products, services and features with respect to onetime fee (with 10% discount you can buy Lifetime access only at $224)
Divi Support & Documentations
To develop a website is always crucial task for especially WordPress beginners. Maintaining your WordPress site with a drag and drop page builder theme like Divi is really a big safe of time and money to create a professional look WordPress site and by yourself without having to use programming skill at all.
To expedite your Divi experience one step faster Elegant Themes arranged a bunch of handy Divi theme documentations tutorials with effective videos that can help you to understand every bit of Divi functionalities and actions effortlessly.
When you face any trouble with Divi theme maintenance always give a heads up to Elegant Themes developer team also their documentations guides can be great remedy.