Getting Started with the Divi Builder

a divination thanks for stopping by to learn more about the Divi builder with our Divi documentation so in this video what we're gonna show you how to do is get started with the Divi builder so the Divi builder is baked into our Divi theme our extra theme and of course it is the Divi builder plugin so there's a lot to get into when it comes to getting started with the Divi builder there's things ideal for the beginner and for the professional so what we're going to do is show you how to use all of the most basic features and then give you kind of like an idea of what's possible when you start to get really creative and advanced with a lot of the design features and functions that we've put in the advanced design tab as well as the advanced CSS tab of most modules so strap in this is a little bit longer video than most of ours but I know you're gonna enjoy it and get a lot out of it check it out in this tutorial I'll be giving you a basic overview of the Divi builder with a focus on the visual builder interface now this is going to be a very basic tutorial and I'm going to cover a lot of things but I'm not going to go too in depth into any particular feature because there's just so much to show you but if at any point during this tutorial you want to learn more about something that I'm talking about head back to our main documentation page where we have dozens and dozens of full length tutorials that cover every single aspect of the Divi builder the Divi builder is a drag and drop WordPress page builder that allows you to construct your pages from top to bottom by combining various structural elements think of it as a mini website builder that lives inside of WordPress and replaces the standard WordPress post editor the Divi builder has three main structural elements that are used to build all of your pages those are sections rows and modules sections are your largest organizational element and they are used to house rows of columns and inside of each row inside of each column you can add modules modules all your content elements like texts and images sliders galleries and you use rows and different columns to organize those content elements and then you use sections to organize your rows so that's kind of like the hierarchy of every Divi Builder page this is a page here that I built with the Divi builder it's a very very basic page with the most basic of modules this first big section here is big white block you see that's that's my first section and inside of that section are two rows this first row here is a two column row inside the first column of our first row we have a text module inside the second column of our first row we have an image module and then below that we have a second row just a one column row with a single text module below this we have our second section I've added a dark grey background to this section and you can kind of see where the first section ends and this second section begins and inside of this section I have a single row this row is a three column row and I have placed an image module into each of the three columns so like I said these are just the kind of the most basic of the modules but there are over 40 modules and reading arranging from simple things like text to more advanced things like contact forms and email opt-ins portfolio sliders and all this kind of great stuff so if there's something you want to add to your page there's a good chance oh there's a module for that so what I'm going to do now is is jump into the visual builder and kind of show you what the the Builder interface looks like so I'm going to click the enable visual builder and that's going to launch the Builder and allow us to edit our page so here we go slow ting up and we are now in the visual Builder the reason I keep calling it the visual builder is because there are two builder interfaces to Divi there's the visual builder that lives on the front end of your website so as we're as when we're logged into to to the website and we're brow you're paid the pages at any moment while you're on the front end of your website like this you can enable the visual builder and start editing your page on the page itself so this is the page I showed you before but now the Builder is enabled and I can start editing things you can see that each row has some sections you can see the modules here you can add new modules add new rows add new sections and do everything visually this is really kind of the the beautiful thing about the Divi builder it's this visual builder interface but there's a second interface as well called the backend builder and this exists inside of the WordPress dashboard and it allows you to do all the same stuff you can do in the visual in the visual builder it's just here for your convenience inside of the the dashboard so if you're editing your post you can use the backend builder and like I said it has all the same stuff the only difference is you are editing using this block based representation inside of the post editor and it's great for making quick edits you can you know add new modules you can edit your module settings and do everything you can do everything inside of here and you can kind of see the structure that of our page right you can see our first section here it's that blue element on the on the side you can see our two rows that I showed you before our first row of two columns our second row of one column our various text and image modules and if at any point during this time you want to enable the visual builder you can click the use visual builder button here so you can actually bounce back and forth between the visual builder and the backend builder at any time so I'm going to head back to our visual builder here and if I wanted to edit the page I can click edit page and I'll bring us into the WordPress dashboard and here we have the backend builder and if I want to jump into the visual builder I can click the use visual build a button from the backend and jump over to the front-end and like and like I said in the beginning of this tutorial I'm really going to focus on the visual builder interface but both of the build interfaces do the same thing they work in same way so anything I'm saying here it applies to the backend builder as well okay so now we are in the Builder you can kind of see these structural elements I was referring to before we have our first section here outlined in blue you can do various things to each element you can move them around by clicking the move icon the second icon here is the Settings icon when this is clicked it opens up the settings for this section and you can you know edit the background image background color and all this great stuff second is the duplicate button if I click this it's gonna duplicate the section and here we go it's been duplicated the second one here is saving to library so the Divi library is a place you can kind of save elements and you reuse them for later but I'm gonna skip past that and kind of go over that later on and finally we have the Delete icon you can use this to delete something okay so I've duplicated my section I deleted it and we're kind of back to where we started here and next up we have our first row and again you can move it so I can move the row down if I wanted to or down the page I can move it over in this section if I wanted to I can move it back up you can open up the row settings these say the settings pop-ups are nice you can adjust their size and everything you can also snap it to the left and if you prefer to have a sidebar mode and you can make it bigger and smaller and all that great stuff I didn't expand it contract it it's really great working in the visual builder we've we've really worked hard to make sure that the interface doesn't really obstruct your vision of the content we try to make it as invisible as possible in fact we often call it the invisible interface so there you can open up and manage your row settings and lots of great stuff here again I'm not going to go into too in-depth into all the settings we have individual tutorials that cover all the section settings all the row settings all the module settings okay so that's our first row inside of the row we have two modules here again I can move the modules around I could move this down here if I wanted to I can move it back up I can open up the settings for the text module where we can adjust color and orientation and the text itself you can duplicate it so you can save it to the library and you can delete it okay also in text modules which is great you can in fact any text on the page in the visual builder you can just click into and start typing it's it's really amazing you can highlight it adjust the fonts you can do everything you can you know apply H ones apply text sizes adjust the fonts adjust the color it's really really really great um and here we have our second module here the image module I could open up that and you know change the image if I wanted to I'll adjust the image there there we go I mean all the other image settings so like I said I'm not going to go in-depth into all of these settings because there are over 40 modules and hundreds and hundreds of settings that's why I did we have tutorials for all their four modules but in general when you open up a settings modal like this you will be greeted with three different tabs we have our general settings tabs and inside the general settings you can basically find everything you need to configure the basic settings in the module you can adjust the content of the module you can adjust its layout and its basic colors and that kind of stuff but if you want even more control over the appearance of the module you can jump into the design settings and you want even more control you can jump into the CSS settings and you can apply custom CSS to each element in the page so for example if I were to open up the the text module settings and jump into the design tab I'm going to find all kinds of design settings you can avoid you can basically adjust every single part of the element you can adjust the text size so I can bring the text size up and you'll see it all happened right in front of your eyes you can you know adjust the styling make it all caps bold adjust the color just the font itself there's something here for every single part of the module you can even apply custom styles to different break points so we have the responsive editing system here if I click this responsive editing system I can bounce back and forth between tablet smartphone and desktop and apply different sizes and styles to different devices so I could have like a really big text size on you know a desktop but on tablet or smartphone I could bring it down a bit to make it suit the device size screen size a bit more and then at the bottom here we have the ability to save your changes so if you have been editing your module and you like what you've changed you can click the check mark to say okay I'll accept those changes you can also go back and forth through time and undo and redo your changes so if I were to increase the font size here I don't really like it I can go back and forth and you can click the X button here to just cancel everything you've done sometimes you've been playing with the module for a while and just gets out of control you don't like what you've done you don't want to go through all the settings and figure out what you've changed you just want to get rid of it and start over in which case you can click the X button then just start fresh so those controls are really really great you never have to fear that you're gonna mess anything up you can always undo and cancel yeah and whatnot okay so now we've kind of gone over the three basic elements we've gone over kind of the various things you can do with those such as editing their content and duplicating and deleting and moving now you can also add new content so this is the content that was already on our page we can add new stuff as well so if I click any of these plus buttons you can any add any of the three structural elements we have the gray plus button for adding modules the green plus button for adding rows and the blue plus button for adding sections so if I were to click the plus button here I'd be prompted to add a new section which brings us to the three main section types regular specialty and full width again we have a tutorial that goes over all this stuff when in depth so be sure to check that out but in general the regular sections are what we've been working with here they house rows of columns full width sections don't have columns they just have full width modules that expand the full width of the page that we have like full with images full width carousels and sliders so if you had a full width section that's for adding full width elements to the page and in specialty sections allow you to do various sidebar layouts but yeah check out the section tutorial which goes over all of these in a bit more depth I'm just gonna add a standard section and when you add a new section you're gonna be prompted to add a new row inside of that section and you can add like I said any of these column types so we've I've shown you it you know a two column Row three column row let's add a four column row okay so we've added our first section added a row of four columns and here you can kind of see the four columns and there's a gray plus button inside of each of the empty columns that you can use to add a module and it's gonna prompt us to add our first module automatically so I can go through the list of modules here there's all kinds of great modules like I said it's over 40 of them and we can kind of pick one to add how about a button I'm just gonna add a button to this first column okay so I click that button it's gonna bring up the button settings the button is I added automatically and we can start configuring the button we can change the URL we can decide where the button opens in the same window or a new window we can adjust the text we can change the alignment and so on you can jump into the advanced design settings and customize every aspect of the button the the color the hover color a background color text size and all that stuff okay so I've liked what I've added here I'm going to save it and we can continue adding modules I'll click another plus button this time how about we add a blurb a blurb is like a combination of text and icon so I can add a tight all tile goes here I can add in some contents that's a lot of contents I mean add a little s okay there we go and we can add an icon to it about icon to the top again just the color of the icon we can adjust the position of the icon and so on we can adjust the header font size and go through the settings just customize the module and and adjust the design as you see fit okay so I've added my first button I've added a blurb module this design is getting a little bit random but I'm just kind of showing you what can be done here and I can duplicate these and move them over to our empty columns I'm gonna get rid of this button duplicate this again and now we kind of have a standard blurb layout you kind of you often see this kind of these kind of info boxes at the top of pages a you know a kind of standard website in fact I'm gonna drag this up at the top and there we go and so yeah that's kind of how you add content you can add more rows to this section I could add another row below it I could add another section below that and so on so yeah that's kind of a basic overview of the three basic structural elements which are section rows and modules and next I'm going to go over kind of the general page setting so much like each section row and module has settings so it is the page and all of your page settings can be found down here by clicking the the dock icon and that will expand the page settings you can do things like save the page so if you'd like what we've have here we can save it and saving and it's saved so if I were to refresh this page it'd be all saved over here on the left you can jump between the responsive you toggles so you can kind of get a good idea what your site looks like on each device you can also zoom out which is great for managing your section so you can zoom out and kind of like drag things around a bit easier you can also edit things here twos I could you know bring up the section settings here and adjust this background color I like kind of getting this overheat overview mode and kind of scrolling through the page and getting I'm you know and I a bird's-eye view of the page and making kind of macro adjustments and we can head back down here so zoom back in and then to go over each of the page settings icons you actually recognize most these icons from the icons you see when hovering over each of the three structural elements but there are a couple of new ones as well so but the first one is the Settings icon you can open as open this up to adjust your page settings and there's various things you can adjust here like your basic your standard section background color your content background color text color you can add custom CSS to the page and so on you can import and export layouts so if you like a layout that you've built here you can export it and import it onto a different Divi website using the using the import tab you can bring up your editing history as well so as you edit your page every single action is saved and and logged and you can actually undo and redo and go back through time to any moment so if I were to go all the way back to the beginning I'd see the page as it existed when we started editing and you can see each and everything that I've done and if you kind of like decide after a while that you didn't like you know what you've been working on for the past 30 minutes I don't worry just go back to you know your favorite point in time so I'm gonna go back to where I am now and you can also undo and redo and once you kind of found a spot you like you can accept it or just cancel and go back to to where you started okay so that's the history history pop-up and in addition to kind of using these buttons to undo and redo you can also just press ctrl Z or command Z depending on whether it on your Windows or Mac so already delete something and just press ctrl Z it would undo that deletion you can also clear your layout so if I click this it's going to delete everything and I can start fresh up there's gone and if you did that mistake don't worry I just press ctrl-z and we're back okay you can also save your layout to the library I kind of touch on this very briefly earlier but you can save layouts to libraries and load them on new pages so it's a great way if you built a lab that you really like and you want to use it again you can save it to the library and when you're starting on a new page you can load it up and you're good to go you can also add premade layouts that come with Divi so if I were to click this like on here it's it's kind of like mmm kind of like adding new sections and rows you can add new layouts so this is like the the highest hierarchy of your page in a way so here you're if you're you're you see there's various plus buttons you can add a module you can add a row you can add a section or you can add a layout and this will completely replace your page with a layout from your library or from the list of pre-made layouts that come with Divi so I could bring this up and kind of like load one of the predefined layouts that come with Divi so we have lots of great stuff here you can use as a starting point and it's a great way to start off especially if you're new to Divi to just kind of like load up your new page and add to add one of these pre-made layouts you can search them through so if I want to say I'm have a home page I can add one of our home pages here so I'm gonna click the home page extended layout and it's gonna load up and completely replace the page with that premia buyout and I can kind of hop in here and and start editing text and whatnot configuring the modules replacing the content and the colors and that kind of stuff and let me go back here to our previous state okay there we go and so let's say I like this layout and I want to use it again later on and not the most beautiful layout but let's just say it's a great layout I don't wanna use it again I can save that to the library and the next time that I open up this load from library button I'm gonna see it over here so I will save this to the library must call it demo layout example I'm gonna save this and then if we're gonna create a new page you you can load that up and and start from this point and so let's go ahead and do that let's add a whole new page let's start fresh and and create a new page with the Divi builder so I'm gonna head back into my wordpress dashboard head over to pages click add new call it testing and here we go the first thing you're gonna notice is that the Divi builder is not enabled by default on new pages you have to click the used if you build a button to launch the Builder so I'm going to click use Divi builder and that's going to enable the backend builder interface which I showed you earlier since we're in the post editor here you're gonna see the backend builder and you can use it just like the front-end builder you can insert a column so you know add a column I can insert modules add some text and so on you can duplicate delete move drag drop load from library save to library undo redo all the great stuff but we're gonna start from scratch here and jump into the visual builder so I'm gonna click the use visual builder and start editing my blank page alright it's loading up you can see that's blank it adds a section for you to begin with and then it's up to you to add your first row so when I click the the green plus button here I'm going to add a row and we can start then I'm loading up your site with content as we did the first time but if you don't want to really start from scratch you can also load from the library so I'm gonna bring it this click that load from library button I'm gonna click on the app and library tab I mean here's this layer I just saved that the demo layout example and I click that and here's that page you just built and we can use that on our fresh page to start building alright so that's really kind of a basic overview of the Divi builder with a focus on the visual builder interface and like I said there there's really so much more to learn about so head back over to the documentation page and go through all the tutorials we have tutorials that focus on each of the 40 plus modules it goes through every single setting for every single module and goes over the advanced design settings we have a tutorial that focuses just on the advanced design settings and how to take advantage of those we have a tutorial that focuses on how to use custom CSS we have a tutorial that focuses on section settings and row settings full width sections and specialty sections we have a tutorial that focuses on the Divi library and other really cool things that have even mentioned like the Divi lead split testing system so head back over the documentation page read through those tutorials and you're going to be a Divi master in no time

Channel: Elegant Themes

Views: 437,931

Keywords: Divi Theme Tutorial, Divi Builder Tutorial, Divi 3.0 Tutorial, Divi Tutorial, Divi Quick Tip, Extra Theme

Id: T-Oe01_J62c

Length: 25min 30sec (1530 seconds)

Published: Wed Dec 20 2017