How To Make a WordPress Website 2024 | Divi Theme Tutorial (Updated)

welcome back to the channel party people my name is daryl wilson today in this video i'll be showing you guys how to make a wordpress website step by step with wordpress and the divi theme now this is a long awaited video and i'm really excited to bring you guys this video today now this video is for pretty much anyone who wants to start a website for the very first time and it's also for designers who want to improve their design skills and learn how to use the divi theme the divi theme is the most popular wordpress theme in the world it's installed on more than 3 million websites because it's very easy to use and completely drag and drop so after today you learn how to make professional websites with wordpress and divi we've also invited some of the top divi professionals in the world with established web design agencies to give you guys design tips and tricks on how to make some really creative websites with divi and the divi theme does have a very interesting story divi came out in 2013 and it was groundbreaking it just started out as a one-man operation and slowly progressed into a small company with the divi theme you can build any type of website you wanted from their backend builder in 2018 divi developed their front-end visual builder which enables users to build their website visually on the front end making it very easy to build a website every year divi is constantly adding in new templates and innovative features to really push the limits of web design and as of 2022 divi is now the most active wordpress theme in the world with more than 3 million active installs worldwide now before we begin let me first show you guys the website we'll be making today along with some free templates that we have made especially for you guys in this video so today i'll be showing you guys how to build websites using divi in this video i will be showing you guys how to get started by creating this website it's a really nice looking website we spent a few weeks creating it for you and i'll walk you through how we created each section of this website step by step using this drag and drop builder with this tutorial you can make any type of website you want you can create a portfolio website a business website a blog a cryptocurrency website you can build any type of website you want in this tutorial with no restrictions now i did mention this was a drag and drop builder so let me give you all a one minute overview about this builder and just show you all how it works let's say for example i wanted to change this text right here i would simply go ahead and click on the text and then type in whatever text i would want so learn how to make a website and also let's say for example i wanted to drag and drop elements right i can take this red text right here and i can drag it below this and if i also want to duplicate modules i can even click on this little duplicate button and then i can take this and i can drag it somewhere else and for this section here let's say i wanted to change this text i'll put in something like why we are so popular and i can go ahead and take this elements and i can drag it on top of this one and i can do the same thing for this element i'll go ahead and drag it right there and then i can go ahead and take this button i can duplicate it twice and i'll take this button and i'll drag it below these elements just so that we don't have to make the button all over again we can also add space or padding to any part of the website so for example if i wanted to make more space right here i can drag and drop more space and i can do this also for the entire column as well so i can actually do this for every element on the actual website you guys can also choose to add a background color to any part of the website if you want so over here click on this gear icon click on background and then i can actually put in any background color that i choose to have on the website i can even add gradient colors so if you guys do want to add like grading colors which is a mix of two different colors you guys can go ahead and add those there you guys can also change like the gradient type and also the direction as well so if you want like a different style gradients or you want to change the direction you guys can do that with this page builder but as you guys can tell this looks pretty terrible right so i'm going to right click here and i'm going to undo what i just did and there we go i'm back to square one so as you guys can tell using divi is pretty simple right it's a very fluid builder it's very visual and also the drag and drop features of this builder are really simple to use and they're really easy to understand so today in this video i'll walk you guys through on how to use divi step by step so i do want to say guys i'm sorry i haven't made this video sooner it did take me quite a bit of time to make but i really do hope you guys enjoy it also we have timestamps in the description of this video so feel free to you know jump around to any part of the video also if you feel like i'm going too fast or too slow there is a gear icon at the bottom right of the screen that you guys can use to speed up or slow down the video and with that said we're going to go ahead and build your wordpress website in five simple steps in step one i'll show you how to get your domain and hosting a domain is the web address for your website like mywebsite.com we also do have a special discount available in the description that you guys will only find on this youtube channel in step two i'll explain the general settings of wordpress we will then go ahead and download the divi theme and start building the websites i'll introduce you guys to the builder and explain how to use this drag-and-drop builder step by step in step 3 we'll design the websites in step 3 i'll teach you guys how to design the website using divi i'll also show you how to adjust the websites upload images add modules and make your website from scratch in step 4 i'll teach you guys how to use the divi advanced features our special guest will also walk you through some really awesome tricks with divi as well step 5 the divi theme builder in step 5 i'll introduce you guys to the divi theme builder this allows you to have custom headers and footers custom 404 pages and other various custom pages that you can make using the divi builder in step six i'll introduce you guys to the divi marketplace there's many additional resources like plugins which can add more features to your existing website there's also several pre-made templates that you guys can use and i'll show you how to import those on your website there's also something called divi child themes i'll explain what those are and how to install them on your wordpress websites so now let's go to step one now there is a link in the description of this video it'll take you to a page to purchase fast cloud web hosting and welcome to name hero.com now i'm recommending namehere.com for years and people love it uh this week alone i've had zero downtime with name hero so you guys will have a reliable website and also my websites load at under one second with name hero so we do test these servers to make sure that you guys do get the best web hosting possible now once you guys are here you'll click on get started now and then it'll bring you to four different pricing options so we have the starter cloud the plus cloud the turbo cloud and the business cloud now i personally recommend the plus cloud if you guys are just getting started out like you're just getting your feet wet for the very first time but for those of you who have been using wordpress for a while and you want to upgrade and get some more performance i would definitely go with the turbo cloud because with the turbo cloud you guys do get the new nvme storage which does just give you a little bit more performance with your website so you'll go ahead and pick a package that works best for you and your budgets and then once you guys figure your package out you're going to click on order now all right and here you're going to enter in your domain name so this is the name of your new website so uh portfoliowebsite.com or you know mynewswebsite.com or whatever whatever niche that you're building you'll go ahead and put it here so i'll just put it in tutorial domain one dot com and see if that's available all right cool it's available now i know it takes time to figure out the domain of your website so you know give it some time you know it does take some thought for your new websites once you guys figure it out you guys will click on continue all right cool so next we have the billing cycle and we have three years two years and one year now personally i'd recommend one year you guys do get a large discount and this does give you enough time to decide if this is for you or not however if you guys are feeling very confident i would recommend going with the two or three year plan you guys do get the deal the longer you sign up for so it really depends on your budget but once you guys select a billing cycle we'll scroll down and i don't recommend any of these upsells personally you can do this with free plug-ins so yeah you guys don't need those and then we do get a free ssl with name hero so that's pretty cool once you guys select your billing cycle we will then click on continue all right next we have the domain configuration now i personally recommend the id protection guys this will protect your personal information from spammers and people trying to sell you seo packages and viagra and all sorts of nonsense whenever you guys get those weird emails in your inbox it's generally because they found your domain online so this will actually protect you so you don't get spam in your inbox so go ahead and click on id protection and then click on continue and look at that for a year of hosting you're paying less than a hundred dollars you're paying only 70 bucks you guys can also go the cheaper routes and get the cheaper plan if you're on a really tight budgets but i think this is a great deal for web hosting for the entire year for this specific performance so you guys are getting a reliable and a fast server for this price so it's definitely worth it so go ahead and scroll down just keeps growing now you're going to go ahead and fill out your billing information here so your first name your last name uh additional information you'll put in your password and also a support pin so this would be the pin that they would use to verify that it's you and then also we have a payment method so you can pay with paypal coinbase which is cryptocurrency and credit card here you'll go ahead and put in your payment details and if you guys do want to get their spam or their emails they actually sent some pretty good emails guys i'm not going to lie they have some cool promotional offers you'll go ahead and check that box and then you'll of course agree to their terms of service right i'm sure you guys are all going to read uh this here right you guys are all going to read this i don't think anyone ever reads any of this stuff but uh yeah you'll go ahead and check the terms of service and once you guys have checked out i will meet you guys in the customer portal all right and welcome to your new dashboard so this is your current dashboard as you guys can see i had many different packages many domains and i also have tickets with name hero and they really help me out with all of my problems so this is just your interface on the left side you can see your hosting packages these are your current domains you can always register a new domain also billing so if you want to see your payments or you want to add funds or you want to adjust your payment methods you can do that here and also the support so if you guys run into something weird i know with websites things just kind of get weird sometimes you guys can always open a ticket here and they will help you out with all your problems and they are pretty fast i mean i think maybe under one hour they can help you guys with all your problems so once you guys are here let's go ahead and install wordpress onto our new domain you'll first click on my cloud now here we have hosting packages now you should probably only have one here so just go ahead and click on your hosting package and next we're going to see this log into cpanel go ahead and click on login to cpanel alright cool so now we're going to go ahead and install wordpress onto our domain so up here we'll type in wordpress here we go we have wordpress manager by softaculous we'll click on this all right and from here we're going to install wordpress you guys can see i have many installations of wordpress already but right here you'll click on install and now we're going to look for the domain that we purchased so right here you have the choose domain section so you'll probably see your domain that you purchased i'll just go ahead and select this one but you're going to select the domain that you purchased and for the protocol make sure this is https which is the ssl now for in directory make sure nothing is here all right i don't know why that's there by default but oops whoops but make sure nothing is there because that will install your domain onto like yourwebsite.com something and you don't want that there yeah just don't have that there make sure that's make sure that's empty now for the admin username go ahead and give yourself an admin username and a password and this is what we are going to use to log into the website so whenever you want to build your website you're going to use these login credentials so make sure you write these down i'll just put admin never put past guys make sure this is something unique i'll just put paddywhack and your admin email make sure that this is an email that you have access to because when you forget your password they will send this information to your email so i'll put in my my gmail account here my famous pc hoarder which i do get tons of spam and below that you can always select your language we can always adjust the language as well inside the wordpress dashboard and i'll show you how to do that in just a bit and we're going to keep scrolling down here to the bottom they have these other themes they want us to use but we're not going to use these and right here you'll click on install yeah they said three to four minutes that was not three to four minutes right now here we have installed wordpress and this is the administrative url administrative url so just go ahead and click on this link and this will log you in to your website all right and welcome to your new wordpress dashboard this is where all the magic happens now the time of making this video the version is 5.9 but when you're watching this from a few months from now it'll probably be 6.0 or higher now if you guys want to see what your website looks like right now at the top right here under my blog you'll click on visit sites and this is your new wordpress website it's using a default 2022 theme but yeah we're not going to use that theme for this video now before i go on any further i want to go ahead and introduce you all to some general settings and just change a small a few options here and there just to make things run a little bit more smoother pretty easy right we got your website online and we are all ready to go now in this next step we are now going to adjust some general settings and i'll show you guys how to upload divi to your wordpress website it's really easy let's go ahead and jump back to the video the first thing i want you guys to do over here is go on over here to users and click on profile now the admin scheme color we're going to change this to midnight but you guys can change this to any color that you want like they have modern uh they got coffee which looks really bland and you know yeah they got this one ugh that one this one's uh yeah i like midnight it's just easier to see on the eyes you know that's how i see it you know now we're gonna scroll down here here is your email now whenever you guys want to adjust your email or change your email this is where you're going to do it this is important you guys forget your password for wordpress it will be sent to this specific email address so make sure you have access to this email on file and then we'll go ahead and scroll down also for those of you who want to adjust your password you'll click on set new password and this is where you can adjust your password to log into your wordpress websites but i'm just not going to change it and i'll click on update profile alright cool now the next thing i want to do is i want to adjust some of the general settings so over here we're going to click on general now for those of you who speak various languages you can actually change the back end of wordpress so right here it says site language you guys can actually change this to your native language if you prefer to see everything in a different language but yeah you guys can you know change that if you guys choose to do that i'm going to leave mine as english because obviously i speak english and then we'll scroll down here and click on save changes all right now one more thing over here on the left side you're going to see permalinks go ahead and click on permalinks now we're going to change this common settings to post name now the reason why we're going to adjust the permalink settings to post name this will actually make it so your website says like your website dot com slash about us right or you know yourwebsite.comcontact not all of these numbers and random stuff because uh this is really ugly and this is actually better for seo practices so make sure you have it on post name and we'll scroll down and then we'll click on save changes all right cool now let's go ahead and click on dashboard so now let me go ahead and show you guys how you can log in and log out of your wordpress website so you can pretty much work on your website from any location i'll go ahead and go over here and click on logouts i'll then get rid of all this permalink up here and press enter so this would be your domain right so this is your current domain you'll go to your domain and then you'll type in dash wp-admin and then press enter you'll then go ahead and put in your username or the email that you guys use sign up with wordpress along with your password and once you enter all that information you'll then click on login and that's it that's how you guys can log in and log out of your wordpress website all right guys so in the next step we are now going to download and purchase the divi theme now there is a link in the description of this video it'll take you to a page to purchase the divi theme and this is elegantthemes.com and here we have two different pricing options right we have the yearly access and we also have the lifetime access now divi offers the best license in the industry and i'll explain why so for 89 you guys can install divi on as many domains as you guys would like with no restrictions dv will also give you guys updates now dv always has constant new feature updates where they add new javascript features or new commerce options or something like that you guys will get all those features in this plan you guys also do get unlimited support for all of your websites so if you guys do get fatal errors or something's wrong or if you guys get like glitches or something elegant themes will fix all of the problems for you and you guys can use the theme on as many domains as you guys would like so you can put it on any number of domains and they will give you support and updates for all those domains they also do give you a 30 day money back guarantee for any reason right so there doesn't have to be a reason if you don't like it or you just want your money back no problem elegant themes will actually pay you guys back now they also have a lifetime access which is what i have now other page builders in the industry do not offer lifetime access because it's a very competitive price right so with this plan you guys will pay a one-time fee and you guys get lifetime updates you guys get lifetime support and you also get lifetime unlimited usages for as many domains as you guys would like you also do get a 30 day money back guarantee so if you guys watch this video and you feel like it's just not for you no problem you guys can always get your money back and you guys also do just pay a one-time fee so you never pay a subscription this is a one-time payments now you guys also do get access to all of their website packs so they do have tons and tons of layout packs in fact they have over 1900 layouts and you guys do get all this included with the purchase and they have some really beautiful demos and i'll walk you guys through how to set all these up in this video all right so let's go back over here now go ahead and pick a plan that works best for you you guys can go with the yearly access or go with what i have which is the lifetime access once you guys pick a plan you guys will then go over here and click on sign up today all right and you're going to go ahead and create your account so you're going to put your first name your last name your email your social security number i'm just joking guys they don't ask for that it's a joke all right they don't they don't ask for that uh but yeah you'll go ahead and fill out this information you'll click all the buttons you'll click all the check boxes and once you guys do that i will then meet you in your customer portal all right and this is your members area so once you guys purchase divi and go to the checkout process you will be brought to your members area now right here we have two different options right we have divi theme and we also have the divi builder plugin the divi theme comes with the own theme and the visual page builder the db builder plug-in is just the the visual builder which you guys can use on other wordpress themes but i find that the divi theme with the visual builder is a lot more smoother there's less bugs and it integrates perfect with each other so right here you'll click on download the divi theme all right and once you guys do that uh you guys can go ahead and upload this theme to your current wordpress website now really quick uh just to let you guys know um you guys will need to enter in your account api to your websites let me go and show you guys my subscriptions here so my subscription i do have the lifetime membership you know i'm not a i'm not a bser you know i really do have this product yeah i've had it for quite some time uh you guys will need your api key to activate divi onto your websites and i'll show you guys how to do that in just a bit but first let's go back to our current wordpress websites now once you guys are here we will go to appearance and click on themes we'll then go ahead and click on add new and then we'll click on upload theme and click on browse we are now going to upload the divi.zip folder so the folder that we downloaded from the elegant themes websites we are now going to upload this to our current wordpress website so go ahead and click on divi and click on open and then click on install now and now it's uploading divi to your wordpress website and now we're going to click on activate all right cool awesome now we have the dv theme successfully installed on our current website now before we go on any further i just want to make sure that you guys do activate your license code with divi you guys don't need it to make divi run but then again it does give you guys support and updates for future reference so right here go ahead and click on divi now over here you're gonna see updates so go ahead and click on updates you're going to enter in your username right here though that you created for elegant themes and then you're also going to enter in your api key from elegant themes as well you can find this information by going to your account right here clicking on account details this right here would be your username so i'm gonna go ahead and copy this and paste it and then to find your api key we'll go ahead and click on this and click on api keys so here is the actual api key what i'm gonna do here is click to copy and then go back to our website and then i'll just paste that api key in right there i'll go ahead and paste it there and then click on save changes all right cool so now our website is linked up with elegant theme so we can receive support and updates with our websites all right so the next thing we're going to do is we're going to now make some pages right so if we go to our website right here under visit sites you guys will see that we do have some pages here and also you guys can see how the website has changed in appearance right it looks a little bit different so we're gonna add some pages and also create a menu so let's do that let's go back over here to our dashboard right here on the left side you're gonna see pages click on all pages now we have these two sample pages but we don't need these pages so i'm going to click on this little check mark and then we're going to move these to trash and click on apply so we don't need those pages you know they're they're gone they're history now right here under pages we'll click on add new and we'll close this little box and for the title this will be our home page right home page publish and publish all right now on the right side it's going to say add new page click on add new page and this will be like the about us page right so the about us publish and publish add a new page right here we're going to add the services page right services publish and publish add a new one here and then maybe the last one will be like the contact us page right contact us page and publish and publish all right so we made these pages but uh if you go to our website right now or click on this little w icon and go to visit sites you're going to see that this is kind of it's it's not arranged properly right so we have like the services we have this other home so we need to go ahead and adjust the menu so let's do that let's go back over here to dashboard go to appearance and click on menus we are now going to create a menu so this will be like the main menu right main menu primary menu whatever you know and then i'll click on create menu so what kind of pages do i want on this menu well on the left side we have most recent and we have view all i want to click on all of these right here so home about contact home and services we do have two homes and i'll explain why in just a bit but just click on add to menu now this right here is a custom link so this is just a custom link created by default so i want to get rid of this custom link so to get rid of something on this just click on little arrow and click on remove and then we can adjust this right so we can have the home the about the contact there and these services like just like that and this is the primary menu right and i want to save this menu alright cool so now if i go to my website up here and click on visit sites you guys will see that the menu has been arranged properly so we have the home the about the services and the contact us page all right so the next thing we're going to do is we're going to assign this home page as our default home page that visitors visit when they first visit the website because right now if they actually visit our websites you can see that they're brought to this random custom link here this is like a post and i want them to go to our home page as the very first page when they visit the website right makes sense so let's do that up here under my blog we'll click on the theme customizer we'll come back to the theme customizer a little bit later i don't use it too much i'll be honest uh maybe for like your menu or something but the theme customizer is a little dated because the page builder does most of the work designing your website but uh down here under a home page we have settings here we have your home page displays click on a static page and then select your home page to the actual home page so what i'm telling the website to do is saying i want this home page to be the actual home page of the website and then click on publish and then we can close the theme customizer and now we're ready to start building out the wordpress website alright you guys ready at the top right here you'll see enable visual builder go ahead and click on enable visual builder all right congratulations we have now uploaded divi and we are now ready to start designing the wordpress website now in this next section i'll be showing you how to use divi right so uh we'll start using modules we'll add background colors we'll make it look like a real website i also do have images for all of you in the description below of this video we also will be giving you guys demo templates a little bit later in the video but i first want to show you all how to use the divi builder explain what modules are and how to you know make columns and stuff like that so with that said let's go ahead and go to step three and start designing the website using divi all right so once you guys enable the builder you'll first be prompted to build from scratch choose a pre-made layout or clone an existing page now divi also has a lot of cool pre-made templates but before we jump into the templates let's first talk about how to use the builder and elements so let's go ahead and build this from scratch right here so right here just click on build from scratch now if you take a look at my previous website right here i want you guys to visualize something here we really only have uh two columns right we have one column and we have two columns so let's go ahead and make a two column row right and the first thing that we want to do is insert a text module right so just taking a look here really quickly i'm just going to go ahead and make you guys visualize we have a text module an icon a text a text and a button and that's pretty much it all right and once you guys enter the text module you'll then see that we now have the text settings on this little box right here you guys can first you can add it to the side of the screen like that or you guys can make it bigger and then you can also adjust the size of this at any time right here i would leave it like this because with this it actually makes it so you can see how the website will look in preview which makes a lot more sense but you guys can go ahead and type in your content here so this would be your contents right this would be your contents now the content section has a lot of different options right you can make this linked somewhere so if someone clicks on this you can insert like a link like mywebsite.com or something like that uh you can also add like a background and you can also add in your own admin label for your actual modules the design tab is where you essentially design it right so this controls the sizing the colors and also the fonts you'll see over here how we just have this red font so let's go ahead and change the color really quick i'm going to click on the text right here and now we have the text fonts i believe i'm using i think it's jost right but you can go ahead and select a font that you choose a really good one is poppins bold which i really do like and also lato lado rubato poppins bold and those are my favorite ones to be honest but the ones that we're using for this specific demo is just right j-o-s-t and here you have different options right you can make this thin to have like that really nice elegant layout or you can make it bold which makes it a little bit more friendlier and then you can choose to have it italicized and underlined and stuff like that and then here you can adjust the color so i'll change mine to red right and for the text size this is where you can adjust the size of the actual text or introduce more letter spacing so that adds more spacing now i want to reset this because i don't know which one i set it at so right here i'm going to click on reset and that resets it back to the original default of what it was as you also have some other really cool options like text shadow where you can add some sort of shadow to your text here you can also adjust the alignment so you can move the alignment here now remember it only resides within this little box right here so it really can't go too far because over here there's another box so it can only go within the actual first box and this is a shortcut this is like an old option where you can have it light or dark but that's only if you left it at default settings all right so that is pretty much the text settings here in a nutshell right pretty simple right now i'm gonna go ahead and make it a little bit smaller like the actual demo all right and then i'll go ahead and save the changes now below that we have another oh no we have a icon so let's go ahead and grab in an icon here so to get another element you would just go ahead and click on the plus icon here and then we'll type in icon all right now on the icon settings you guys can pick various uh icons to choose from i think i use like the youtube play right i think i use that one let's go ahead and find it here or oh a cute little heart they got a heart they got all sorts of really cool stuff that they had uh quite often but i'll go ahead and add in this little icon here and on the design tab this is where we can adjust the actual icon and the color and stuff like that so i'm going to change my two red right but i'm going to reduce the transparency here here right here sorry and we're going to go ahead and reduce the transparency i don't want it too bright red you know i don't want it like like smacking your face red i just want it you know a little bit more subtle and then we're gonna reduce the icon size so this looks like a play button it looks really cool i like that and for the alignments i want this to the left side as well all right pretty simple the next thing we're going to do is we are now going to add in a another text so text module now we're going to type in text here but i actually want to change this to a heading text so i'm going to show you guys how to do that here i'll click on text and right here you see paragraph right now i want to change this to an actual heading text now what this does is this actually switches where you actually customize the actual um the module but i'm gonna go ahead and just copy and paste this text here and then i'll just paste it in there like that here i'll get rid of all that and paste it there all right so that's what we're working with right now you know it looks it looks good now let's go to the design tab instead of going to the text right here we are now going to go to the heading text because this is where we actually adjust the uh we change the heading text right now since i changed mine to h1 h1 will control all of the fonts here if i selected it to h2 then this would be the option and h3 and h4 and so on and so forth but under the actual content right here you can see here how i chose the actual um heading one paragraph okay so that's what we're customizing here so the design heading text h1 and now i can customize it as usual so let's go ahead and pick my pick my go to font here all right look at that just just the fonts just the font made that thing looks so much better like it's crazy i want to make it bold you know i like it bold because bold is friendly and i want to make this a little bit bigger right so we're going to make this just a little bit bigger and we're going to add a little bit of letter spacing just like a tab right but this dark i mean i think that's a little too dark i don't know let's do one pixel here maybe we can just reduce the actual uh strength of this black we're gonna go ahead and and put it down like that just to just a tad you know just a little bit there and then we'll go ahead and check that box now below that we added just a standard uh text module right so over here plus new text bam in this demo content that's good enough for me you know i could make it smaller but that's good enough and over here plus new and then button and then we'll go ahead and leave it there right that looks good and this will be like learn more right learn more now for the design tab right here this is again where you're going to design the button so you can adjust the alignment here by clicking on the right middle or left you can adjust the actual text color and the button here now go ahead and click on button and then right here you have this option we're going to click on use custom styles for button this essentially allows me to customize the button now i want my text color white and it does disappear but that's okay because we're going to add in a button background color here we have the background color so i'm going to click on add a background color and we're going to click on red now this red is just a little too strong here so again i just want to barely reduce the transparency here just to make it so it's not like smack dab red you know like that bright red you know like the corvette red uh and then also here we have the button border with now all these buttons actually have a border you can't see it until you add a color and there it is but i'm just gonna say you know what i don't want a border i'm gonna make it transparent all right or you can just add in the actual red color there and that will actually give you a little a little bit more of a border let's keep scrolling down here now we have the border radius the border radius is very important because this basically makes it so it's not so squared right so for example if you had a radius here you're making it that circular style and i do like circular styles in fact studies show that people are more inclined to click on a circular button than a square button so that's just something to consider and also here you can adjust the actual the button font which we're using jost right or jose you know i don't even know the name of this font it's pretty embarrassing i'm doing a video and i don't even know how to pronounce it i'm gonna make it light actually no let's do regular that was too much here and uh yeah now here you have show button icon so basically saying do you want to show the button icon you can put yes or you can put no it's really up to you and it just gives it a little icon here that you guys can select i'm going to put no just because i feel like that's you know i just don't want it you know we don't need it and that's pretty much it for the button alright so congrats you guys just made a landing page no i'm just kidding we're not done yet we've got to add in a background which is probably one of the most important aspects of web design now i also want to educate you guys a little bit on why we added everything to the left side you guys notice you guys go to a lot of these websites here you guys probably go to a lot of websites on the internet and you always notice the button is on either the middle or on the left side studies also show that the button on the left side creates more engagement because right here we see this picture of this cat right and the cat's so cute and it's captured my attention now i want to take action so i'm going to click on the button but if you have the button on the right side you know people for some weird reason from the human brain uh they have to look left at the actual image which to them is a little bit more work right so uh here we can see the picture of the cat it's very cute i like it therefore i want to make an appointment so we're going to do the same exact thing for our website all right now the first thing i want to do is add a background color here so right here we're going to click on this gear icon you see how this blue section is controlling this entire section the blue box will control the entire background so if we add a color or an image it will apply to the entire background so right here i'm going to click on section settings and click on backgrounds here i'm going to go ahead and enter a background color now you guys can select from various different colors right there are a lot of colors that we can go with right here i think the white is actually pretty cool i actually do like that but i'm going to go ahead and select the color code that i used for the other websites so now i'll go ahead and click on this little color code and i'm going to paste in my color code so the color code is d6e3f and then i'll click on the check mark and that gives it this uh this really nice blue subtle background i do like that a lot you know it looks really nice but before we go ahead and we go on to the next section let's explore these other background options so here we have a background gradient a background gradient essentially allows you to add a gradient to your actual entire background gradients are very popular a lot of people use gradients and what you guys can do here is actually click on the actual blue and you can adjust the color here so let's say for example we want like a i don't know like a blue right or a purple and i'll click on this one over here and this one i want like a black or something or i don't know like a white something like that and there's other options here where you guys can change the actual gradient type you can make it circular which means it starts in the circle and you guys can do like uh these are actually our two new options elliptical and conical right it's pretty cool and then you can also adjust the gradient direction so you can make it really customizable i mean divi is pretty incredible i mean these options are are not available for any other builder so you guys can adjust these and mess around with these as you want and yeah so that's pretty much what a gradient is and how to apply them to your website you guys can also go to this website here uigradients.com they actually have a lot of really nice color grading codes that you guys can use for example let's say you guys want to add in something like this one here you would just copy this code right go back over here go to the first gradient and then paste that code in there and then click on check and then go to the second one copy that one go back over here and then click on the other one and then you'd paste in that color code like that and click on check so you can really achieve some really nice effects with this maybe here you can add in like an image change this text to like a white or something and make it look really nice all right but uh we're gonna go we're gonna say goodbye to gradients all right goodbye gradients next we have a background image which we'll do in just a bit also background video if you guys do want to have it in background video to your website you'll click on add a background video and then you guys can actually upload a video or you guys can click on insert from url here you can go ahead and insert a youtube url or a vimeo url right here but i'll go ahead and select choose a background video file and i went ahead and i went to a website called videvo.net and i went ahead and i downloaded some video backgrounds this website offers a lot of free video backgrounds you guys can use and i find that if you guys upload it to your server it works a lot more in fact it's a lot more stable than uh inserting it from some random url because it gets lost and it doesn't work half the time so right here is my video i'll click on open and now i'm uploading this mp4 file and now you guys can see that we have this really beautiful video background on our website so this is one another way you guys can add in like a really nice background to your site uh check out videvo.net there's a lot of other free websites just do a quick google search but uh this one has over 500 000 so i'm sure you guys will find something that works just for you so uh yeah that's that's i'm gonna close that next we have background patter now this is a new option that davie just released and what this does is this allows you to add patterns to your actual background and you guys can adjust there's like a lot of different uh styles here this actually will work pretty well i do like this a lot you know actually uh it's blocking the letters we can't see it yeah there's a lot of different a lot of different things you guys can pick from here yeah you guys can use this um i'm sure there's a lot of reasons for it all right this is a new feature they've added and they're going to add a lot more so if you want to add a background pattern this is how you can accomplish it now there is one more that's really cool and this is a new feature as well this is called the background mask this will actually add some sort of design to your actual website and i do like this a lot because this looks like an image basically but it's really not and you can actually customize this you know you can change the colors to make it look however you want it to look but i'm just going to leave it as transparent and there's other different options here so instead of like a layer blob you can add like this little thing you know something like that right or we can actually transform it uh there's a lot of different options here which you guys can use to kind of mess around and stuff like that but i really do like this option this is a new option that they have just recently released so you guys can just go through these options and see which masks work best for you and they have tons of them to pick from they do also have tutorials on use cases on how they made some really nice beautiful layouts with this so i'll go ahead and link that in the description but as of right now i'm not going to use these but they are really cool and i do like them all right so that's pretty much the background summed up right now there is one other thing that i want to do and that is a background image so right here we have add a background image now i have demo images for all of you guys in the description below of this video they are called the practice images and you guys can use these images to follow along in this tutorial so i'll go ahead and first i'll go ahead and show you guys the folder it's called the practice images you're just going to double click on here you're going to open them and then you're going to see this file called practice images you're going to see that there's these images here and then there's also images for the entire websites and these are all the images that we use on the website you guys can use them completely free just to practice but the practice images these ones we're going to use a little bit more in the video just to teach you guys some strategies with landing pages so let's go back to our website here and now i'm going to click on select files over here in the desktop i'm now going to open up the practice images and then upload some of these images right here all right cool so i went ahead and i uploaded some images i want to teach you guys some strategies really quick here we have this image of this gentleman right here right here i'll click on upload an image you'll then see that this image overrides the actual background color now whenever you guys are adding images you want them to correlate to your actual text right so here we have this strong message right with the call to action and then we have this gentleman over here looking like you know fierce and strong and it invites you to click on the button you'll see that also in a lot of our landing pages that we always have the image purposely added to the right side so that the text is legible you want to make sure that your text is readable and for all of our images that's pretty much what we do here so you can see here as well we added in text on the left side that makes it very easy to read and also here we want to convey the message that we're friendly and we have the girl on the right side so you want to make sure that you do the same thing for your websites but i'm going to go ahead and change this really quick i'm going to go to add a background image and also the same thing for this little cat right here so the same thing guys you know we would just go ahead and change this text to white just like the other page and there's other images here you guys can mess around with like for example there's this gentleman here but these kind of backgrounds are only good when you actually have the text in the middle of the page and it's more legible so we'd probably want to change this to white maybe even make it a little bit more legible but uh we actually use this same layout and another template that we use you know we do use all these images you know that you guys see here but i'm gonna go ahead and click on add a background image and i'm gonna go ahead and upload the other file that we used for the actual websites so images for websites and i'm gonna go ahead and upload all these images right here so i'm just gonna go ahead and click on all of them and then i'll click on open it might take like a few minutes here to upload all the images so just give it like three or four minutes all right cool so i went ahead and i uploaded all these images and i'm going to select this image right here that looks like a little credit card or i don't know what this is you know it's a concept and i'm gonna click on upload an image now you guys have noticed right away that this image is just way too big it blocks the whole page but there are some options here that we can use that'll actually make this a little bit more smaller so here for the background image size we're going to change this to something like you know fits or actual size or stretch to fill or even a custom size which you guys can also adjust the size of this which is really cool but i'm just going to go ahead and change this to fit and then we can also change the position of this so the background image position i'm going to change this to the center right i'm going to put it over there i like this option better because when you add the image to the background it's a little bit more responsive by default so it looks better on all devices however if i were to create like an image module here and add in the image it doesn't look as responsive in my personal opinion so i would go ahead and add in an image like this if you want to add it to your background because it just looks a lot nicer and you guys can actually adjust the actual position of the actual image so i'll go ahead and click on check and look at that guys we now have a perfect landing page that we created in just a few minutes it looks very similar to ours in fact uh just a small little position of the image this is a little bit larger and bolded but ultimately it is pretty much the same exact thing now the next thing i want to do here is i want to actually make this box a little bit larger right it's too small and i want it to stretch over here a little bit so to stretch a box we'll click on the gear icon we'll go to design the spacing i'm sorry the sizing and then we'll actually increase the max width so the max width i want it to extend about 1250 pixels or 1248 that's fine and click on check and then maybe we should increase this size because you know it's just a little too small now now that we've actually made the page a little bit bigger and we can make this a lot bigger like that and then we can also you know add some emphasis to it and maybe even all caps no that's fine i think that's fine and then we'll click on check so that's how we created a really nice landing page all right next i want to make sure this background is responsive on all devices right now i'm going to introduce you guys to custom css css is normally used by developers but don't worry this code is really simple you'll just have to copy and paste some code so over here under section settings i want to go to advanced and then we're going to click on custom css and for the main elements i want you guys to paste this code i will leave this code in the description of this video that you guys can use on your website but what this does here is that it actually forces the image to be responsive and it adjusts it perfectly so it's in the middle so you notice here how if we take out the css the image is a little bit too large and it's also not even so if i add in the css right here it'll actually force the image to be in the middle and it forces it that's how you guys can use css to sort of add a little bit more feel and look to your website now there's another option that i want to introduce you guys to and that is motion effects so let's do it i'm going to go ahead and click on this little plus icon here and we're going to find an image here all right and for this image we're gonna click on this little image here and we're gonna find that cute little cloud there's a cloud here somewhere there it is all right we gotta we got the cute little cloud here all right so uh we got the cloud this cloud uh it's too big right so let's go to the design here and make it smaller sizing we're going to make this smaller all right we're going to make this smaller all right 20 let's do 25 guys right 25. and i'm going to push this over like to the right side right just somewhere random but it still looks good there right that still looks nice now what i'm going to do here is i'm going to teach you guys motion effects and this is a really cool trick all right and the next thing we're going to do is we're going to go to the advanced tab here now we're going to scroll down until we see scroll effects and this is really cool so we're going to click on horizontal motion i want to make sure that there is some horizontal motion to this bad boy right so we're going to enable horizontal motion now with with this setting here you'll see that if we scroll down the cloud actually scrolls with us which is pretty cool in fact you can use this for all of your elements but i feel like the cloud here really just adds some you know some really neat design to your sites over here you have some few options you can actually control where you want it to be at and how far it's going to go so if i scroll down here it'll then keep scrolling over there and if i take this to the other side it will scroll like that so yeah the horizontal motion settings they'll take some time to get used to but if you just keep messing with these settings you guys can understand how all this works i'll be very honest guys i am not a super pro on these settings but i have used them on my demo website here with this cloud so i just wanted to introduce you guys uh to that option and there's other options here like middle bottom of the elements uh there's a lot of different ways on how to use this but i think this is really cool and i you know i like it so i want to show you guys that so yeah make sure to like this video all right all right so congratulations we have now made our home page if you guys have any questions about homepage or landing page strategies feel free to let me know in the comments below and with that said let's keep going hey guys a little design tip you know when you guys are designing your website uh try to stick to like a specific color scheme you know i do have a video on other topics like web design and stuff but just a quick summary uh just try to stick to like three to four colors you guys can tell on my demo websites that we only use like three to four colors i see a lot of beginners try to add too many colors and what that does is that that loses your brand it loses your identity so try to stick to around three colors max four colors on your website and carry that throughout your entire website also don't use more than two fonts okay stick to one to two fonts anything more than two fonts your website will uh it'll start to lose its identity you know people are kind of like what website is this like it gets too wild you know so uh yeah but with that said let's go ahead and jump back to the video all right cool so now that you guys have a good understanding of how to design that elements let's go ahead and move on to the next section here so right here we'll click on the plus icon for the blue setting and now we have three options right we have regular specialty and full width uh we already did regular so i just want to i just want to introduce you guys to these other two before we go on any further specialty is just adding like a special type of column here where here you can see that these are a little bit longer they have this section and then two little dots so they're just different ways on how to present columns right and there are a lot of uses for this it just depends on what you're going for you know you can insert an image module here a text a call to action call to action right so it really depends on what you're trying to go for there's also the uh full width section here the full section allows you to add in full width elements these elements extend all the way to the ends of the page and some of them even extend on the entire page itself for example here i'll just grab in the full width header which is a very popular one and under the design tab i'll go to layout and i'll make this full screen so you can actually go ahead and use this as well if you want to have a full screen uh style the only thing is this element is a little limited the big problem here is that you cannot add in modules on top of this text module so this is a preset style right this module cannot be adjusted that's why i prefer to do it like this here so you can kind of add what you want and you can do you know whatever you want but from right here all you can do here is change the title you can change the fonts and the colors you can add a background image and you can also align this um image here i'm sorry this text to the middle or t to the right side and that's pretty much it so for example for the layout you can just do this and that's pretty much it you really can't do much than that so yeah i mean if you want to explore the full-width modules they are very responsive but just know that they are a little bit more limited compared to actually doing it yourself with the regular modules all right so that's a quick little rundown of the full width and also the specialty here let's click on regular and now let's click on the three column row here let's go and introduce you guys to a lot of these other elements here here we have call to action right a call to action is essentially inviting a user to do something really quickly in the link here i'm going to put this little button that makes the button appear this is essentially like saying uh i want you to take an action i want you to do something and uh yeah that's a call to action there's also a uh we got like a blurb blurbs are also really popular as well blurb is essentially the same thing as a call to action it just doesn't have a button so that's pretty much pretty much the same thing here so if i put in the url here uh these are just for the actual titles and then over here we can add in like an image or something like that you know an image where we can change the image to uh something like this guy and there you go so you guys can use these modules and then you can also drag and drop these modules here right so we can go like that we can also duplicate modules so over here i can duplicate this and i can duplicate that as well now i can actually right click over here and i can actually undo redo or i can just go ahead and just delete it with that trash can right there so i'm going to go ahead and trash this trash this i'll trash this as well and then i'll go ahead and drag in this element over here so yeah that's pretty much it so that's how the elements work here you can pretty much just add the modules then you can just drag and drop them you can go through each of these modules and explore what all of them do we're going to go through some of them in this video but we're not going to go through all of them just because there are a lot of elements to cover but i will cover as much as i can all right so now i want to teach you guys how to manage the blurbs blurbs are pretty popular right here you can see that this is a blurb right it has this icon with some text and yeah blur is actually a really popular element so right here let's go ahead and design this really quick we're gonna go ahead and change this title right here to something like digital marketing and for the body paragraph you guys can obviously put something that you know relates to your website but i'll just go ahead and put in like official marketing partner now here we have this image and icon what is unique about the blurb is you can actually use an icon instead of an actual image so you can use an image but if you don't have an image you can use their library of like icons and they have tons and tons of them to go through i'll just go ahead and put in something and then we can customize and design this now to be honest if you go on the design tab it's hard to find out where to actually go to design stuff so for every module there's this little pencil icon this will automatically take you to the settings that are um there that you guys would you know design everything with but i'm gonna go ahead and change this to like a black right but i want a soft black you know that that really hard black it's really it's really tough you know it's really strong and stuff like that we can choose to have a background color if you guys want to have a background color over here you guys can see i added a black background color and i use just a white color so i actually inverted that so i'll take this to white and then black right and then you know i uh i reduced the transparency here just a little bit like that okay i'll click on the check and then you can place the image to like the top or the left i like this actually better and i use this on a lot of my other websites but for this actual website we just put it on the top and then here we can control the actual size of it so i'll just make it a little bit smaller and then i will align this to the left side right that looks nice now you can also have the rounded corners which i think a lot of you do want to have so you can see here how the corners are a lot more rounded so that does look a lot nicer like that we also might need to reduce the actual the icon width here all right and then we'll scroll down over here and now we we might need to add a little bit more of a border right because uh you can see here how there we go we just add just a little bit more space just so it's not so small right and we'll scroll down here we'll talk about padding and margin a little bit later but these other options these are options where you can design the actual blur but i'll give you guys a better example of when to use these options i would not use them for the actual blurb and that's pretty much it now here we have the text so we can adjust the alignment of the actual text here but i'm going to leave it to the left side and then we can adjust the actual font here as well so i'm going to change mine to just right jost i think that's fine like that change this to like a black right and we can make this bigger or smaller right so we can make this bigger or smaller probably do like 25 right something like that here i'll make this just around 20 right and now what i'm going to do is go to the body text and i'm going to do the same thing here but i'm going to make this just a little bit bigger right adjust right black and i'll make this 25. all right now i want to add some line height here i think they're too close to each other right so we're going to add some line height just like that basically i'm just saying i want them a little bit farther away from each other and i think that's good all right i'm going to go ahead and click on the check now below that i want to add in another little text module right so we're just going to throw in a little text module below that and we're just going to use this as demo text just to fill in some space here right so i think that looks good now we're gonna also add in a button however we have already created a button right here right and i think that we don't need to really make another button from scratch so we have a few options here we can actually duplicate this module and then we can take this module and then we can drag it down here like that all right so i went ahead and adjusted the corners of this button really quick just so they're not too circular now let's say for example you want to save this right so this little thing right here we're going to click on save module to library and this will be like the button for our website and we're just going to save this to the library that's basically saying that i want to use this for later in fact you can do this for all of your modules so if you want to grab this text you can say this is like the primary text right and i will save this to the actual menu as well now over here we can do something else so over here i might want to add in like an image right and this is a very popular format so we're going to add an image right here right and then we can go ahead and we can go ahead and duplicate this text and then we'll take this text we'll put it right below the image and then we'll go ahead and duplicate this button here as well and then we will also drop it right below that text this is a very popular format a lot of people use this format for showcasing uh employees right so you can go ahead and put in like an image here of your employee all right like this is this is john and then you can talk about john here you know and then this right here would be like john's name right so i'll just drag it right there and then this would be like his profile or like his social media or whatever you want to do and stuff like that so this is another use case option of how you guys can add this to your sites but i don't want to do that here so what i'm going to do here is i want to duplicate this section and i want to have it in three columns but i don't want to have to do the work all over again so what i'm going to do here is go over to this gear icon and here we have column one right here's column two and column three i'm going to delete these and then i'm going to duplicate these just like that so now we have these three options which i which i do like i think this looks a lot nicer now let's say for example you want to add a background color to the first icon here or the first row you'll click on the gear icon and then you'll go to backgrounds and then from here you can add a background color so let's say you on and like want to add in red right but i want to reduce the subtleness of that right something like that and that looks a lot nicer right now you guys might also notice here how this color is just way too close to the button you know it almost looks like it's squished right so now we want to add padding right so over here under the design tab we're going to go to spacing padding is essentially space so what i'm saying here is i want to add space to the top i want to add space to the bottom space to the left side and then space to the right side just so that we have some breathing room here right just so everything is not so uh you know so cramped inside you know it's like you know it's it's we got some room here and over here for the border we can add in like this rounded effect so it's not so pointy so that looks a lot nicer right now instead of actually doing this all over again we can actually copy these styles and we can address it to these next two modules so for example here i'm going to click on this little gear icon under the first one right here i'm going to right click and we can go to copy autumn styles and on the second one i can paste the item styles so essentially what i'm doing here is i'm taking all of the settings from the first one and i'm putting it to the second one now i'm gonna undo this really quickly so over here i'm gonna click on this little box right here and i'm going to click on this little um i guess you want to say clock and we're going to undo that really quick now instead of doing that there's another option there's something called extend styles as well which is a really cool feature i'm going to go ahead and go back to the gear icon right click and here we have extend item styles what this means is i want to extend the style of this to the page to this section or to the entire row so i'm going to select the row and click on extend and now you guys can see it has now extended that style to all the elements in that row so it will really speed up our workflow right and then of course you guys can go ahead and add in like a background color here so for the second column we can add in like a color here of like green and then reduce the transparency here because it's too much right and then do the same thing for the actual first one as well i'm sorry the last one you guys can tell i'm not on a script right so i just i just know the builder and i just know this stuff so i'm not on a script here and there you go so now we have this beautiful section that looks really professional and yeah i think you guys will really like this now let's say for example you guys just want to add something here on the top right here i'll go ahead and add in a new row and we're going to add in like uh like about us right so let's say i want to take this and i want to put it above this section we're going to move this row i'm going to hold this and then we're going to drag and drop there now i'm kind of lazy here so what i'm going to do here is i can either extend the styles from this one or we can use those elements that we saved so let's do that i'm going to trash this module now click on the plus add from library and we're going to use the primary text one right here all right we're going to use this module and there you go and now we'll just go ahead and center this text really quick just so it's in the middle right makes sense and this can be like you know about our company or something like that you know who knows you know like about our company right so about about our company so this does look great right now let's say for example you just want to add in just a little bit more stuff on the background just so it's not so white here i'll click on the gear icon if it does disappear on you just double click here and that that'll bring up the actual background settings for the design here under the i'm sorry for the background we'll just add in like a background mask or something this would be a better situation on where we can add background masks and stuff like that so i'll just go ahead and add in a very a very faint color here you know like a very small one here right just like a very faint color like that and there you go now we have this sort of masking style effect all right so that's how you guys can use the background masks add an elements and just have a really nice looking little section right here we're going to make this section a little later it is a little advanced that's why i just wanted to put it on hold just because it was a little too much for you guys and i feel like doing this first would have made a lot more sense all right now before we go ahead and talk about this section right here which we're going to create i quickly want to show you guys how to create a grid style effect like this a lot of users ask me how to achieve this and i'll just go ahead and walk you guys through this it's a really nice format to add on your sites let's go ahead and just quickly walk you guys through that over here we have this plus section we have regular now depending on how many images you want you can just select how many images you want uh for my specific example i'll just use four i mean i can use more but uh you know i'm just going to use one for now and i'll just put in an image here i'll click on the check and we'll then duplicate these because i'm super lazy right and i want to just drag and drop these oh it went over there huh that's weird here uh there it goes okay good all right and then uh this one there okay so now that we added these images in i now want to control this row right here so i want to delete the space so under the gear icon we'll go to design for sizing we're going to turn on the gutter width gutter width means the space in between the actual elements i'm going to change that to one all right so now there's no more space you guys see that no space at all and over here we have the width i'm going to make it 100 and here you have the max width now what the max myth means is this is basically applying to the screen size of the actual visitor so right now i'm going to just apply it to like 1800 this means if the user is on a monitor up to 1800 pixels it will stay full width but if they are on like a 4 or 8k monitor then you might have to add in more pixels uh for that specific user right but i would just leave it at something that matches the rest of your websites like i don't know like 2k or something like that and just you know leave it out there and then i'll click on check now you guys might notice here how we have this white space right here and we also have white space right here you guys can manually just drag this like that but i would rather go ahead and type it in just to make sure that it's 100 uh zero right so for the row setting here design spacing we're going to change the padding to zero on all sides what that means is i don't want any space whatsoever in this column now for this blue column we also need to get rid of this space on all of the sides so the gear icon design spacing zero zero zero zero as well and there you go so now we have this beautiful grid which we can put on you know any images and make it look really nice so that's how you guys would achieve a grid style effect for your website now let's go ahead and keep going here with this tutorial so now we're going to go ahead and create this section but we do have a lot of elements that we already have that we don't need to make all over again but this is a two column row right here right one column and two columns so let's do that here we go we're gonna plus over here regular a2 column row and uh we can add an image here so image right so this will just be like a placeholder for now so now we'll go ahead and add in these models on the right side but you guys remember we've already created these modules so let's go ahead and we have to save these again right so this is the text and this would be like the red text right red text and then we also have this button which i do like we're going to save this button here main button save to library now we can always duplicate those modules or we can just reuse them again you know so add from library and we have the red text we're going to use this module right and then we're going to do the same thing over here you know it's all about working smarter guys you know work smarter not harder right is that what they say you know and then over here we're just going to add in i think we just threw in some uh some other text here and then we're going to add in the button add from library and main button and use this module this is a lot faster than doing it you know all from scratch i mean it would take way too long right so next we need to add in the toggle module so right here click on plus we're going to type in toggle toggle means that if they click on this it will then open up a little bit more information like that which is really cool so this will be like digital marketing right digital marketing and then we have some other information and this would be the information that would uh you know that if they were to click on it it would present this info right here so that's where that's referring to here for the design tab we're going to go ahead and design this really quick we're going to make this like a very you know very i actually like that color it's very soft very subtle right you guys can choose the icon here it will reflect the close icon that means if they click on it this is the close icon and the other one is open right so we have closed and we have open which this is the open one here i'll just select something like this right and uh we can always adjust you know everything in here like the toggle the background color so that means if they open it we can actually adjust that background color now that is if they actually open it if they don't it's going to stay this color or it'll say this color and we can adjust the background color here all right but i just want to go ahead and make sure that we adjust the actual um you know the text and stuff like that so for the title text i want to make sure that this is our current font which is joe straighter jost here we go title font here all right and once you guys open it you'll then see you can enter a title so put in like digital marketing and then you can go ahead and put in some information once the user actually clicks on it right there and there's other options here uh like for the states like do you want to make this open or closed you can actually leave it like this if you want to do that or you can leave it closed but i want to adjust the background here so for the actual background i want to add in a very uh transparent style right there right so i just want it so it's not showing too much background and for the design i just want to change the actual font here and i also want to get rid of that border so for the actual text color we'll leave it like that but i want to adjust this to jost right just there we go and i will make this a or is it bold all right now the one thing i want to do here is i want to get rid of that border so for the border we're going to go ahead and make sure there is no border width right here so i'm just going to get rid of that border width and that's it so now if they click on this it'll just present the information in a really beautiful format and you guys know me by now i'm super lazy so we're just going to duplicate this and there you go all right and then we're all set now you guys might also notice here how there's space you guys can just get rid of the space right get rid of the space right beautiful man i'm good all right now that we've done that let's go ahead and add in a um an image here on the actual left side but also there's one other module that i want to introduce you guys to and that is the divider module just to give it some design right i love dividers so over here divider we can show the divider but i want to make this a very faint color here and we're going to make sure that the visibility shows the divider and for the design i want to change the line here you know we're going to make it a very a very subtle black right it's a very faint black here right and we can adjust the line style like you can make it like dotted or dashed or you know whatever and it changes like that so you guys can see that but what i want to do is i want to change the sizing here so i'm going to put this in the middle and then we're going to reduce the width notice here how you see that the line is actually disappearing makes sense right and uh yeah once that's done i'll click on check now dividers are not necessarily for creating division or creating space yet they're also used for decor and design purposes for example uh this website you can see how we added in these dividers right here just to break up all this text so it's not so distracting on the eye right so we just want to make it look a little bit more nicer by putting in text divider text you know stuff like that so dividers are really helpful for actually creating design uh and not just about creating space so i'm gonna go ahead and delete this button here i don't know why i put it there you know and i'll take this divider and drag it there that looks like that right that looks a lot nicer now over here we can just simply add in an image right so image and i'll just throw in i don't know this this one here now i want to talk to you guys quickly about the image filters i did talk about them briefly up here but i felt like that was a bad example so i'm going to show you guys a little bit about their filters right now so under this gear icon we have the design tab if you scroll down we have filters transforms and animations animations just gives it some sort of animation right so if a user scrolls down it will then animate right and there's a lot of controls and functions on the seconds and the direction and all sorts of really cool stuff there's also the filters filters are essentially just adding in like more effects and stuff like that essentially it's like a built-in photoshop where you can adjust the contrast the brightness um you know there's a lot you can do with this it's really amazing to be honest and elegant themes actually does give a lot of use cases where you guys can add in some really nice effects and really cool styles they have like this one blur and then like when you scroll down it blurs out it's really cool like you guys got to check it out this is the actual filter effects it's just ways on how you can add in a little bit more to your sites also the transform now the transform options allows you to transform the actual image now just be very careful about this because it can have a lot of responsive issues right but let me just give you an example let's say i want this image a little bit larger right but it just it doesn't really fit outside of the box so i can actually just say you know what i want to make it just a little bit larger you know a little bit bigger right using this uh control and then for the transform translate there's other ways on how you can move it around here like just to give it that really nice position and then you can also rotate it where just you know you get really it gets really wacky you know it's like it gets really crazy here all right yeah there's that's there's the sku which you can skew it and then there's the transform origin which you can put it in a specific state like that so those are the actual image filters and also a lot of these other design options just be very careful and cautious because remember you can have responsive issues later down the road if you add too much of it okay now i know when i scroll over it looks smaller but when i save the changes it'll apply to the actual size so don't worry about that too much all right so that's pretty much it we made this section uh compared to this section we just made everything smaller that's really all it is it's just smaller so it's pretty much the same structure it's just a little smaller as you guys can tell all right so let's go ahead and go to the very next section which is this section here it's also very similar and i'm going to go ahead and speed this up a little bit right here by actually just duplicating this entire section so we're going to go ahead and duplicate this whole blue section and this will actually make it so the entire section is duplicated and all i did here was i just rearranged the elements you know i just you know just made it look different but it's really not so over here i'll put that right there all right and then we'll go ahead and center align this right so design text and we're going to center this this time right now one quick thing guys i'm going to take this out all right the filters are cool and everything but uh you know geez i'm not going to look at that the entire time okay so i'm just going to reset everything here you know reset all this just because it is a lot to look at and this is let's be honest this is really ugly you know it's like who wants to look at that all right so here i will duplicate this as well and we'll also drag this over here and i'm going to double click on this this is other another shortcuts it works sometimes right and i will center this all right and then we're going to get rid of this you guys are fired all right i think that's pretty much it here so you can see i just pretty much made everything smaller all right so i just went ahead and i deleted this and i made this image smaller in fact i'll just go ahead and delete this and we'll just upload another one because the the new one is going to be a little bit smaller here a little bit more compact you know i like that and we'll just put in uh we'll put in this one all right that's a little yeah much much neater much much it's cute you know it's cute and here we have text we have the bar counters and then text so what i'm going to do here is say all right guys we're going to you guys got to go you know you're retired duplicates i'm sorry we'll duplicate this section we'll drag it up here and we're now going to add in some bar counters bar counters are another new module right this one right here and what we can do here is we can just go ahead and uh you know make it like our demo so this will be like marketing right so over here i'm going to click on the title this will be marketing and this is like ninety percent right and then over here under the design tab this is where you guys can actually design stuff so let's say i want it red right for the title uh you can move the title around here but i'm going to leave it to the left side and i just want to change this text here so it's going to be just right just all right and once that's done i'm going to go ahead and check this and i'm just going to duplicate these really quick like that of course i can adjust this if i choose to do that but i'm not going to do that but you guys get the point so you can adjust the actual percentage right here by putting on like 50 or something like that you guys can also turn on the number as well by going over here to elements and turning the percentage on if it doesn't display just go ahead and save the changes and once you guys exit the builder then the actual number may display so let's go ahead and click on exit visual builder and there's the number sometimes when you're working on the actual back end the changes might not appear but they are there alright so you just gotta close the builder and they will display all right but we created a really nice section in a matter of minutes so congrats and the only thing left here to do is we need to add in a background color now instead of actually going to the actual color here let's just see if we can get a little little cocky here i'm gonna i'm gonna go up here and just copy the copy the section styles and then we're going to paste that section styles right here and there it is so now we have this beautiful section all we need to do now is get rid of that background image so i'm going to double click here background background image and i'm going to delete that and there you go we have successfully made another section now the next section here is it's interesting right we have a three column row right here and i added a lot of padding here to this blurb to give it this effect that it's in the middle of this whole box so it's really interesting so let's go ahead and and utilize this next section right here we're gonna do a three column row all right now the next section i also used borders and we haven't really used borders yet uh so that'll be like something new for us to learn add an image there right right here we will go ahead and put in a blurb module which you guys are probably familiar with right and then we'll add in another image here all right another image of this uh we have another girl here right we'll just put in this girl here yeah right i think that was the right format right yeah that's right format all right so the first thing that i want to do here is i want to adjust this one right i just want to add an icon here and i just want to get rid of all the text so i don't really want to have any body paragraph right so you don't have to use the text if you don't want to right this will just be like watch video now right and i'll quickly go ahead and just design the text here just to keep it consistent right so it was jost right jost and it was also red right now one thing that we need to do here is we need to add in this icon so we're going to add in an icon and we're going to make it red here for the image and icon we got to turn that on right and we're going to add in like a play button or something or whatever you want oh that's hideous image and icon we're going to turn that turn that whites right or i'm sorry red all right and there you go all right so that looks good all right we might want to make the background color transparent just in case you added a background and i think we should reduce the size of this you can see this is a lot smaller and also it's center align so what i'm going to do here is i'm going to make this a lot smaller here like this 40 and then for this text we are now going to make this center align like that all right now the first thing that we're going to do is we are going to spread out this column right so we're going to make this a little bit bigger all right design sizing we're going to go ahead and increase the max width here well first we'll do like 90 and then we're going to increase the max size here right now also we're going to do is that we're going to make these images larger right so what i'm going to do here is i'm going to take this and i'm going to drag it like this now what i'm doing here is i'm actually creating margin right so margin is basically saying i want the image to start at a specific area over here we have module settings design we have the spacing and now you see that we have margin so what we're saying is i want this image to actually start 100 pixels from the right side uh let me give you guys another example here for this image i'm sorry for this module we're gonna go to design right and then we're gonna go down to uh spacing now what i can do here as i have two options i can either add 150 pixels of space to the top to put it in the center or we can add in margin what margin does is margin is not space okay margin is essentially saying i want this module to start at a specific location so i want the module to start at 150 pixels below that so padding and margin are very confused between both uh from users is because it looks like it's the same thing but it's really not so just to give you another example of margin i'll take this image right and for the design under spacing i'm now going to add margin except i'm going to add negative margin and what that's going to do is that that's going to say i want the image to start 100 pixels from where it was originally placed and i can even put 150 pixels or i can even do 250 pixels and essentially what it's doing here it's taking the image from its original spot and it's forcing it up right so that's an example of what margin is right it is basically placing the elements in a specific location padding is space right that's just saying i only want space above the actual elements right but uh i'm gonna go ahead and get rid of that now i'm gonna add in more of the uh i'm sorry the negative padding to this size right so we're gonna i'm sorry negative margin to this side so i'm gonna put something like maybe a hundred and you notice here how this actually gets larger so it actually kind of works out for us when we actually uh make it larger because it has to extend onto the whole row right there so we're gonna do something like minus 150 pixels right and this one right here will also do you can do like 150 as well or something like that right all right so that's pretty much what that means now you can see here how we added space but if we go over here that is not space right so that's the big difference between padding and margin so that's how we made this section now i quickly want to go ahead and add in a border here so for this specific row you can see the teal section i want to add in a like a drop shadow just like a box shadow here you can see here how there's this now box shadow around this whole element right it makes it more there's more emphasis on this right and you can actually change the actual color here so you can see here how we added this blue just like over here as well you can see we added this blue right so we added in this blue element that just gives it a little bit more focus and a little bit more emphasis and you guys can add box shadows on everything i mean i can add a box shadow on this element you know so for example the design the box shadow i can also make this a little you know box shadow as well just be very cautious because this is a very quick way to make your sites really tacky and you could probably lose identity of your website so just be mindful about the box shadows add them sparingly i know they look really nice but don't add them too much all right so now that we've completed this section now let's go ahead and make this section here now you guys don't have to follow me here i'm just going to go ahead and speed this up a little bit just by creating this for you guys so over here i just want you guys to visually see how i do things just so when you guys are building websites you guys have some sort of you know some sort of ballpark on what to do here so i'm going to click on the first one the text right this is our title right now below that i'm actually going to click on the tl1 again and we're going to do a two column row here and this is going to be our image text and button right so we have image all right and i'm going to duplicate this drag it down here and then we already have a pre-made button right so add from library i'm just going to insert the main button here and use this module right so this text up here it is our projects right so it's our projects in fact what i can do actually is i can probably just use the other module that we have in our library this one here the primary text and then just make it a little bit more smaller right so i'll go ahead and just uh what would i put here was it our projects right this would be like our projects our projects and then here we can just adjust this image to the current image that we were using just something like this right and then i can just go ahead and say you know what i'm going to just click on this row setting delete this and duplicate that column and we're pretty much done and if you guys want to get a little creative here uh you know what's why don't we actually add a divider here so we did add that divider which was this one here i can duplicate this one here and i'll drag it down here and i'll put it below there you know just to kind of give it some give it some flavor right so the design sizing to the left right and we'll make it a little bit more dark just so users can actually see it and you know we can i think it's fine like that i mean we can leave it like that or we can make it smaller right so for the design sizing we're going to change the width of it like that all right and then we're going to just maybe just reduce the actual uh see the width here right just to give it a little bit more just to get a little bit more you know yeah there we go that's good is that good guys you guys can let me know here all right you guys are now you guys are the designer experts all right so we made that section oh we got a new section all right so how did we do this this is so simple here we go we're going to do plus regular and we're going to add in a five column row right here now for the image we're going to select an image here go ahead and grab in this one there right queenly i guess and then we'll just go ahead and put these images like that like this very simple here we go it's like a game it's like a drag and drop it's like a copy paste drag and drop here we go you know it's like a big game here we go and we're going to do it one more time here and there you go now instead of actually doing that all over again i can just duplicate this entire row and just add it like that and then from here we can go ahead and say you know what i want to i want to borrow you guys really quick i want to borrow this copy code here copy section styles and then we're going to paste the section styles here but it's also going to bring us that image again oh no the image is not there is it there it's probably hidden somewhere is it no it's not there all right cool all right then there you go that's how we made this section here obviously all we're doing is we are adding in different images as you can tell but we do have padding here you guys see that so between each of these what we can do is we can add in padding or space so for the actual design here for the sizing we can use gutter widths and we can extend the gutter widths and then from the width we can increase the width and we will just increase it just a little bit there like that and i think that looks good and we can just close this one and reduplicate it and there you go all right awesome congratulations we made that section in just a few seconds now one tip i do want to give you guys when you're designing your websites there's really no right or wrong way to use a module for example on a lot of my demo websites we use call to actions and we don't even use the button module so it just really depends on how you want to approach your website you can use like text models as buttons uh it's really all about being creative with you know with divi in the modules so yeah i just wanted to throw that out there but let's go ahead and jump back to the tutorial all right so now for the next section we're going to make this section here now this is actually a specialty section this is one of the other options and we wanted to use this to sort of teach you guys how to actually use the actual specialty section so we're gonna do that let's go ahead and get started right here we're gonna click on plus and we're gonna add in a new specialty section here we go and the specialty section that we're gonna use is this one on the bottom right here so i'll click on that and for this one we're going to enter something right so we're going to put in our red text first right all right so now we need to add the text below that now if this ever happens to you guys just make the element somewhere else and then you guys can actually um you know just drag and drop it if that ever happens that does happen sometimes over here i'm going to go ahead and drag and drop this below that and this will be like uh what our clients say about us or something like that what's our clients say about us and then we'll go ahead and reduce the size of this so over here oh gear icon design heading text and we'll make this just a little bit smaller right there we go now below that we have this new section and i want to add in a two column row and i want to add in a we can add in a testimonial or we can add in a person's module here we have testimonial right and this will be like you know daryl wilson is my title i am the ceo of darylwilson.com and the body paragraph this would be the information about the individual now guys this can be your staff this can be uh testimonials this can be what our clients say this can pretty much be anybody all you would do is put like the name of the person uh you would put their image and stuff like that right so you don't have to use these modules the way they're supposed to as long as as long as it works you can get as creative as you want for the image we're going to select an image of this gentleman here right this gentleman right here all right looking good looking good now for the background we're going to get rid of the background here all right no background okay even over here we have no background now you guys can add a background if you want but that's really up to you for the design we're gonna go to the quote icon i'm gonna show you guys a really cool trick now since this is a quote you guys can leave this like that however if you guys do want to get rid of this i can just make this transparent and also make this transparent as well now guys there are a lot of options that's i'm sorry a lot of ways you guys can use to customize this and to make it look really really cool uh for example like a box shadow i know a lot of users like to add box shadows to these because it just really looks it really looks vibrant it looks really nice but i'll leave it like that i think that's really cool yeah you can see from our demo we just didn't add anything in the back but you don't have to you guys can get as customizable as you want here i'll duplicate this and i will send it right there now we also have an image a text and a button right here so i'm going to quickly go ahead and put in an image what should we add in here this one here and then we also have text and then we have the button which we're going to use from our library i love how handy this is you know it's just it's so easy we can just keep grabbing it you know look at that i mean it's a beautiful section now that looks great so now you guys can see that we have this section where this image is here we have our testimonials and this looks great now before going any further i did want to introduce you guys to one cool setting and this is called the sticky options this is actually a very popular setting that divi has introduced and that is to essentially make items stick to the let me give you guys an example what happens if i take this whole column right here and i want to make it stick as the user scrolls down over here under row settings i'm going to go to the third column here go to the advanced go to scroll effects and for the sticky position i want this to stick this to the top all right just like that watch what happens here i'm going to go to my website and i'm going to scroll down as i scroll down this whole section is going to stay with the user now this is a very popular marketing tactic that people use to get people to buy a specific product right maybe right here you might want to put something like oh if you buy so and so you get 30 off and keep having it scroll as the user scrolls in fact on my website durwilson.com i actually use this same feature so this is my website darrellwilson.com and this is a divi bars plugin and as i scroll down you guys can see this is just a basic review but as if i keep scrolling on the right side you're going to see that this bar stays in place so it shows the user all this information and they can read about it and as they read about it they might be convinced and influenced to purchase the product once that happens they then click on the button and they go to the website if i you know if they click on it and they purchase something i then do make a commission so this is how you guys can use the actual sticky feature on your website now you guys can also apply it to specific elements so let's say for example you wanted only a specific element to actually have that feature of the scroll effects you can do stick to the top for any elements and that element will stick to the top as the user scrolls the actual page and then it'll fall back in place once the user scrolls up now elegant themes does have a lot of really cool options and features on how to use this and utilize it in a really nice way so i'll go ahead and put that in the description of this video as well for you guys to check out later all right guys you guys are doing really good we're almost done with the home page now let's talk about some other modules that you might want to use just in case you might come across them and you're not sure what they are and one of those is the actual blog module now later in this video i will be showing you guys how to actually make a blog however when you guys create blog posts you guys can have them propagate here automatically and then you guys can also go ahead and design your actual blog modules so for example this is our demo website here and these are actually our blog posts and as you guys can tell they look really good and what we've done here is we've actually added in these blog modules here so and every time we make a post they will display right here under the news and article section automatically and you guys can also design your actual blog element so for example you can see that we have this blog here and for the design we can design every part of the actual blog so we can design the title right here by you know changing the actual font to you know whatever and then we can also do the same thing for the meta text and then there's other options where we can actually show how much excerpt right so here we have the excerpt and i can say you know what i want to show like 50 characters of the excerpt except is like the actual characters of the actual blog right so you can control how much content you want to display on your actual home page we'll talk more about blogs a little bit later in this video but i just wanted to introduce you all to the blog module it is very popular a lot of users tend to use them because you can make some really nice looking blog posts with it but uh yeah that is the example of a blog module and guys this is the very last section of the home page and just by looking at this i think you guys can already know what this is right so we have a two column row right we have a two column row and this is a text a text a text and a button and here we have an actual image now i'm actually not going to create this because i think you guys already know what this is instead i'm going to go ahead and give you guys a quiz and show you guys some websites and you guys can let me know what structure you think it is all right so this is the isaac template kit that you guys can download on our website now this template gets very interesting because what we've done here is we actually used a two column row just like previously but we didn't really need to right and over here under the gear icon for the background we actually put this as a background right so uh we just added a white background and we just added in this image and for this image we actually just um you know we just put it in the top right now we could have done a lot of different things here right so i could have actually covered this but that doesn't really look good right and that doesn't really make a lot of sense so we wanted to just make it a little bit more elegant by fitting it and then putting it to the top right now i could have put it to the center or i could have put it to the center left but that really would make a lot of sense right it doesn't look good and it actually overlaps the text so we decided to put this to the actual oops to the actual right side right here so center right to give it this you know this elegant look right here so this next section these are just blurbs and what we've done here is we actually added a border to every column to give it some sort of design right now this is a very interesting use of the actual border here but over here under the actual row settings for the first column under the design section under border there's an option here where you guys can actually add a border here to every side right you can add a border to the bottom you see that or we can add a bottom to the left like that or border to the actual top like that but what we've done here is we just wanted to only add it on one side just to give it some sort of you know just just to give it some sort of flavor right so that's how we achieved uh this section we added a blurb to every one and then we added a border with one pixel in between every single module and this section here you know this is a text module an image an image right so this is just a two column row you guys probably already know how to do that now this next section we just basically made another specialty section so we added in three column row with blurbs like that right and then we just stacked the elements over here on top of each other and then we just designed them so again you guys can download this template for free if you guys want it's on my website so you guys can sort of practice with it and get a little bit more information on how to achieve specific looks and one more demo here which is the famous finley kits this was a very popular ecommerce tutorial that i created this is actually another just two column row right two column row now this last section that i'm gonna show you guys this was actually very complicated i know this looks really easy but this was a lot of work we had to really think outside of the box here so this is a specialty section okay and this is a teal section with one column and another teal section with two columns this section right here is only one element what we actually did here is we actually added a background image behind the text right so this is an actual text setting right this is just a little text module just like on our other pages we have this text uh this is actually the background right so what we did here is we actually added a background to the actual text module right here we'll go ahead and scroll down and click on background and then we'll click on the actual image so there it is you know we added in the uh we added in the actual image here to the entire module itself this gave it this really nice effect and then we had to force the image to stay inside of this box so it was a lot of work i know it looks a little easy but it's very responsive and it also has that really nice parallax effect for this one here as well you can see that we added the background to the actual row setting so over here under the actual row setting we added in the background right there this is just a text module a text module and then this right here is a button now this looks like text but it's actually a button module we just decided to take everything out so it has no border basically i know we just we just get creative sometimes you know we just get creative and this right here is just another text module right a text module and this one right here as well it's another text module and this is a two column row so this actually was a lot more complicated to make than we thought it was i'm just showing you guys that you guys can pretty much get creative and make anything that you guys want with the divi theme now the last thing i want to show you guys is the very last part of the homepage tutorial where i show you guys how to actually make these blocked and how to stretch them across i'm sure you guys are very familiar with this but i just want to walk you guys through on how to achieve the look that i have on the demo websites you guys ready here we go this is the very last section of the homepage tutorial so i do hope you guys really did enjoy it i hope you guys saw enough but let's go ahead and further increase your knowledge by showing you guys how to achieve the grid look with the blurbs so let's go over here to the settings icon for the design for the spacing i also want zero for everything right we want zero for everything okay and i also want to go ahead and go to the sizing turn on the gutter width and then we're also going to get rid of the gutter width and equalize the column heights right makes sense now for the width we're going to make it 100 and for the actual max width we are then going to extend this to the end of the websites and then i'll go ahead and put maybe like i don't know 2 000 pixels right 2 000 pixels now since i did this we probably have to do some adjustment here to the actual inside of the actual module because it doesn't look correct like this but if we actually uh center align everything it might look a little bit better right so for the design here we're going to go to the actual text center align that and for this icon here we'll do the same thing we'll center align its and then we'll do the same thing for this section here right so for the actual text we're going to center align this and then we'll do the same thing for the button there we go design align and there you go so that looks a lot nicer it does look a little different from our demo but if you guys do want to check out the actual demo and actually open it up inside and see exactly how we did it you guys can go ahead and check it out essentially it's the same thing here we just added more padding right that's pretty much all we did but essentially it's the same exact thing now you guys know me right i'm lazy so what we're gonna do is that we're gonna right click on this and we're going to extend these blurb styles to everything in this row all right and we'll do the same thing for the text so right click we will extend the text styles to everything in this row right look at that look at that and then we're going to also copy i'm sorry extend this there it is it's way down there all right to this section or to this row all right so that's it that's how you guys can make the uh grid section i also did it right here as well and make sure to practice guys this is all about practicing hope you guys enjoyed the home page section of this tutorial i hope you guys learned a lot of really creative tricks on how to design your divi websites and with that said let's go ahead and import the rest of this home page all right so now that you guys know how to build a website now let's go ahead and import the other pages for this template kit now uh on my website i actually do have templates uh just for divi i also do have other templates that we are currently creating and by the time you guys are done watching this video we will have all of these available for you guys for free that you can easily import on your website with a few clicks me and my designers we did spend a lot of time making these layouts for you guys and we have a lot more to come so i really do hope you guys enjoy these free layouts now to access these layouts you just need to go to my website dearwilson.com and click on view layouts you will then click on the divi theme templates and we do have quite a bit that we have actually made we're in the process right now of reorganizing all these template kits so just give us some time in a few weeks it'll look really it'll look really nice trust me so uh here we have the divi uriah's layout all right and here is the aria's layouts once you guys are here just click on add to carts it's completely free doesn't cost you guys anything just view the cart we'll then go to proceed to checkout also guys i will be having a follow-up video uh on how to make an ecommerce website with divi that'll be out in a few weeks so just stay tuned here i'll click on place order and then you'll see that you have this zip file right here that you can download so go ahead and click on this folder and it'll then show you the zip file you just need to open that file and then you can actually use those on the actual websites so let's go back to our website here and what i'm going to do is just click on this empty page now i'll click on enable the visual builder this is a really cool trick so let me go and show you guys how to do this i'm going to go ahead and minimize this really quick we have the arias right here right built from scratch and what i want to do here is i just want to actually just drag and drop this whole thing here so i'm going to go ahead and go over here and take the actual about us and i can just drag it onto the page here i'm going to uh just import the divi builder layout and i'll go ahead and open this up and now it's importing the actual about us page that i created for you guys and there it is so let's take a quick look here make sure everything looks great and look at that guys you guys have a beautiful website uh that we have made just for you guys so uh yeah you guys can use all the other pages here you just need to delete this one little section and then save it and you're done and then we just have to do that for the other template kits here so services enable visual builder and i'll just drag and drop those now if you guys do get any errors i'll go ahead and leave a few articles about if you do get errors like it says i cannot import in this context or something there are a lot of errors that you may get and a lot of those are just due to server settings here i'll take this services and drop it here import the layout and i'll go ahead and make this a little bigger and there you go so now we have the services page and i'll delete that make sure everything looks great and look at that we have a really nice looking services page so let's do the last one which is the contact us page all right exit the visual builder and click on contact us i will enable this shrink this up just a little bit and then i will go ahead and take the last part which is the is that the contact desk and then just drag and drop you go imports and import the dv builder layouts all right cool so i'll go ahead and close that save this and just make sure i can see everything that's going on right here all right and there we go now this is the actual contact form uh these actually go directly to your email right here under the actual gear icon here you have the name the email and the message now you guys can actually add more fields on your contact forms like this can be like uh quotes or offer or phone number right just a required field now the divi contact form is very robust there is a lot you can do with this uh there is conditional logic i do have a video on this however it's a little old so i will be making a new video on the davie contact form i don't want to make it now or introduce this now just because it's a lot to talk about and i don't want this video to get like you know five six seven hours long so uh yeah i will be making a updated video on the contact form all right and right here you'll see email you'll want to go ahead and put in your email address there so i'll put in my email address now if you don't put anything here by default it will send the email to the admin email that you have on file with wordpress in the general settings all right so i'll go ahead and click on save this is just playing like this for a specific reason and i'll talk more about this in the very next section all right so i went ahead and i saved it and now click on exit the visual builder next you guys will need to add a recapture to this in order to prevent your uh messages from going to spam which is a very common thing with wordpress uh here we have email you'll want to go ahead and select the email that you want the message to go to and then you have spam protection here we're going to click on use a spam protection service and we also have recapture right now what we're going to do is we're going to quickly add a recaptcha here you guys don't have to follow me here but if you guys do want to know how to do this i'll walk you guys through it i'm going to go ahead and go to google i'm going to type in google recaptcha here and we're going to click on this right here we're then going to go to the version admin 3 console and then we're going to add a site from here i'm going to enter in my my domain tutorial this will really help you guys with spam trust me you guys will get a lot of spam here so i will accept the service and i will submit all right and now we have these settings so i'm going to go ahead and copy these and we're going to go back to my website i'm going to leave that as default and i'm just going to put the site key here and then i'll go ahead and also paste the secret key right here all right cool now that should prevent it from going to spam and if that does not work you guys can actually google a uh smbt plugin that all you need to do is activate a plugin and that should prevent it from going to spam now i'm going to go ahead and write a quick message here so darryl darrell at able.com hey man and then what's up i don't know just just whatever this can be like a phone number or something who knows and i'll go ahead and click on send now go ahead and check my email box and there it is so the first message here you guys can see i just got it this is in my normal inbox if i click on this you will see that uh this has been sent to my uh email so we can see that it has not been sent to my spam if it's if you still have issues guys contact your host maybe they can help you guys out it's sometimes weird stuff happens and if it doesn't work for you i'm really sorry but just keep keep trying i promise it'll work all right so now that you guys have a fully completed website and your contact form is working now let's talk about the next options which are the theme customizer and the divi options alright so in this section let's talk about the db options along with the theme customizer now in the beginning of the video i did briefly mention the theme customizer and i told you guys that we will be coming to that a little bit later and now is that later but first let's go ahead and talk about the divi options so there's a few different options here there's the actual divi options the divi theme builder the customizer the role editor and then the library and the support center uh the support center this is where you guys can get support for divi so if you guys do start getting glitches and bugs you guys can go over here and chat with support you guys also might need to enable remote access this gives the team over at divi full access to the back end of your website so they can go ahead and take a look to see if there's any bugs or glitches that are reported or that you may have come across next you have the actual divi library remember earlier how we created that divi button well this is where you can edit the button so this is where you can create specific modules right you can add this in your library so for example add new you can give the name of your layouts you can set it as a module or save as a global at global means when you adjust this one button it will reflect all the buttons on the page that are attached as a global you can create new categories for it and also create new tags for it as well so this will just be like a section or something and then from here you can start building whatever you wanted to build so you can go ahead and build your specific section and it'll be saved in the divi library you can also make it on the front end it really doesn't matter you can make it on the front end or the back end it's all the same results but let's go back over here and next we have the role editor the role editor essentially gives specific roles you know for users on your website to access specific parts of the website for example a contributor this these are the options a contributor has access to they have access to the visual builder a moving item all this other stuff let's say for example you have a customer and they want access to your website but you don't want them to edit the items or you don't want them to move stuff you can go ahead and restrict the access for this specific role here click on save roles really quick now you guys can add a user at any time by going over here to users and clicking on all users here is a list of the users on your website but if you want to create a new one you'll click on add new this will be jenny jenny and then you know this would be like your client's email right this is just an example so i'll just do like jenny craig and this would be the password and under the role section this is where you can assign the role so they can be a contributor an author an editor or administrator and this is where you can essentially hand the website over to your clients and i'll just click on add new and there you go so now the uh jenny she can now access the website and log in on the back end without having full capabilities of using all parts of the website the role editor is made specifically in order to prevent clients and other users from pretty much destroying the website i also do have another video that talks about how to make a web design business from scratch it's it's very long it's six hours long but this video it goes in detail into everything you can possibly need to know and since you guys already know how to use divi you guys can just watch this video and learn about how to price your website how to deal with contracts uh maintenance services seo irate customers billing clients contracts this is like the the only thing you'll ever need uh to start a web design business so you guys can tell a lot of people are liking it there's a lot of views on it and i just made it a few weeks ago so it's it's a brand new video so i think it'll bring a lot of value but that's what the role editor is explained it's a really handy especially when you hand the website over to your clients now i'm going to skip these two and go to divi theme options so this is where you guys can upload your logo here i'll click on upload and we're going to upload our logo here and next you have the fixed navigation bar this is essentially the bar at the top of the menu as you scroll it will stay uh with your visitors so it's just a fixed menu pretty much it's like a sticky menu there are a lot of other options like if you want a sidebar layout there's also some new options guys that i have really no idea what they do like blog style mode and the db gallery i'm not really sure what these do if you guys do just like you know turn them on and save them uh i'm sure they'll pop up somewhere but uh the blog style mode that's a brand new feature and i'm not too familiar on it just yet now also if you guys do have like a google api key this is where you're going to enter it you guys will need this for your contact form remember on the contact form how the maps were not working this is where you guys can enter in the google api key where you can have the google maps run on your website and then over here you have some social media profiles these are important if you enable this on your menu so these will be the links that will be propagated on your menu and there are some other general options like smooth scrolling and the back to top these are really there are two really cool options that i think everyone should turn on by default this essentially gives you the back to top button at the bottom right of the screen and smooth scrolling makes it so when you scroll on your website it's very smooth and it's not like jagged and stuff like that so that's what the smooth scrolling effect is and i'll go ahead and click on save changes here you have some other options like if you want to hide specific pages from the menu you guys can do that i don't really know the reason why they have that but uh it's just an option and they do have some other options here as well the general settings and over here we have the builder options where you can turn the divi builder on post pages and projects layouts this is essentially for blog posts so if you don't want to show comments on posts you can turn those off or you can disable the thumbs off post as well and then you know you guys can just check out these general settings so the layout is referring to posts okay and the general settings is referring to like a global post which is all of the posts on your websites we will make blog posts in the very next section but this is where you have a little bit more you know options to mess around with it and stuff like that and then there's ads which i never use seo to be honest i'm not sure i don't really use this either to be honest and then we do have some integrations here and then just some updates where you can add in your api key and stuff like that so those are the divi theme options if they don't apply to you you don't have to use them but they're just additional options that you may need or may want to mess around with now we'll talk about the theme builder in another chapter but the next thing that we're going to talk about is the theme customizer so i'm going to make sure i click on save changes here and we'll go click on visit sites now you guys can also access the theme customizer at any time by going up here to my blog and clicking on theme customizer one thing guys is if it looks like this don't worry about it the theme customizer is actually uh squishing the actual website so it might look a little different when you have the theme customizer on so don't panic here let's click that at the top that we enabled earlier the things that i want to talk about here is the actual menu and stuff like that so first let's click on general settings site identity here you have the site name the tagline and also the site icon here you can see that we have this little youtube icon if you want to add in your own site icon let's go ahead and add it in here my icon you know like something like that alright so you can pretty much add in your logo there right so it appears in the tabs uh here we have layout settings if you guys do want to have like a box layout on your websites or you want to adjust the width of the website you can also do it here these will actually apply on the entire website so just be mindful about that and topography i wouldn't mess with this this is essentially if you want to adjust like the fonts and the colors this would override the current page builder settings so uh the divi theme and the page builder they kind of go against each other sometimes so if you are adjusting things over here just make sure that it doesn't reflect the websites and if it does you can go ahead and fix it with the builder backgrounds i wouldn't use that at all because we use a page builder obviously so next we have the header and navigation and this is very important so this is controlling the actual menu of your websites here we have header format and what's really cool is that we can do centered right center and line with logo we can do slide in where if i click on it it'll slide in like that or we can do full screen which is it'll essentially just cover the entire screen like that here i'll go ahead and just click on default now we can also enable vertical navigation where we have the menu on the left side and this is just some sort of look and style you can have this on the left and the right side of the page but i'm just going to turn that off here you have the primary menu bar you can make this full width and you know you can even hide the logo if you want to do that you guys can also adjust the fonts here so i think by now we're using jost right or something like that or jost or right there's a lot of fonts these guys have jeez they have they have quite a bit here you know jost and we'll build it there we go and then we can adjust the background color here if you want to do that but i'm just going to make it transparent like that because i kind of like this this uh this background here like that that's pretty much it these are where you can control the actual primary menu we also have the secondary menu the secondary menu is if you have a drop down menu so let's say for example if we have this drop down menu right here i'll go ahead and turn it on really quick menus main menus and i'll just go ahead and drag this under here and this will then create a secondary menu like that you see that so that's how you can create a drop down menu and then from there under the header navigations you can actually start adjusting all of those settings uh right here under the secondary menu bar fixed navigation this is if it scrolls down like that you see how it scrolls down how we have a fixed navigation now you can disable this in the actual options and if you want to design this fixed navigation where when the user scrolls down this is where you're going to design it so you can see here how we change it to black right that doesn't look too good so we're going to change it back all right so next we have the footer the footer is probably another very important option here and this allows you to use the footer with divi now later in this video i'll be showing you how to make a custom footer using the actual theme builder but you guys can also use the actual footer builder from the actual wordpress theme so for example i'll click on layouts we will select this four column row right and this background color is just fine you know maybe we can actually make it just a little bit more faint something like that and what we're going to do is we're going to add widgets so essentially what widgets are there are these little things that we can add here you can adjust the actual widgets you know you can change the text color and you can adjust the actual here let's go ahead and change this to white it looks a little bit better right and you know this is where you can design and everything and make it look cool and stuff like that but uh yeah but i'm gonna go ahead and change this back to black really quick just to give you guys a better feel and visual everything so footer elements here you have these social icons here at the bottom you see those if you want to have those on you can turn those on or off now remember you can link the social icons and the divi theme options remember the theme options what i showed you guys earlier how you can enable the actual um url that's where you would go ahead and enter it in the divi theme options the footer menu you guys can go ahead and design the footer menu as well and then you also have the bottom bar the bottom bar is this bottom part right here so you want to change that you can disable the footer credits or you can just change it you know to uh whatever you want you know you can see here i'm typing it and that would be something like you know darrellwilson.com whatever whatever you guys want to add and then this is where you can design that bottom one uh where you can you know change the look and feel of it if you decide to do that right change the text color to white all right cool now let's talk about how to add widgets to this footer area right so here let's click on widgets here you have footer area one now what do you want to add in footer area one right well i'm going to go ahead and first delete all these things because this is really annoying i'll remove this and we're going to get rid of this get rid of this and yeah we're just going to go ahead and delete all these boxes here because i just don't really want them all right now i'm going to click on this little add a block and you know we can have a lot of blocks here so we can click on browse all and then you guys can add in blocks here here i'll put in the page list right like the home the about the contact the services all right cool now let's add in another block area two i'll turn this on and i'll click on browse all and uh i don't know what do you want to put here you know we can we can add a lot of stuff here like a facebook like box we can add in a social feed uh there's a lot of stuff that we can add to our footer but to speed this up i'll just add a quick calendar all right little cute calendar right all right cool we got we got a calendar awesome and then over here we can add in one more and this would be like just like an image of something right we'll just throw it in like maybe you can offer like a promotional image maybe have like a sale or something um you can add it in there or you can put like offers or discounts or coupon codes or something like that i'm just going to put in this random image here and just let's see what that all right whatever that works all right and then this right here i'll just go ahead and put in some paragraph text and then i'll put about us and then you know you can just put like a biography welcome to darrylwilson.com where we teach how to make websites all right cool awesome and i'll click on publish so that's how you guys can add widgets to the bottom of your page and create a footer using the actual divi theme now a lot of these other options here i would not mess with them too much because a lot of these will actually override the actual buttons on your page like the buttons the color schemes and stuff like that here we have mobile styles this is actually showing you what it looks like on mobile devices we do have a little bit of work to do we did not optimize this site for mobile just yet and we will do that in the very next section but i'm not really sure why they have this here because we can actually check out the mobile styles from the actual page builder so that's pretty much it for the actual theme customizer you guys can check out the blog as well the blog post you guys can actually uh design the actual blog post right here once we do create blog post all right but the theme customizer does not play that much big of a role besides adjusting the home page and also adjusting the actual header and the footer of your actual um website how did this get here two two two huh how did that get here the header elements huh you can turn those on like that but uh yeah i don't know that's weird we're gonna turn those off i i don't know what that's about but you turn those on and once you click on publish you should get another menu at the top right here uh yeah i don't know why that did that that bugged out but here you can add a little bit more icons and stuff to the top of the menu if you choose to do that all right so now that we talked about the divi theme options and the divi theme customizer now i'll talk about post and also projects all right so in this section i'll be showing you guys how to add blog posts how to add them to the menu and also explain projects now uh the first thing that we need to do is we need to create a page for our blog posts so let's go to plus new and go to page and this will be the actual blog right i'll click on publish and publish now let's go ahead and go back to our website here and now let's access the theme customizer so over here we'll go to theme customizer we're now going to go down to home page settings and for our post page i want to set that to the blog so i want the blog to be the page where all the posts are propagated for our users now uh what i also want to do is i want to add it to the menu right here so let's go back and i'll show you guys a little shortcut so right here menus the main menu i'm going to add a new item here and i'm going to add the actual blog here and then i'll rearrange that right here and i'll click on publish now i can go ahead and close this theme customizer alright so now we have this blog page so if i click on blog this is where the blog posts will be displayed automatically now you don't have to use the blog page if you want i do recommend it but remember you can also add in the element here on your actual page where you can also have the blog post propagate as well you can also have both so you can have it on your home page and also a standard blog page as well now let's go ahead and go back to our dashboard here and let's click on posts so these are all the posts that you create right so here they have like a default post but uh let's just go ahead and add a new post right here so i'm gonna go ahead and use the default editor for this specific example this is gonna be 10 things women love about men okay hold on there we go it's all right i'm not looking at my keyboard and i'm going to take some demo content here because i know if i if i actually write like a real article this will get really like controversial and they'll be like hate comments and stuff so let's just let's just ignore that we're just going to go ahead and just use some demo content here they also do have some other options like uh you know this is a new editor called gutenberg gutenberg is coming out it's newer um but yeah at the time of making this video i really wouldn't use gutenberg to build websites with it's the default editor that is used with wordpress but what to know here is that uh once you guys create your blog post you'll see this categories so here we need to create a new category right so this will be like dating right this will be the dating category and what this means is all of the blog posts that deal with dating will have the category of dating and also we have tags so this will just be dating right and here is the featured image so this is the image that represents the actual article it's a good one here guys what's a good okay this guy he's looking at he's looking at the the girl or he's looking at you like you know he wants to say something so once that's done i'll click on publish and publish and we can actually view the post here all right so 10 things women love about men uh we can see that there is the picture of the guy and then there is the actual blog post and users can submit comments and all that cool stuff now they can also click on the blog and they can view it right here alright so this is where all the blogs will be propagated on your websites all right pretty cool now this is one way on how to add a blog page to your website however i don't like this method because you guys cannot actually design this page and it's just basically fully propagated and it doesn't really look that good so what i'm going to do now is i'm going to go to plus new and go to page and what we can do here is that we can actually make a custom blog page using the actual dvd builder so here i'll type in custom blog i'll click on publish and publish and now i want to click on use the divi builder alright here i'm going to uh build this from scratch and what i'm going to do now is i'm just going to actually take one of my old template kits here and i'm just going to drag it and not the home one i don't want the home on here i'm going to take the services and i'm just going to drag this and import this builder really quick all right so here is the template kits and i'm just going to change this to blog that's it and you know i can keep some of the stuff here you know if i want to add more to it but what i'm going to do here is i'm just going to go ahead and delete everything off of this page i just wanted to take that one section from the actual layout here and just use that for my blog so i'm going to go ahead and delete all this stuff here i keep deleting it and there you go now here under the the new section i'll click on regular and then i'll just make a new row right here and then put in blog right and what i like about the blog setting here is i don't want to use this whole image by default i want to change this to the actual grid so for the design under layouts we can change this to grid and here you'll see this is a list of all the blog posts that will be propagated on your website so i'll click on this check and then also click on save so i like this method a lot better you know i like the fact that this blog post looks a lot nicer and neater now if you want to use this as your standard blog post back in the theme customizer settings just go ahead and turn off the actual blog post page so for example the home page settings you would just go ahead and just leave that off right and then over here and then for this page you just need to assign it to the menu instead of the default blog page so we can do that right here by going over to menus and i want to add the custom blog to the page and i want to get rid of that old default one that the theme was using right so custom blog and click on save menu all right so now that i've actually added that to the menu if i click on custom blog here you can then see that we have now uh used this as our primary blog page so all the blog posts that we create will be propagated here automatically and also don't forget you guys can turn on the divi builder and you guys can design these blogs the way you want it to look so for the design tab uh for like the the layout and the overlay uh we can add a lot of stuff to this right so for example if i hover over it you can see that we can add some sort of overlay color to it for the text we probably want to change the title text to our jost font right jost like that and then also we can do the same thing for the body text right jost all right so that looks a lot cleaner already and then also this one here we can also change this to drost as well and maybe we want to make this one a little bit more larger right so we can make this just a tad bigger right and we can give it like a darker color here and yeah something like that so we can fully design this you guys can also adjust the background to it and go ahead and look up some tutorials on you know custom blog posts there's so many different ways on how to customize this to fit the style and criteria of your current theme and website so i'm going to click on save here so i've shown you guys how to create a blog page and also a blog post but did you guys also know that we can actually make blog posts using the actual divi builder up here under plus new i'll click on post and this will be 10 things woman hates about men there you go and instead of using the default editor you can actually use the divi builder so let's click on use the divi builder now instead of actually building this from scratch let's actually choose a pre-made layout now when you guys purchase divi there are tons of layouts i'm going to go ahead and just scroll down over here to the uh we can type in blog right and here i'll just use this about us blog page i'll just click on use this layout now in order to get these layouts you guys must enter your divi api key in the divi theme options if you guys do not set that then it will ask you to enter it and it will prompt you to enter the key code for these layouts all right and here we go so now you can see we have the blog post 10 things woman hate about oh i think me i should have put men there whoops and here you go so now we can actually design the actual blog post using the actual divi builder and you can build this blog post just the way like we did on the home page except this would be for your blog post now if i click on post right here and i scroll down first i'll put this under dating and if i scroll down under the divi page settings i want to make sure that this is full width right here we can even disable like the post title and stuff like that dot navigation we can have other you know options right here i'll just click on update again and then i'll click on view the post and now you'll see that the blog post is here and it's full width maybe we should actually probably just get rid of that title looks really weird but i'm just showing you that you guys can use the divi builder to build out your blog post and we do have these really cool little dot navigations where users can scroll on your blog so that is pretty cool so next we have the projects right so i showed you guys how to create blog posts with divi and the divi builder and also how to create a custom blog page with divi now let's talk about the actual projects so over here i'll go to dashboard and you'll notice that we have this project section so here you can see all of your projects we don't have any yets but if you want to create some here click on add new and this will be like the main divi project and i can use the divi builder and i can create some sort of project right uh but what i'm gonna do here is i'm just going to set a featured image really quick and i'll use this guy right here or actually i'll use this little uh rocket raquito or if you call it something like that and then for the default editor i'll just put like this is a demo so essentially you guys can use the divi builder as well and you guys can create some really nice showcases and portfolios but i'm going to click on publish here and publish just to give you an example so here i click on view the project so this is the actual project right and you guys might want to actually get rid of this right sidebar that's really irritating and it doesn't really look good let's go ahead and just quickly get rid of that for the page layouts just put no sidebar you know no sidebar that's really irritating and then click on update and here i'll click on view project so this is the actual uh divi project right and uh yeah this is where you can showcase skills and stuff like that now i bet you're wondering well how do we get this to propagate on our page or something like that let's go over here to services and what i'm going to do next is i'm going to enable the visual builder all right and what i'm going to do quickly is i'm just going to go ahead and add in a new section here a new row and we're going to go ahead and take a look at some of these modules really quick so here we have portfolio right i'll go ahead and click on portfolio and there is the main divi uh this is the main divi project but uh what i'm gonna do here is go to design and i'm gonna make this a grid layout all right so there it is the divi project now you guys can also design this as well you guys can go through these design options you can add a background you can change the uh you know whatever you want to do uh like the content and everything you can also create categories for projects as well you can change the background color to you know any color that you guys want again you guys can fully customize this project but um here i'll go ahead and just change that back to layout and grid and i'll just go ahead and save this okay so let's say for example you are creating portfolios for your clients or something or you want to showcase uh websites or something like that you guys can actually uh use the project and if a user clicks on this divi project they will then be brought to the actual project here where you can showcase your portfolio your pictures your web design skills or anything that you want to showcase on your website so that's how you guys would use the projects on your divi website alright guys well that's pretty much it for this section i hope you guys understand what blog posts are and how to make them and also what the divi projects tab was so let's go ahead and move on to the next section all right guys welcome to step four so in this part of the video i'll be showing you guys how to use the db advanced features uh so now that you guys are pros you know you can build a website with the modules and stuff and have background colors uh we'll go ahead and show you guys these divi advanced features now as you were building your website you guys probably saw a lot of really weird options here and there that you weren't familiar with we'll go ahead and walk you guys through most of the divi theme advanced features our special guests will also show you some really cool tips and tricks with divi so with that said let's go ahead and jump back to the video all right guys in this part of the video i'll be explaining a lot of the divi theme advance options and features that come with divi now when you guys were using the divi builder you guys might have seen a lot of options here that you guys might not be familiar with so i'll go ahead and explain to you a majority of these features as best as i can now the first feature is called the lottie files animation so here you guys can see that we have this lottie file now divi now integrates with lottie files so you can see here how you can now add these to your wordpress website so it's really simple right you would just go to your websites and you would just um you know open new column or new whatever here i'll just open up a new row right and over here for the module we're going to select the code module i'll select the code module and now we have this empty box right here where we can insert some code so we can go to lottiefiles.com this is a website where you guys can search for pretty much everything as far as animations go so i'll put in like a woman right and then it'll give us a bunch of uh files that we can use on our website so i'll just go ahead and grab in i don't know i'm just grabbing this uh this girl right here and then we'll scroll down now you guys will need to make an account it's completely free to make an account does not cost you guys anything whatsoever uh right here i'm gonna click on html and we'll scroll down now we have a few options here so this is basically saying uh how big do you want this slotty file well we can say something like 500 by 500. and right here you can see that we have these controls right but i don't want the controls so i'm going to take those off and i want this to auto play now you can also set this to play on hover if you guys choose to do that but i think this is just fine here i'll click on copy code right and we'll go back to the websites and then we'll go ahead and paste the code in here and then i will hit the check box now the only drawback here is that you guys cannot see the actual lottie file until you actually close the divi builder so i'm going to do that all right here we go i'm going to save the changes and if we scroll down we can now see that the lottie file displays so light files are pretty cool you know for this creativity layouts we did add a lot of the lottie file animations here with the actual websites uh if you guys do add lottie files be a little bit consistent you know use the same structure try not to just grab random ones from different uh sets because it doesn't really look well here you guys can see that we picked a lot of the uh the audio files from uh the same you know the same style stuff like that so it works with our website so that is how you guys can add a lot of files to your website now the next feature is called find and replace what this is going to do is that it's going to find elements on your website and it's going to copy this style throughout the website let me give you guys an example i'm going to click on enable the visual builder so let's say for example you guys want to change all the buttons on your website or all the text without having to modify everything right so for example we have this button here and we also have this button here what i'm going to do here is i'm actually going to change this button and i'm going to change all the buttons on the entire website so right here i'll double click and open up the settings for the design tab i'll go to the button and then go to the actual background color i'll go ahead and right click on this and find the uh find and replace option so i'll click on find and replace i'm going to copy this code before i get rid of it now with this option i'm basically saying i want to take all the background colors uh from this uh you know section or module you have a bunch of options but i'm just going to say i want to change all of the modules from this color to a red color and if i do that the button module you guys can see here will all adjust to red so i'll go ahead and click on replace and now you see that this is red and also this is red and any other button module on the entire websites i don't think i have anymore oh here's another one this will all be changed to red now let's say for example you want to do this for another module right maybe you want to do this for text so i will go ahead and click on the actual model settings for this text all right so i'm going to go ahead and take this heading color right we have this heading color and i want to change uh all the modules on the page to this yellow color right and i'm going to go ahead and go to replace so what this is going to do is that it's going to change all of the heading text from this color to yellow this is good because it actually helps you guys speed up the entire design process and it helps you get like a better visual of how everything looks right instead of going to every single one you guys can change the entire color scheme on your websites from one location using the actual find and replace option it's a really helpful feature and it really speeds up the workflow and helps you get more ideas on how to implement certain color schemes on your websites but because this looks hideous i'm gonna go and uh i'm gonna go ahead and change that back right we're gonna go ahead and change that back and i'm going to exits and i'm not gonna save this because i don't want my site to look like that and there you go it's back to normal so the next feature is called the bulk editing wouldn't it be nice to actually design all of these elements at one time instead of actually doing it one by one and then you know copying and pasting and dragging and dropping let's do that i'm going to click on the shift button and then press the module settings i'll then do it again right here and again right here and then again right here now remember you must be holding the shift button so now we have all these module settings from the model settings right here i'll go ahead and click on it we'll go to design and then let's say for example you want to see if the a different font or something looks better right so we'll go ahead and scroll down here under the title text and we'll change this from knit to able and now you guys will see that all these modules change right so we have able we have this one here we have this one here as well and uh you guys can get the point here so this is the bulk editing all you have to do is just go ahead and hold on shift however just be mindful that you must be using the same modules if you're using different modules it will not work so they have to be all the same modules but since these are all the same we can edit them all at one time next we have the divi presets this is very similar to the bulk editing except it allows you to save these presets and apply them to another module later for example i'll go ahead and click on this module settings here for the design i'm just going to alter this just a little bit all right just to give you guys an example here i'm just going to you know i'm just going to edit this just a little bit here just so you guys can see this right okay and uh i think from there from there we're good right now let's say for example i want to save this exact style for later right now you might not want to add it as another module because you might just want to paste it or whatever so over here under the module settings we have presets here i'm going to go to create new presets from current styles and this will be like the red shadow blurb right now you can also click on the assign preset to default what this means is whenever you guys create a new module it will actually propagate this same setting for the blurb module so i'll go ahead and click on the check all right now since i actually set the blurb to apply to all modules it applied it to these ones as well but um you guys can take that option off but right here just want to give you an example if i type in blurb uh you guys will see it carries all of that same style now so you guys can use this uh like as a preset so you don't have to keep doing all everything all over again and it takes a long time and you guys know how that is uh but what i'm gonna do over here is go over here to the icon here and for the actual default here we have the um the blur preset default we can change this or you guys can get rid of it so you're saying you know what i want to go ahead and edit the pre-styles or you can say i just want to go back to the basic one all right and the next few features i'm going to show you are pretty similar and you guys probably already know some of these because we actually use these one of these was actually the copy module styles and pasting these so over here i'll go to copy module styles and i'll say you know what i don't like this this is really broken up so we're gonna go ahead and paste the module styles and that is an example of a copy and paste where you can paste the module styles now the next one is called the extend styles this is where it's pretty much the same thing except you can extend it to all the elements on the entire row for example i'll go over here to the module settings and i'm gonna go to the uh extend blurb styles now i want to extend the styles through the entire section row or column but i'll just say this entire row so that's gonna do is that it's going to take all these uh this style and it's gonna apply it to all the modules in this row and then click on extend all right so now you guys can see that we just use the extend styles to apply the south for all the modules in the exact row now the next feature is the shape dividers i didn't really cover the shape dividers at all but the shape dividers are actually really cool and they're used on a lot of websites let's say for example you guys want to add in some sort of animation on the top right here or not animation but just some sort of design right but you don't have like photoshop you also don't have an image to work with over here i'll click on the gear icon and go to the i think it's under advanced or do they move it no design design and then we have the actual uh let's see here dividers there we go so let's say for example you want to add dividers here at the top you can add a divider here at the top and you can give it this little effect you can change the color of the divider as well you can change the height and adjust it and there's a lot of other really cool options you can actually flip it you can rotate it you could put it underneath it or on top of it just depending on if there are modules here and it might be blocking that module so you guys can add actually these uh dividers to you know every part of the row now let's say you also want to add it to the bottom so it's like all right that's cool but i also want to add a divider here uh to the bottom of the page and i also want to give it this blue color so you guys can add these shape dividers to the top of every section and you know you guys can get creative with it like for example if you want clouds you can say all right i want clouds on the top and i also want clouds on the bottom and you can also kind of introduce these shape dividers in the very next section so for example over here i'll go over to the design and go to the dividers and for this one i also want the clouds because then it kind of like matches right it makes sense so over here i'll click on the clouds and i'm going to invert this there we go like that and i'll make it blue as well so it looks like it's just one big cloud that kind of stretches across and it looks really really cool it's a really nice way to add a lot of effects and get really creative with your websites so that's how you guys can use the divi shape dividers all right so the next option is going to be the divi scroll effects now i already did talk about this however if you guys did miss it i'm going to show you guys how you can make these elements drag with you throughout the website for example you can do this with any elements or any column or any image any part of the website but i'm going to go ahead and say you know what i want to take this whole module and i want this to stick with me using the scroll effects over here under the advanced options we're gonna go to scroll effects and i want this to uh stick to the top right if i scroll up here sorry if i scroll down you guys will see that this is sticking to the top right here there's a lot of really cool use cases that divi shows you guys how to use this with so um you guys got to go check that out obviously there's a thousand different ways on how you guys can make this look really cool and i actually use this on my current websites now also we can make this stick to the bottom so for the scroll effects i will also stick to the bottom what that means is let's say for example we visit the website for the very first time you'll see that we have this little notice here as the user scrolls they will continue to see this notice but when we scroll past the actual area where the module was first placed it will then stop there and then if we keep scrolling it will be gone all right so that's an example of the scroll effects features it's a really cool feature um check out elegant themes youtube channel they have tons of ways on how to make some really cool effects and animations using the scroll effects next is a really cool feature that's been in with divi for quite some time and that is the a b split testing let's say for example you guys have some text here right but you don't know if it's performing well so you want to test that text against another text to see which user clicks the button most right let's go ahead and run an a b split test for this little module right here i'm going to click on these little three dots and i'm going to click on split test they're saying all right congratulations you're running a split test next click something to test this i'll click on ok and i want to click on this button here all right and i'll click on ok now there's a few things that you can do here so we first need to duplicate this module so right here we're going to click on this little arrow all right so now you guys can see that we have this little these three little bouncing bars and if we click on that you'll see that there's a lot of analytics here and we just made it so obviously nothing will be here but it'll show us the balances the gold engagement the reads and also the clicks and then it'll also tell us which module is performing better now i like to actually view the a b split testing in a different format so i'm going to click on these little uh this little purple circle and then we're gonna click on these little uh wireframe view all right so here we have the text right and this text is competing against this text so this text you can see uh it is saying plan now live well however we can also run another text and we're going to change that to something like act now and this will be get a free quote right get a free quote and then i'll click on check now you guys can also run a third one so you can split test three different phrases and see which text performs the best basically saying uh when they see this text who clicks on the button the most and you guys can run as many split tests as you want to see how your page is performing so go ahead and click on save all right and then i'll exit the visual builder and what divi is going to do now is that divi's going to auto rotate this text and the other text is an equal amount to all the visitors to see which text is performing the best db split test is a great option if you guys are into sales and you want to find out which text or which image or whatever is performing the best and that gets the most clicks so i randomly visited my website on this other page here and you can see that divi is now auto-rotating the text so for example this website says act now get a free quote and on another browser it is plan now live well so divi is they're auto rotating all of the actual um you know all of the actual uh text to see which one's performing well so here i am clicking on it you know i am clicking on it a few times so um yeah after a few days or after a few weeks you guys can end the split test results and see which text performed the best all right so i'm going to go back to my modules here and i'm actually going to view the actual split test because i did click on that button when i was looking at get a free quote so i'm going to go to gold engagements and you guys can see that the text 2 is performing the best right now so you guys can get analytics to show you which um you know which one's performing the best and then once you guys are done reading the analytics you guys can end the split test and pick a winner and then you guys can say you know what i want to go ahead and i want to pick uh this one here this one's the winner and then davie will automatically use that text for your websites so that's how you guys can use the a b split test feature it's really helpful and i think everyone should at least give it one try alright and the next thing i want to talk about is the actual elements here on the bottom of the page plus the other divi templates over here you have this little question right this is actually a divi helper and this just essentially gives you help just in case you guys might get stuck there is also the layer section this is where you guys can actually see the layers you can click on this and sort of expand everything and you guys can also design everything using the layers section of this if you guys choose to do that if you guys do click on something it'll actually take you to the exact column and you know show you what to edit there is also the uh finder all right and the finder elements this basically just takes you to different parts of the website it also uh just shows you things on the website if you're looking for the helper option essentially does things for you on your website and it also takes you to other parts of the websites i don't really use it too much to be honest for example if you want to view this in like desktop you would just you know show in desktop yeah it just you know it's just like a shortcut builder it just takes you to different parts of the website again i don't really use it too much so if you guys do want to use this finder to view different parts of the website or go to different parts you guys can use this but i don't really use it this option right here is essentially going to export the entire layout so let's say for example you guys build your websites and then you guys want to export this onto another website you guys can export this and once that's done it's going to give you guys a json file you guys can go ahead and take this and then you can import it on another divi websites so this is the imports and the export feature the next feature is the um like the undo i guess you want to say the history thing so let's say for example uh you made a mistake right like for example i'll make a big mistake right here right i'll make another mistake and then i'll make another mistake uh with this little editor here you guys can actually go back until like you know when the page was loaded or when you edited the text and divi constantly saves a lot of these states so you guys can load those at any time to go back to any part of the website when you guys were editing the websites it's actually very helpful i've actually used it quite a bit because during this tutorial guys i made a lot of mistakes and i had to use that to go back uh this thing right here i don't really know it's just like page settings but you can use this i mean you can do this in the actual page options if you want to change the title of the page and give it a featured image you can do that but i wouldn't recommend it because this is not a post so uh yeah that's that's uh trash you guys can clear your entire website should we do that let's do it we clear the entire website over here we actually have the add to library which you guys are very familiar with so we can actually add specific parts of the website and modules to the library that we can use later for example i'll click on the plus and i think we actually no no i'll click on this plus a lot of new row and here we actually have the library so earlier in the video i did show you guys how to uh you know save modules and add them to your library and that's just an example now let's say you guys want to use some of divi's amazing pre-made layouts let's do that right here i'll click on the load from library and we have tons and tons of different layouts that we can use so let's say for example you guys want to just use this agency layouts you'll click on use this layout and then you guys can use these pre-made layouts now the great part about these layouts is that they create everything for you they create the home page the about us page the services page the contact and all the pages that correlate to each other so you can use these on your clients websites and then you can adjust the colors the fonts the images and make it look like uh you know make it 50 criteria for your clients websites and there we go so we have this beautiful websites everything imported and yeah they have over like 500 templates guys so be sure to check out the divi templates on the right side this is obviously the um the phone view the tablet view and also the desktop view there's also a zoom out which allows you to zoom out here and just it just gives you like a better visual of the website i do like this a lot because this helps like you understand like how it looks from it just helps you get a better idea for it right and there's also the um the other i guess you want to k the builder view style which allows you to build or look at this from a uh what do they call it here the wireframe view all right so you guys can actually uh build your website from the actual wireframe view uh whenever it first came out this was actually the only way to build the website and you have to build it like this but uh divi 3.0 which came out a few years ago actually allowed you to build everything from the front end so it was a very big update but i have videos on youtube that actually show you guys how to build the website from this method so i have been using divi for quite some time and uh yeah that's that but uh yeah you guys can build it like this if you guys choose to do that and then once you guys are done you'll click on the uh computer logo and you can see the changes that you guys made to the websites so uh that's pretty much what that option is and these three dots right here uh these are more for uh the builder settings and i gotta be honest guys i just don't know i'm sorry don't dislike the video i'm just so like i don't know what this is i've never used it and i'm sure there's a a a case used for it i just never really uh got into the nitty gritty here and use all these uh features but uh but i'm sure they're very helpful and useful and i'm sure elegant themes has documentation on that section there now before we introduce our guests i just want to let you guys know that i do have a blog post um that actually pulled up a lot of the best divi theme tutorials divi theme actually has created a lot of really nice tutorials like how to add specific effects and animations and the thing is they actually release these uh just randomly and they just put them on the internet so what i did here was actually compiled a lot of their best tutorials like for example here they added this like option on top of the actual uh menu which is really cool and they have a lot of really creative lessons and designs to improve your divi skills so here you guys can see that we have these you know these text backgrounds and there's just so much to learn uh also this one's really cool when you actually scroll down the uh waves they move around and stuff like that so they are really cool and helpful and then they just have some really creative stuff here like you know inline login forms uh how it's to create an inline email opt-in uh toggle dark mode and light mode which is interesting uh a call to action menu gradient shape overlays uh gradient background animations a gradient background on hover uh changing text and images an animated clock which actually animates as you scroll down it's really cr it's really it's crazy it's really incredible so i'll go ahead and link this uh blog post for you guys in the description below this video and this will actually showcase some of the best lessons that come from elegant themes alright guys that's pretty much it for the dv advanced features hopefully this section helped you guys out and understand how to use divi better now that i'm done with this section i'm going to give you guys some really cool tips and tricks and show you guys my guests all right and our first guest his name is nelson miller he is the owner of picreative.com where he has tons of divi products he offers db child themes he actually has one product here that's pretty popular and it's the responsive helper this is on the divi marketplace and it is a trending product so a lot of people do like it he also does have courses uh he has a lot of tutorials on how to do stuff so if you ever you know you ever get stuck on something or you want to learn on how to do something with divi he does have a lot of really cool blog posts and tips and tricks on how to use divi but with that said uh here he is thank you daryl hello everyone it's nelson miller here with pa creative some of you may know me from my divi tutorials every week and my divi plugins so today we're looking at a really powerful exciting feature in divi it's called their conditions feature conditional logic displays where we can actually choose to display any section row column module based on some kind of condition that we can choose and set you can add one or you can combine conditions so we're going to take a look at some of those real quick and show you a quick overview of how powerful and useful the conditions feature is in divi first thing i'll do is just show you where these features are located so again it could be in any section row or module so i'll just open up the settings and go to the advanced tab here you'll see this group of settings the toggle called condition so open that up and then display conditions you can add a new condition and again we can add more than one if we want so let's start with something really simple easy to understand here i have four buttons and you can see it says download on windows or mac app store or google play so if i'm coming to this website and they're offering their product there's no point in seeing these buttons if i don't if i'm not on these devices i can't click and download on this if i'm on you know a windows computer that wouldn't make any sense so let me show you what you can do so on the download for windows i could open here and we'll do this for every single one go to the conditions and add condition then go down here to operating system so this is download for windows so i'll i'll check windows and then again display only if operating system is or i could say is not windows done now that button won't display if they're on windows same thing for all these other ones so i'll go here add a condition choose operating system now this is download for mac so i'm going to say macos really simple now i may have an app and i want you to link to the app store so for this i would choose any of the ones related to iphone ipad and ipod alright same thing for google play i'll choose if you are using android okay so that again display only if so these buttons will display only if now i'm on a windows desktop so let me exit here and i'll show you exactly how this works notice that the other three buttons are hidden now and only the button that's relevant to me is showing so that's a quick example so here i am on a layout for an ice cream shop and i scroll down here and let's see where does it say flavor of the month so let's say i want to go ahead and schedule my flavor of the month i don't want to have to come in here at midnight every month and change this so what here's what i could do i could create i could duplicate the section or the row but let's just say i'm using this row i could go in here and add a condition that this for this month this will appear based on date and time and then i can say display only if current date is after and let's say i choose the last day of the last month now i'm going to add another condition on this one and say date and time is before and then i'll actually choose the first day of the next month then when i save this it'll actually give you a summary when you hover over here only display if it's after april 30th and before june 1st so therefore it's showing in may right and what i could do i could actually go through here and duplicate this now i could put the flavor of the month for you know june and then do another one for july and just go in here and change the dates and these rows will display automatically kind of get ahead and schedule yourself out you know so you don't have to be stressing about customers coming say hey it says the wrong flavor on your website so here i am on a product page now notice that this product is on sale right now well i just happen to know that the sale actually ends tomorrow because i've set that in the back end of this woocommerce product so i would like to have a countdown timer here that will display until the sale is over so right now i'm editing the theme builder template that's applied to all my products so i have to keep that in mind i'm not just editing this particular product page i'm actually editing the theme builder template and i'll explain why that's important because i'm on product a i know that product a is going to not be on sale after tomorrow at midnight so i'm just going to go right here and add a countdown timer and i'm just gonna say something like you know sale ends friday at midnight right okay and then i'll pick the date that's tomorrow okay so it's less than 24 hours what i don't want to happen is when this is not on sale anymore someone i don't want someone coming to this page and saying well it says sale ends friday at midnight huh but there's zero zero zero the timer's over so what i will do go in here to the module go to the conditions and i'm going to set a condition that let's see date and time display only if current date is before and then i'll actually choose since i was doing friday i mean i'll choose before saturday what will happen now is this module will only display before friday at midnight you know saturday you know 1201. all right so you won't have to worry about this showing after the sale is over it'll automatically hide so the other thing that i want to point out that i'm working in the theme builder template so what i need to do since my other products are not on sale i need to come in here and add a second condition and say location products and product is so it's product a so that's kind of what i was talking about with some of those locations they kind of go together with other conditions right so now it's saying only display before saturday morning and only on product a all right and just to show you there are some other things i could choose a specific date or a specific day of the week you know just on fridays at this shows i could choose a specific first day of the month or last day of the month so things like that are also available so here is a cart page layout so if someone has added a product to the cart now it looks like there is a product here in the cart so that's great what i can do is actually add some kind of like upsell here to maybe something that is a related product that i know is related to that or just like like maybe i have a membership and like why not buy that instead of this product so here's what we're going to do we'll add a new row here and i think i'll just put i'll just make this very simple so i have just added a text module and made it look like a coupon here so what we can do here is say something very specific notice that they have product a in the cart well i could add this coupon code that appears for product b because i don't want it to say product a i want them to also add another product right so what we could do is say something like you know save 20 percent off product b using this coupon code and then i could put a button here that links go view you know product b i could go in here now to conditions and since product a is already in my cart i want to only show so you can hear cart contents i want to say show this coupon code if the cart has products or that would be just any products or i could say if it's empty or i could say if it has or has not a specific product so in this case i want to say does not have product b because this coupon's for product b so if if someone's not already intending to purchase product b it's like a little way of saying hey you don't have this in your cart would you like to add this to your cart and purchase purchases so that's just one of the many ways you can use conditions with woocommerce there's a lot of things to do with woocommerce so i hope that gives you a clear overview of just how powerful the conditions feature is in divi so i encourage you to explore it and try to find you know the things that work for your use case and there are a lot more obviously i actually have a couple tutorials on my blog over at pacreative.com maybe daryl will link to them i'm not sure but you're welcome to check those out so thank you all for having me here in the segment and enjoy the rest of your tutorial with daryl he does really great at the these big long how to build websites in divi tutorials whereas mine are more focused on specific things maybe some code snippets and things like that so there's kind of a nice happy place for everyone and i hope you really do enjoy the rest of your video and our next guest his name is victor he is the owner of divimundo.com he offers a free divi course here so if you guys do want to further your knowledge with divi he actually has like also like a five hour course it's pretty long and pretty um you know pretty it's pretty detailed so you guys might want to check that out he also does have resources like free dvd layouts as well i believe he gives this one away for free right here called the divi crib all right yeah so you guys can actually get this one for free if you go to his website you guys can download it for free and he also has a blog here where he does give tips and tricks on uh you know things to do with divi like how to change the number of columns on mobile he actually does have also a mobile template that you guys can download for free and he just has a lot of other cool really helpful resources on how to use divi so here he is thank you daryl and hello party people i'm victor from divi mundu and today i'm going to share my favorite tricks on responsive design in divi so just to get everyone on board responsive design means that your website adapts to the device and the resolution that your visitors are using this is crucial for your search engine optimization and of course for your user experience so it's dv responsive and the answer is yes but does that mean that your design will look great in all screen sizes automatically ah not really you have to make an effort let's take this juicy layout as an example so when i activate the divi visual builder i can click this purple icon in the bottom to see my different preview devices by default the desktop view is active you can see the traditional horizontal menu in the top and we have this here area with a big beautiful text and if i scroll down we have a two column row with text a button and an image to the right and then in the bottom we have a brag board with six columns of client logos and if i would like to preview this in tablet i can just click the tablet icon and if i would like to create in a phone i can just click the phone icon and as you can see here some of the changes are made automatically like the menu is transformed into a hamburger menu on mobile devices but the padding and the text sizes is something that we have to take care of ourselves if i scroll down i can see that the two column row is now stacked into a one column row with the text and then the button and the image and we can also see that the text has a line break here in the mobile design so we have to fix that and in the bottom we have our logos and they are pretty big and they're also stacked in one column instead of six columns so before we'll tweak this design i'll just show you a few more things in the preview mode you can click this icon to tilt the device and see how it looks in landscape mode and one thing that i often do is that i click this drop down and instead of using this generic phone view with the width of 414 pixels i'll choose maybe an iphone or another popular model to have a more realistic preview and now i can click this button to make this the default phone view so i don't have to change this each time another nice time saver that you can use is keyboard shortcuts instead of clicking these different devices i can use my keyboard and press command or control minus to move to the left to the bigger device or i can press command plus or control plus to go to the right to the smaller screen sizes before you start to edit your mobile and tablet design you need to understand the difference between the responsive preview mode and the responsive design settings a common mistake is that people start to drag here in the mobile view to change for example the padding but if i go back to the desktop preview you can see that this affected all devices and that's not the result that i wanted so i'll undo this by command z control set and the right way to do this is to click the cog wheel go to the design settings and in this case i'll go to spacing and we can see that we have top padding of 150 pixels and a bottom padding of 550 pixels to change this on tablet i'll click the responsive icon and now i can click the device that i want to edit for example tablet and you can see that it has inherited the bigger device the desktop 150 pixels in top and 550 pixels in bottom so i could now change this to maybe 50 pixels top and in the bottom we could have maybe 300 pixels and if i want to tweak the phone settings i'll have to do the same procedure and you can see that it has inherited tablet settings here 50 and 300 pixels but i can override that by saying maybe 30 pixels on top and we can use 100 pixels in bottom and if i go back to the bigger devices you can see that they've kept their settings and the same principle goes for text size so i want to change this one in tablet and phone so i can actually hover this element and click the pencil icon and that will open the settings and i'll go down to the title text size and i'll click the responsive icon and make sure that the tablet is active and now i can change this to maybe 80 pixels for tablet looks better and for phone i'll use 30 pixels and then i can use the same principle to tweak all these different design settings like this subtitle text maybe i can use 18 for phone i can do the same for this next module i'll go to this h2 settings and the desktop size is 45 pixels i'll click the responsive icon make sure that phone is selected and we can go for maybe 21 pixels in size or maybe 23. i can also do this for line height i can do it for letter spacing etc etc and now i have this button with a line break one obvious fix would be to have shorter text just removing this one learn more and it looks better but maybe i want to have more text put that one back i'll go to the design settings button and we have the button text size i click the responsive icon phone and let's scale it down to maybe 16 pixels or we can drag this one down until it looks better now you shouldn't do this for every single module on your site you can right click and apply this style to active preset yes and this means that every button on my entire website will have this styling on phone another thing you can do in db is to display or hide elements depending on the device the visitor is using so if i take this image and click the cogwheel and i'll go to advanced and visibility i could choose to disable this one on phone and maybe also on tablet and you can see now that it's grayed out and this will be invisible if you visit this with this with a real phone or a tablet if you think that this takes unnecessary space and the last one we have these logos i think they are a bit too big so i can open the image settings here go to the design sizing and we can take the max width click the responsive icon and i can set this to max width of 150 pixels and instead of doing this to all the five other logos here i can just right click the max width and i can extend the max width to all images throughout this row and i click extend there we go looks much better okay guys this last trick is something that i use on all my dv websites to make it look better in smartphones and that is changing the default row width so by default the row and that's the green box here in db they take up 80 of the viewport width and that's fine for the bigger screens on desktop and tablets but in the tiny smartphone screen i would like to have more width for my content so to do that i click the cogwheel for the row i'll go to the design settings and i click sizing and as you can see the default width is 80 percent for all devices so i'll hover with and i'll click the responsive design icon and i'll make sure that bone is selected and i will change this to 90 and have a close look here to see the change 90 and this way we have more space for our content in these smaller screens and in the last step i will save this as a global default so that means that all my existing rows will be 90 wide in mobile and all my future rows will have this size by default as well so i'll right click the width and i'll choose apply style to active preset this will affect all rows using the row default preset across your entire site do you wish to proceed yes perfect and if i would like to override this in one single row somewhere maybe i want it to be 60 or 100 i can just go into the row settings design sizing i'll go to mobile and i could change this to maybe a hundred percent and this will override the default setting that's all for today if you want more david tutorials for example on how to style the mobile menu or how to change the number of columns in mobile or tablet or about 60 other dvd tutorials you should check out my youtube channel just search for divi mundo or check out divimundo.com and you'll find everything there now back to you daryl all right cool thanks victor and our next guest her name is michelle snyder she is the owner of michellethecrater.com she has a blog here where she talks a lot about divi so she gives a lot of divvy tips and tricks she also has a shop page here where she does sell her own layouts so if you guys are interested in that so you guys can go check that out but she's going to show you a really cool trick with divi and here she is hello my name is michelle schneider and i'm going to show you a quick tip on how to customize your designs in divi now i absolutely love using divi to build websites because it makes it so easy however sometimes you run into situations where you can't find the right module settings to create exactly what you want but there's no need to worry with divi you can customize just about anything with the help of css so the example that i'm going to show you today is how to stack any divvy module side by side within a row this works really great if you're trying to put two call-to-action buttons next to each other or even small images i actually just used this technique on a site that needed to display eight tiny logos next to each other and instead of going through the trouble of building out eight columns i used the technique and it worked great so let me show you how it's done we're gonna start with an example webpage we're gonna pretend we have a coffee shop and we've got two call to action buttons that we would like on the intro section and ideally we would like them stacked side by side and in the center of the page so as you can see i've got one button that says order online and one button to view the menus so how might i do this your first initial reaction might be just put them in two columns and adjust the column width so that you could stack them easily side by side that is the solution often if you've ever done this you know that you often run into issues when the buttons are different widths they don't always behave the way that you want them to and sometimes you think it'd just be easier if you could just put them side by side in one row but you can't so let's show you how to do this so as i'm in my visual builder here all i have is a single row one column and i've got my two modules so the first thing i'd like to do is click on the row settings this will bring up our settings box and now we're actually going to go into the column settings so please take note of this if you're going to make these adjustments on the row settings it will not work we're going to click this gear to get into the column settings and you can now see up top here we are in the column settings navigate to the advanced tab and custom css in the main element section is where we're going to start to add some css to modify our modules so the first thing i'm going to add is display flex as you can see the buttons are now side by side next to each other there isn't any spacing around them we will address that in a moment but the next thing i want to tackle is to get them centered so i need to add two more lines of css here to make sure that these are going to be center aligned the first one i'll add is a line items center and you can see what happened here was that now they're kind of out of sync so one is higher than the other and that's not necessarily what we want but we will fix that in a minute the last css that we're going to add here in this section is going to be justify content center and now you can see that they are now in the center of the page we've got a few more things to fix before we can call this a success the next thing we want to do is travel back to the row settings now to address the fact that these are now sort of out of line and they're not displaying at the same height there is a kind of a weird thing that happens there's extra padding that is getting added to this button here and it actually has to do with the gutter width so we just need to change the gutter width to fix this so in order to do that we'll go to the design tab in the row settings we'll go to sizing we'll use a custom gutter width and we'll turn this to one and voila everything is now fixed so that is all that we need to do on the row the next things that we can address will be the spacing for each button so let's hit save on these row settings and then we will navigate to each individual button i will click on the design spacing tab for this and then i'm going to add 10 pixels to every single side of the button and that will allow for just a little bit of space in between each button as well as when and if we want these buttons to stack then they'll have that extra space too so it is important to add the top and bottom if you are planning on having these buttons stack on top of each other when you're going to the mobile view we'll save that let's do the same thing for this button we'll click the design tab and then go to spacing add our 10 pixels and then hit save on this as well so let's check and see what this looks like when we are looking at different devices so we'll test our tablet view and that's looking pretty good we'll test our mobile view and not so great so the one thing that you could do let's say you really wanted these buttons side by side on a mobile view it's not impossible i would probably suggest decreasing the size of the text which we could easily do we could go into design we would go into our button stylings and then for the text we would enable our device type and then for mobile we might push that down to let's see what 15 looks like we'll hit save do the same thing for this button enter our device type go down to 15 and then we can hit save one other thing that we could do if we wanted to to get this a little bit more space is we could go into the width here and then we could increase the width of the row for mobile devices so maybe we set 95. that would be a way that you could do it so one possibility so i could hit save there but let's say that maybe we really just wanted these buttons to stack on top of each other and that's fine i'm going to go to the history and we will go back a few steps here and we'll hit save there the only thing we would need to do to modify these to stack on top of one another is to go back into our column settings again not the row settings the column settings we would go to the advanced tab custom css and then we just need to enable the device type here and for our phone we could say display block and that would stack them on top of each other another thing that we could do is we could hit save if we wanted these alignments to change we could go into our button settings go to the design tab hit alignment and for the device type on a phone we could hit center so that would be an easy way to make those adjustments i'll do it one more time for this we'll hit the device type and then center align that and hit save so this would be a simple way to stack these buttons now if you'd like to grab the css if you didn't write it down i do have a landing page that you can go to to copy and paste this text for you to use on your own site just visit michellethecreator.com stack dash divi dash modules you can see that address here on the screen and you can go and find all the resources you need to create this for yourself one last thing i'd like to say about using this technique when you are using display flex on the column settings literally anything that you add within the column will be stacked side by side so it doesn't really matter what module type you are using so i could even go in and add icons next to each other i don't know why i would want to do that but you know if you do have a situation where you have a mix of things that you would like to put side by side maybe you have icons and images that you wanted to put next to one another this technique would work great for that so you aren't limited to specific module types that you can stack next to each other it's just going to be anything within the row will appear side by side so i hope you found this helpful all right so that was pretty helpful and the last guess is divi engine now these guys focus on divi extensions and plug-ins as you guys can see from their plug-in list right here they have quite a bit right they have divi body commerce davy ajax filter which is a very highly requested plug-in which i really do like and other various plugins you guys can also you know meet the team if you guys want to check them out you know you can go ahead and read more about their story and then also they do have a blog over here where they just give general tips on how to improve your design skills with divi now what dv engine is going to do is they're going to show you guys how to create an event registration page which can be used for pretty much any type of registration you want on your website so here they are hey folks roby here with the divi engine team coming at you with a very special tutorial collaboration with daryl wilson yeah that daryl wilson he was kind enough to invite us to come talk to you and walk you through a quick event registration page tutorial using the divi theme if you don't know divi engine yet you should definitely check us out we built some awesome plugins specifically for divi and help you build better divi websites our plugins are geared towards things like woocommerce for e-commerce sites custom post types using acf and so forth and different types of forms for front-end post-creation menu creation and so much more okay so for our event registration site we are going to be focusing on a fitness bootcamp as our use case here you'll see that we've got a bunch of different elements on the page here and we're going to show you how to utilize all the features you'll find in divi to achieve this layout why don't we start off by dropping in all the modules that go on this page so we're going to start with our two column row and then we're going to start adding text modules so we said that there were a few text modules here so i'll put one in there i know that there'll be one more and then right below here i'm just going to put in a blurb module we're not going to get too fancy here just yet but we'll style these up in a moment and the next is the contact form and then lastly in the second column we've got an image so we'll just go ahead and add that here in the section we're going to go to background and we're going to tell it that we want to have a gradient background so we just click over here and then we're going to add two colors to our gradient the first one is going to be this red color and again all colors will be in the description of this video there's our red and then our stop will be black that is perfect and now next up we want to use those new divi features we're going to add a pattern here and then as for which pattern we're going to use this pattern called pulls and we just want to rotate it so that it creates this like speedy effect and then we go to background mask which is also that new feature with tons of options in here we're going to select this chevron and then what we want to do is we do want to change that color there to that blue color that we've got set let me just go ahead and we go put that in there and now we want to flip these over so we just go to inverse by clicking this button right here and there we have most of our section ready we just need to do one more thing here on design we need to go to sizing and we want to make sure that it takes up the full height of the browsers we just say 100 vh for the minimum height and then that's it for our section we're good to go okay so next up we're going to tackle these row settings so we're going to open that up and for these we don't need to do that much similar to the section we're just going to go over at first to the design tab here and then we just we'll just adjust some of the sizing settings we're going to set the columns to equal height we're going to set the width to 90 and then we'll drag the max width over all the way and you'll see how that expands the content and then lastly similar to the section we're going to set the minimum height to 100 vertical height and that is really all we need to do here we're going to hop back over to the content tab and we're going to add a quick line of code to each column which will center that content in their columns so we're just going to say align self colon center semicolon and i'm gonna go ahead and copy that because i'm lazy go up to the second column advanced tab custom css main element and paste that in you see how that aligns right in the center there so that looks great we'll start by styling this first text module here so let's go into the settings and make sure that you're in text view now i'm going to paste a block of text here that i have and i've got a h4 at the top which is the time i've got the h2 which is going to be the title and then the rest of the text is in a p tag and you'll see why right now when i go over to the design settings now here in the design tab we want to go to text first i'll drag this over to the right a bit so we can see better and we're going to change the font for just the normal text so the text that's at the bottom here we want that to be cabin so i'm going to type in key capn and then what i'm going to do is change that color to white and we're going to adjust that text size to 28 makes it nice and big we'll add one pixel of letter spacing makes it easy to read these are the details of our event and we'll make the line height 1.2 em i think is it a good amount of breathing room here and i think that looks pretty good and what's one more thing we want to do is just add some text shadow here just helps it kind of bounce off from the background there a little bit let's go to our heading text now as you remember we added two headings we had a h2 which is the first one we'll deal with we're gonna work with the roboto condensed font for our headings you see that update real quick we're gonna use this as a bold font and then we're gonna set our text color to white again and this time we'll make the font size 48 nice and big nice and visible and last up we're going to do the h4 same thing we're going to make this roboto condensed this time we'll use the light variation though and what we'll do here is we're going to do this to uppercase and make the color white and we'll bump this font down two pixels okay and hopping over to our second text module here we're gonna add that hosted by portion so i again have some text copied here and all it says it's h4 tag that says hosted by so for this all we need to go is to the design we're going to add a text shadow again just by going to the text tab here select the same option i'm selecting option one here you can select option two depending on what you want well let's leave it on two maybe two is better and we'll go to design heading heading four because we use the h4 there and we just need to tell it once again we want to use roboto condensed we're gonna make it to uppercase set that color to white and then we'll bump this down a couple notches and then that's good that's our text module all done so let's quickly rush into that burp module blur module we're gonna go put a title and we are dealing with bobby muscles but you know whatever you want to do i am going to just put your fitness trainer as this is kind of his title you'll see that update down there and for the image we'll just come here to image an icon i select image and i have bobby's picture right here i'm gonna upload that oh that that's beautiful man and now we go to the design tab to just quickly figure out the details here image on icon first we're not using an icon but we're gonna put that image to the left and we'll give it a size of 75 pixels you'll see that bumps up a bit and then also we'll give it around the corners of 50 pixels and that gives us that nice round uh display here now for the title text we will come down all the way title text and what we need to do here is again you guessed it we're going to use that roboto condensed we're going to set it to bold and we'll make sure that it's white and then we've got bobby muscles personal trainer okay so next is the body text and here we will just tell it to use that cabin font again and we need to tell it to make that text color white and then lastly we're going to deal you with the sizing options and we're just going to tell it here to make the content width all the way to the right so it scoots it up to the left here now we do need to add a little bit of code here in the advanced tab so i'm just going to go to advanced custom css and i'm going to go down to the blurb title and it's just to center this text here so i'll paste this in and it centers that text nicely next to the image okay so getting to our image here we're just going to click on the settings i'm going to select our runner image pops in right there and next up we'll give it this white glow behind it just by adding a gradient background click plus and our first color is white with a 40 percent opacity whoops there we go and our second color on the gradient is just make sure that's at 55 stop right here and it's just transparent now what we want to do here is just make sure that this is a circular and there you go that's all set now next up we just want to make sure to add a quick line of code that's just going to add a nice little shadow effect to it so it kind of pops up a little bit more so we go to advanced custom css and on the main element we'll use the filter drop shadow functionality and there you can see it's got a nice little shadow there to just make the runner stand out from the page more okay so let's hop into the contact form settings and we're going to set up the form first and then we'll add all the fields that we need that aren't in here already so let's start by just creating a form title down here in text we'll say join the fun and we will just put a custom success message in here when you go down here and i will just paste this it says great we'll see you on monday and then next up i'll just change the submit button text to say register for bootcamp and that looks pretty decent now next is just a couple points of discussion here on the email you want to say who will be receiving the email when somebody registers and then you can change the message pattern if you click on the question mark here you can use those field ids that we'll be looking at here in a second to kind of compose your own layout there and you know there's other stuff for redirects and spam protection we'll just use the standard math equation but that gives you an idea of how to do this now next up we want to give it a background and we'll just use black but then what we'll do is we'll kind of bring that in to about a 20 opacity there we go and that is kind of the content section and we'll get to the rest of the fields in a second so go into the design tab we want to change the field background color and we're going to keep it on white but what we'll do is we'll give it a 50 opacity that looks decent and then the fields text color will get the same treatment it's going to be white but also with a 50 opacity and of course at 50 under 50 percent gives it that darker color now our field focus text color will be white and then we'll just kind of work on that text for that we're going to set the font to cabin and we will increase the text size to about 18 and we'll add some letter spacing in there of one pixel just to make it nice and legible and the next up we are going to go to the title text and on the title we're going to use our title font which is going to be our bottle condensed on the bowl level and we'll just make that nice and white and that's pretty decent and now we can just also go ahead and set the capture text and of course there's tons of stuff you can do i'm just going to set that to white let's set the font to cabin and i'm just going to increase that a bit to about 18 that looks decent good to go now lastly we want to set up well not lastly but almost lastly we're going to set up the button custom style so it looks better than this we're going to say yes to custom styles and then what we're going to do is we're going to be reusing that red color but first we want to say that the text color is white and we're going to set the background color to that red there we go and now border width is going to be zero border radius will be zero and our button font is going to be roboto condensed again and we want to change the icon and i'm just going to type in jim here you get a nice dumbbell there and now when you hover dumbbell comes up perfect and then lastly we're just going to get to spacing here and we're going to give it 25 pixels of padding all around the house there we go and we just click here on the content tab and we'll be using some of the stuff that's already in here so first we want the first name so we're going to type in first name and then to be lazy i will just copy that and paste that right in there and that is our first one done and then i'm just going to copy this one since the second one is last name so i'll just go oh did that two times i will just go in here let's replace first with last and then go here la and then that is that all done we want to do this a little differently we want the email to be full width so we go into the settings here we go to design layout and then make it full width and then we go back to content and we can just save that one we'll delete the message because we don't need that one but we're going to add one for agener so we're going to type in age title is going to be age and then in the field options it is an input but we want to tell it that we only want to allow numbers so there's that one actually what we want to do also on this one going back into age go to design layout and not make it full width because we'll be adding another field here so lastly let's add fitness level as an option um and then what we're gonna do is type that well copy that because i'm lazy paste that and then we go to the field options now instead of the regular input type we're going to select the select drop down and now we get to add some options now i have some pre-made ones right here that i'm going to copy and paste in so there's one there and you can put any type of options you want in your there we go and then protein is life also tell them that this one is not going to be forward and save that and save it and there we have it here we are here we've got our page ready to go so that was pretty easy to do guys so you can make these type of pages for any type of site that you're doing um that requires people to register for an event or a class or something like that it's just super useful alrighty so here we've got a divi foam boulder form that is pretty much the same but you can just see some distinct differences that just give it a little bit of extra touch which is where we can add some custom placeholders we could put our labels at the top here um for our drop down we can have some placeholder text even in there and other features like adding you know saving submissions to the database and if we just quickly use the form here and uh show you something else that's really cool you can actually create your own submission success layout so if i save this we can give the user additional information so now we're reminding them get a sweat towel drink water good attitude see you monday so that's just that you know some small but awesome things that can take that divi form a little bit further so anyway guys this has been roby with the divi engine team so stoked to be here with daryl wilson and working with him to bring you guys some awesome content on utilizing divi to build some amazing things thank you for watching and definitely check out our site and our products over at diviangel.com but again thanks to daryl thanks to the team i'll catch you guys in the next video all right well i hope you guys enjoyed our guest appearances if you guys have any questions for them feel free to let them know in the comments below and with that said let's go ahead and go on to the next section hey guys in this part of the video i'll be showing you guys how to use the divi theme builder now the divi theme builder allows you to basically make any part of the website using the divi builder so for example you guys can make a custom header and a custom footer using the divi builder instead of using the theme you guys can also create like a custom 404 page a lot of different pages you guys can make so i'll go ahead and jump into the theme builder and we'll go ahead and explore these options in this part of the video all right party people welcome to the divi theme builder section of this video in this part of the video i'll be explaining what the divi theme builder is and how to use it uh with the divi theme builder you guys can enable custom headers custom footers custom 404 pages using the actual divi builder for example we have this menu here at the top and this is all controlled by the theme customizer however you guys can also build your own menu with the actual divi theme elements and i'll walk you guys through on how to do that so let's go ahead and go to our dashboard here we'll go down to divi and click on theme builder so this is the divi theme builder options here you can see that we can have a global header a global body and also a global footer we can also click on new template here and we can create specific templates for specific parts of the websites we're going to go ahead and do another example here in just a bit but what i first want to do is i want to walk you guys through on how to create a global header now you guys saw previously that we are using the default menu with the theme customizer so i want to use the theme builder here so i'm going to first click on build a global header and click on build global header and now you'll see that the divi builder is loading here all right so right now we're brought to this screen where we can now use the divi builder so what i want to do here is i want to build out a custom header that we can design using the divi builder so right here i'll click on the plus and then go to we're going to go to this one here right where it has this large menu and also this really small section i'm doing this because i want to have the menu here with enough space to work with and then also have the button here because the button doesn't really need a lot of space right so right here i will click on menu click on check now you guys can see that our menu has self propagated here and then also over here i'm going to add from library and i want to add in the button that we've been using uh throughout the entire website all right and this can lead to like your contact form by clicking on the gear icon for the link this would be like you know your you know your website dot com slash contact us or something you know it would just be the link of a you know whatever page you wanted users to go to right so um now that we've done that i want to reduce this padding because now you can see this menu is too big right it's a lot of white space and i want to get rid of that so i'm going to go ahead and reduce this padding let me get rid of all that and then also for this section here i also want to get rid of the padding so spacing zero and zero right or maybe like i don't know let's do like two pixels and two pixels or something like that okay so there we go we got the menu there uh one thing though is i think this button is a little bit too close to the top of the page so let's say for example you wanted to control only one part of the actual column here for row settings for column two i want to go to design go to the spacing and i want to add a little bit more just for that one right there just for that row you know i want the button to be just a little bit more center right makes sense now we need to add in a logo right so let's do that here under the actual element here i'll click on the gear icon for logo we will then add in our logo right so let's go ahead and add in our logo here and there it is it's really big but not to worry we can go ahead and change the size of that by going to uh design logo we'll then go ahead and scroll down here just keep scrolling just keep scrolling and then i'm sorry it's going to be sizing and here i'll go ahead and adjust the logo with right there we go 20 22. that looks good i mean what do you guys think that looks pretty good to me right so i'll go ahead and give it the check mark now i want to add in a background color to this now there's a few options here what i can do is i can actually make this menu transparent so it'll absorb this background or i can manually add in the color myself it really doesn't matter i'm first just going to go ahead and save this really quick all right so we're going to save it i will then close this and then i'll click on save changes i'll go back to our websites and now i will refresh the page okay and there you go so we have our menu here and if we go to the services you guys can see uh it goes to all the pages all right pretty cool looks good all right so from here we have a few options you guys can either decide you know what i want to add a background or i want to leave it like this or you know whatever you want to do but for total purposes i'm going to add in a background color here so i'm going to go back over here and i'm going to re-enable the builder and i want to add a background here now there's a trick to this because remember these modules also have a background color as well so we need to go ahead and make sure that the background color is applied to this section this section and also the module itself let me give you an example here for the actual backgrounds i'll go ahead and add a background color here and i'll add in the first background color you guys can see how it's only applied to bits and parts of the menu right we now need to add it to the middle part right here all right backgrounds background color paste it there and then check mark it now the last part that we need to do is we actually need to add it to this little uh element this actual element actually has a background color believe it or not here click on the gear icon go to background and here it's using this white background by default i can actually just delete that and now you see that it has a transparent background and the column section is adding the color so here i'll click on check and i'll go ahead and save this okay and we can go back to our website here and refresh the page and voila so now you guys can see how it just blends really well uh with the actual menu so that is an example of how you guys can create a custom header now i've already created a custom header for you guys that's fully optimized so i'm going to go ahead and say you know what this is good and all but uh you're getting the treatment you're getting deleted and i want to go ahead and import the templates that i actually gave you guys so right here is the arise and here we have the actual header i'll open this and i will import the divi builder all right cool so you guys can see it's pretty much the same thing uh i just need to maybe adjust the actual font here i think joss is a really good one right let's go ahead and change this to uh was it jost let's see we can find it here menu text ooh red hat text ugly ugly yeah ugly here jost and check and then i'll click on save all right cool so that's how we can add a global header over here to our uh websites now let's go ahead and add in a global footer right here i'll do the same thing add a global footer and click on build a global footer all right and what we're going to do here is we're actually just going to load the template here and i'm actually going to explain to you how all this works because this can be a little complicated especially for beginners so i'm going to go ahead and click on this click on the imports and then we're going to import the actual footer layout and i'll explain to you guys exactly how this works so here i will click on import divi builder layout okay so this is our current footer right and this is a really nice footer except i want to explain to you guys how this actually works right so here we actually have elements right we have a text setting right and this right here is also text okay so these are just text modules below that we have this little uh an email button we have this other text we have some more text we actually added i think there's an image here or a logo i'm not sure which one it is it could be both yeah just an image and then we have this other text right here at the bottom now these are not actual links right these are just random text so we need to actually make these link to specific parts of our website so for example our services right i'm going to change this to pages okay and right here i'm going to go ahead and take this take this text and this is going to be our home page oops oops whoopsies and next we're going to take this and this is going to be our services page this is going to be our about us about us and lastly this is going to be our contact us page now i'm going to go ahead and delete these okay we don't need these because these are actually not really part of our websites now we have these four texts but these are not links right you can see that they're not links and they're not really linking us anywhere we need to actually link these to our specific pages so going back over here i'm going to go ahead and go to our home page here and we're going to copy this link we're then going to go back to our home we'll double click and here i will insert the link i don't know why it's down there that's weird and then i'll press enter and for the actual services we can do the same thing here but i'm going to go ahead and just open this up really quick just to give you guys a better visual so here we have the actual services page right and i'm actually going to go ahead and also click on the link and the url we're going to go here oh my bad whoops here we go copy the services page and then we're going to paste it in there like that now i do have an option here i can actually choose to open this in a new tab if i want to but um i don't think that's a good idea that would be kind of annoying right that means if they click on the services button right here it'll force their browser to open a new tab but i'm just going to leave it as services next we have the about us same thing here i will link the about us here all right and then lastly we have the contact us where uh we're gonna go ahead and copy and paste that right there like this and then i'll click on check now you guys can also add in any other elements that you guys want for example over here i will say you know what maybe i want to add in the uh the button right there you know maybe this can be like a free ebook button or something who knows you know but you can add in other modules here and you guys can actually build your entire footer from scratch using the actual divi builder now there's a lot of different ways on how to get customizable with this but for total purposes i'm just going to leave it there because i think that's enough and i think you guys have a good understanding of what this does all right so now that i've actually created this footer i'm now going to go over here and click on save all right and now we'll go ahead and scroll down to the bottom of the page all right and now you guys can see that we have this beautiful footer here at the bottom and if users click on these little links right here it'll take them to the about us page and if i scroll down here you'll also see that this footer still is on every single page because we set it to be a global right so if we keep scrolling uh there it is and then they contact us and there it is so yeah that's how you guys can enable a custom header and footer on your wordpress website using the divi builder now let's say for example you guys also wanted to add another page here uh let's say for example if someone enters the wrong address right someone enters something wrong and then they're brought to this page right here which doesn't really make a lot of sense right it doesn't look good it's not part of your websites you know it's part of the theme and it just it doesn't make any sense right let's go ahead and add in a 404 over here so i'll click on add a new template and then i'll go ahead and go to 404 page and click on create a template now with the 404 you can see that we still have the global header and the footer applied but i also want to add in a custom body right here so i'll click on add a custom body and then i'll click on build custom body all right now for tutorial purposes i'm going to go ahead and actually just use a template here so i'm going to click on these little three little dots and just for total purposes i'll go ahead and just uh grab this one here all right i think this one will work yeah this one will work and i will use this layout i know what you guys are thinking darryl this looks this looks like really big this is a whole website don't worry guys we'll go ahead and just use specific elements to achieve what we're trying to accomplish all right so i loaded up this page now i first need to go ahead and delete all these other sections right so i'm just going to quickly go ahead and delete all these sections here just because i don't need them right i just want to actually use the actual landing page and there we go all right now what i'm going to do here is i'm just going to delete this i don't want this either and i'm just going to change this to like 404 right like are you lost go back home and i'm going to quickly go ahead and make this a one column row right and then i will center align this to the middle right makes sense we're going to center align this you guys can see my magic here right you guys can do this for pretty much everything right like it's really simple so i'm pro at this you guys can tell huh there we go i don't want to use this button right i'm going to delete that and i'm going to add in mine from the actual button library here i'm also going to make sure that this is center align and for the background here i'll just go ahead and change this background i'll get rid of this uh this one and i'll add in my own background color and then for the actual background color i'll just use the same color that we've been using over here for a while right here so the background it looks like somewhere else is actually using oh right here there we go and then we would probably just have to change this to like black right because uh this this text is too white right so i'll just go ahead and oh we need to do the other color the heading text sorry the heading text make this black right and then also just make this black as well this is a paragraph text and there you go uh but we gotta change this to jost right to jost because uh this is oh it's the header heading text bad heading text defaults you guys can tell i'm not on a script right i just i just know what i'm doing here and this will just be like uh you know go back home go back home check and then save alright and once that's done i will close this and i will click on save changes now what we're going to do here is we're going to go back to our websites and we're going to enter in the wrong address here we'll press enter and there you go so it's telling us to go back home now we probably need to link this button over here to our actual like you know our home page right so going back here you would just enter like the name of your actual domain right which is this right so if they actually click on the actual button right here it'll take them actually back to the home page so that makes sense right so for the link you just want to make sure that you paste the link for your original home page and then that should work all right so i'll just uh refresh this page here and now if i click on this this will take me right back to the homepage and there it is all right so that is pretty much the theme builder summed up now there is a lot more to do with the theme builder i'll be very honest guys i am barely scratching the surface with the theme builder however the global header the global footer and the 404 page is pretty much the most common thing all right so now let's talk about maybe you guys want to add in a custom header for specific pages because maybe you don't want to have the same exact header for all of your pages this is very common a lot of users tend to use a special header for their home page and then for like the services and about us it's a little bit more basic right so right here under the add a new templates i'm going to click on specific pages but i only want to select like the services the contact and the about us and then i'll click on create a template now i'm going to delete this this one where it says global and now i'm going to go ahead and say you know what i want to add in a specific custom header for those specific pages so now i'll click on add a custom header and instead of using the global header i want to click on build a custom header what i'm essentially saying here is i want to actually use a different style header for those specific pages and just to speed this up i'm going to go ahead and import my template one more time here and now let's say for example for these um for this menu i don't want to have like a background right so for the background i'm just going to you know i'm just going to delete the background right and maybe i don't i don't want to have the button too you know whatever so the button we got rid of the button all right so this is our default header now for those pages so now i'll click on save all right and then i'll close this and then we'll save the changes so right now if you guys can read this we have a default a template we have a default a 404 page but then we have a specific custom header and footer for the about us and two more pages so let's test it here i'll refresh the page and now if i click on services we should get a different uh menu here and there it is so now we have this different menu so it's a white uh it's a white menu and the button is also gone so now let's click on the about us the about us the same thing you guys will see that we still have the original menu so this is how you guys can have a custom header uh on other various pages now again i am just scratching the surface here with the theme builder there is a lot more you can do you can also do this for posts where you can have specific post templates you can also design all of your archive pages because remember if users actually click on the actual author page for a blog they're going to get that default look right so just to give you a quick little example over here if i go to a blog post let's see there we go a blog post and i click on jorius miller so these are all the blog posts that are created by jorius miller so over here we can actually uh create a specific author page for jorius miller and then you can design it using the divi theme builder and you can do this for everything so the divi theme builder is extremely robust there's a lot you can do with it and uh yeah just spend the time to mess around with it and get comfortable and yeah that'll work from there so i'll go ahead and click on all changes saved now one last thing i want to show you all let's say for example you guys did all this work and you want to export this right so this is the divi theme builder right builder right and uh we can export all this right it'll take a few minutes but you can export all the work from the actual theme builder and then apply it to other websites you'll see here how uh it has exported now just to show you guys this works i'm gonna go ahead and delete everything we're gonna we're gonna delete everything there we go here we go delete delete delete delete or actually i can just do this here i can click on the uh the trash cans here at the top right and then i'll click on save changes so now if i go to my website it's going to be completely stock right it's a stock everything stock right but let's go ahead now and uh reload those settings there right for the dv theme builder and everything should be just fine so i'll go ahead and go over here and now i'm going to import that all right the divi theme builder and now i'm going to import the divi theme builder templates and there you go so everything is saved all i got to do is click on save changes now let's go ahead and click on visit sites and perfect everything is loaded everything looks great if you go to the bottom of the page you'll also see that our custom footer that we made is back there so guys that is the divi theme builder section summed up hopefully this section helps you guys out um i will have more templates and layouts for you guys for headers and footers and a lot of other really cool stuff so i really do hope you guys enjoy it so make sure to give me a big thumbs up party people and let's go ahead and move on to the next section all right guys welcome to step five now in this part of the video i'll be showing you guys how to use the divi marketplace where you guys can spend more money yeah uh but no serious though um i'll show you guys how to use the divi uh plugins i'll show you guys how to use the divi templates and also show you guys how to use the divi child themes you're going to come across that term a lot to be child themes essentially it's just a theme that's modified with css and code to give it a different look and feel than the traditional divi theme so let's go ahead and walk you guys through how to spend your money at the divi marketplace let's go all right party people welcome to the last section of this video in this part of the video i'll be explaining the divi marketplace now the divi marketplace is essentially add-ons layouts and child themes that you can add to your divi website for example we'll go ahead and scroll down here and i'm first going to uncheck layouts and child themes now the divi extensions are plugins so these are plugins that give your website more functionality for example this one here is a plug-in that gives you 50 new premium modules oh that's weird there's a typo it says 50 on their image but on their description it says 40. so yeah also the divi gear this allows you to showcase your blogs in a nicer format there's also the dv table maker which allows you to create like affiliate marketing tables and there are tons of other stuff that you guys can add to your divi website now there's also layouts so i'm going to uncheck the extensions and click on layouts layouts are just templates right so for example let's say you guys have a hard time creating headers which i know a lot of people do you guys can purchase the divi header pack and this is essentially headers that you guys can use on your websites they have screenshots and also live demos that you guys can check out so they do have tons of actual uh divi headers that you guys can go through and check out and these are all responsive you know so they do a lot of work um a lot of this is grunt work to be honest like you know making sure it's responsive and stuff so purchasing layouts is really not a bad option they also do have just normal template packs like um sections for divi which is like landing page sections uh slider modules basically a bunch of designers got together and they just created some really nice styles and stuff that you guys can add on your website so that's divi layouts divi child themes dv child themes are essentially modified versions of divi with code so normally with divi you can't achieve a lot of the sections or styles you can with these specific uh child themes uh for example tv ecommerce is a i guess it's a popular one i'm not sure about the design though the design is uh it's so so but you know who knows so i'll go ahead and scroll down and usually with divi um this is not the default way of showcasing products so the developer actually implemented some custom code that allows you to display your products in a different manner also on the right side you can see we have this buy now and documentation this is also part of the divi child theme so essentially it's divi but it's just a little bit of custom code to give it a different style and sort of a different look than the usual divi uh way of doing things so this is also the products and it looks a little different we also have this little uh shopping bag i'll be having another divi ecommerce tutorial coming up in just a few weeks as a follow-up to this video but again child themes they are just essentially um a smaller a different version of divi with just custom code now you guys will need to have divi with the actual child theme for them both to work and i'll walk you guys through on how to add extensions and child themes and all that in this part of the video so i'm gonna go over here to my account here you guys can just you know chill out and just watch me just chillax i'm gonna go to the marketplace the marketplace is where i have um you know purchase all my products so i've purchased a template and i've purchased another template and this is a child theme so first i'm going to go ahead and download the bb supreme pro and i'll add this to my website so i'll go back over here to dashboard go to plugins add new upload plugin i'll choose the file and then i'll go to the download section and then i will download the actual plugin it is called the supreme right supreme there we go i'll open this and i will install this all right then i'll activate the plugin all right so now that i installed that plugin i'll then click on enable visual builder i'll go ahead and scroll down and i'll open up a new section here and i'll just make this a little bigger just so we can have a little bit more space and i'll click on the plus one column and if i scroll down here you're going to see that now we have more modules so we have gradient text we have a supreme block reveal we have a bunch of different other really cool buttons and stuff like that i'll just use this one right now the supreme animated or the gradient text so it looks like uh this is an example animated gradient text settings looks like here we can actually uh you know have this animated you know to be honest guys i don't really know all these plugins and stuff like that by default but it looks like here you can create animated text that looks really nice and uh yeah you guys can go through these options and settings and then create like animated text you guys can actually see it's editing or i'm sorry it's animating right there so it's this pink color and then it goes to like this brown color you see that now it's a green color so that's really really cool so that's how you guys can implement these add-ons for your website again i don't really know all these um by like the back of my hand you're just gonna have to go purchase one and try them out with trial and error guys so uh yeah that's that now also we have the other ones right uh here we have uh i think this is a layout here right a divi business pro this is a pretty cool one but uh let's just say for example i want to use this one right we have the growing divi layout library i'll go ahead and download this i will then open this product so remember this is a layout okay so this is not a uh this is not an actual plugin this is a they should have json files so layouts uh divi section layouts and they have a few right here i'll just grab the about and here are all the layouts now these are json files so you'll just go ahead and drag and drop these onto your website and they should propagate so let's go back over here to our websites i'm going to open this up and i'm going to make this a little bigger because i want to get out of tablet mode there we go and i'll just go ahead and drag and drop this and i want to replace the existing contents and i'll import this layout and there it is so there is the layouts that i have purchased and if i want to add in more i can simply you know do the same thing here uh just drag and drop i'll import it as well and i'll scroll down and there is the second one and they have tons of them so this has like 220 sections so you guys can go ahead and purchase one of those little template kits and that's how you can import them to your website and lastly we have the child themes so let's say you guys find a child thing that you guys really like that fits the style and just something that you really do like uh here i'll click on download and this is the grow multipurpose divi child theme so just some random child theme all right i'll go ahead and go to our website now to use these you'll just go over here to appearance and go to themes and then you'll click on add new now remember divi must be installed on your website okay so uh i know we're uploading a new theme but you must have divi installed because uh it's going to use pretty much everything from divi to uh use this child theme so i'll choose the file and then here is the grow pro zip so it is a zip folder you'll open it and then you'll install this theme all right so right here it's telling us that the parent divi must be installed right so it requires a parent theme this is a child theme it has detected divi so it has installed successfully now let's click on activate all right so i went ahead and i installed the child theme now this child theme has some instructions okay so i actually went through and researched this the first thing we're going to do is go to the divi theme options and we're going to import the options in the divi theme options and we're going to import the grow pro theme options now other child themes might have this requirements here are the actual files that you guys will need to import so let me just show you guys how to do this once so if other child themes tell you guys how to do this you guys will be experts so we're going to go over here to the theme options right so the divi theme options and we're first going to import it is the grow pro theme options so over here you'll see this imports we're going to imports choose the file and we're going to import the first one which is the uh divi theme options right theme options open and then we'll import that all right we got the green check mark cool let's go ahead and do the next one [Music] i'll save the changes the next thing we're going to do is go to the theme builder and we're going to import the grow pro templates json all right let's do it theme builder import all right now we're going to import the theme builder templates i think it's this one here right yeah theme builder is that builder wait wait wait pro builder layouts i think that's it no i think this is it right here yeah this is it i'm gonna go ahead and select this one theme builder yep theme builder and then we're going to uh import all right so it saved these settings i'm gonna go ahead and save the changes the next one is the theme customizer all right let's go to the theme customize and i'll show you guys how to do this all right we're gonna go to the theme customizer we can already see the logo is popping up and uh we're gonna go ahead and now import the grow pro customizer settings so up here imports choose the file and this is the customizer settings i'll import these as well all right and the last thing we're going to do is we're now going to import the last section to the divi library so let's go to the divi divi library we'll click on the import and export we'll import choose the file and this will be the pro builder layouts i'll open that and i will import the divi builder layouts all right cool so i think now we're ready to go here so i'm gonna go to visit sites we're going to add a new page and this will be like the home page i'll publish this i'll publish this i'll use the divi builder and now i'm going to click on add from library all right and once that's done we're going to go over here and we're going to click on this little plus icon and go to your saved layouts now you guys will see that we have the homegrown page i'll just click on this and use this layouts and that's it we're done now you guys have a fully completed website that was made in just a few seconds you know so uh these child themes they have a lot of really cool animations and features that a lot of other themes don't for example you can see this right here is a probably good work of css they might have used that and they probably added that in a child theme but um yeah so child themes are essentially like pre-made websites uh they just come with a little bit more features than the typical layouts so over here i'll exit the visual builder and i'll save the changes so that is pretty much it guys for the divi marketplace and also for this tutorial i really do hope this tutorial was really helpful i did my best to provide as much information as possible yet not make this video too long so i really do hope you guys enjoy this tutorial my name is daryl wilson and i will see all of you party people in the next video guys take care and thanks for watching all right party people congratulations you guys are now divvy professionals so uh congrats on completing your websites if you guys have any questions for me feel free to let me know in the comments below if you guys like this video if you didn't like this video just give me the like anyways alright it's been a long time making it um also if i if you guys want to give me any feedback just let me know in the comments you know also my favorite beer is modelo so uh just let me know that my favorite beer is modelo just to let me know you guys made it to the end i actually live in asia right now and they don't even have modelo here it's like why you know they have semi-gill light they have singa they have a lot of other good beers but not modelo uh just send help sen ship sums at me you know we'll i'll tip you know but i hope you guys really enjoyed this video if you guys have any questions let me know in the comments below and until then i will see all of you party people in the next video guys take care

Channel: Darrel Wilson

Views: 262,690

Keywords: wordpress tutorial, how to make a wordpress website, divi theme tutorial, wordpress, divi theme, how to make a wordpress website with divi theme, build a website, create a website, wordpress tutorial 2022, wordpress tutorial for beginners

Id: KfZy4RLeUE0

Length: 253min 28sec (15208 seconds)

Published: Mon Jun 06 2022