How to Create a WordPress Website with Divi Theme In Minutes + Useful Expert Tips

i want to show you like the main tips and techniques on how you can work really fast because the idea of building websites is not to spend hours and hours trying to design a website so we have a lot of tools in divi that allow us to design our websites really fast so i'm going to be sharing all this uh with you so um what i've done now is um i've made a list of things that we'll be covering so the first thing is we're just going to be going through the basics of setting up divi once you first installed it and then next i'm going to be showing you how to set up colors now um colors are very very important in design and this is in my opinion the first step that we need to set up before we can actually go in and start building our website because this is what we're going to need as we're designing our site i will also show you how to design pages in two ways we have what are known as pre-made layouts and i'll also show you how to design your pages from scratch i'll also be exploring the theme builder because the theme builder is um the theme builder is uh fantastic because it allows us to design our websites really really fast so i'll be showing you how to go through that as well i also have a template which i'll show you as an example on how it can speed up your workflow i will also be covering mobile design because as you know a lot of people now do look at our websites on mobile devices so i'll show you how to optimize your websites for mobile devices as well now of course you want to have seo on your website i'll also show you how to set up rank math with divi and also woocommerce if for those of you that want to set up your websites to sell products online i'll also show you how to set up woocommerce and finally i will also be addressing um how to make your website fast and also give you some information on what's coming up to resolve the speed issue um for divi all right so um let's get started so what i've done ahead of time is i've gone ahead and set up a demo site and the reason why i set it up on my computer is because uh speed is faster because obviously over the internet is going to make things a bit slow so i've set all this up all i have here is divi so as i mentioned in my intro we need to be talking about colors as our first step so colors as i mentioned are very important so i use a tool called coolers dot co this is a tool that allows me to generate colors that work well together so having colors that work well together is your first step of having a professionally looking website alright so now that i have this these colors here i'm happy to use these colors moving forward so what you want to do now is to add them on to divi so what you want to do now is to come all the way down here to divi and click on theme options so normally you would get a default color palette here which you get when you install divi but you want to install your one so what you do is you copy all the colors here so i'll just show you a quick example so what you do is just click here on copy and then you come back over here click on the color and then override it okay so you want to go through all this until you have all your colors so i've already gone ahead and added all my colors here so i'm going to scroll all the way down and click on save changes okay great so now that we have our colors in place the next step now is to set up all our pages so to set up all our pages we want to come over here to pages click on all pages so what i normally do is i mean as i mentioned this is my default wordpress install so i it comes with this privacy policy and sample page so let's add a brand new page so this page here is just going to be a you know basic page we're just going to call this home and i'm just going to click on publish now when we view this page what you're going to what you're going to notice is um it doesn't have anything on it our header here you know it's pretty much not designed and then our footer here is not designed so i'm going to be showing you uh how to address this and have a really looking um a really good looking footer and header okay so now that we have our home page i'm just going to go back now when we go to our website what you're going to notice is it's going to by default show the latest blog post as you can see this hello world but uh to have a website with a landing page you want to make sure that the home page is the actual page we see here so to address that you want to come over here to dashboard and let's go to settings we're going to go to reading and click on static so the page that we need to to show as the home page is the page that i've just created called home so i'm going to select that save changes so now we are ready to go okay so the next step now is to design our pages so as i mentioned earlier on we have two ways of designing our pages we can design from scratch or we can use a pre-made layout so i'm going to design our page using a pre-made layout and then show you how to do it from scratch all right so i'm going to now come over here to pages and just show all my pages so let me start off with the home page here so i'm going to click on edit with tv right so i'm just going to skip the tour here and click on start building great so these are the options you get you can either just build this from scratch or you can choose a pre-made layout so i'm going to click here on pre-made layout so these pre-made women we have hundreds and hundreds of these pre-made layouts and we are constantly releasing all these and as you can see here on the side we have different categories we have we have art and design business education and so on so all you have to do is to choose any one of these so there's one misconception that a lot of people have and that is if the pre-made layout is uh say a tech company then it only works for a tech company so i'm going to show you now that you can use any of these pre-made layouts for pretty much any type of design so you just have to uh of course like the layout but you can choose it for any use it for anything all right so i'm just gonna scroll through here and choose any layout so let's see which one i'm which one i can go with so let's say let's say i choose this one right here so i'm going to select it so this here is an insurance layout so i'm going to choose this layout right here like that so what's going to happen now is all the assets of this layout are going to be downloaded onto this page so once they're downloaded i can then go in and make changes to them okay so we're almost done here we're on 75 percent okay so here we go so so now we have our layout here everything looks really cool but as i mentioned our website here is not going to be an insurance website so now let's turn this to a website that that we want to design so first of all let me just refresh this for some reason my mouse looks like my browser is having problems here okay there we go okay so to go in and customize this page and make it look like your own design what you need to do is to click here on our section settings because you want to replace this image here so i'm going to snap this over to the left so over here on the background first of all you can see we have this color here so we can change this color to whatever color we want now notice that you know that color palette that we uh added earlier on it is right here so i could then choose my colors over here for my for my design because all the colors are right here okay so i can decide now what i can add onto this background so let's say i need to add an image now i already have some images in my media library so i'm going to click here on media library so let's say i want to go with something like this i'm going to click upload and now we can see we have an image here in the background okay so this is how you can go in and start adding all your elements in your design okay so now that i've added that image next we have some text here so i'm going to click on this module settings so this text is very dark ideally we want that text to be light in order for us to read it so i'm going to click on this little icon here and this now is going to take me to my heading text i'm just going to change my color and already it's now much easier to read i'm going to do the same and change the color as well now if you want to change the font you can always come over here and change your font to whatever font you want we have hundreds of fonts here from google which we can use okay so now that i've updated that the next step now is to just save this so we really want this background image here to to look great so as you can see i've just gone in and just added it quickly you can add whatever type whatever image you want in here so let's say you're designing a website to do with uh say food you can just upload your image just like that and you can see here i've just added it okay now the next step now in order for us to make sure that this text is easy to read is to reduce the brightness of this image so let's go ahead and do that so back over here i'm just going to choose a very dark color and then over here on the image i'm just going to scroll down and change my blending modes to multiply and then i'm just going to go back here and just add some transparency just to show a little bit of that image in the background so just by doing that now that's looking much better so you can do this throughout the whole design so this image here we can just delete that and now all we have is our main image and as you can see this is now looking like our design next i am going to now work on this button here so the main thing here is to change the color of the button so in here i can go to design and then i'm going to target the button and because i have my color palette here i can straight away change my color of the background so there we go i've just changed that or i can even go with this one here but i think i'm going to go with this okay so already that's looking better so this is what you want to do step by step as you go to change everything on this page so for example here we have get a free quotation under 24 hours you can say um get a free meal plan okay so there we go but the colors obviously don't match so the next step is you want to go in and change the colors so i'm going to click here on this little paint brush icon and change my color so already slowly slowly all this now is starting to take shape so you can see here that's going to be my text and then for the button here i can go in and change my button text color so i'm gonna go with the light color here and then for the background i'm gonna go with the dark color so as you can see slowly slowly this is really taking shape and it started off as an insurance website but as you can see it's now developing into a food blog or a food website all right so let's move on so i'm just going to save this so you want to continue and add all these elements here as your day update your website but i'm sure you can agree with me that within a few minutes uh i've actually gone in and i am adding quite a lot of information here so uh here on these blurbs i'm just going to add an image as well so let's say we have more images of food let me just add this one here there we go so we have that one there and i can save this next i'm going to go into this one here add an image as well now one of the quick tips in fact i'll show you in a moment if you want to find out where the changes were made in any of these elements let me just go into my uh section settings here so what you can do is because sometimes it's difficult to find where this background was added and where the colors were or what was changed here so to uh to make it easy for you to find it you want to click on these three little dots here okay so once you click that you're going to see this option which says view modified styles once you click that it's going to show you everything that has been updated so here i can see i have my padding here that was changed so i can increase it or reduce it and here i also can see that we have this image so this makes it easier for me to find this so i am going to delete that and add my own and the image i'm going to add is perhaps maybe something like this one let's upload an image see what it looks like okay that's a bit too busy but as you can see these are in fact this is actual size that's why so let's go to fit now this one here doesn't look great to be honest so let's get rid of that and we can go even for a background color if we wanted to so let's go with a really light color in fact i really like that so as you're designing you can play around with the designs and see how the layout looks or how the design looks so this one here is um not looking great because it doesn't look like the other ones so i'm just going to go in quickly and add an image to this one here and hopefully i have another image here of food the third one in fact let me go with this one here okay great so now i have uh this section quickly designed so let's just go back to the top so you can see so there we go we started off here and there we go so of course you want to go in and change insurance to you know um do something else so let's say food blog or something there we go so this is another quick tip you can also go in and do what is known as inline editing so you can just go highlight it and change it into something else so let's say this one here is going to be guides tips so i've i've gone in and i was able to oops i was able to go in and make change changes to this really really fast now because i promised to uh show you how you can work really fast with divi i'm going to show you a quick tip and that is if you go in here you can do a copy and paste or you can also make some changes to this and apply them pretty much across this row let me show you what i mean so let's say i want to change my font here so i'm going to go in and let's go to design so let's start off with the heading here so we are going to change our font here to pop-ins okay here we go see here my font has changed i also want to change the color and then over here i am going to change the font as well so i'm going to choose poppins and change the color okay let's go with this darker one or maybe even this okay so now that i've changed this you can imagine how difficult it would be to go into the next one and then start making changes to that going to the next one this will make you spend so much time uh working on this so what you need to do now is to uh click here on this three little dots here on the top and then click on extend blurb styles okay so you once you click on that oops something happened let me just go back in right let me save this first before i lose all my information i'm just going to refresh this and make sure that this is fine i might have clicked something and that caused this not to uh not to work okay so uh so far uh are you following how i'm going through am i going too fast or the pacing is okay please let me know in the comments i can see uh what is going on in the comments here so just let me know if i'm moving too fast or moving too slow uh so that i can cover uh as much as i can okay so it looks like my sign is back up now so um we were actually here so i'm gonna go back in click these three little dots and click on extend blurb styles okay so now that i've clicked on extend blurb styles we need to decide where we're going to extend these styles to so what we're trying to achieve here is to have this text color and match it with this so we don't have to go in and start changing the fonts the size and so on so if i click here now i can say this row now notice what happens when i click extend you see this has already updated really really fast and this is one of the quick ways that you can design your website really really fast okay so um we can continue move on change all these colors to match uh everything that we have and if there's any sections that you don't want to use you can just click here on this delete icon and now it's gone right so the next part here that i want to talk about is um we discussed how to design your page from a pre-made layout this is one of the quickest ways that you can have a website up and running really really fast so if you're a design agency you can spin these websites really really fast but even if you want to design a website for yourself you can really have a website up and running within a few hours and pretty much this is how you do it now let me show you how to design your pages from scratch so what we're going to do here is we're going to save this page and exit this visual builder so i'm going to say save and exit okay great so this is what we've just managed to achieve okay so to uh design a new page i'm just going to come over here and click on page i'm just going to close this for now and i'm just going to call this out of ideas okay so i'm gonna say use dv builder so this is for those of you that want to design your web pages from scratch right so now we're going to enter into into the dv uh options to start building our website so before we started off with a pre-made layout now we are going to build it from scratch right so the first option that you get here is pretty much a blank canvas you have this area here where you can have your sections and you can start adding everything in here so what makes divi really really exciting to use is all these options start appearing as soon as you click on this plus button so let's click here and see what we can do so i'm going to go here with uh full width and we want a full width header and now we can add our titles and pretty much everything that we need over here but i'm going to [Music] go all the way down here to the background because i really like working with the background first so i am going to choose my color and add a bit of transparency and then next i'm going to come over here to the image click on this plus button now i already have images in my media library so i'm going to choose an image that we already have in here and there's quite a few so let's start with um this one right here okay right so that's my image i am going to use so this module here is really powerful because what i can do now is i can go to design layout and i can make this full screen okay now look at that just by a few clicks i've managed to have this and it's showing as a full screen so the next step now is to go in and change my titles so i'm going to come over here so i can change my text to you know for those of you guys that watch my tutorials i like using uh pop-ins so i'm gonna go ahead and select that and i'm gonna make this bold and i'm also going to do the same here on the description change this to poppins like that and now we're going to increase our size so i think 19 is okay next we have our line height so you can see all the tools that we need to make our page look really awesome all here within the page builder so now that we have this all set i'm going to save this and now we need to drag this all the way to the top because remember we have this white space here so we have a little quick tool here that i want to share with you and i'm going to click here on expand settings and this tool is the layers tool so if we click here on the layers i can just quickly drag this to the top and you know i need to share a quick tip with you guys now when i designed my sites in fact initially i would not label these so what would happen is when i come back to my sites and i tried to edit different sections i find out that i don't even know which section i'm working on so it's a good tip to go in and uh label these so i'm going to say this is the main hero okay and then this could be perhaps your your tips or advantages or whatever it is that you may want to add right so once i've labeled them now all i have to do is to go in and tweak this until i'm happy with what how it looks like so i'm going to go back in here and this text here doesn't look great so i'm going to come over here and go to sizing so the sizing i need to go into is this one here and it's a content width so i'm just going to drag this down until i'm about let's say 60 percent okay maybe even down to 50 okay great so now that i have it down to 50 now remember i did mention that mobile design is very important as you're designing your site so every time you uh you're designing your site you want to click on this little icon here this little icon is very very important so notice what happens when i click on it i'm able now to look at what this site is going to look like on a tablet so already i can see that ah you know what maybe i may need to stretch this a bit more or maybe even reduce this or maybe even make the the size even smaller of this text so let's go ahead and do that so i'm just going to go back back this up a little bit to about yeah i think 16 is fine right and then here on the text i can just go in here and i can either reduce the size a little bit so that it fits in one line now while i'm here notice what happens when i go to the mobile as well i can go in and see okay you know this doesn't look um really nice at all on the mobile so i can then decide to either remove the image altogether or i can change the sizing of this so notice what happens now when i change the sizing first of all i need to find the sizing where is it um here we go sizing so instead of 45 i can say you know what i want this to fit in the whole screen so now on a mobile device this fits the whole screen so this is what you need to do as you're designing your website and what's really cool as well is you're also able to go in and have some previews of different type of different types of devices so here we have the galaxy we have huawei we have ipad and so on so we have so many uh to choose from so if you want to see what this looks like on an iphone 6 7 or 8 just click on that and that gives you an idea of what it looks like now there's also another quick tip and that is over here you can also change the orientation okay so this is the orientation and this is the line that you'd see like for the first uh visible part of the screen and before you start scrolling okay so this is the first part of our main design i'm just going to save this and go back to my mobile view now i really want to just dim this a little bit because it's a bit too much here so let's go back in and uh just work on that this time i'm going to use gradients so i'm going to come over here and add my gradient colors so my colors here are already on my color palette so i'm going to start off with this one and for my second color it's going to be just full transparency like that now i can then place my gradient above the image like that so we can see here the gradient is over here to this side so let's change this by changing the direction so we want this at 90 degrees here we go so you can see here i have my start and end position so it is very very easy to go in and customize this and make it look the way you want okay so that's our first part now let's move on to the next part and that is to add our next section so here we're going to add a text section so i'm going to search for my text module and again this is another quick tip if you start typing here you start seeing all the modules here so i'm going to select that and i just want to call this tips and let's enter it and if you want to set this to a heading i can just click here on this drop down and set this to heading 2 and now i can go into the next tab and go to my heading text choose heading 2 and then choose my favorite font change this to semi bold and remember i have my colors over here and i'm going to choose my color like that and save okay next i'm going to add another row so i am going to just go with a single column and what we're going to have here is a blurb so what i'm going to demo here is the importance of using colors in our design so i really want to see i want you to see uh how colors really work very well as we're designing okay so um i'm going to come over here to image and icon so this time i want to use icons for this so i'm going to come here and let's start off with say this icon here okay so that looks okay and next i'm going to come over here to my title so we really want everything all centered and i also want this text centered now do you see how i'm moving fast here i am clicking on this paint brush tool this will take me exactly to where i can make my changes so this is very important that you hover over here and then click and this is going to take you directly to where you want to um make what you want to make changes to so i'm thinking okay you know what i want to have a color in the background of this blurb so back over here on the content i'm now going to go to the background and add a background color so i'm going to click here on this plus button and i have colors here already you can see uh so i'm going to choose this one here as my first color or i can just choose any one of these so let me just go with this one here okay next i'm now going to play around with my colors to make sure that everything looks really nice in here so i'm going to click here on this little icon and choose my color so all these colors here will work really well with my design okay i really like that one okay so moving on uh let's go in and add my next color and let's change our font here to poppins we are going to make this bold in fact let's make it all caps and change this to bold now in terms of the colors this is where you can play around with the colors and see which colors work well with this design should we go with dark or should we go with a lighter color so it's up to you what you want to go with so this time i'm going to go with the dark and i'm also going to do the same here change this from popping i mean to pop ins and change the color and pretty much i think i'm okay with that next we want to give this design some breathing space so i'm going to go to spacing so for my padding here i want to set this to 20 both to the top and the bottom left and right and also give this some rounded corners there we go you know what let's change this color here doesn't look great now this is uh something that you may find that you will do as you're designing this you may go in and decide you know what this doesn't look great and then change it all right so now that i have this i can now save changes now here's a quick tip this is one blurb so let's say you want three of them so i've just spent a bit of time here designing this one so what i can do now is i can go into my row settings and just duplicate this look at that this is a quick way of having all these designs really fast so now that i have these three i can then go into each one of these and start designing them so i'm just going to save here quickly and for this one here perhaps i may want to change the background color so i'm going to come over here to background change the color and we also need to change the icon so for the icon let's change this to okay let's change this to that save that and then over here we're going to do the same are also going to add a background and this time we're going to go with this dark one and we also need to change the icon so we're going to go with this one now if you want to change the icon sizes you can always go in here image and icon and you can use icon font size and reduce the size of the icon like just like that so i just brought it down to about 42 save that and then i can do the same over here as well so go over here change this to uh design and let's change this to 42 as well so you can also type the value in here that's another quick way of doing it and design and let's go to image and icon and set our size as well okay so as you can see this now has taken me longer than it did when i was uh designing this with my pre-made layouts so this is something that you may need to decide um how you're going you're going to design this but uh preferably i would go with pre-made layouts because it has pretty much all the pages that we need so mostly you have five pages and these are the pages that you would have as your home about us services contact and so on but if you go in and uh starts customizing those i mean you have a very great start uh starting point to design your website so so far uh i mentioned the importance of having your colors and also how to design your pages using your pre-made layouts and also designing from scratch but sometimes i mean i can't say this one here is better than the other at times you may have a client that may want you to design a specific way and this is where you would go and design this from scratch now the next part i want to talk about is very very important and that is how to use templates on our website so now that i've designed this i'm just going to save this and um oh before before i uh move away from this i'm sure you can see that these colors here really work well together and this is one of those things that will make your website look professional so now let's head over to and show you how to use templates so the way i'm going to show you how these templates are used is by first of all creating a basic blog post so i'm going to add a new post okay so we have a new post so i'm just gonna call this post one right so with this i'm gonna use the default editor and you'll notice in a moment why it's important to use a default editor so i'm gonna paste this uh dummy text here i may also want to add an image in here so let's search let's add our image and here it is so this is an image block so i'm going to go to my library and the email the image i'm going to use is this one here i'm going to select okay so basically we have our post here we have our text we have our image and then over here we may also want to add a featured image so i'm gonna go ahead and select it and the image i'm gonna add is this one right here okay so now that i have my featured image and my basic information i can hit publish and let's view this post but in a new tab okay so there's our post and i'm sure you can agree with me that this design here is pretty basic it doesn't really look exciting but the moment now we venture into using our templates you are going to see a massive change now so let me show you how that works so i've gone ahead and created a template ahead of time uh but i'll also show you quickly how to create it i know we're running out of time here but i'm trying to cover as much information as i can to show you how awesome divi is so over here now i'm going to go to my theme builder and by the way this is the power this is where db has its most power because you can design global footers the body the headers that can be applied pretty much to different different different parts of your site so to add our layout that i've designed here you can just click here on portability click on import so now i need to find the file i know i have it on my desktop on my computer so let's let's see um there we go so i have it right here it's called side ground posts so what i'm going to do now is i'm just going to drag it over here like that and then click on import dv theme builder templates okay so you can see here that my template is going to be applied to all the posts so this is very important now i want to i want you to see what happens here i'm going to click on save changes now remember this is what it looks like our blog posts but notice what happens when i refresh this there we go so you can see now we have a totally beautiful looking template and as i scroll it isn't it even has the opt-in here and it has the comments area and it now has a footer so every single blog post i'm going to add is pretty much going to have this type of layout now if you don't believe me let me do this quickly one more time so i'm going to go now to my posts click on all posts and in fact i need to click on add new and i'm going to say post to default editor paste my text in here and i'm just going to add a featured image quickly so the image i'm going to add is let's add this one here okay great so now if i need to view this the template is going to have the same structure so all these templates all these blog posts are all going to look the same so you can see here that it's beautiful nice image here on the top it has a description here and when i scroll down it has my opt-in and this is purely global and if you want to go in and customize this you can always go in and customize the colors in the theme builder itself so if i go back here over here to my dashboard and go to divi theme builder now when i go to my footer let's say i want my colors here to match i can just go in now to my section settings click on background and i can just change my color just like that and now now that i've set my color here what is pretty cool is when you go and see all your blog posts the updates are going to happen across your whole website even if you have a thousand blog posts if you scroll all the way to the bottom here you're going to see that our footer now has changed so this is the power of uh using uh templates when we use dv so i highly recommend that whenever you're designing your website you need to go into the divi template area and design all your templates in there now the really smart thing about the theme builder is let's say you're working with woocommerce if you go into woocommerce it will also add the templates which means all your pages are going to have a specific design that you design and also um i don't think i mentioned this but we have a ton of templates on our on our blog post so there's so many layouts you can just download for free and you can use these in your designs tweak them a little bit and before you know it you are you're going to have beautiful landing pages beautiful blog posts beautiful product pages uh lesson pages and so on now let's talk about integration now dv works well with a number of plugins so for example we uh recent integration is with rank math and this is for seo now this is integrated deep into divi which means uh as you're designing your websites you can add all your keywords and make it easier for google to find your website so that is with rank math but of course all the other seo plugins still work well we also have a great integration with woocommerce we also have a great integration with fluent crm and all these email marketing softwares and email services so i highly recommend that you try them out it is very very very easy to use now i want to talk about something which is very very important and that is how do we make our websites fast so at times uh there's a misconception that um it's the page builder uh it's not really the page builder uh as the the main uh focus this can be a dif the problem can be coming from different areas for example if you're going to design your website with um large images like 4k images let's say for your header image your website is going to be slow whether you're using divi elementor or even if you have the fastest web hosting company because that page has to be downloaded for the viewer to see it so the first thing you want to do is to make sure you optimize your images so you want to go into a tool like let's say photoshop and really resize your images and also optimize them to reduce the size of the image don't use your images straight from the camera or download it straight from the from the internet you need to optimize them secondly we also need to use caching so there are quite a few caching plugins and some hosting companies have these by default and uh siteground i'm pretty sure has the caching option so you need to make sure caching is activated this also helps your website uh load really really really fast now um i know right now google has been talking about um page builders being very slow and and all of that now at elegant themes we have a feature or an update that's going to be coming up very very soon our ceo nick uh spoke about it in uh in a very long blog post and uh interview and that is we are going to change the way uh the css is loaded on the website as people are viewing the page so the css is going to only be shown or accessed as you click each page rather than having a massive file which has all the css which needs to be accessed every time you go to every other page so this is going to have a massive massive massive change to our website very very soon they i can't really give you the date on where when uh this update is going to come but uh we are going to resolve the speed issue when it comes to your website so just remember you're going to need to have optimize your images you're going to need to have a caching plugin that is also very very important and of course you need a very good hosting service like siteground and we are also going to make dv even faster on the front end

Channel: SiteGround.com

Views: 4,067

Keywords: Divi Tutorial, Divi theme tutorial, How to create a WordPress website with Divi, How to create a wordpress website, WordPress website creation, How to create a website with Divi, Augustine Mak, Divi Theme, Elegant Themes, How to make a wordpress website with Divi, divi theme builder, How to make a website with divi, divi, Divi Builder, how to make a divi website, divi website, divi website tutorial, How to build a website with divi, how to design a website with divi

Id: B7KshtaH4-I

Length: 46min 16sec (2776 seconds)

Published: Fri Jun 11 2021