Introduction to Divi
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).
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:
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:
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.
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
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.
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.
Here is an index to all the articles in this tutorial series:
- Introduction to WordPress Part One - WordPress Basics
- Introduction to WordPress Part Two - WordPress Themes, Plug-ins, and Updates
- Introduction to WordPress Part Three - Introduction To Divi
- Introduction to WordPress Part Four - How To Use The Included Divi Modules
- Introduction to WordPress Part Five - How To Use Divi Tweaks
- Introduction to WordPress Part Six - A Brief Introduction to Search Engine Optimization
- Introduction to WordPress Part Seven - WordPress Advanced Topics