Introduction to Divi

by | Feb 18, 2017

Please note that the topics covered in this Introduction to Divi tutorial relate to the Divi theme and also the Divi Builder plug-in which can be added to any WordPress installation as a plug-in.  Persson Technologies includes Divi technology at no extra charge to all of our customers.

In this module we will cover these topics:

 

  • How Divi simplifies page layout
  • How to add a page section and choose options
  • How to add modules and choose options
  • Samples of pages showing layout and Divi configuration

How Divi simplifies page layout

Let us take the example of the following section.  We are going to add four sections across the page, each one will include text at the top with a picture down below (this will not of course display as four items across the page on smartphones and tablets).

Below is a picture of a computer CPU still in the box
Below is a picture of a computer power supply
Below is a picture of a computer motherboard
Below is a picture of an empty computer case
Computer CPU
Computer Power Supply
Computer motherboard
Computer case
Now, in the old days before Divi and similar technologies arrived on the scene you would have needed to create two divs in your HTML code, one for the text and one for the images.  Each text section would need to be a paragraph and would require a unique ID.  The images would all need a unique ID as well.  Then in your CSS file you would need to define the alignment and float parameters for each item.  There is an article here briefly explaining how you might arrange images on a page using CSS: http://www.inmotionhosting.com/support/edu/website-design/insert-images-website/align-float-images-css

With Divi you don’t need to be aware of the details happening in your HTML code or how CSS works, Divi does this all automatically so you can concentrate on the page layout instead of all the technical details.  This is a graphically oriented drag-and-drop operation.  For the above example I created two sections with four items across the page and added text modules on top and image modules on the bottom and I was done.  You will note that when you click on an image it will display a larger version, that is an option within Divi called Lightbox and did not require any additional coding or configuration.  This is how the section above appears in the Divi configuration:

Divi Four Sections Across

How to add a page section and choose options

The main building block for a Divi page is the section.  When choosing to add a new section you can specify the type of section that will be added to the page.  Below is an example of the section options (highlighted in yellow) as shown on this page as it is being created:

Divi Add Section Option
When adding a section in Divi the two major choices you will have is a standard section or a specialty section.  When choosing a standard section layout you are only deciding how the first row will be configured.  These same exact choices will be displayed as you add each new row so you can completely change the layout of the page as you build it.  For instance, you can have one row that has a one-half width module on the left and two quarter-width modules on the right, etc.  With a specialty section on the other hand you are making a special choice that will remain for the entire section.  The orange items in this screen shot represent modules that will be shown for the full length of the section.  For instance, you might want a menu on the left that is shown for the full length of the page with a sidebar on the far right side of the page.  You can of course have several specialty sections on one web page.

Divi Standard Section Choices

Divi Add Standard Section

Divi Specialty Section Choices

Divi Add Specialty Section

Please note that when you are working with a section or row, the maximum number of modules you can configure across the page is four (Update – this is no longer true in July of 2019).  Therefore, if you are working with a specialty section this limits the types of rows you can add.  In this example I have created a specialty section where I have full-length modules on the far left and the far right.  Therefore, in the middle as I add new rows the maximum number of modules I can add in the middle of the page is two.  In a specialty section the module colors are different for the section and rows to easily distinguish them from a standard section with standard rows.

Divi Specialty Section Example
Persson Technologies Header

While we are still on the topic of sections and rows I need to mention a few awesome options.  For instance, you can clone a section or a row or you can drag and drop it anywhere on the page.  You can change the configuration of a existing row, for instance changing it from 1/3 and 2/3 to four across.  You can also save a section or row in the library.  The standard Persson Technologies header that appears on the top of each page is a prime example.  This is a section with a gray background.  It has an image module on the left and a text module on the right.  This was created once, exported to the library, and then imported into each page where it was needed.  When this series of WordPress tutorials are complete a section will be created on the bottom of the first tutorial explaining the contents of each tutorial with links to the articles.  This section will be saved to the library and then imported into each article.  The layout of an entire page with the associated images can be saved to the library and then imported into another page or even exported to another WordPress installation.  These options represent huge shortcuts to reduce the complexity of creating web pages.

How to add modules and choose options

Divi Modules
There are several modules built into Divi.  Without Divi, several of these would need to be added using individual plug-ins gathered from several different companies across the Internet.  Since these modules are all part of Divi you can rest assured they will always work and they will not conflict.  To add a module to a section of a row, you simply click the “insert module” link as shown in the previous screen shots. Shown here is a master list of all the modules that can be added within a Divi page.  For more details regarding each module you can click on the name of the module on this page.

Since this tutorial series is just a brief introduction to the WordPress and Divi worlds there is no way that we can possibly cover all the configuration options for all the module types. (Some of this will be covered in the next two modules.)  Shown here are the major options for the text module.  Once again if we were not using Divi all of these options would need to be controlled using manually inserted HTML or CSS code.  Most of the options shown here are self-explanatory.  On the bottom you will note settings for the margin and padding.  This can be used in modules, rows, and sections to more finely control how items are placed on your web page.

Divi Text Module Settings

Samples of pages showing layout and Divi configuration

In this section of the tutorial we are going to show some examples of web pages along with the behind-the-scenes Divi configuration so you can get an idea of how this works.

Persson Technologies HomePage
Persson Technologies HomePage Divi Configuration
Divi Page
Divi Page Divi Configuration

Here is an index to all the articles in this tutorial series:

 

  1. Introduction to WordPress Part One - WordPress Basics https://perssontechnologies.com/wordpress-basics/
  2. Introduction to WordPress Part Two - WordPress Themes, Plug-ins, and Updates https://perssontechnologies.com/wordpress-themes-plug-ins-and-updates/
  3. Introduction to WordPress Part Three - Introduction To Divi https://perssontechnologies.com/introduction-to-divi/
  4. Introduction to WordPress Part Four - How To Use The Included Divi Modules https://perssontechnologies.com/how-to-use-the-included-divi-modules/
  5. Introduction to WordPress Part Five - How To Use Divi Tweaks https://perssontechnologies.com/how-to-use-divi-tweaks/
  6. Introduction to WordPress Part Six - A Brief Introduction to Search Engine Optimization https://perssontechnologies.com/a-brief-introduction-to-search-engine-optimization/
  7. Introduction to WordPress Part Seven - WordPress Advanced Topics https://perssontechnologies.com/wordpress-advanced-topics/