How to use Divi Builder in Wordpress | Divi Theme Tutorial for Beginners

the divi theme is one of the best wordpress themes on the planet the reason for this is because of the easy to use visual builder which allows complete beginners to simply build their own sophisticated and professional website with wordpress hey team welcome back and if it's your first time here then my name's stuart thanks for popping along to this beginner's tutorial now today i'm looking forward to guiding you through how to use the divi builder to build your own website with wordpress now rather than building your website with website builders like wix squarespace webley and others that have high monthly fees you can install the divi theme or divi builder onto wordpress and what this does is allows you to create your own website with complete ease using a visual drag and drop website builder now we actually build all our websites with the divi theme because this means that our clients can simply make changes to their website when they like which saves them a lot of money long term rather than hiring an agency or a developer to make these changes for them they can simply do these changes themselves and that's the power behind the divi builder with the divi theme okay before we guide you through how to make the most of the divi builder and if you're new to this channel consider subscribing to stay updated with weekly actionable videos and tutorials designed to equip you with the skills and knowledge to grow your small business online and with that covered let's help you get started with the divi builder to build your website [Music] okay guys so the first thing we need to do is head over to elegantthemes.com now at elegant themes this is where we can download either the divi theme or the divi builder plugin now the difference between the two is essentially the divi theme is an all-in-one wordpress theme and visual page builder so today we're actually going to download the divi theme and show you how to essentially use the divi builder to build your website through wordpress now the other option is to download the divi builder plugin now this is if you've already got a theme installed on your wordpress website and you're happy with that particular theme but today because we're building from scratch we want to download the entire theme so before we download the divi theme and start building our website with the divi builder what we need to do is sign up to elegant themes so we can download this divi theme so we've already signed up to our account what you can do is click the link in our description this is an affiliate link which means if you click and decide to purchase through that link we will get a small commission and that just helps us continue to provide educational content on this channel so thank you in advance if you decide to click that link or you can just head over to elegantthemes.com so you have the option to sign up with a lifetime subscription which is a one-off payment or you can sign up to the yearly subscription and you just pay that yearly so i recommend getting started with the yearly subscription to see if it works for you and you get 30 days money back so if you decide you don't like the divi builder then you can always get a refund within those 30 days so we're just going to go ahead and download the divi theme and here we are on our fresh wordpress website so as you can see this is a new website we've got the 2020 theme up and running we haven't touched this website yet we've just newly installed wordpress so now what we want to do is install the divi theme now remember if you downloaded the divi plugin what you can do is actually head over to plugins over here and add a new plugin and just upload your divi plugin but because we downloaded the entire divi theme for the purpose of this tutorial what we're going to do is head over to appearances and come over to themes and over here what we want to do is click add new theme then up here we're going to click upload theme then over here we're going to click choose file and then click the divi zip file that we just downloaded from elegant themes and then come down here and click choose and now i'm just going to go ahead and install this theme and as you can see the theme has been successfully installed so i'm going to come down here and click activate and as you can see our new divi theme has just been activated congratulations it's that simple to install the divi theme so now let's check what the divi theme looks like before we do any customizations so i'm going to come up to stuart consulting which is the name of this website and click on visit site and as you can see this is what my blank divi theme is going to look like before i make any customizations so i'm happy with that now we can start customizing the way that our website looks and we can start building our website pages with the divi builder okay so now what we want to do quickly before we actually build out our pages with the divi builder is actually create some pages and create a menu so we're going to go ahead and create three pages and then create a menu and then you'll know how to essentially structure your website so to do that we need to head over to our dashboard up here and click dashboard and then what we want to do is come down to pages and click all pages now as you can see we've currently got privacy policy and sample page so these two pages come with wordpress when you first install wordpress so we're going to go ahead and create a new page by clicking add new and we're going to come down here and exit out of this and title this page the home page and then come over to publish click publish and click publish again and congratulations just like that you've created your first page now before we dive into the divi builder and start building your website we're just going to create two more pages and then create a menu now if you want to skip this initial step then you can dive over to the divi builder you can see that down in chapters below so i'm going to navigate over to this w and click here and as you can see we've got the home page here i'm going to come up here and add new and i'm going to name this page about us and then just like before click publish and publish again and then i'm going to navigate back to our dashboard and then come over here and add one more page and i'm going to call this the contact page and then click publish and publish again and then navigate back to your dashboard and as you can see we now have three pages so i'm going to go ahead and delete these two sample pages by clicking on them and then coming up here and clicking move to trash and then apply and there we go that looks a lot cleaner now we've got three new pages we've got about us contact and home page now what we're going to do is head over to appearances and head down to menus and here is where we create our menu so go ahead and add your menu name so just call it your primary menu and then come over here and click create menu now all you need to do is select your most recent pages we've just created so those three pages and then come over here and click add to menu and then here you can rearrange your pages so i want my home page at the front and then contact after the about us page and remember you can create as many pages as you want you can also create sub pages so for example i could click on about us and the contact page will pop up below that but because this is an independent page and section of the website i want to have three main pages so i'm happy with that i'm going to go ahead and click save menu and one last thing we need to do is head over to settings and come down to reading and here we want to select a static page and then come down to home page and select home and that's all there is to it then come down and click save changes okay so now let's just quickly check to see if our menu is set for our primary menu that we just created so to do that just come up to appearances click menu again and then come over to manage locations oh and then come down to primary menu and select the menu that we just created okay so once we've done that we can come down and click save changes now let's just check and make sure that everything looks as it should so let's head back up to our website and click on visit website awesome and as you can see we have our homepage here so homepage about us and we have contact so if i click about us we have the about us page and the contact page and as you can see each of these pages are blank because we haven't started creating them with the divi builder but what we can do now is actually dive into the divi builder and start customizing and building our website pages with the divi builder this is exciting so let's dive straight into it so let's customize our home page select your home page here and then all we need to do is navigate over to enable visual builder and then come down here and click start building and these are the three options that we're going to cover today so we're going to show you how to build from scratch then we're going to show you how to choose a pre-made layout because divi offers hundreds of pre-made layouts to help you build your website pages extremely quickly and then we have clone existing page so if you build a page and you like the theme and the style then you can duplicate that page and customize it the way that you like so first off we're going to show you how to build a website page from scratch so you understand all the features and elements of the divi builder so come down here and click start building okay so here we are on the home page building our website from scratch using divi's visual builder now the first thing you'll see is this insert row so you can come down here and choose the row that you like so for example think of the way that you want to structure your website page do you want two columns on the left and the right do you want five columns do you want to structure it so it's like these down here and you can customize these as you go so we're just going to select these two here and then once you've inserted the row type of your choice then you'll see these modules appear so if i click over here that's going to bring up this insert module option now this is where the fun happens this is where you can insert anything you essentially like so for example i could come down here and i could add something extremely simple like a text box so i'm going to click text and when you select one of these modules you'll see this settings box appear and you can make this larger if you like and that just allows you to edit the specific module that you chose so again i could come over here and edit this information if i like i can edit it with all these options here i can also come over to design and i can come down through these different options for example i have text i can structure the text the way that i like the colors the text font style i can come down here and change the text size if i like i can change the text letter spacing and i can also change what it looks like on different devices if i click here i can choose what it looks like on tablet and on phone so for example on phone i could make that smaller i can make the text size smaller on mobile as well so let's make that say 15 pixels i'm happy with that and then i can come down here and add text shadow if i like that looks quite nice again i can make this smaller so i can see the entire screen so i want to put this back into the desktop view so i'm going to come down here and see what other options there are so you can play around with all these different options text shadow color again alignment i want to go center and i can come down here and look at all these different options so i'm hitting text i can change this if i like to header one two three i can come back down here and click on sizing width or the spacing between the text so i'm happy with the full width i can come down here alignment that's the module alignment and i can change the height spacing so spacing between the padding and the margin so for example the margin would be up here if i click up that makes the margin larger and again i can do the same with bottom make it smaller or i can make it larger so you can see that whole section gets larger and that's the margin between these two sections now i can come down here and i can add a border if i like i can come down and add shadow box filters transformation and animations now there's lots of things i could do we do slide so when this page loads i can choose an animation bounce roll fold flip zoom so i like fade i'm going to keep it as fade now when you're happy with all this information so you've gone through all the settings and you've structured it the way that you like it's very easy then just come down and click the tick save changes and then what you can also do is actually hover across here and start editing this text just from a visual front-end which makes it really easy for complete beginners so i could come over here i could delete this word here i could add anything i like stew it this is just for the purpose of this tutorial and how to actually create customizations i can also come over here and actually highlight a particular word and then i can make it italic underline and i can also add a url if i want to link this word to a particular website or a particular page on my website so very powerful stuff i can come over to this module here and click here and add a new module so again there's so many options go through them all they're very easy to customize i could come down here and add a video so what you can do is actually click on this setting here and then you can add a video or you can insert a url so it could be a youtube url and that's going to add that video in here so i'll just click save for now i'm happy with that i can also come down here and i can add another module below this module so i can come down and let's say i want to add social media modules i can click social media follow and as you can see i've got facebook and twitter i can add another social handle if i like so for example if i want to add say instagram i'd come over here and come down and click instagram and then what i'll do is i'll add my url in here that takes people to my instagram account so i'm happy with that i'll click tick and then it takes me back to all three of my different social media accounts now again i can edit each of these by just coming over to this icon here but what i want to do is make this center line because it looks quite ugly on the left hand side so i can come over to design i can go alignment and i can click center align and then come down to spacing and click on heading and click increase and that's gonna increase my padding so i'm happy with that on 20. that looks okay again i could go back to uh design and change the icon if i like i can use a custom icon or i can change the color if i like so for example i could go back to content and i could edit this facebook one over here i could come over to design and under icon i could come down and change this to blue and that's the icon color there but i like it it's white so there's many things you can do with each module and it's very straightforward and easy to do so what i might do is click save changes save changes again now if i want to save everything i've done what i need to do is come down here to these three dots and then come over to save and click save and that's going to save this entire page so like i said before we've got modules here we've got three modules then we've got our row column remember we structured it as two again i could come over here and go three and that way i have another module here but i want to move that back to two rows i'm happy with that and then over here we have our section so this is the blue so the section then we have our column or row and then we have our modules within these rows and sections now you can come up here and i could duplicate this section and i could change these around if i like now you can also drag and drop that's the great thing about the divi builder for example i could drag this over here under this module i could also come up here and delete this module and add another module so i could come over here and click blurb and there we go now what i can do is add an image here and add some information over here so title i can add anything i like i'm happy with that again i could add the text here now what i want to do is change the image so i can come down here and click use icon if i like i could use any of these icons or i could turn it off and then i can add an image so for example i click here i can come over here and select a file to upload and then for seo what i want to do is name all of these the same name as my image so i'm happy with that then come down and click upload image and i'm happy with that again i can resize this i can come over to design i can come down to sizing and i can make this smaller so there we go i'm happy with that and click save and then come down here and click save page so that just saves everything i've just done now if i want to create another section i could just come down here and click add new section then you have a few options here what i'll do is go for regular you can try the specialty and you can try the full width but i'm happy with regular and then you need to insert a row so i could go three rows this time and then i can insert three different modules here so i could come over here and click blur again and then i can edit that one later on i can come over here and add another blurb i'm happy with that i'll edit that later on and now i can also duplicate this blurb so i can click duplicate and then i can grab this and move this module over here so very easy and i can edit those if i like you can change the background color of each section so for example to break this up i could come over to settings i could go background add a color or i could add an image i could also add a video to the background if i liked but what i want to do is actually add a gradient so i'm going to add a gradient i don't really like that so i'm going to change the color let's go that looks okay i'm happy with that for now but you can change it the way that you like so for example i can play around with this just leave it at that and then come down and click save you can also change the transparency yeah that looks quite good and click save and then come down here and click save page so again it's very simple to customize each section row and module you can also preview how your page looks on both desktop which we're on now we can come over to tablet and see what it looks like on tablet then we can come over to mobile and see what our website page looks like on mobile so i'm happy with that for now so i'm going to come back and click desktop and that is essentially how you can use the divi builder to build your website pages from scratch very straightforward very easy to use with the visual drag and drop builder it's easy to create sections rows and modules and then you can customize them the way that you like as i've just shown you so this is just a quick basic example of what you can do with each page so remember once you're happy with your design come down here and click save and that saves the entire page then what you want to do is come up here and click exit visual builder and there we have it this is what your website looks like again i'm just showing you the basics to how to actually use the divi builder now what we want to do is customize the about us page so click about us and then what we want to do here is enable the visual builder again and now i want to quickly show you how you can build your website page from a pre-made layout so come down here and click browse layouts okay and this is where we can select the layouts that we want for our website so for example if we are a consultancy we could click on business here and that's going to bring up these different layouts these different pre-made packs here so i could come over to this agency type over here and i could select it now i have two options i can view the live demo or i can use this layout now i can also scroll and check out each of these pages for example i could click blog i could check this one out i could click contact i could view this one i like the look of all of these i like the colors i like the style so again because the page we're building is an about us page i want to use the about us pre-made page so i like the look of this yep that looks awesome so i'm going to come down here and select replace existing content because i don't have any content at the moment so i'm happy with that and then select use this layout and then here you might be asked to authenticate your elegant theme subscription so you've already purchased your subscription all you need to do is head back to your elegant themes account find your username and api key and add that in here and then once you've added your information in there come down and click submit and there you have it just like that you've imported one of the pre-made page templates so very cool just like that and you can edit all this information just like we showed you earlier so for example i could come up here and i could click this gear icon and i could edit this information here now i can also do that with each of these different modules and these different rows i can add extra rows i could go like this and add five and move it back to the initial three i'm happy with that so remember play around with your page you've just imported a pre-made template now you can customize it the way that you like with the divi builder very easy and straightforward now what we can also do is actually save this page so for example if we made customizations on this page what we could do is save this entire page we could come down here and we could click the save icon and we can type in the layout name and then you could add a category if you like and then come down here and click save to library now you can also save sections you can also save rows and modules so for example if i wanted to save this module here i could come over here and just click save and then i could add this information here i could also do the same with sections i can click save and save this section and that just saves you time when you're building your website pages because remember you want to have a similar theme and style throughout your entire website so it pays to create designs and then download those designs so you can duplicate them on other pages and we'll show you how to do that on the contact page so once you've imported a pre-made template come down here and click save if you're happy with that so i'm happy with that for now i've just showed you how to import templates you can also come down here and click the plus and have a look at other pre-made templates so again i could come down here i could have a look at all these different categories along here i could click this layout option again i can view each of these pages just by clicking them and then i could replace the existing content or if i untick this this content here will just show below the page i've just created so if i want to replace all this content i've just created then i can go tick and then use this layout and just like that i've replaced this layout again with a different pre-made template so very easy to do and again you can just customize this the way that you like so i'm happy with that i'm going to come down here and click save page and then once that's saved i'm going to come up here and click exit visual builder again and now i'm going to navigate over to our contact page and as you can see our contact page is blank so i'm going to come up here and click enable visual builder again for the contact page and this time i'm going to show you how to clone an existing page so come down here and click choose page and as you can see in today's tutorial i've already created an about us page and a home page so maybe i want to duplicate this about us page so i just click here and as you can see in the about us page that we actually used a pre-made template i just copied this page and put it under the contact page and again i can customize this so that it matches the contact page but i like the overall theme and that's why i duplicated an existing page so there we have it very easy and straightforward to create a website using the divi builder and the divi theme you can simply build your website pages from scratch you can use pre-made templates and you can duplicate your past pages or you can save sections rows or modules and upload them on a new page very easy to do and that's why we build our websites with divi because it gives more control to business owners and allows them to make edits and customizations themselves to their website and there we have a team that is it for today's tutorial you should now have a good idea of how the divi theme works and how you can build your own website with the divi builder and wordpress now if you have any questions about the divi theme about the divi builder then make sure to pop them down below and with that said thank you so much for watching this video through to the end if you got value make sure you leave a like and if you haven't done so already make sure to subscribe and that way i will see you in the next video take care guys you

Channel: Stewart Gauld

Views: 62,511

Keywords: Divi Theme, Divi Theme builder, Divi Theme tutorial, Divi Theme review, how to use divi builder, how to use Divi Theme, how to use divi, divi builder tutorial, how to make a website with divi, divi theme builder, how to make a website for beginners, how to make a website for small business, stewart gauld, best wordpress theme for beginners

Id: Kj07Ha0dhaI

Length: 25min 56sec (1556 seconds)

Published: Fri Sep 04 2020