How To Use Divi Theme | Complete Step-By-Step Tutorial for Beginners

if you run a wordpress website or are looking to create one and you have next to zero design or technical skills then the divi theme and divi page builder is the ideal solution for your wordpress website divi allows anyone to create a premium wordpress website without having to deal with any of the challenging barriers like page building coding or technical design divi simply allows you to use their visual drag and drop page builder as well as access thousands of pre-made website templates that you can use to create your limitless dream website hey guys stewart here welcome back to this channel i hope you're all having a fantastic day and if it's your first time here thanks for joining me now today in this updated divi theme tutorial for beginners i'm going to walk you through how to use the divi theme and all of its impressive features so that you can walk away after this tutorial feeling confident and knowing that you can create and customize your own wordpress website completely by yourself okay so before we go ahead and launch into this divi tutorial consider subscribing if you haven't done so already or if you're new to this channel and that way you'll stay updated with actionable videos and tutorials designed to equip you with the skills knowledge and tools to help your small business thrive online and with that quick note out of the way let's go ahead and get you up and running with divi [Music] okay so getting started with this divi theme tutorial for beginners we first need to log into our wordpress website remember the divi theme is a premium theme that we need to install into wordpress now if you're completely new to wordpress and you currently do not have a domain name you do not have wordpress web hosting and you have yet to install wordpress on your account then i suggest you watch this premium website creation tutorial for beginners which i'll link up above and down below in the description that will guide you through the complete process of actually setting up your account and building your wordpress website with divi however if you already have wordpress set up and you're ready to dive into the divi theme then this tutorial is for you so let's go ahead and get started now as you can see i've already logged into my wordpress account this is a completely fresh wordpress account that i've just set up for the purpose of today's tutorial now if we navigate over to appearances on the left hand side and click on themes and this is where we can find the theme that is currently installed and activated you can see that we have the default free theme 2022 theme activated now if i navigate up to my website and click here this is what the default theme will look like before we've made any customizations to our website okay so let's go ahead and download the divi theme to do that simply head over to your browser and type in elegantthemes.com and that's going to take you here or feel free to click the link in our description below this video and that's also going to take you to the sign up page and the divi theme is one of the most popular and powerful premium themes on the marketplace for quickly and easily building a stunning feature-packed and responsive website with wordpress okay so what we're going to do is navigate over to pricing in the top right hand corner then simply navigate down and locate the two pricing options you can see we have the yearly access option which means we will have to pay every year in order to access all the different features and be able to update the divi theme next to that we have the lifetime access which is a one-time payment and allows us to access divi forever so go ahead sign up with the best option that suits you now it's important to know that divi also offers a 30 day money back guarantee on all purchases so if you decide you don't like divi it's too hard for you to navigate or for any reason you want to get a refund you can go ahead and do that within elegant themes okay so come down and click sign up today simply sign up and create your account and then what we'll do is meet you inside your account so go ahead sign up and then log in to your elegant themes account i already have an account with elegant themes so i'll meet you inside your account and then once you've arrived inside your elegant themes account simply navigate down to themes and plugins within the members area then navigate down and you'll see these two options we can either download the divi theme or we can download the divi page builder this option here is ideal if you already have a wordpress theme that you like and you just want to use the divi visual drag and drop builder to create your website pages however for the purpose of today's tutorial what we're going to do is go ahead and download the entire divi theme which includes the divi builder so go ahead and click on download the divi theme and as you can see just like that i've downloaded the divi theme now what we want to do is head back over to our wordpress website and back onto our wordpress website what we're going to do is navigate up to the top left hand corner and click on dashboard then simply navigate down to appearances again and click on themes then click add new theme and navigate up to upload theme then click on choose file then locate the divi zip file that we just downloaded and then click open and all we need to do now is click on install now and just like that we have successfully downloaded installed and activated the divi theme now we want to make sure that our account is always up to date with the newest divi updates to do that what we want to do is simply navigate down to divi on the left hand side and then click on theme options then navigate up to updates and come down and add the username for your divi account then simply head back to your members area within your divi account then navigate up to account come down and click on account details then simply locate api keys then go ahead and copy your api key by simply clicking on the code and then just navigate back to your wordpress account come down and paste in your api key that you just copied then click save changes and just like that we've completed setting up the divi theme now what we want to do is navigate over to our website by navigating up to the top left hand corner and clicking visit site and this is exactly what your wordpress website will look like once you've installed the divi theme however yours might look slightly different if you already have website pages and you've already made customizations to your website now what we want to do is go ahead and add a logo to our wordpress website to do that what we're going to do is navigate back to our dashboard and then navigate back down to divi and locate theme options again and under general all we need to do is locate logo and simply navigate over to upload go ahead and upload your logo and here's a logo i created earlier then come down and click set as logo and once you've uploaded your logo simply click save changes now if you currently don't have a logo for your business for your website then what i'll do is link a beginner's tutorial up above and down below in the description that will guide you through the process of using canva which is a free design tool to quickly and easily create your logo completely for free i also use canva for the purpose of this tutorial to create the logo for this website now once you've uploaded your logo what we can also do is navigate down to theme customizer under divi and then navigate up to header and navigation then click on primary menu bar and then we can come down to logo max height and we can make the logo height slightly bigger and i can also make the menu height slightly larger too and i'm happy with that sizing you can always come back here at any time to customize the way that your header your primary menu up here appears on your website but what we're going to do is dive into further customizing your primary menu later on once we've finished creating website pages okay so once you've resized your logo simply navigate over to publish and then click on exit and now we can preview what our website looks like and i'm super happy with my logo now if i navigate across you can see i have a home page and a sample page uncategorized and a search bar over here what i want to do is go ahead and actually add my own website pages so to do that what we're going to do is navigate back over to the left hand side and click on dashboard then simply navigate down to pages and click on add new or you can simply navigate up to new up here and come down and click on page and that's going to take you to the default block editor that wordpress offers however for the purpose of today's tutorial we're going to use the divi theme and in particular the divi page builder to create our website pages to do that we're first going to go ahead and name this page this is going to be our home page then come down and click use divi builder then come down and click on start building now the divi theme is going to give you three options for creating your website page the first option is creating your website page from scratch using divi's drag and drop visual builder next to that we can choose a pre-made template so divi offers thousands of pre-made website templates and website pages that you can choose from and then customize the way that you like these are professionally designed templates that you have access to within the divi theme and then third what you can do is clone an existing page so for example your website the structure of your website pages should flow nicely between each of your website pages therefore for example once you've created your first website page that could be a base for the rest of your website pages and what you could do is simply clone that existing page that you've created and use that as a template base in order to create your next website pages however if you're completely new to divi i highly recommend that you choose a pre-made layout so what we're going to do is go ahead and choose a pre-made layout and i'm going to show you how you can customize each of the different elements within the pre-made template that you select come down and click on browse layouts and divi is going to generate hundreds of website layout packs as well as thousands of total layouts that you can choose from you can simply navigate up to search and search for a specific keyword related to the type of website that you want to create you can also navigate down through all these different categories to filter through your different options so for example what i could do is navigate up to business and click here and also i want to select services because for the purpose of today's tutorial i'm creating a consultancy website then simply navigate through all the different layouts that divi offers and find one that you like the look of and i like the look of this consultant layout pack now once you've located one that you like the look of you can also click on that pack and then you can simply preview each of the pages within that layout pack so for example i'm creating a home page so i'm going to go ahead and click out the home page for this layout pack i can simply scroll through that page and if i like it all i would do is come down and click use this layout now you can also view the live demo online and that's going to take you to a new tab where you can actually engage with that pack layout and see if that's the type of layout that you want to use so i'm going to go ahead and click use this layout give divi a moment to import that template page into your new page and just like that divi is going to generate that entire template page that you selected simply navigate through the entire page check it out make sure you like the look of it and then you can start customizing this pre-made template now if you're not too happy with this pre-made template what you can do is navigate down to this plus icon click here and you can choose a different layout if you like and then just simply replace the current template it's really straightforward to using these professional templates so what we're going to do is exit out of this okay so before we go ahead and start customizing this website page it's important to understand all the different elements that make up your website page so you can better understand how to customize each of your website pages okay so if we first navigate up to this blue section up here this is what we call a section so you can see that this entire blue section makes up this whole top area up here if we navigate down we have a another section here and we have another section down here if we scroll down we have our fourth section here so this website page this template is made up of four sections then within your sections you have what we call rows so this is a row this green section here is a row and within your row you have these different elements also known as modules and these modules are what make up your website pages they could be text modules photos videos images forms anything that you can think of that you want to add to your website okay so if we scroll down further for example you can see that this is a row here and within this row we have multiple elements again if i navigate down to this section you can see we have the blue section here within the blue section we have the row and within this row we have three modules if we click on the row for example up here you can see that the three row layout has been selected and like i mentioned within each of those three rows we have these modules over here okay so now that you understand how your website page is built what we're going to do is start customizing this website page now what you can do is simply click on each of these modules and because divi uses a visual drag and drop builder what you can do is simply customize everything from the front end so i'm going to go ahead and change this header to stews consulting or what i can do is hover over this module and i can go ahead and i can click on this little gear icon and that's going to bring up this customizing box that i can use to further customize this element over here so for example i can go ahead and drag this out make it a bit easier and larger to view and make customizations and as you can see we have more formatting options up here if i scroll down i can add a link i can also add a background and if we navigate over to design i can come down to sizing and i can change the alignment down here and i have these other options down here now when you've made any changes simply come down and click the green tick then come down and when you make any changes make sure you click save draft and when you're ready to publish your website page simply click publish however because we're still working on the home page of our website we're going to save it as save draft so any of those changes we just made are now saved as a draft this website page is currently not visible online i can also navigate up to this text element here i'm going to go ahead and change this text and just like that i've changed the text so all you need to do is click on each of these different elements and you can delete download you can also duplicate that element and you can find more settings by clicking on this gear icon and you can also move each of the modules around okay so i'm happy with that section now if i come down to this section you can see i have a row of three modules and with each of these modules what i would do is go ahead and click and then start customizing and changing the content within each of these rows so it's really straightforward to change each of these text elements all you need to do is click on each of the elements and go ahead and change the text and add the formatting you like now if i click over here you can see that this is an image so if i click on this gear icon up here under image settings i can come down and i can change this image if i like i can go ahead and upload my own image by simply clicking this gear icon and i can choose from my media library if i've already upload other photos in the past or i can navigate over to upload files to upload my own photo that i want to replace that default photo but for now i'm going to exit out of that and then click this tick and remember once you've made any changes simply come down and click save draft and then again over on the left hand side we have a button here i can go ahead and click on this gear icon and i can click on the link and i could add a url a destination where this takes people to so for example if i created a website page with all the different case studies from previous clients then what i could do is add that link in here that will take people to that page however i don't have that page at the moment so i'm going to leave that as it is however i can also navigate up to text and change the text to let's say recent projects and that's going to simply change the text down here now if you like a particular module row or section that you've created and customize and you want to use that specific section for example on another website page then all you would do is click on this little save icon if i click here i can add this section to my library all i would do is go ahead and name it and i'm just going to call this section template 1 and then come down to save to library and now i can use this entire website section on other website pages if i like and you can do the same with rows so for example i can navigate over here and save this row and again i can do the same with this module this image module here i can go ahead and save this module now below each section what i can do is go ahead and add my own section so for example if i hover down below a section and click this blue plus icon and then i can choose a section type i'm going to go ahead and click on regular and that's going to allow me to structure my section with rows i'm going to go ahead and click on this four section row and then i can simply add modules or elements within each of these rows so as you can see these are all the different modules that i can use i can add a map image a gallery an email opt-in divider contact form call to action blurb we've got audio blog buttons comments and there's more down here so for example i could click on video and that's going to add a video in here i can go ahead and replace this video with my own video either from an external website like youtube or i can upload an mp4 file so what i'm going to do is exit out of that and then i'm actually going to go ahead and delete this section now once you've made any changes to your website pages you want to make sure that you preview what your changes will look like on both mobile and tablets so across different devices for example at the moment we have desktop selected if we click on tablet that's going to show us what our website page will look like on tablet then we can also click on mobile and basically what you want to do is make sure that your website pages the changes that you've made are responsive across different devices okay so i'm going to head back to desktop and i'm going to navigate over to save draft i'm also going to go ahead and publish this new website page however what you want to do is take the time to customize those pre-made templates the way that you like now for the purpose of today's tutorial i'm just going to quickly go ahead and create one more website page first what i want to do is navigate up to exit visual builder and click here and this is exactly what my website page will look like online now if i navigate back up and enable visual builder i can start customizing this website page at any stage if i like so with each of these website pages you can click on them and then simply navigate up to enable visual builder to start customizing your website pages okay so what we're going to do is navigate up to new and then click on page again and i'm going to create a about us page so about and then click on use divi builder and remember you have the option to choose another pre-made layout you can also clone the existing page you just created or you can create a website page from scratch this time i'm going to go ahead and build from scratch by coming down and clicking start building and then what i'm going to do is come down and click on this blue plus i'm going to come down and click full width and then click on full width header and here all i would do is type in about us and then this button could be cool now and i can also add another button if i like and then down here is the body text that i can customize so i can either customize visually from the front end by simply clicking on the element or i can open up the editor and start customizing i'm going to leave that for now and click tick and then you can see i have an empty space up here i'm going to go ahead and delete this section now if i come down and click on this purple icon i can go ahead and add a section from my library remember this is the section template i saved earlier so i'm going to go ahead and use this and then come down and click use this section and that's going to add that section in here so that's just an example of how you can navigate through each of your pages with divi to customize the different templates or create your pages from scratch so the best way to create your website pages with divi especially for beginners is by using the pre-made website templates then you can simply customize them the way that you like okay so i'm going to navigate down to these three dots and then click on publish so i'm going to publish my about us page now it doesn't look great at the moment you do want to spend some time customizing your website pages and replacing all the default content now what we need to do is customize our menu up here as well as make our home page the correct home page the main home page to do that simply navigate over to your dashboard over on the left hand side then navigate down to settings and click on reading here we want to navigate up to your home page displays and then click on a static page come down to home page and make sure that we have home selected and that's it simply come down and click on save changes then navigate over to divi on the left hand side and open up the theme customizer then simply navigate up to menus and click create new menu we're going to go ahead and select primary and we also want to name this menu we're just going to call it primary menu again as this is the menu that we want to use up here so come down and click on next then go ahead and click on add items we just want to add the two pages that we just created i'm going to go ahead and add the home and then about i could also come down and add a new page here and customize that page later or i can add posts projects categories tags and more into my primary menu but ideally you just want to add your website pages into your primary menu and i'm happy with that so i'm going to go ahead and click on publish and as you can see i now have two items in my primary menu i've got the home page and about if i click on about that's going to take us to the about page and then we have home which will take me to the home page okay so what i'm going to do is exit out of this customizer and then click on stews consulting to visit my site and just like that guys i've showed you how to use the divi theme to create your website and build your website pages with the divi theme and that is a beginner's overview in the future i'll dive into a more advanced tutorial guiding you through more advanced features that you can leverage in order to build your wordpress website with divi and there we have it guys that is it for this updated divi theme tutorial for beginners now if you have any questions about divi make sure to pop them down below and with that said thank you so much for watching this tutorial all the way through to the end if you got value make sure you leave a like and subscribe to this channel and that way i'll see you in the next video take care guys [Music]

Channel: Stewart Gauld

Views: 49,561

Keywords: divi theme tutorial, wordpress tutorial for beginners, how to use divi theme, how to use divi builder in wordpress, how to use divi theme builder, how to use divi templates, how to install divi theme in wordpress, how to install divi theme, divi theme tutorial 2022, divi theme builder, divi theme builder tutorial, divi theme templates, stewart gauld

Id: UK4bN1LpDW0

Length: 25min 47sec (1547 seconds)

Published: Tue Sep 13 2022