How to Save Time and Get Better Results with New Divi Visual Builder

Insert Specialty columnsNormally a WordPress theme update is a ho-hum affair. A few behind-the-scenes tweaks, maybe a new feature or two… yawn. That’s not the case with Elegant Themes’ release of Divi 3.0.

Divi 3.0 includes a number of small changes, but there’s one addition that really stands out. It’s called the Visual Editor, and it makes page creation smooth and easy.

Previous versions of Divi offered two ways to build pages and posts — the traditional WordPress editor, or Divi Builder.

In previous versions, clicking the Add New button for a new page or post brings up this screen.

Divi Builder

The big purple button takes you to the Divi Builder, which looks like this.

Divi builder

With Divi 3.0, however, once you click the Use Divi Builder button, you have an additional choice.

Divi Visual Builder

What’s the Visual Builder?

The Visual Builder is the biggest change in Divi 3.0.

Normally you create WordPress content in the back end. To see how your page or post looks, you then switch to preview mode. The Visual Builder eliminates the back-and-forth by letting you build on the front end.

That means, what you see is what your readers will see. You can adjust, edit, add images, etc., in real time, seeing the page evolve before your eyes.

Click the Visual Builder button, and you’ll see a page with only the site’s header and footer. The following examples come from a site I use for experimentation.

Divi Visual Builder

Click the green plus sign, and one set of commands opens up. Click the purple ellipsis, and a second set of commands rolls out.

Controls are out of the way until needed in Divi's Visual Builder

The company’s intent was to make these commands instantly available, but out of the way until you need them. In this, they’ve succeeded.

The Divi Builder puts together pages using units, which include sections, rows, and modules. The Visual Builder does exactly the same thing. The blue plus sign adds a new section, the green plus sign adds a row. After you add a row, you insert a module in that row.

Sections

Sections can be

  • Full-width
  • Regular (called Standard in the Divi Builder)
  • Specialty

Each section is color coded: Specialty is orange, Regular is blue, and Full-width is purple.

A full-width section takes the full width of your page. It’s good for headers and for front pages. There are 9 modules available to choose from:

  • Code
  • Header
  • Image
  • Map
  • Menu
  • Portfolio
  • Post Slider
  • Post Title
  • Slider

A specialty section allows you to use several different column arrangements within the section. If you want to include a sidebar, this is the section to select as the sidebar (indicated in orange on the grid) will occupy that space for the entire length of the page, just the way a traditional sidebar does.

Insert Specialty columns

A regular section allows you to select the number of columns. If you want a sidebar, use the specialty section instead.

Add rows to Divi

Rows

Within each section add one or more rows.

Modules

Modules display the content, which can be text, images, audio, video, or a number of custom post types. The available modules vary depending on which section you’re using. The full-width section, noted above, includes 9 modules.

Both the specialty and regular sections have 37 modules available.

Customizing Is Easy

Add a custom background image or background color to any page, section, row, or module. Change the typography. Adjust margins and padding. Add a background video, or change scrolling to include a parallax effect.

Add custom CSS on a per-module, row, or section basis. It’s easy to add custom CSS sitewide as well, though you don’t use the Visual Editor for sitewide CSS.

Right Click in a Section for More Editing Choices

Right click inside any section, and additional editing tools appear.

right click brings up additional editing tools

Drag and Drop

Another benefit to using the visual editor is that you can easily change margins and padding within sections, rows and modules with a simple drag and drop.

For example, I didn’t like the amount of white space on the front page I was mocking up.

too much white space

I simply highlighted the top module by hovering my cursor over it. With the section margins showing, I could see there was a lot of padding at the bottom (the light green block).

eliminate extra padding easily

I placed my cursor on the bottom margin and dragged up.

Voila! Extra padding is gone.

extra padding is gone

What do all those icons stand for?

The Visual Builder uses a standard set of icons for editing sections, rows, and modules. They’re color coded to make it a little easier.

  • Blue is for editing the section.
  • Green is for editing the row.
  • Black is for editing the module.

icon sets are color coded

Each set includes five icons, except the green set, which has six.

Here’s what the icons do:

    1. The first one, the four arrows, lets you move the selected module, row, or section (just click the icon, then drag and drop the selection).
    2. The gear icon controls the settings for the selected module, row, or section.
    3. Click the duplicate icon to copy the selected module, row, or section.
    4. The down arrow copies the selected module, row, or section to the library.
    5. The trash icon clears that item from the page.

The additional icon in the green icon set (rows) lets you choose or change the number of columns in that row.

Scroll down and look at the icon set in the lower left-hand corner of your page. (If you don’t see it, click the purple ellipsis to expand those icons.) You can view the page in computer, tablet and phone views, to see, in real time, how the page will look on different devices.

In the lower right-hand corner are the buttons to save your draft or publish your page. In the middle, click the big purple X to show or collapse the expanded view.

      • The purple plus sign will load a new page layout from the library.
      • The down arrow saves your current page layout to the library.
      • Trash will clear the current page layout.
      • X collapses the settings.
      • The gear icon opens up page settings.
      • The clock shows editing history.
      • The double arrows let you export your page settings as a JSON file to use on another Divi-powered site.

Customize the Visual Builder Interface

Last, but not least, you can customize the interface itself so that it meshes with your working style. Drag the edges to enlarge or shrink it, or drag it to a new position on the screen.

Look at the two icons in the upper right-hand corner of the Settings editor, for example. The one on the left will expand the editor, the one on the right will roll it back to its original width.

chage settings

Want to edit some text? Just click and start typing. At the same time, a text editing flyout appears, letting you easily apply bold or italic, add a link, change text color, or make other changes.

change text on the fly

If you need to revert to the original Divi Builder, click the Edit Page link at the top (remember to save first!), and you’ll see the traditional Divi Builder editing screen.

switch to the traditional Divi Builder

Click Use Visual Builder to return to the Visual Builder.

While I haven’t had a lot of time to use the new Divi 3.0, I’m pretty comfortable with it already. If you’ve used Divi, you should find the Visual Builder intuitive and easy to use.

If you’re starting out with Divi, it might be helpful to experiment with the traditional Divi Builder first. Once you feel comfortable building a page with sections, rows, and modules, then switch to the Visual Builder.

Either way, Divi 3.0 is a powerful page builder, and the visual interface makes it a joy to use. Click here for a live demo, and to order.

I wrote this article for the Sitesell Blog, where it was originally published. Used by permission.

More Tips and Tricks

Want more WordPress tips and tutorials in your inbox? We'll start with a 7-part autoresponder series, then biweekly emails.

Comments

  1. Hi Susanna!
    This was helpful. I’ve been confused about that visual builder and the color coding explanation was great. I wanted to ask that you often mantion that you have a site to play on. I heard it from others as well but cannot figure out how to have a testing site so am not always hanging things on the site I consider “real”. Maybe I am the only one who has not figured that out, but cant find the how to’s for that. It would be so nice to have the play space.
    Thank you!!!

    • Teri, I actually have a domain name and an entirely separate site that I use as my sandbox. (That’s generally what I use to test out hosting companies as well.) If you’re on a shared hosting plan that allows you to host more than one domain, you could do the same. There are also some hosts that offer staging sites, but they tend to be the higher-end / managed hosting companies.

23 Shares
+112
Share5
Buffer3
Pin2
Tweet1