Divi Builder

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 with the help of the Divi Builder content is not a problem to put onto a web page.

The Divi Builder is a Page Builder that comes with the Divi Theme. The Page Builder helps you build the content using the drag and drop modules. The modules have specific functions and you can adjust the settings to style the text.

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 long text, should align 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.

This blog post was writen using the Divi Builder.

The ability to style the content onto the blog page enhances the reading experience for the person reading the blog post. This might take some extra time but it is worth the extra time to make the content interesting and emphasize a specific point.

Your work isn’t in vain, you can save the layout to the library and reuse it.

[et_pb_blurb_extended title=”Update” url=”https://joanmargau.com/write-in-real-time-with-the-divi-visual-builder/” url_new_window=”on” read_more_button=”on” read_more_text=”The Divi Visual Builder” use_icon=”on” font_icon=”%%138%%” icon_placement=”left” _builder_version=”4.5.0″ _module_preset=”default” custom_read_more=”on” read_more_border_radius=”24px” link_option_url=”https://joanmargau.com/write-in-real-time-with-the-divi-visual-builder/” link_option_url_new_window=”on”]

Since this article was written in January 2018 the Divi Theme has added another stunning feature the Divi Visual Builder. This is an onpage editing tool where you see your edits in real time.

You aren’t looking at the wireframe view, you’re looking at the web page view. Here’s a link to the article about the Visual Builder on my other website. Check it out.

[/et_pb_blurb_extended]