Blog With Divi Using the Divi Builder
Ever since the Divi Theme came out in 2013, I have been using it and this is why you see all these articles about Divi. It is the one theme that answered something for me personally. I can arrange the content of a website with any number of layouts and styles. Apart from having a love of art, design, and form, I find the creation of content in a website fascinating.
The Divi Builder is a Page Builder. This is a plugin that when added to WordPress gives you a system of modules to use. The modules have specific functions and are pre-formatted. If you’re using the Divi Theme you don’t need to add the Divi Builder plugin.
The Divi Builder works with most WordPress themes. One thing you’ll find with plugins, they can be incompatible. Anytime you have different teams of people contributing to a main source, there are bound to be collisions of incompatible computer code.
The Divi Builder has the modules built in. You select the specific module you want for the content for the page or blog post. When you open the Divi Builder you’ll see the Divi Builder with a standard section.
There are two ways you can put content onto a web page:
- Use the Divi Library Layout
- Use a standard, fullwidth, or specialty section layout
You are not using the default WordPress post editor. All the icons on the tool bar in the default editor will be inside the modules. In our example we’re going to use an image and a text module for a blog post.
Refine the text
You don’t want the text to be too long, it has to fit into the context of the image. When text is carefully placed it works well with the image.
The block, or modular system lets you place content without using HTML code. You enter the content into the placeholder, the text module.
Let’s look at the layout with the modules and the settings used. The image module is on the left and the text module on the right. The row has a background color with a reduced margin (or gutter) width.
This is what the back end layout looks like. An image and a text module in a two column row layout.
To set the background color we have to open the Row Module Settings and locate the Background in the Content area of the Module. There are three areas, the Content, Design, and Advanced tabs which contain all the different settings to style the module.
In the Row Module Setting start with the background color. You want to choose a softer color rather than brighter.
Did you know there are many people who can see color but are “color blind,” they don’t see the true color but an altered color.
We are selecting a background color to compliment the content and someone with a disability. The content in this row is an image on the left and the text on the right.
After setting the background color go to the design tab and set the row to fullwidth. Scroll down and you will see the option to use the Custom Gutter Width. Set the Gutter width to 1. This reduces the margin of the 1/2 and 1/2 column width.
Equalize the Column Heights to make sure the content and the image are aligned. The image is in Column 1 and the text in Column 2.