Divi Theme and Divi Builder Plugin


HomeWordPress → Divi Theme and Divi Builder Plugin


As the the Divi theme, as well as the Divi Builder plugin, do offer much more customization options than the others, they will be explained here. While the Divi Builder plugin gives you the option to create custom page layouts and functions within another theme, the Divi theme has that builder already implemented and, in addition, offers almost endless site-wide design customizations.


FIRST, NOTICE THESE ESSENTIAL RULES:

If you use the Divi theme, make shure that the following
plugins are deactivated:

  • Divi Builder
  • WP Lightbox 2
  • WP Google Fonts

The reason is that the Divi theme has a builder built-in, got its own Lightbox functionality and Google font embedding. Incompatibility issues might occur if you activate one of these plugins while using the Divi theme.

If you use the Divi Builder plugin in another theme,
deactivate the plugin:

  • WP Lightbox 2

The Divi Builder

The Divi builder, when used in another theme than the Divi theme, has it’s own section in the admin menu at the left:

  • Plugin Options (not many)
  • Divi Library (your saved custom layouts)
  • Role Editor (used to specify the particular admin rights of other CMS users)

When used in the Divi Theme, you have the full Divi settings menu at the left (see Divi “Theme” below).

To use the Builder in a page or post, first activate that button:

usethedb

The core of the Divi Builder is the option to give any page or post an individual, custom layout, and implement the various Divi “Modules”. The modules are pre-manufactured functional elements, like “Image”, “Gallery”, “Accordion”, “Contact Form” and many others. Each module offers various settings and customization options.

As for the layout, columns and rows can be set in standard size (when used in other themes) or even in full-width size (when used within the Divi theme).

Note that the Divi layout builder works on a empty content area. So, if you want to see the title of this page, for instance, create a 1/1 column row first and then insert the “Post-Title” module inside that row. This module will retrieve the title you have typed in the title filed at the top.

Then create a new section and introduce the column design you want:

columns-divi

Then choose a column element by adding any of these modules:

divimods

savelib2

Any layout built with Divi Builder can be saved into the Divi Library and be reused on other pages or posts.

In the library there’s also a huge collection of predefined layouts that can be loaded into your page or post.


The Divi Theme

The Divi theme has the above mentioned builder implemented, and offers additional options to modify the entire site. The Divi theme has it’s own section in the admin menu at the left.

divi-options

Theme Options: Set up Logo, Favicon (small image in browser tab), social media settings, and many more. At the bottom there’s a field “Custom CSS”, a powerful feature to make self-coded, site-wide design modifications (CSS skills required). Use this feature only for modifications that can not be achieved with the above-mentioned Theme Customizer.

divi-customizer

Theme Customizer: Also located at Appearance → Customize, this customizer gives you almost endless options to modify the site’s design. Each section has subsections with many settings.

For instance, at Customizer → Footer → Bottom Bar → “Edit Footer Credits”, you can edit the default footer text, something which must be done with hard-coding in the theme’s php files, usually.

typosmaller

At Customizer → General Settings → Typography you may for instance choose the font for “Header Font” (headlines) and “Body font” (regular body text). It’s not as much choice as with the Google Font plugin, but as said, do not use Divi theme an Google Fonts plugin together.

Also finetune the font colors (at the bottom), font sizes and line-heights (at the top), even the letter-spacing for header fonts can be specified.

Go through all sections and play with the options. While you’re modificating, you’ll be able to see your modifications of the frontend on the right side of the customizer, even when you have not saved your modifications.

When you leave the Theme Customizer, the Module Customizer, next in the left Divi admin menu, lets you modify the settings of the particular Divi modules.


More visual Web Builders

New, hot, experimental, though not WordPrees-compatible

Macaw
The Grid

Advertisements