In this tutorial, Jimi Blevins explains how to get started with the new visual builder for the Divi WordPress Theme.

Take A Test Drive

Sign up for a 15 day free trial to our powerful WordPress Hosting Platform.  Take advantage of everything we have to offer for free.  No credit card required!

Transcript from the Divi Tutorial

Hello, this is Jimi Blevins with Mozaic technology. Today I’m going to be walking you through just an overview of the settings and new features that they’ve added to the Divi Visual Builder. [It] just got released today so I’m putting together this tutorial just to give you a great overview of the product. So, the way to  get started with it is; I’ve already come in and added a new page in my WordPress dashboard, and the way that I get into the Visual Builder is, you want to click  here on use the Divi Builder
DB001

and then you’ll notice this new button pops up use Visual Builder

DB002

so we’ll click on that, and that’s going to take us to a page that looks a lot like a blank page on our website. And this is what’s great about visual builders, is as you’re making edits and adding content to the page, you get to see right there in real time what its gonna look like when it’s a finished product. So, we’re no longer bouncing back and forth between the admin and the frontend and the admin and the frontend, kind of waiting to see how things look, we can do it just on the fly right as we’re working on it. [It] saves us a  lot of time in our workflow and it’s a really great option they put into the new builder. So I’m just going to go through these options down here at the bottom of the page just to get started. Over here you’ve got your responsive option you have the option to switch between tablet you desktop view.

DB003

You can also switch and see how it’s going to look on a smartphone. And again, this is really time-saving because I can just switch back forth between the views (especially if I’m working on things that, maybe I want to disable something in mobile view and I want to just make sure that that, that works so that’s taken care of). Alright so over here, we have our Library.

DB004

And this – most of these options are the same as they were before but just been streamlined a little bit and made a little bit easier to access. So this, of course, is if we want to load any predefined layouts that the Divi team has already put together and if we want to add anything that we’ve saved from our own library. So this is great if you want to jump-start a page. If you already got another page that you’ve already made [and] its laid out the same way that you want your new page, you can just grab it from this if you’ve saved it in your library. And it’s just something to save a lot of time.

DB005

This next option is again if we want to add a template to the library. This just saves us a couple clicks we can go ahead and search for the name, pop it in there.

DB006

Now the settings are almost identical to the way they were before.  We’ve got our color picker color palette here which helps us save time by assigning different colors we might be using frequently. And what’s great about the page settings is this is just for this specific page so if I want to use a different – if I want to set up different colors for this page – say I’m making a new landing page and I want to have a little different look and feel from my website – I can assign all these colors and then when I need them they’re right there in every other color palette. And I can also pick gutter width, text color, background images, backgrounds, and of course I can also do any custom style sheets that I want.

DB007

The next one is our editing history. This is kind of like the revisions that we’re used to in the WordPress dashboard. This helps us go back to anything that, you know say – say we were working on a section and it kind of took a turn we didn’t like, we want to go back to the way it was just a few turns ago – we can come back in here, click on – you know click back through and find the one we want still – it’ll give us a good starting point again and that pretty much covers that.

DB008

You’ve got your import and export feature here, which helps you import and export any layouts that you’re working on – which is actually really similar to this button here as well.

DB009

So next off is your section, and like usual with regular Divi Builder, this is already added – a standard section – so we can go ahead and have all our options here. We can drag it, move it anywhere that you want. We can also change the settings for the specific setting – section – background images, and custom style sheets that we run on there… And also duplicate it. You can import and of course, you can clear it out, get rid of it. If you want to add another section, that’s easy – click on this button here and it gives you the same options you had before. You can do specialty predefined layouts, you can also add a full-width section. [There’s] many different options that are very similar to what we’re used to and I think they’ve added more.

And then last but not least what we click on here – this is a row feature (and I really like that they added this) that when you’re done adding your row [it] automatically pops up for you to insert a new module. [It] doesn’t save you a ton of time but those little extra seconds here and there do really add up towards the end of the project. So that’s a basic overview of the options that they’ve added with the Divi Visual Builder. I’m really excited to get working with this, and all the individual modules, and put together tutorials with this new builder for you guys; so stay tuned and we’ll start releasing more of these probably next week. Once again I’m Jimi Blevins with Mozaic technology and thank you so much for watching.