Overview of Revolutionary Divi 3.0 Update – Full Tutorial

At the beginning of September, Elegant Themes released a massive update to their premium and most flexible theme, Divi. Divi 3.0 introduces a variety of new features that extend the flexibility and ease-of-use of the theme. However, the biggest change that shakes the very foundation of WordPress is the Visual Page Builder. In this article, we will go over the new Divi 3.0 updates, but most importantly the new Visual Page Builder.

Introduction and Quick Overview of the Page Builder

The new page builder released in Divi 3.0 is without a doubt the quickest, cleanest, and most powerful front-end page builder I have ever seen or used. The page builder was developed using a modern javascript library called React that allows for quick and stress-free web interfaces. Say goodbye to the old clunky page builders of the past and say hello to the Divi 3.0 page builder that will update your page as you work – no more slow, eternal loading bars after each change. I was stunned by this speed and ease-of-use, and I’m sure you will be too.

Accessing the Page Builder and Navigating through Features

You can access the front-end page builder in two ways.
1. Login to your WordPress dashboard.
2. Go to the ‘pages’ tab.
3. Click on the page you want to adjust.
4. Find the ‘Visual Builder button.’ Click this and you will be directed to the front end builder page.

unspecified-29

You can also access the builder by going to the page on the live website. On the admin bar above the page, there should be an option to click called ‘Enable Visual Builder.’

unspecified-32

Once you get into the builder you will be confronted with several different options panels throughout the page. Hovering over certain elements of the page will bring up options that you can then click and adjust. Everything you are able to do with the normal Divi builder is available on the front end page builder.

The best way to learn about where everything is placed is by building pages yourself. Experiment with building things and eventually you will become very quick with building and adjusting your WordPress pages with the front end Divi Builder.

It’s very important to remember that to save your changes you must click on the purple circle at the bottom of the page and click on the save button.

unspecified-33 

Changing Content and Adding Modules

The new Divi builder features the ability to change the text within the page without opening the specific module that it is placed in. Just click on the letters on the page and you can edit the text content and add styling effects with the gray options bar that will appear above the text when you start editing. Editing text on posts and fleshing out your pages with content has never been easier.

unspecified-34

Besides just adding and changing text from the visual builder, it is easy to add modules to rows and new rows to the page.

To add a new module to a row, hover over the top region of the row and click on the gray, circular “plus” button. A pane with various modules will appear that you can add to the page and customize.

unspecified-35

To add a new row to a section, hover over a current row and click on the green, circular “plus” button that will appear at the bottom of the row. From there you can add modules and customize it.

unspecified-37 

To add a new section to the page, just go to the bottom of the current section you are working on and hover over it. A blue, circular “plus” button should appear that you can click on. From there, you can add in rows and customize it.

Responsive Development

One of the finest features of the new front end builder is the responsive development and design panel. You will be able to view how your website looks on desktop, tablet, and phone by accessing this feature.

To get to the responsive design tab, click on the purple circle at the bottom of the page. Once it is expanded out, you should see the gray responsive design toolbar to the left of the screen.

unspecified-38

The icons and what they do are listed below:

unspecified-39 This icon will zoom the page out so that you can view the overall layout of the page easily. You will be able to see most of the site from this view, even if it is a long, scrolling page.

unspecified-40 This icon will present a desktop view. This is the standard view for most people that browse on a desktop or laptop.

unspecified-41 This icon will present a tablet view that will emulate the website view on tablets and very small laptops.

unspecified-42 This icon will present the phone view. This view will deviate the most from the others views and is very important because many of your website visitors will be on mobile phones.

In a world where responsive development is becoming increasingly critical, the responsive design editor will help you adjust and tailor how your site looks on various screens.

Drag to Adjust Page Layout and Sizes

Everything within the front-end page builder can be dragged around and adjusted to fully cutomize the layout of the page. Below are some of the features that you can take advantage of.

  • You can move around the order of rows by hovering over the row. On the green toolbar that appears at the top left of the row there should be a cross of 4 arrows. Press down on this icon and drag to move it where you please.

    unspecified-43

  • Add padding to specific rows by hovering over the row then dragging over one end of the row. A light green shading should appear over the region that will be padded.

    unspecified-44  

Revision Restore and Interface Customization

A great feature of the visual builder is the ability to undo certain changes and view your edit history. You can view your edit history and revert back to old versions of the page by clicking on the bottom purple circle. After that, click on the clock icon and the edit history pane will appear.

Another great feature of the visual builder is the ability to customize the layout of the builder itself. After opening any pane, such as row settings, you have the option to increase the size of the window, snap it to the left side, or move it around.

unspecified-45

Conclusion

Now that we’ve gone through a brief tour of the new Divi visual builder, it is up to you to start building new posts and pages faster than ever before! The best way to learn and speed up your development is by doing, so get out there and start building.

Do NOT follow this link or you will be banned from the site!