How To Make A WordPress Website 2021 | Divi Theme Tutorial 🔥🔥

welcome party people come on in and take a seat my name is darrell wilson and today i'll be showing you how to make a wordpress website step by step with the divi theme so we spent weeks making this video so complete noobs like yourself can learn how to make professional wordpress websites that look great that are responsive and you don't need to have any experience whatsoever plus you'll learn how to use the divi theme and all these features which is currently right now the most popular wordpress theme in the world so today after watching this video you'll be able to create your own website and you'll become a wordpress pro trust me this stuff is so easy and we do not make ugly websites here on the darrell wilson channel so after watching this video you'll have a modern professional looking wordpress website and you'll be so good you can even start your own web agency tomorrow so go get some snacks go get a drink pull up a chair and let's get started today with this wordpress tutorial so today i'll be showing you step by step on how to build and customize a modern and beautiful wordpress website and the great part about this video is that you don't need to know any sort of coding or any html because we are using a drag and drop builder that makes it super easy to build your new wordpress websites and as you can tell this website looks very professional yet simple so i'll be showing you how to build and customize every part of the website so you can walk away today with a beautiful website that your visitors will love now you can build any type of website you want with this tutorial you can build a business website a blogger website a portfolio website a tech website you can build any type of website you want in this wordpress tutorial i will also be showing you how to make vibrant and beautiful designs with free templates that will stun your visitors and make you and your website look very professional and just to make sure you make great looking websites i'll be giving you some professional design tips and quizzes to help you with your web design skills so today in this video i'll be showing you how to build your new website with wordpress and the divi theme wordpress powers more than half a billion websites and is by far the most popular platform for making websites the divi theme started back in 2013 as a one-man operation and after years of development and hard work the divi theme quickly became the most popular wordpress theme in the world employing more than 100 people worldwide so as of today divi is the most active wordpress theme that powers more than 1.8 million websites it is also used by popular websites like the kingdom of thailand all of the palestinian casinos in las vegas polytechnic institute penn state university and the state of georgia so you will be using the most modern and up-to-date software to build your new wordpress website now i gotta be honest i think the best part about divi is the templates you'll have access to over 1400 templates that include all the images perfectly sized and they also include the pages such as the home page the about us page the services pages and also several other pages so you will have full access to all these templates for your new website okay party people so this is the website that i'll be showing you all how to make today also in this video i will be giving you all the demo images and the starter templates to help you follow along in this wordpress tutorial so let's first take a look at the header so on the header we have the social icon so i'll be showing you how to add these and then we have this beautiful gradient button that says get quotes and of course you can change this to any font and any color that you want on your new wordpress websites we have this menu right here with all of the pages and you can create as many pages as you want we have our logo so you can add your own logo now if you don't have a logo don't worry about that because i'll be giving you a really good resource on where you can get a professional logo for your new wordpress websites and then we have this landing page and of course you can change this text to anything that you want you can put my amazing business website or you know my dog grooming business or whatever you want and you can change the colors and the style of it and then we have this beautiful gradient button where if someone were to click on it we can navigate them to other parts of the websites so let's go ahead and scroll down next we have these blurb icons so we have just some upsells you know just telling people about our website like our maybe your services like your marketing website and dog grooming that's an awkward combination but you get the idea so you can just add general services that you offer on your website and then scrolling down here we have just some text and we have some other icons on the left side we have this image that just kind of helps add some images and style into quarter website and then we have this beautiful gradient text which i'll show you all how to incorporate gradient text on your website to make it look really vibrant and really amazing let's go ahead and keep scrolling down here and then we have this other section so this is like a stylus transparent section where we have this text and then we offer our services and what we do and we just gave it some style decor to take away from all that white so i'll be showing you all how to kind of add design and decor to your website to make it look really attractive and then scrolling down here i'll be showing you how to incorporate testimonials if you have a bunch of people that think your website's amazing or your service is amazing we can add those testimonials to your new wordpress website i'll be showing you how to add really nice testimonials to your websites and then scrolling down here we just have some other things that you might want to offer like you know go here check out that or maybe awards or prizes and of course you can change this to anything and this can be awards this can be something else and then we have this gradient button and we can link them to any part of the websites and then scroll down here we have another call to action and this just looks really nice you know we have this mountain background to kind of take away from that business corporate look and then we have this button which again we can link them to another website or your you know your linkedin page or whatever you want and then we have the number and then you can also add your email and then we have some companies that we work with and then at the bottom we have this really nice footer where we can talk about where you're located at we can talk about your your hours of operation so i have monday through friday 8 a.m to 5 p.m and then weekends and then just some other services and sections that we can add for your new wordpress websites so it's a beautiful website i think your visitors are really gonna like this website so it doesn't really matter what kind of niche you're in it'll basically work for everybody once you change the images so next we have the about us page and you'll notice we have this banner at the background that represents a business slash corporate style and of course you can change this background to anything that you want everything is fully customizable on this website and then scrolling down maybe you can introduce like the owner of the company or just someone that you know that works with the company or something like that it's going down here we have just some additional upsells saying this is what we're good at this is what we offer and maybe just encourage people to actively explore your websites and then we can list achievements like we have this many happy customers this is how much staff members that we have you know just something to make your website look you know engaging and make people want to navigate it and look great and then we have maybe your staff so you can add your staff to your website so we have jessica rabbits we have robert brown and elaine and we can also list their positions of the company i'll be showing you how you can add that to your current wordpress website and then again we have companies that we work with and then again we finish it off with our footer again at the bottom and let's visit our services page alright cool so this is our services page and again we have this banner in the background and i kind of changed it up i added like a different style to it because i don't want it to be too similar and then here you can list your services so i'm just acting as if i'm some marketing company where we do business planning branding strategy and just things to improve current businesses and then scrolling down here we just have some other services that we offer and we can go ahead and detail and explain what we do for our business so maybe here you can talk about web developments web design marketing or something else like seo packages and just talk about your company and just give some more information about your current services scrolling down here again we have this beautiful section and again i like this mountain section because it just takes away from all that corporate business it kind of it's refreshing you know i think when i see this image it's just you know it's just refreshing i want to go out and you know i want to see it you know so i'll be showing you how to add this really nice call to action section as well for your website and then we have your team as well so if you want to add your teammates again with this really cool animation so when i hover over it you'll see how paige kind of lifts on the corners i'll be showing you how to add that to your website and then again we just have some current upsells you know just reminding people that we work with a lot of reputable companies and that we're a large and reputable company and then again we finish it off with the footer at the bottom of the website now let's talk about the contact us page all right and this is the contact us page and as the background you can see there's a bunch of people talking and engaging and it just looks friendly you know it's inviting you know i'd want to communicate with these people and then scrolling down here we have the contact us form so i'll be showing you how to add a contact us form to your website and if someone fills this out and clicks on submits it will then go to your email inbox on the right side we have this location of our company so you can add a location of your company telling people where you are and i just put caesar's palace here i mean i i don't know what to put so i just put in a casino and yeah that was the end of it i just added something on google's map so i'll be showing you how to add your company uh on google's maps on your website and then we have just some other information like the address you have your phone numbers your email and then also your hours of operation just to notify people a little bit more about your website and your services and that is the entire websites so this page builder is super easy to use it's 100 visual and drag and drop so you can edit the website from the front end so for example puts learn how to make an amazing website step by oop step by step and then i can scroll down and maybe i want to change this text to computer pros right computer computer oh my oh my goodness computer pros there we go and you know we can change the fonts we can change the color the size and then to this section if i want to drag elements around i can say you know what i want this text i want to put it above the gradient on the right side so i'll just drag and drop it and then this image i want to put it where that text was so i'll just grab the image and i'll drop it right there so now let's say you know i made a mistake on my website this doesn't look that good i can just go in my history and redo everything so i'll just say you know what let's just go back to the way it was before and then there you go everything is back to the way it was and then i can change this to this is the best wordpress tutorial for the divi theme and then i can save it on the bottom right and there we go so let's keep scrolling down let's just see what else we can change here so maybe we want to mix and match these elements so for example let's say i want the marketing strategy over here on this side so i'll just take this and i'll drag it and then take this and then i'll drag it and we can duplicate rows so for example let's just say i want to have this whole row duplicated so i'll just click on this duplicate button and there you go now we have that whole section duplicated and then we can drag and drop and edit all these elements at any time so party people i have a lot of goodies for all of you i have a lot of free stuff in this video to help you out let's go ahead and get started with this wordpress tutorial are you guys excited are you ready good good because we're going to build your new website in five simple steps step one we will get your domain and hosting so for example my amazingwebsite.com i'll also show you how to download the divi theme and also adjust some general settings for your wordpress website step 2 i'll show you how to make pages and start designing your website and make it look really professional using the divi theme step 3 i'll show you how to use the theme customizer some wordpress plugins and just some additional settings for your wordpress website step 4 i'll be teaching you how to make your website mobile responsive so it doesn't matter what kind of device your visitors are using such as an iphone or an android your website will look good and be responsive on all mobile devices and step 5 i'll be teaching you how to use the divi theme builder and all the advanced features that divi has to offer divi offers some really cool features that will really speed up the workflow of your website so i'll be covering all this in the advanced features section of the video and make sure to stick around to the end of the video because i'll be introducing you all to the db marketplace where you can check out divi plugins divi child themes and also tons of divi templates for your websites now there is a link below in the description of this video it'll take you to a page to purchase discounted and fast web hosting and this is named hero.com now namehero.com performed as the most fastest and one of the most reliable web hosting companies out there now how do i know that how do you know i'm not just lying to you right well i actually tested name hero against 20 other web hosting companies for 90 days a name here performed as one of the fastest and the most reliable web hosting companies on my list in fact name hero had zero downtime this whole week so you'll have a reliable and a fast wordpress websites now i contacted the owner of this company to give me a special discount so through my link exclusively you all will save 70 off your web hosting if you go to the website normally you'll only save 50 off your hosting packages and the owner gave me this discounts just for my viewers on youtube so when you get to this page you will click on get started now name euro offers four different type of web hosting plans they offer the starter cloud the plus cloud the turbo cloud and the business cloud for those of you who are just getting started out for the very first time i recommend the plus cloud i think that's suitable it gives you a lot of ssd storage it's a very affordable plan and your website will be very fast however for those of you who have been using wordpress for a while and you want to upgrade i highly recommend the turbo cloud now the reason why i recommend the turbo cloud is because this plan offers the nvme storage technology which is a new type of store technology for web hosting servers for example so this graph is from pcworld.com and you'll see that the nvme storage can transfer data a lot faster than typical ssd and sata hard drives also you'll see that the nvme storage can access information a lot faster than typical ssd and sata hard drive so for those of you who want a blazing fast website i think the actual turbo cloud is a pretty good option but i know everyone out there is on a different budget so just select the package that works for you and once you select the package we'll scroll down to the bottom and then you'll click on order now all right cool so this is where you're going to enter in your new website so for example mynewamazingwebsite.com or my dog is amazing.com or whatever you want to put i'll just put demo tutorial 123.com and click on search and look at that we get a free domain on top of that so once you select your domain you'll click on continue lastly we have the review and checkout and look at that you just saved 125 you have a year of web hosting and id protection for under 70 so you have a very good value with namehero.com once you're on this page you will scroll down next we have the billing details so if you've seen this screen before you'll put in your first name your last name your social security number your bank account i'm just kidding guys they don't want that information it's a joke you'll put in your billing address and any other information you see here for the support pin make sure you write this down so if there's an issue or you want to know something about your accounts they will want to know about your pin just to verify that it's you calling and they want to make sure it's not just some random person over the internet trying to get your info you'll create a password which you probably use the same password for all your other websites right i'm just joking i do that sometimes but i should really stop that we have the payment method so you can pay with credit card paypal coinbase or credit card stripe look at that people are using crypto in fact crypto i think bitcoin's almost at twenty thousand dollars right now yeesh it's crazy man it's just going up and then you can go ahead and fill all this information out once you fill everything out on this page you will then click on the checkout button now i will purchase an account and i will meet you on the very next page and congratulations on registering your domain so this is your current client area here you can access your supports you can access billing you can purchase more domains or you can upgrade or purchase other web hosting packages if you want to do that and name your has very good supports so at any time you have a problem with your website under the supports you can open a ticket or you can contact them anytime if you have issues with the websites so next let's install wordpress onto your new domain under the my cloud you'll go ahead and click on my cloud i like this new interface named hero introduced they recently remade their whole websites for those of you who have been with name hero for a while you can tell they did a really good job at making their site look really nice so i will click on the plus cloud the next thing that we will do is we will access the cpanel so on the left side under actions you will see log into cpanel go ahead and click on log in to cpanel all right cool so next let's install wordpress let's scroll down just keep scrolling just keep scrolling we're going to find a wordpress installer and we're going to install wordpress onto our domain so under software you'll see wordpress manager by softaculous go ahead and click on that next it's going to say install a new copy so let's click on install all right so this is the software setup so let's just change some quick settings while we install wordpress onto our domain for the protocol make sure you have https that just makes sure that your website has a valid ssl and that just lets people know that your website is secure for the in directory make sure nothing is there that just means yourwebsite.com you know that's it we don't want it to be whatever that is so just leave it like that for the site name you can give your website a name and you can also give it a description so this can be web agency you guys can see i i do this quite often and i just put a cool website agency or something like that you can change all this later so don't worry about it for the admin username make sure you put something that you know because you will need this information to log into your website and change it so i'll put paddywhack and then for my admin password i'll put paddy wack 99 for the admin email make sure you have access to this specific email because let's say for example you forget your password you will need to have access to this email to retrieve your password and i'll scroll down you can also select your language so if you speak chinese you know there's a big debate on my channel so isn't it mandarin right not chinese because there's no mandarin on this list but i think uh chinese is the new standard of what american calls mandarin i don't know let me know your opinion about that in the comments below but i just speak english so i'll leave this as english but you can select all these languages like spanish turkish arabic and and all those languages and scroll down and then we will click on the install button at the bottom of the screen so now it's installing wordpress onto our domain all right wordpress has successfully been installed on the administrative url link you can click on this link right here and congratulations you have now successfully installed wordpress and your website is now live on the internet if you want to see what your website looks like right now under the top left you can click on visit sites and this is your new wordpress website so you have a live website on the internet pretty cool right let's go back to our dashboard so while we make changes to your website let me show you how to log in and to log out of your wordpress website on the top right you'll see your admin username you can click on logout in order to log out of your wordpress website then i'll just go to the domain now when you want to log into your wordpress website to build it and make changes you'll go to your website and type in dash wp dash admin and press enter here you will go ahead and enter in the login credentials that you created during the wordpress installation so i'll put in my email address and my password i will click on remember me and then click on login and that's it so every time you want to log in and log out of your website you can just go to your domain type in wp-admin and you can access your website okay so your website's live on the internet and it's all ready to go so the next thing that we're gonna do is we're going to download and purchase the divi theme so let's go on the left side you'll see users go ahead and click on profile now here you can change the color scheme of the back ends and just make it look a little bit you know nicer or your style oh that is ugly that is ugly so i like modern i think modern's a good one you know or midnight that's also a really nice one so go ahead and pick your color scheme and then scroll on down here we have email so make sure you have access to this email let's say you forget your password which a lot of people tend to do your password will go to this specific email address so make sure you have access to that email and you can always change it whenever you want and also for those of you who want to change your password on the bottom you can click on generate password and here you can enter in a new password for your wordpress website but i'm going to leave mine standard and then once you're done with all those settings you'll click on update profile okay next we're going to do is we're going to change the links of our website so we're going to make it look a little bit more cleaner and we're also going to make it more seo friendly on the left side you will see um i'm sorry you'll see where is it again we'll see settings sorry settings and then you'll see permalinks go ahead and click on permalinks so you have these common settings but you want to change this to post name and the reason why we do this is because you want it to display your websites like you know darrellwilson.com about us not you know 2021 you know this doesn't look good and this is a lot cleaner and looks a lot better for seo purposes so make sure you select post name scroll down and then click on save changes all right so the next thing that we're gonna do is that we're going to make some pages for our website so if you go to your website right now and click on visit site you'll notice that there's no pages there's no menu and there's there's it's just like it looks terrible we're going to make it look a lot nicer go ahead and click on dashboard and under pages click on all pages now these pages are created by default when you install wordpress and you do not need these pages so to delete a page you can click on trash and click on trash okay so let's go ahead and create a page on the top you'll see add new click on add new okay and where here we have add a title so this will be our home page right so home and now we'll click on publish at the top right and click on publish alright now we need to make the about us page let's click on the wordpress icon and click on add new next we'll make our about us page so about us or about you know either one you know about or about us same thing right you know click on a publish and a publish and let's do that two more times for the services and the contact us now you can make as many pages as you want you are not restricted in any way so go crazy you know go crazy here we go services publish and publish all right so we made the pages now we need to create a menu for our pages let's go ahead and do that on the appearance section you'll see menus i'm going to click on menus so we don't have a menu right now so this will be main menu for website look at that i was already messing around with this earlier as you can tell i mean i had to remake the website uh here uh on the right side you'll see create a menu i'll click on create menu and then under the pages on the left side you'll see view all let's click on all the pages here and then i'll click on add to menu so you'll notice we have the pages however for this home page we have this custom link now we don't need custom links a custom link is basically a link to anywhere on the website so for example you can put this to like a gofundme account or something and then you can link the gofundme link there and then that will display on the menu so the custom links are just links to pretty much anywhere it doesn't even have to be your website but i'm going to remove this custom link so i'll remove that and then i'll rearrange this menu so i'll put the home at the top and the contact us so that looks good right the home the about us services and the contacts now on the bottom where it says display location i want to click on the desktop horizontal menu and then click on save menu so now let's take a look at our website and see what that has done so on the top left i'll click on visit sites and there we go we got the home page we have the about us page the services page and the contact page pretty nice this theme is really ugly you know i don't even know why they made this thing hopefully 2021 will be looking a lot nicer i'm not really sure why why they made such an ugly looking theme so now that we've created our pages we want people to go to our home page when they visit our website right so let's assign the home page as the home page on the top left you'll see this customize button go ahead and click on customize now we will come back to the theme customizer and the divi options a little bit later in the video but all you need to do right now don't panic first off go to the bottom of the home page settings and then under a static page you want to select the home page as home duh it's pretty simple right so that's it so homepage is home and then on the top you'll click on to publish and that's it your changes are saved so let's click on this x icon and this is the first page that users will visit when they visit your website so you'll see how this says divi theme tutorial and if they go to it it'll bring them to our home page that is pretty cool the next thing that we're going to do is we're going to purchase and install the divi theme now i do have a 20 discount code for all of you watching this video you're welcome so you'll open up a new browser or you can go to my website durawilson.com i think the link's in there somewhere but i'll leave the link to purchase divvy in the description below of this video if you want to receive the 20 off discounts so you'll type in daryl wilson oh okay cancel my name guys so darwilson.com divi 20. and there you go you have 20 off so this will give you 20 off the divi theme uh let's go ahead and purchase divi's get the discount while the supplies last so we have two options and we have the yearly access and the lifetime access now i want to go ahead and say two things before we go any further is that no other company offers lifetime access and in fact divi is probably one of the only companies out there that offer lifetime access and i have lifetime access so i would go ahead and purchase a lifetime access now second off is that i already have the lifetime access and there is a 30-day money-back guarantee for any reason if you just say hey darryl this video sucks this theme sucks you can go and get your money back so that's a it's a win-win for both of us because i do get a small commission if you guys do decide to purchase this helps to make these tutorials for you for free we have two options again you'll go ahead and select either one you have the yearly plan or the lifetime access usually what happens guys is people purchase the yearly and then they upgrade to the lifetime that's usually what happens so once you go ahead and purchase it you'll click on sign up today and then you'll go through the process you know of creating an account and putting your credit card and all that good stuff and you'll see at the bottom they have a lot of positive reviews on trustpilot elegant themes is a very reputable company they're not some fly-by-night company these guys have been around for a long time a very very long time so go ahead and purchase the uh the theme and then i will meet you in the account page all right awesome welcome to the divi family so this is the members area where you can access all the products now when you purchase divi you get access to a lot of other products you get access to the divi theme which was what we're going to use you also get access to the divi builder plug-in now with the divi builder plug-in is is essentially you can use any other theme that you want and also use the divi builder so you can use a different theme and use divi to build your pages if you want to go that route and then also you have access to bloom which is one of the best email opt-in plugins you have access to monarch which is another plugin which allows you to display social sharing in a very professional manner and then we also have divi's younger brother extra which um you know it's it's it's fading away you know but it's still there there's still light we still love extra it's just a theme for uh blogs and you know it's it's still there you know it's still there it's still trucking so good for you extra good for you on the section where it says divi theme and it says download the divi theme go ahead and click on download the divi theme and save this file now what it's going to do is that it's going to save a zip file to your desktop or your computer or wherever you're working on now let's go back to our website and go to our dashboard so now we need to upload divi onto our website we'll go down to appearance and click on themes and now we're going to upload the divi theme to our website on the top where it says add new i'll click on add new and here is a list of some free themes a lot of these free themes they're just like empty like kind of templates and although they look nice they're very limited on what you can do with them and that's hence why they are free so on the top you'll click on upload theme and you'll click on browse and now you'll want to go ahead and upload the zip file that you downloaded from elegant themes i'll click on open next i will click on install now okay awesome so we uploaded divi now in the middle you'll see activate go ahead and click on activate and congratulations welcome to the divi family you now have divy installed on your wordpress websites so if you want to see how your website looks now it might have changed a little bit on the top where it says my blog click on visit sites and you'll notice right away how everything looks a little different we have the home the about the services the contact looks a little different we have this footer which looks like crap don't worry we'll change all that a little bit later we have this default logo and we also have this sidebar on the right side okay so let's just take a look here so we have our website we have the pages we have our menu everything set up so in this next section i'm going to show you how to design your website using the divi theme go ahead and get your thinking caps on let's make your website look amazing let's go back to the video ready to now start designing the website using the divi builder so there's two ways to access the visual builder on the top you'll see enable visual builder and this will allow you to build your website on the front end also if you click on edit page there is also another button to use the divi builder on every single page see how on the top it says use the divi builder go ahead and click on use the divi builder or if you're on the front end click on enable the visual builder so next let's click on edit with the divi builder all right so they're just welcoming us to the dv builder we have nick roach was the owner saying hey i'll help you out blah blah blah blah but uh let's just click on start building and here we have three options we can build from scratch choose a pre-made layout and clone an existing page so on the left side click on start building what i'm going to do to help you all out is i'm going to open up my demo website and i want to compare and contrast and teach you how to look at websites and know how to build them with divi so here's the website that i showed you all in the beginning of the video i'm going to show you this website and then i'm going to help you understand how to look at any websites and kind of build it using the divi builder first we have this header a full with header module and then we have this three column row with three blurbs and then under that we have you know a two column row we have text text text we have a text module now this is a special plugin and we will talk about uh divi extensions near the end of the video that i make your website look really really nice but first off let's just go back to our website and just go stick to the basics so here we have some rows where you can add specific rows to your website so here you can add in a blurb for your first row and then for the second row maybe you can add in you know a call to action for a button and then if you want to move these elements you can go ahead and drag them with this icon and just drag it below it and there you go or i can do that over here as well just to kind of you know mess around with stuff i can also duplicate elements at any time with this duplicate button and then i can drag it to the other section like that so that's just a quick way on how to kind of utilize the drag and drop aspect of this builder but let's just create a full width section first so in order to delete a section you can go ahead and just click on this trash can to delete that module or if you want to delete everything inside of this row i can click on this trash can or i can go ahead and click on this trash can and that will delete the entire section so first if you want to add a new section you'll see this plus icon and you'll see regular specialty and full width i want to select the full width section and for this specific section i want to select the full width slider settings or the full slider module so we have the full slider and i'll click on check now this top section we don't need this so let's delete this so here we go we have this full section now whenever you want to access a module or design it you'll see this gear icon let's click on that gear icon and we have two specific slides however i only want to use one so i'll go ahead and click on trash and only have one specific slide let's click on the gear icon to customize this slide you can put anything you want i'll just put make something amazing and then for the button i'll do start now right or you can put it wherever you want you know start now or begin or something like that now i'm going to go to my demo website here and just kind of copy the text just to speed this up because i don't want to you know take too long typing everything from scratch because i've already i've already made everything you know paste that in there here i have learn how to create your own website and you notice how website is colored now there's a few ways on how to do that however what i just did was i just double clicked on the word and under the text color i just changed it to blue that's all i did so you can have multi-color text i mean right here i can change this one to red or something like that you know like something like that you know if you want to add some design and decor learn how to create your wordpress websites and then i'll go ahead and go to the design section and we have these other options right here so if you want to go ahead and design this specific slide you can use these to design everything now once you understand how to design one module you will understand how to design all of the modules also you'll notice that we have these little blue pencils now this is going to display for every module whenever you click on this little pencil divi will automatically bring you to that section so you can start editing your website as you want so for the title font i like poppins i think poppins is a very good font so i select poppins and then i'll do something like uh you know i'll do ultra light or i don't know light you can change the weight of the font see how it's very skinny like that or you can make it you know ultra light or you know however you want and you can align this text to different parts like that if you want to do that and then for the text size i'll change this to something a little bit smaller actually because i want the the middle part to be bigger so i'll leave it like that i think that's good and let's design the middle section now so for the middle section i'll click on little pencil icon i'll change this also to pop-ins however i want this to be bold i want this to be ultra bold and we can change the font style these are just decorations or designing the specific element so we can have this italicized we can have this upper case you can change the elements the alarm sorry the alignment of the actual uh of the of the the module and then we have the text size so here you'll see i can make this really big like that in fact you can even make this bigger than divi wants you to make it so i can put like 100 i could type in 150 pixels and that will make it even bigger now the reason why it looks clustered like this is because it's trying to work within this specific box so it's really like clustered it doesn't look good we can always change that but uh let's just let's just keep it simple here i'll just change this to something like uh you know we'll just do 65 something like that and for the letter spacing we can make the letter spacing wider now let's say look i don't know what i'm doing here i messed up how do i change this back to what i was doing before under every module you'll see these little icons so this little uh i guess it's a refresh this will change it back to where it was before so i'm just going to leave it there next we have line height so what line height does is that it adds some it adds some height in between the specific line so it just basically adds a little bit of space in between everything so you'll see here how we have 1.1 1.2 and i want to add maybe just like one you know one pixel of line height so now it looks a little bit more cleaner and nicer right and then we can add in a text shadow so if you want to add in the shadow see how behind we have the shadow like that you can kind of control the shadow like that and then you can control the actual blur of the shadow with all these options like that and i mean there's so much cool stuff you can do with divi i mean the the possibilities go on and on and on you can even change the color of the shadow so by default we use a gray but if you want to use like a a red or another color you can go ahead and do that that's just a quick little run down of the actual styling we'll come back to it a little bit more when we do the actual modules but let's go ahead and design this button so i can click on button right here or i can click on these pencil icon and that will bring me to the pencil or the button customization automatically so on the right side you'll see use custom styles for button i want to turn that on because i want to design this specific button so here you'll be able to change the actual button text size of the actual buttons by default it's 20 pixels but we can make it like 25 pixels you can also go ahead and change the text color of the button as well just by clicking on the specific colors now if you want a custom color you can click on this little icon and this can like you know you can get very technical with the colors that you want for your specific button um scrolling down we have the button background by default it's a transparent but if you want to add a background color you can add in a specific background color to your button i'll get rid of that and if you want to add a gradient to your background you can go ahead and add any gradients so you'll notice how on my demo website right here i added a specific gradient to my button now if you want to get a good color palette for gradients you guys can go to uigradients.com this website will really help you out with gradients so gradients by default guys i know every amateur loves them but they're very hard to carry throughout your website so let's just say for instance uh we'll just you know we'll just pick a gradient here i'll just click on a blue one and i'll just select the azure lane or something like that actually no that's that's too many we're gonna do there we go so what you'll do is you'll copy this color code go back to your website and under the actual first color i'll click on that i'll paste that in there go back to this website and i'll paste the second color code and click on that color and then i'll paste that in there like that so now you'll see how we have that same color palettes from the actual ui gradients website you can use that website if you want help with gradients because i know people like gradients and it's uh you know it's they're fun you know they're nice to have but again it's hard to carry them throughout the website so here we have gradient direction so you can change the direction of the actual gradients also we have the gradient type now there's linear and there's radial so radial just means the gradient starts from within the circle so you'll see here how it starts from within and linear is just basically like a linear style it's like it's like a directional angle and you can kind of change the start position and also the end position of the gradients you can even make a split color a button like that if you want to get crazy and creative you can go ahead and do that but you know there's so many possibilities on what you can do with divi it's just uh it really depends on what you're going for the color palette that i use for my specific website let's go and take a look here i'll just put that in there and paste that and then for the second color i have this one i'll copy that and then i will go back and just paste it in there like that so there you go we have this other option so we have a button border width so we have this white border if you want to get rid of it just go ahead and just take it off to say you know what i don't want a border but if you do want a border you can add a border to pretty much anything so you'll see how we have this border in fact i can't even make the border the same color as the actual button to make it blend in but i'll just get rid of it for now now also here we have the border radius and this just gives it a circular kind of style you'll see here how the the button gets this like circular style now since we don't have a border it's actually kind of like missing there so if you want to have like a like a total circle like that you'll need to match the colors and then just add a border radius or something like that you know something like that you get it so you'll just have to match the color with the actual button border because technically they're two different things but i'll just get rid of that for now and just leave that basic don't worry you'll get this whole layout later don't worry about it and then for the button font you can change this as well to like pop-ins and you can change it there like that so on and so forth so again once you understand the options for one module you kind of get it for all the modules now if you want to add a little icon to your button you can go ahead and do that as well so you'll see here how that little button pops up you can change the color of that button you can also change the placement of the button so the left side or the right side and you can also have the button show you know forever or only when they hover over it this just means the button will be displayed at all times and you might want to add a border if you do that because then it'll look like it's cut off and then we can change the alignment of the button so that's pretty much it for this specific module now we'll go through all these options a little bit more um when we talk about other modules because this is kind of a bad example to use it for the fullest slider module let's just go back to the actual content and then go to background so let's say you want to change the background color of your website you'll click on these little icons and this is the actual color so we can add a background color and you know you can add in like an orange or red or black or something like that to match the criteria of your website also if you want a gradient you'll click on the gradients and then you can click on add ingredients and then you can select a specific gradient for your website just like we did before so you can have a gradient background also if you want to add in a specific image which i think is the most standard you can go ahead and do that as well by clicking on the image icon so let's go ahead and add an image to our background so i'll click on the plus image now there are demo images for all of you in the description below of this video that you guys can download for free to follow along in this tutorial you'll click on the select files and then you'll see the divi images so you'll need to go ahead and unzip that folder and then once you unzip that folder you can go ahead and upload all those images to the website okay so the images have finally been uploaded now there's a few images i gave you guys all just for free like for example this one i think this is a really good one you know it just looks nice it looks very clean and it's like multi-purpose you know it kind of works for anything you know give or take or you can do something like this mountain look where you know you just want to have that like you know oh we're we're up here in the mountains and uh you know we eat goats or whatever you know you can have that or you can have something like this is which is like the default one that i had now you might come across images online that you love the problem is that sometimes it's too white and it makes your text blend in and it looks really bad and you can't see it so what we can do is we can add in an overlay so go ahead and click on the slide and under the design tab under overlay we can click on use a background overlay so now what we'll do is we'll just dim the overlay but you'll see how i have this black and or here we go color there we go and i just want to reduce the transparency on the right side we have this transparency we can just reduce the transparency we can let people know what we're you know we can let them know about the image but we just want to add in a very little like hints so people can kind of see the image yet also see the text at the same time so that's just a way on how to add in a background overlay to pretty much any image that you might come across on the internet all right break time so let's talk about my design tip number one for all of you building websites now when you're building websites you can use specific colors right however for your landing page for your home page whatever colors you introduce on your home page that is basically your color scheme that's your color palette that's your brand and you need to make sure that it's understandable right away so for example divvy for business okay business website and we have the colors now if i scroll down on this page you'll notice wait a minute wait a minute wait a minute the colors are all different now these colors don't make sense because on my home page you know why did i introduce this red that doesn't make a lot of sense let's take a look at my website so on my website durableson.com we have this black color scheme and we have this black white and red color scheme with this specific font and style right now if i scroll down on the website you'll see how we keep that scheme consistent so we have this black text we have this little abstract red gray black design and i carry that throughout the website i add in this banner here and i have this red button i'm keeping everything consistent you know i'm not adding any yellow i'm not adding any blue i'm just keeping all the colors here consistent on my website when you are building your website you need to make sure that you keep the colors consistent so you should have a color palette no more of maybe three to four colors no more than three colors anything more than three colors it just looks tacky so for example here i have this purple i have a red i have a yellow and now i've introduced this other color and then we have this other gradient it just doesn't make sense it looks tacky and you know if i'm someone who's building or if i'm someone who's visiting your website i'm not going to know what you're trying to do i'm not i don't know what you're trying to achieve here so make sure it doesn't look ugly guys remember just keep it consistent and when you are building your website just make sure that you're not adding in too many colors you know my my obvious tip is don't add more than three three color schemes or three color palettes so on my website you might see that i added just a white black and red color palette i did throw in the gradient as a wild card so this gradient at the top you'll see is another color palette that i used i use this more of a wild card i do introduce it throughout my website you saw on the top bar you saw it over there and i think i also added here on the bottoms i do have maybe a four color palette or four color uh palettes that worked for my website just keep that in mind and remember whatever colors you introduce on your home page that is your color scheme and you must carry that throughout the website this is a three column row right one two three and it's three blurbs as we do this i wanna just kind of help you understand like for example this next section this is a two column row right and this is a text text blurb and a text and an image that's it so let's go ahead and create this section next make a new section click on the plus icon and click on regular and i'll click on the three column row now the great part about this is that we only need to make one icon and then we can duplicate it saving us a lot of the hard work is i'll select the blurb icon so this is the blurb blurb is just kind of like i don't know i like the blurb icon you might want to use something else but i think the blurb is just easy to work with so what i'll do is just put in something here like you know business solutions and then over here i'll just you know i'll just actually just do this i'll just copy this paste right here there we go and then i will paste that in there like that now we can put in an image here however we can also use the icons that davie comes with instead of actually using a custom image i like using the icons more because i feel like these just they're very responsive they work well with divi and ultimately just makes things a lot easier uh go ahead and just select an image and we can go ahead and change the color of that image so maybe for this one i'll put in put in this building right here you know we'll put in the building there we go we got the building so and then we'll go ahead and go to the design tab so now that we actually have the everything done we need to just design it now i know it looks terrible but we just need to just give it some color give it some fonts and we're all good to go i'll click on this pencil icon and i'll do the pop-ins and i like the the bold here we have like the ultra bold i think that looks really good we can even do heavy as well i mean heavy also works and i want to align this to the center and maybe i'll change this a little bit bigger 20 right and then i think that's pretty much it so next we have the body text so the body text as well changes to pop-ins and i will put this as a light right or we can do like a like a light and we can also center that as well and keep it like that and then we can change the text of that as well and so on and so forth so that's pretty much it you know we just made our module now what i did here to be a little bit more creative and i want to kind of help you guys think outside the box here is under the text tab i kind of made a fake button so i just typed in read more and i bolded this so under here i'll bold only this one and then i added this arrow now let's say for example you want to link this somewhere within this box you'll click on this insert edit link and you can insert a url so i'll put darrylwilson.com i can open this in a new window when someone clicks on this specific link under this read more it'll actually take them to my website essentially what i did here is i just kind of created a button using text there's no right or wrong way to use a module guys however you can use a module that's what you know whatever whatever you're trying to achieve with whatever you want that's what works you know there's no there's no handbook to divvy it's just whatever you can think of that will work and i want to change this to black you know i want to keep this black like that so you'll see how this is now a link that we can use to pretty much anywhere we want also you'll notice on my demo website how we have these gray little bars now what this does is it just gives it some separation and it's too much white so the gray bars kind of helps it take away all of that white so to add a border to anything under the design tab you'll see this border option now we can add a border to the top we can add a bottom to the right the bottom or you know the entire box but i just want to only add a gray border to the right side so we can add in a small border like that and that's a little bit too dark so i want to just kind of reduce the transparency there so over here i can just reduce it just kind of give it like a faint look right not too much just a little bit like that and there you go what we can do next instead of having to do everything all over again you know i'm a lazy guy you know i'm very lazy so i'll just duplicate this module twice and i will drag this over there there it goes okay let's see we can do that again here let's do this let's see here oh there there it goes so if that ever happens guys you know i'm not going to edit that out that really does happen with me sometimes so it's just you know you just got to work around with it so next let's go ahead and say all right darrell well you added this little this little section here and you pushed it up how did you do that well let me just show you how i did that what i did under this section is i added a a drop shadow so under the teal section under the design we have a box shadow and i added a box shadow to it like that and for the actual sizing of this i made this a little bigger so i want to reduce this i want to increase this width here i just want it a little bigger you know something like that max width there we go something like that now one thing also is that sometimes these are too close to the ends so you can go ahead and just see you know it's i want this a little bit you know in the center there you might need to adjust things as needed while you're building this so now that i've done that so we have these three icons what i can do is i want to push it up here now this is a little advanced but this is where margin comes in so there's margin and padding so let me click on this gear icon just explain it to you really briefly about margin and padding so under the design you'll see i think it's under a spacing essentially what margin and padding is padding is creating space you see how right here we have the space and how it's making more space so padding is creating space above this particular icon if i do padding on the bottom it'll create space below the icon so now it's making more space below it if i add space to the left it'll create more space to the left and more space to the right essentially what it's doing is that it's kind of pushing everything away because it's too clustered and you want space like let's say for example i just want more space on the top here so i can just click on the gear icon under the design we'll go to the spacing and just say i want space on the top like that and you can do that for pretty much every single module 100 pixels gives it a lot of space now what margin is margin is saying i just wanted to start from a particular area so that's what margin is in a nutshell and you can even have negative margin with negative margin you can say well i want this mod to start way up here so i'm giving it negative 40 margin i'm just essentially saying i want this module to start minus 40 pixels from where i originally put it so that's what margin and padding is so we can use margin for this entire row here if we did it for one module we can do it for rows so i want to go ahead and click on this gear icon and i want to add margin to this entire row so design spacing now we have margin right so we have margin on the top but what i can do is i can add margin to the actual whole entire row and we can push it above it like that now you might notice also how we have this space and it's also kind of transparent as well from this top one but we need to add a background color to this first i'll go ahead and access this whole row see i'll go ahead and double click on this row and under the background i want to change this background color to white like that so now we have this white background you know we just want to make sure that uh you know it doesn't interfere with this top one next let's say okay we made this section congratulations now how do we make this section pretty simple right we have a two column row text text and blurbs text and an image under this little plus icon regular right and we have a two column row and we just say we said text right so we have text here i'm lazy here there we go there we go and then also we have this divider so we have text divider and text right we have text and i'll click on the plus icon and we have a divider and then i'll duplicate this text and then i'll drag this text below that one right there like that and also we have three blurbs so i'll just put in a blurb like that okay and then under this section we have text and then we have an image below that text see i want you guys to just kind of look at the website and say okay i know where everything goes we just have to design it so i know this looks nothing like this but literally all we do is we just change some fonts we change the colors and that's it so for example we have this section about us and then we listen and work carefully now for this section i'm gonna introduce you all to h1 tags about us and then i'll go ahead and just copy and paste this this text and paste it in there so with this text you'll see how we have heading one heading two heading three heading four heading five so i wanna change this to heading two okay there we go heading two and i want to leave it like that now when i go to the design tab you're going to see text right i want to design this text however we can have different text for each of these ones so usually you know since we have it in one box it would change everything but since we have the heading 2 tag we can now design this text independently from this text so for the text here i'll just change this to ultra light now you'll notice here how only the top is changing and that's because the text is default to the paragraph font so now let's say okay darrell well you know we we you know we change that how do i change this one well let's go ahead and close that go to heading text and we selected the h2 tag right remember how we selected h2 i'll go ahead and change this font now to something like ultra bold and yeah i mean that looks pretty good right i mean i can you know maybe increase the size of it so heading text h2 and uh let's make that a little bigger like that so that's what that means under the text section where you see the h1 h2 h3 and all that different font and a different size for every h tag which is pretty cool all right so now that that's done we'll click on this and this is the divider guys a divider essentially adds space in between certain modules i'll just go to the design and just under the line uh we can change this to blue because i want to carry that blue and under the sizing i want to make this little fat you know a little fatty here we got a we got a fatty that offends a lot of people today i shouldn't use that word anymore it's like people on the internet take everything offensive and it's like well it's a fat line you know i want to reduce this width you'll see here how i just kind of reducing the width like that and that's pretty much it and here we have the max that i'm sorry the minimum height and then we also have the height as well so essentially what the height does guys is we're just adding height above it and below it that's essentially what a divider module is supposed to do however i'm just using it to add decor to the website because i just don't want all that white everywhere and i want to create this divider to kind of you know help people understand you know what i'm trying to do there so that's basically how we add a divider and again i can always adjust this like that and also the same way as well so it's kind of hard to kind of get to all these modules because a lot of them get in the way of each other but you guys get the point now let's just say for instance i want this you know i want to make sure that i want to reduce the space here and maybe this module is like the max space you can add you can always add negative margin so remember design spacing and i want to add negative margin to the top and negative margin to the bottom like that just to give it a little bit more space something like that you get what i'm saying so that's where margin can come into play kind of forces everything to work together now let's go back to here and i'll just grab them some demo text all right copy this and you know paste this paste there and then like that and then i can just change this text to pop-ins and i think ultra there we go that's good all right that's good just light that's good so now we have this section now what i've done on this website is you see how i have this orange red and green i kind of use that as a color palette so with colors on your website guys you probably only want two maybe max three color palettes however i'm using this as a specific color palette so i'm just getting a little bit more creative so let's just say if i introduce this color on my website i have to introduce it again somewhere and i did so i introduced it right here as well and i also introduced it on the other pages that's where you want to keep the colors as consistent as possible there we go so i have this little module and what we'll do is just go over here and you know i'll just put in what did i put there we bring quality experiences and then you know i can just you know you guys get the point and then for the design i'll just add an icon but i want to place the icon to the left here so to the left like that you know now you'll see how we can change the blurb to you know a different style because up here this is more for like introduction of a service this is more for something where we're just trying to add you know decors and features so i have the icon on the left side however under the content section i'll click on the image and icon and i want to use an icon here and again we can just use any icon there we go like that and then for the design tab we can design the color of this so i can have it blue also for the um there we go the text we can change this to poppins right so i think the blue little uh pencils really help you find everything because it is kind of hard to go through all these settings and find each particular one so just clicking on that blue little pencil really speeds up the process of building the website i'll change this to something like ultra bold and then over here i will also change this to pop-ins and make this light so something like that and again we will come back to the image filtering a little bit later the image filtering is really cool so we'll come back to this a little bit later and i just want to duplicate this and then we can just change the actual color of the icon and so on and so forth now this particular module right here this is created by another plugin called divi next and i will have an exclusive discount for all of you watching this but essentially what this module does that it allows you to like have some really cool stuff on this website you'll notice how if i click on the plus icon i have more modules and this is where we have the divi third party um the divi third party extensions come in which i'll talk more about a little like at the end of the video but the the extensions just they just add a lot of stuff to your website and it just makes your website look really cool next we have this placeholder image and i want to click on this gear icon and i just want to change this image i'll just grab an image from one of these here so i'll just grab in this one and upload an image so i did talk about the image saturation i did talk about the filters of the image so let's go ahead and apply those now to this image now that we have a good image to work with i'll go to the design tab and then we'll find the filters so with the filters essentially what this is is like you have a built-in photoshop you can just kind of change the saturation the brightness of everything which is really cool you can change the contrast so you can go ahead and mess around with all these settings now personally i am not an expert when it comes to you know photoshop so these are just some things that you can do like you want to blur stuff but i'm just giving you an example of how you can apply filters to specific images so next let's talk about how to make this section we have this header section we have a text and we have a four column row right we're going to create a one column row and then we'll create a second row with four columns so one column and then four columns and then we also have another one column row underneath that four column row so let's just do that so here i'll click on the regular rights click on one row text right we got it and then what i can do is i can under the plus icon under the teal a lot in a four column row and i'll just add in a blurb just you know just to just to help us understand what we're trying to do and then we have a text one below that now the reason why i'm doing this like this is because i just want to help you all visualize what we're actually trying to achieve and i'm just trying to give you some ideas now the reason why i'm not going to duplicate this is because we haven't edited it first yet so i want to edit it first and then i want to go ahead and change it i did forget the divider model didn't i under this plus icon i'll add in the divider module like that first things first under this icon i can go ahead and align this to the center like that and remember earlier how we use the actual paragraph and the h2 tag we can do the same thing here because remember this text is different from this one now i'm kind of lazy guys i'll be honest so i'm lazy so what i'm going to do is i'm going to just duplicate this section here right i mean why work hard twice guys why why you know i'm lazy we're all lazy here and i'll just drag that below that and for this section i'll just align this to the center and also for this one i'll double click on all this and i'll align this to the center as well so i'll delete that april fools yeah we're not using that no more and for this one why should we do that again we can just you know duplicate this all right and then i'll just drag this to the bottom here and i want to align this to the center oops wrong one so sometimes you might have problems clicking on a module now if that ever happens there's a few things you can do i'll click on this purple icon at the bottom and right here we have this little brick or i don't know what those are we can click on that and this kind of displays everything about what we're doing we have this section row and we have two dividers here so i'll just go ahead and delete one you know i don't need two but this is how you can kind of visually see your website from like a block standpoint you know what's funny uh about a year and a half ago two years this was the only way to build pages with divi they didn't have a front end builder so that was version before 3.0 and that was a long time ago i'll just uh align this to the center i believe this is under the let's see under the sizing is it the module alignment there we go the center like that and also you know we don't need to really you know i don't really want to do this all over again so what i'll do as well is i'll duplicate this module and i'll just drag it to the bottom and just drop it in there now i have this background image so let's go ahead and add in a background image here i'll go over here and add a background image there we go and then i'll click on that now we might need to change these to whites now instead of having to do that all over again or even duplicating it i can copy this module style and i can paste it on other modules so what i'll do is i'll right click and when i right click over a module you'll see certain things you'll see split test save to library all of this stuff however i can click on copy module styles and i can paste it right over there like that and paste it and then paste it again like that now the reason why it didn't change the read more is because the read more i actually use it through the text editor so i'd have to go ahead and change that manually but that's just an example of how you can go ahead and copy module styles from other places and bring them to somewhere else now what i did here is i just added a drop shadow or i can even add in a black background and i just made it transparent so there's a few ways on how you can achieve that so for example for the first column here i'll go to the design tab and under the backgrounds i just want to add in a black background right and i can just make it very transparent what i'll do is just make this very transparent like that you see how i did that now also you might notice how we have no space remember how we talked about padding before how we want space above and below now's a good time to exhibit that so for the sizing here let's see where it is where is it here the spacing here let's add some padding of 10 pixels to the top right and then we also have 10 pixels to the bottom so now you can see how we have the the padding and now you can visually see where it should be applied it's just a really you know a good way on how to you know add padding and everything to your website i can even add more here maybe 20 pixels is good now what i also could have done is i could have added a box shadow around that specific column as well so let's just say i wanted to add in something like that or like this you know i can always add in some sort of design and decor to it it's really up to you you know i like box shadows but just be careful don't add too much of them because it's a quick way to make your website look really tacky so now that i've added that little background over it i can go ahead and maybe uh change this specific column to the left side you'll see here how i have this column to the left and i'll show you how i did that what i did to achieve that is i actually changed the actual size of the column i'm sorry the icon for the image icon placement i left it at top i put it to the left side now we have this option right here to use the icon font size and i just made it a lot more smaller something like that and for this text i actually put it to the left side here so i put it to the left side and also i put this as well to the left side so there's really no right or wrong way to do things that's just how i achieve that now instead of doing this all over again i can delete these and i can just duplicate that module so that's essentially how i achieved this section right here so you can kind of go through ahead and mess around with it it's the same thing you know it's just some small adjustments i need to make but overall that's how i achieved this specific section so let's talk about this section right here now this is pretty simple and you guys probably know how i did this already because we already introduced it to you earlier and this is a testimonial icon i'll click on add a new section regular one row and we have a testimonial so testimonial i'll just put in like the author names like jennymc and then she's the ceo of uh i don't know ladies gym ladies gym something like that and then for the body paragraph we could put some text here and then for the design we can go ahead and design all this now remember you can just hover over something and just click on it and then you can adjust whatever you want there uh that's just a quick one how you can you know design everything and just you know make your design for a little faster now for the image i'll just go ahead and get rid of that image and put in this woman like that now again you can design this and maybe even want to add in a specific background image like i did for the actual background under this section i'll put in a background image and i believe i added something like this here there we go like that i'll go ahead and delete that actually no i think that actually looks better there we go or something like that actually yeah i think that actually works out and then i also added a drop shadow around this whole specific row so under the gear icon for the design a box shadow like that so now let's say all right well you made this section darrell let's just go ahead and move it up again i'll just move it up so gear icon here i'll go ahead and click on that to get rid of that there we go like that and then for the design uh under the spacing section i'll do the same thing again so i'll just give it some negative 100 pixels there we go and then i need to make sure that this background is white that makes it so people can actually see the actual you know the white background color like that so next we've done that section we have this specific section we have this section which we've already created we have text and we also have a button and then we have these modules which these are just blurbs and they're just designed differently than we normally did so let's go ahead and make that next section first let's go ahead and just say you know what i've already done that hard work let's duplicate this section but first i need to introduce a regular row and over here what i've done is we have one column two columns and three columns now if you ever want to see how many columns that you have you can click on this column row and it'll show you the columns and the formats you can actually change that as well so for example if you want to change it you can click on it and it'll change everything inside of those specific modules to adjust to whatever you want to put however i wanted to go back to that like that for this section i'll click on that little uh row or column whatever you want to call it and then i will drag this put this in there right and then we also have a text like that but maybe that's too much text right something like that now for this text we can't see it because it's white so if you want to change the design we can change it to black right black and then also we can change this there we go there to black as well just so we can see it so now that we've actually copied this what we can do to speed up the workflow is we can actually save certain modules to the library so let's say for example i need this divider module right but i don't want to copy it and i don't want to bring it somewhere i just want to kind of save it and just use it to other parts of the website so we have this little save button and we can add this to the library so this will be our divider module and i will save this to the library so now what i can do is i can go ahead and click on the plus icon and i can add that from the library instead of having to duplicate it and bring it everywhere you know all around the website essentially you can make certain modules add them to the library and then you can just kind of use them throughout the website i want to go ahead and maybe push this to the left side so all this to the left side you know i think that's uh you know it looks better like that this one as well i want to push this to the left side it's kind of hard for me to remember where everything is all the time guys so you know my bad if i make mistakes it's just hard to do this because i'm not on a script now that we've actually made that specific section we need to make the button so we want to make something like this however for the button we will have to make one from scratch because that module is part of another module and we can't use that specific button what i'll do is click on the plus icon and select a button like that and then i'll just select it right there and there's our button now let's just say for example you have other modules later on and you don't want to go through every single one and you don't want to change them what i'll do is i'll go to this plus icon and click on button now there's a few ways on how you can kind of achieve this little trick i'm going to show you how to do i'll teach you this later but i just wanted to kind of give you a crash course about some of the advanced features so again what we can do is i can just go ahead and copy this module style and then i can paste it onto this module style and therefore it'll change it to you know however i want that to look also we can use the extend styles so i'll go ahead and right click on this and go to extend button styles so what this is going to do is that it's going to take this same design of the button and apply it to all the buttons on this page this section this row or this column so i'll just say this page and i'll extend the styles so now it's going to find any button on this page and change it to that specific style it doesn't change it to this button because this is part of the full width slider module it's not a specific button module so that's just some you know just a crash course on some of the advanced features that come with divi it's really really cool we'll talk more about all those features a little bit later in the video so now i have this section here and this section is just a blur so i just added a image and some text and what i can do is i can actually just go ahead and copy this module or even add this to the library so this will be the new blurb see blurb icon blurb icon and save this to the library and then we can go ahead and just you know i'll put in a four column row here and add this from the library and now we have the blurb icon now essentially what i did is i just added an image instead of the actual um icon now one thing to note is i might want to go ahead and change this to black let's go ahead and experiment here i'll go ahead and copy this module styles and see if i can paste those module styles here so here we go does that work no it doesn't work it has to be the same module guys so i was i was hoping it would because it would save a lot a lot of our time but what i'll do is just change this to black and then also here i'll change this uh you know the text to black as well and then there you go and then also we have that little read more but whatever that's fine all i did here is instead of using the blurb i just used an image so for the image and icon i'll use an image and then i put a picture of like the women here right so we have a picture of the woman and then what i did here is i added a box shadow around this specific column for the green row under the gear icon for the first column under the design i will add in a box shadow to it something like that and also now that you guys know about what padding is i want to add some padding to the top right because you see how everything's scrunched together i want to add padding so let's add some padding to the top right there like that and there you go and i can just duplicate this module and so on and so forth so duplicate it put it there duplicate it and then put it there like that's oh wait but here we go sometimes guys it gets glitchy just kind of you just have to drop it and it's like a game you know just gotta you just gotta drop it and hope it works out like that so there we go now uh also i have to add in the drop shadow to all four columns just to make sure that it all looks good for column one for the design under the um here we go for the box shadow right and then for design column two we have yeah so what i can do actually is i can just copy this row style copy autumn styles and then i'll just paste the item styles here like that there we go paste item styles now you'll see how they all look the same okay so next let's add a call to action on your website call to actions are very helpful and you've probably seen these on various other websites it just adds a lot of navigation to your website it tells users where to go and you can link them to pretty much anywhere you want your contact form let's go back to our website and let's now create a call to action section so first i'll hit on the plus icon and click on regular now you've probably already seen specialty it's just a different style and way you can add different sections now that's what specialty is i don't really use it too much i don't really find a big reason to use specialty but i'm sure there's a reason for everything if you want to add specialty sections you can go ahead and do that but i'm just going to add a regular section and just put in a single column row and i'll type in text okay now i don't really have to edit everything all over again in fact what i can do here is just take this and duplicate this right and then maybe even just drag this down and just use this section you know just add it there and then center align this and i'll hit the plus icon and here i'll type in a button like that and then you can put in the link so this can go to like darrylwilson.com or something like that right so durawilson.com and what i'm going to do here is remember we need to be smarter here we don't want to work too hard so there's a few things i can do here i can copy this element drag it or i can copy the module styles and then i can paste it here instead of having to do everything all over again something like that right and then i can center align this as well by going on the design tab and on the alignments i will center align this now we need to add an image on the background i think that's the only thing that we need to add what i'll do is under the gear icon for the section settings under background i will oh no not color we'll go to an image and we'll add a background image now i did give you the image for this specific background as well it's at the bottom here is this little mountain and i'll upload this image and there you go now the only thing that we need to do is probably change this text to white and i think that's pretty much it alright cool so i uploaded that image now i might want to add a specific overlay to this background image because it's kind of hard to read this text since we have this white mountain so what i can do is if i scroll down i will then see the background image blend so click on that and there's a various ways you can blend it in but i'll just click on soft light now once i click on soft light you'll notice how everything disappears but also need to do is click on the background color and i need to add a specific color for that color blend i'll click on the plus and i'll select black so now i have this black background but what i want to do is click on this color and i want to reduce the transparency now so now you'll see how it kind of blends in really well and it just looks great so something like that and then we click on check and then there you go now if you want to adjust this section i can adjust it like that and also like that as well and you can make this text bigger or smaller just depending on how big you want your call to action to be don't make it too big but something like that is pretty cool so next let's go ahead and create this section here which is a very unique section you'll notice here how we have this text and it's also overlapping however it's this kind of circular style which is really unique so let's quickly go ahead and create that and we are pretty much done with our homepage so add a new section regular right normal text and i'll just paste in some demo content and i'll make sure that center align which is good right so i'll close that now i might want to actually reduce the size of this whole column it's it's a little big you know so what i can do is i can reduce the size of this whole column of this teal column so what i'll do is i'll click on this gear icon and for the design tab under the sizing what i'll do is for the width i'll change this to something like 65 and then for the max width i'll make this 614 pixels so a little bit smaller just a little smaller so if i hover over it i'll click on check you will then see how the whole column gets smaller and that's what i want because i want i don't want the overlay to be too big when i push it up so let's go ahead and continue under the gear icon i'll click on that and for the design i want to add a border radius so remember a border radius you can use for everything it just gives things that circular style so for the border i'll add let's see 26 pixels around the whole uh module and you'll see how we have the borders now you can kind of visibly see what it looks like and then for the content background i need to actually give this a background color of white so i just want to make sure that when it goes up that it doesn't like fall in there and and you know it shows the background so i added in the background now let's push it up that's all we got to do so for design we have the spacing i want to go ahead and give this negative margin of maybe minus minus 60 that work minus 60 pixels nope a little bit more and perfect we'll just do it at like maybe 85. now there's one thing that we're missing and we're missing a box shadow the box shadow just kind of adds emphasis around this whole section so click on box shadow and i'll just add a box shadow and we can add different styles so that's how i achieved that specific section i did post that in my facebook group and a lot of people were asking me like how did you do that daryl and i was like well you just gotta think outside the box there but let's go ahead and make this last section which is pretty simple add a new row five columns and i just added an image i mean that's it that's all i did and then for the image i just added in one of these demo images and that's it you're done and i can just duplicate this right one two three four five and congratulations guys you are now done with your home page you made it this far go get yourself a beer my favorite beer is modelo so at this point i think you're very familiar now with the builder and it's really up to you to kind of you know make the step and just explore other modules seeing how you can improve your web design process all right party people welcome to design tip number two now i want you to tell me what's wrong with this picture or website so i'm just gonna scroll down and i want you to visually look at it and say okay what's wrong with this website we have our landing page okay the next section we have welcome to royal and we have this picture of fruits or vegetables okay and then we have fresh ingredients tasty meals what's wrong with what i just showed you all well you might notice that i used a different font for pretty much every section so i have one font here and that font obviously it's it's unique and it works right but now we have this other problem is we added another font and another font and if i scroll down here we added another font and we have this different font when you're building your website you need to keep the fonts consistent now a general rule of thumb is to have two fonts most don't go more than two fonts so you can have a font that introduced your heading tag and you can have an additional font that introduces the smaller text for example i use roboto and a lot of my faller font the smaller fonts and then for my larger fonts i use poppins bold so you can get away with two fonts however you want to make sure that you don't use a large amount of font because then your website just looks tacky i mean we have only quality food and then we have this welcome to royal and then we have this other one it's just confusing and it just looks tacky and ugly so when you are building your websites make sure to stick to around one to two fonts and keep it consistent on my website you'll see that we have this uh poppins bold is my h1 tags or h2 tags and i'm just consistent i mean you can click on this blog post here and i use the same font as well and i use a different font for these smaller text okay so that is a general rule of thumb a lot of amateurs they like to add multiple fonts but just be mindful that it will turn your website into a complete disaster if you add in multiple fonts guys so you don't want an ugly website keep your fonts under two fonts well now that you're all professionals let me quickly show you how to import the other pages along with making sure your contact form is working on your wordpress website in the folder that i gave you all that you downloaded if you open it there is the about us there is the the divi header the services and all these other pages you can go to your pages and open it and then you can enable the visual builder and you can basically drag and drop this on every page to make sure you get your layout and everything is working the way it's supposed to i enabled the visual builder on the about us page and then i'll just drag and drop the about a section replace the existing content and import the divi builder layout you can do this for every page all right and there we go we have the about us page and everything looks great so go ahead and go through the other pages and you can import them all on your website and there you go there is your free layout you're welcome now let me go ahead and show you all how to make sure that your contact form is working on your website first let's go to the contact page next i will enable the visual builder all right we have these three options so i will build from scratch click on x i will find the contact us page and drag and drop it then i will click on import divi builder layout and there we are so now you have this beautiful contact us form you are welcome now this is the contact form module you can get to this module by clicking on the plus icon and typing in contact form and this is the module that you need to insert in order to have a contact form however this layout already includes it so you don't have to do that this is the actual contact form module the contact form settings includes any field so you can have one for name email message phone number fax machine and whatever else you want to have on your contact form the contact form for elegant themes is amazing there is so much you can do with it you can have conditional logic and there is a lot of things that you can have on your contact form i do have a video on the contact form it is a little old so i will be updating it but i'm not going to go into detail on this contact form because there is a lot to talk about with the contact form however i just want to show you right now how to accept emails from your contact form in case you want to use it on your website which i think most of you will once you open the actual module you'll see these options click on the email and then for the email address just put in your email that's it so i'll put in my email address now we can also set a redirect so for instance let's say someone fills out your contact form after they hit the submit button we can redirect them to another url like a thank you page or a terms and conditions page or any page that you want to have users go to after they fill out the contact form but i'll be saving a tutorial on the contact form for another video because again i want to be very thorough i just didn't want to make this video too long because i can easily talk about the contact form for another 30 minutes and then you'll click on the green check and click on save and that is it you are done so now when someone goes to your contact form and fills it out it should go directly to your email inbox on the right side we have this google maps this google maps is essentially an embedded form from google maps you'll see that this is just code from google maps and i'll also show you how you can quickly add google forms or google maps on your website okay the first thing you'll do is go to google maps and you will enter google maps on the top left where it says search google maps you'll just put in your business address or whatever you want people to see on your contact us page i will type in the red rock mountains near nevada and i'll click on the red rock canyon national conservation area i actually used to live right here and these mountains are just beautiful i mean the red rock mountains i mean i hate to go off topic here but for those of you living in the united states you definitely have to check out the red rock mountains they are beautiful and there is tons of hiking i mean look at the multi-color here it's pretty it's pretty wild so now that you actually have the address of whatever you want to have so your business or anything else where it says share you'll click on the share icon and you'll click on embed a map you will then click on the copy html and then go back to your website and for the text under the actual text element you'll click on text not visual and you'll paste that in there right there and then click on check and there it is so now you'll see the red rock canyon national conservative area and then you'll see the uh no conservation area area whoops so you'll see the the location and then you can click on save and that's how you can show people uh where you are at or where your business is located on your website all right party people welcome to another quiz so this is gonna be design tip number three and i get this common mistake with a lot of amateurs building websites so i want to visibly show you what i'm talking about and show you how to fix this problem just in case you add this to your website which a lot of amateurs tend to do i get a lot of people in my facebook group asking me hey girl i just made this website what do you think about it and i get this problem quite a bit with a lot of amateurs so let's just take a quick look at this website and then try to understand what we did wrong here so let's take a look we have the landing page looks good and we have the secondary section welcome tutorial with a picture of some vegetables and then we have the third section which is just some text and another image what is wrong with this website well if you guess that we have too many background images you're absolutely right so a common mistake that i see with people is they don't know how to introduce new sections so we have this image in the background which is good however when you introduce a new section it's very safe to have a color and image so just remember this color palette image color maybe another color and an image so maybe do like two colors and an image so this background should be a solid color there's no reason why it has another image with another image on top and then on top of that we have a third image so at this point i don't know where the website's going i don't know what it's doing it's just all over the place so let's just take a look at a layout elegant names created and follow their design uh criteria so they introduce their landing page with an image right that makes a lot of sense and then they added the secondary section with just a standard color in the background that again makes a lot of sense and we have this third section which they've also introduced another color and the reason why i like this is because they've made it this faded color so as someone who's navigating the website we know that it's a new section right because if this were white as well i would be confused i'm saying well is this part of this page or is this part of this section or is it part of this section so since elegant themes added this very faint color it basically distinguishes and tells people this is a new section to the visitors and if i scroll down now you'll see how they started to add in different images so they could have even added a background image but since they've already added images to this section they probably felt like let's not add in more white let's add in a black color palette but let's just introduce some images here to take away from all this white because there's too much white at this point because if they were to involve a third section with all white the website would look bland and boring right so let's keep scrolling down here all right we keep scrolling down and now they've also said okay let's just go back to the basic color right let's just go back no more images let's just you know stick to a basic plain color and scrolling down here and again they they stuck to another color you'll see how this is a white color on the top and then this is another like i want to say it's like a darker white but the overall purpose is they're just telling the users that this is a newer section and they haven't changed the color palette they've just kind of tinted it just a little bit to let people know that this is a new section so i'll scroll down and then they decided okay let's add it some images because now we've added in too much whites so let's just take away from all that white by adding in some images on the background and then that would be the end of the website with the footer so just remember that when you are building your website you want to introduce specific sections with specific colors and styles to tell your visitors that this is a new section and that this is something they should look forward to so if i had this all as a white background it would look bland and boring however if there's too many images the people would be confused saying okay image image what is going on here this is too much so even on my website we have this image we have this color palette now you notice also right here we have this second section now i added a very small tint of whites but you've also noticed how i've reduced the the strength of this color because i didn't want to introduce the same strength of the colors twice because the website would look um it would look um repetitive at that point so i have this section and then i'm saying okay darrell look i have too much white let's introduce some black you know to kind of take away from all that white and now let's introduce a new section so we have this new section here however i took away from the abstract designs so i don't have those little red things here anymore because it was too much and i just want to take away from that design so i want to have every single design distinct and then here i added in the black however i added in these little designs again to kind of remind users that this is my brand and this is my style just so they remember okay i remember the designs and then we finished it off with a footer at the end so just remember to incorporate different designs and different styles for every section do not add too many images and also do not add too much color and if you do add color make sure you just introduce a tint of something to just take away from all of the whites or to you know not make it look so bland and boring that is a very common mistake i see with a lot of amateurs but uh now that i've told you how to fix that go ahead and make sure you don't add that to your website that was my design tip number three and if you guessed right congratulations so congratulations your website is coming along pretty well now guys feel free to pause the video and mess around with the you know the builder check out some other stuff i know people like to kind of mess around with other stuff so you know go ahead and do your thing but in this next section i'm going to show you all how to use the theme customizer i'm going to introduce you all to wordpress plugins and then we'll also talk about the divi theme options let's go back to the video welcome back guys so in this part of the video i'll be talking about the theme customizer options the divi theme options and also give you some good resources on wordpress plugins and where to get a logo as well the first thing that you'll do is let's access the theme customizer first on the top left you'll see my blog and the theme customizer you can also get there by going to your dashboard and usually there's this button here that says customize your site that's the same thing so it brings you to the same exact place so the theme customizer generally controls parts of the website that the page bowler normally does not to be very honest i don't use the theme customizer a lot with page builders i feel like the theme customizers are becoming a little outdated the only thing that i would use on the theme customizer is probably the header navigation to design the menu and then just the home page settings which we did earlier i'll first go to general settings and go to site identity now for the site icon you might want to add something there you'll see how on the top right here we have this like icon and an icon if you want to add your icon to browsers you can select a site icon so under media library i'll just grab a picture of this logo and click on select and just use part of that on the right side you'll see how this now is part of the browser icon so if you want to add a site icon you can do that from the theme customizer let's go back here and under layout settings this is again where you can just control the layout of your website so if you want to have like a box with which is kind of old school but i think a lot of you know i don't know i don't know if people do that or not it's uh i don't know i think that's like uh back in the 2000's right but uh you can enable a box layouts uh under the header navigation tab this is where you can customize the menu for example the primary menu bar you can make this full width you can change the text size the menu height and all the options to customize the menu are in the primary menu bar section next we have the secondary menu bar for example if you have a drop down menu you can design the drop down background or you can design the font of the actual drop down menu as well now i'm not going to go through all these options personally i think you're not going to use any of these you're probably only going to use the home page settings but you can just check these out see if these apply for your website but for most of us i don't think we're going to use the theme customizer too much only for maybe just the actual menu so let's move on to the divi theme options i'll go ahead and close this now when you install divi on the bottom left you'll see divi and you'll see theme options the divi theme options allows you to upload your logo it enables smooth scroll a fixed navigation bar and other cool various options i'll scroll down and let's say for example you have those social media icons at the bottom right of the screen on your website you can enable those or you can disable those if you want to do that a really cool feature that a lot of people overlook in the divi theme options is the smooth scrolling which i love if you enable the smooth scrolling it allows your visitors to have a smooth scroll effect on the website like this instead of having it jagged and something like that the smooth scroll effect i think makes your site look a lot more professional and it just feels good from a visitor point of view you can enable the back to top button which on the bottom right of the screen on my website you'll see if i click on it it brings users back up to the website so the divi theme options it just has other various options and styling things that you can add on your website that just make it feel better and just you know give it a little bit more emphasis on design now if you need a logo i recommend going to fiverr.com i'll put a link below to fiverr.com personally i've seen videos where they recommend free logo makers but guys if you're really serious about your business you wouldn't mind spending you know five to ten bucks on a logo to make yourself look really professional because personally if you're using free logos it's just something that you're not really gonna attract people with but if you just spend like five to ten bucks on a designer to make a really nice logo you can go a lot farther than that with your business and just remember a logo is a representation of you and yourself so if you have a great logo that looks fantastic people will like it in fact i got my logo from fiverr.com so my logo on the top left you'll see i got that from fiverr i found a designer we worked together i paid it more than five bucks obviously i paid them around 50 bucks but i think it was worth it i like the logo and i'm really happy with it so make sure to check out the divi theme options you might find some options in here that apply for you and your website next let me talk to you about wordpress plugins if you go to plugins on the bottom left and you click on add new you'll have access to over 50 000 plugins essentially what plugins are is they are applications for your website every plugin has a specific feature and there's pretty much a plug-in for everything i mean i have so many tutorials on plugins and all the features that they offer for example this one will actually reduce all of the image sizes on your website making your website load faster if you feel someone's trying to hack your website you can install this plugin which will limit the login attempts so that means if someone tries to log in 10 times it will ban them from trying to log in we have this one which is a caching plugin and this one as well a caching plugin so there is a lot of plugins that you can have on your website and there's really no best plugin but there is a good list that i do recommend on my website therewilson.com under the wordpress resources i do have a lot of plugins that i recommend and page builders obviously divi is one that i do recommend these are other wordpress themes now popular wordpress plugins i think you would need an seo plugin for your website like yoast or rank math it basically makes your website look proper in the search engine and it just you know adds a lot of seo features for your website also something like translate press for those of you who are trying to make a multilingual website you can try translate press and uh ecommerce plugins uh best optimization plugins personally i would use wp rockets it's a paid plugin but you want to make sure you have a good caching plugin on your website so go ahead and check out some of the free caching plugins but again i would recommend wp rocket and that's the one i use scrolling down here we just do have some other ones and these are booking plugins so if you want to convert your website into a booking membership websites these plugins are the ones i recommend and i've spent probably years with trial and error on good and crappy plugins so i think i have a good understanding of what good plugins are and these are web hosting companies that i do recommend so be sure to check out the list of the resources i put on my website that's the end of the divi theme options and the plugin section of this video be sure to check out the resources tab on my website to make sure that you find some really good plugins for your wordpress website so now that you're all professionals let's go ahead and talk about mobile optimization which is a very important part of this video so you want to make sure your website looks responsive and good from all devices such as iphones tablets or androids or pcs or macs so let me go ahead and show you all how to optimize your website for all mobile devices let's go back to the video all right party people welcome to the mobile optimization section now we have a website here and it needs some help guys it looks terrible and we're gonna make it look a lot better in fact if we visit our website on various devices this website looks terrible it's gonna go ahead and optimize it for all of the devices under this little purple icon on the left side bottom left you'll see this computer you'll see a tablet right i'll click on the tablet now this is the view from a tablet point of view so i'll scroll up here and this is the view from a tablet and also i'll click on the phone and scroll back up and this is what our website looks like on a on the phone right so we need some help here now also on the phone view you can actively see what your website looks like on specific devices isn't that cool let's say you want to see what it looks like on an iphone 11 or a galaxy a6 and this is a new feature davey just added i mean those guys are just they're crazy over there i don't even know how they think of all this stuff first things first let's click on the desktop view and let's just change this really quick on the desktop view so i'll click on the gear icon right and under this little section i'll click on that and let's just change this you know let's just change the letter spacing here i'll i'll reduce it to normal zero again a little bit more right something like that and then i'll change the line height as well let's just clean that up a little bit right now when you edit these like texts or whatever editing you'll see this picture of a tablet and also a phone so let's click on the tablet device now so let's go back scroll up here it's kind of annoying how it keeps doing that to us on a tablet because now we select it to 80 pixels when you're editing your website you just want to say okay i want this to be maybe 85 pixels you know something like that and that looks good next let's click on the phone section and scroll back up we have a we have some work to do here first things let's just reduce the size of this text and let's change the height click on this pencil right and then for the text size let's reduce it you know let's make it a little bit more simpler right and let's change the line height let's uh there we go reduce it a little bit here i'll just refresh it to what it was before so i had it at 1.7 before right and yeah i think something like that is good right now this title text is too small now this text is you know it's good size but we need to change this one so i'll click on this and i'll go back down and under the phone icon i will increase the size of this something you know we that that can work you know that can work or even that can work but now you get at that point i would say okay that's fine so now let's keep scrolling through the website to see what's wrong so everything looks good and we have this section and this again this is too big the font is just it's it's kind of clustered everywhere and we want to make make sure that we can change this as well let's go ahead and change that as well i'll click on check really quick under this section oops let's go back and click on the phone icon yeah sometimes the builder just gives you some weird stuff you just kind of work with so now you see this section here and this section is just too big go ahead and reduce the size of this for mobile so click on the gear icon and under the design tab or i can just click on the blue pencil instead of navigating throughout the you know the editor scroll down and i'll click on the phone and under the phone we can reduce the size of this to make it look a lot more cleaner and nicer so that looks really cool and this section maybe we can change you know the s i mean we can change that as well you know just the s is just a little cut off there let's change that as well so the design and then we have the text size we can just just reduce it a little bit you know just make it look good like that and then scrolling down i think everything else looks pretty good now let's talk about okay so i know how to optimize my website for mobile but maybe there's specific sections that you do not need for tablet and phone like for example if i scroll down here do i really need this image here you know i don't really need it per se you know you might come across images that you don't need you know i don't want this image so let's get rid of this image i just don't feel like it's necessary for people on tablets it's too big and it's just you know they don't know what's going on here so let's get rid of it i'll click on the gear icon and under the advanced section under visibility i can disable this on the tablets and also the phone and then i will click on check so what that means is i want to go ahead and get rid of this section because it's just not necessary for people visiting my website on a tablet or a mobile device and you can do that for pretty much everything you can go ahead and check out or disable certain modules and you can also disable certain sections so let's say for example this top destination section you do not want it on your website for mobile and tablet users i will click on section settings advanced and then for visibility i will disable this also on the phone and the tablets that's how you can kind of disable certain sections of your website for specific devices now let me give you all a very good strategy that i used when i was getting started with web design and you can use this strategy on your own as well for example we have this section here right but maybe you don't want this landing page for mobile users and tablet users watch what i do here i'm going to go ahead and duplicate this section so now there are two of these sections right and uh for this one i'll put explore the world and i'll just leave that i'll just leave that like that i just think this is good however i want to disable this section for tablet and mobile users so i'll click on the gear icon and under the advanced tab for visibility i will disable this section on the tablet and the phone right and click on check so that means people visiting on this websites will not see this on a tablet or a phone however i want to have a section specifically only for mobile users so for example when you visit a website on your phone have you noticed sometimes it looks different from the actual desktop version maybe it might look a hundred percent different right that's because a lot of developers feel that it's not necessary to show the home page on a computer and this on a tablet or a phone like for example if you are selling a product on a phone device you might want to have a different landing page for that for me to achieve this whole results what i'll do is click on the gear icon and click on the advanced tab and go to visibility and i want to disable this on the desktop so that means visitors coming to my website on a computer will see this visitors coming to my website on a mobile device will see this instead so now you'll see how this looks really cool you know for a tablet user and this is disabled that's a very key strategy for mobile optimization and i think that's a very common practice now especially with large tech companies who want to navigate their users to a specific part of the website easier and now let's go to the mobile friendly test so now i will type in my website divi themetutorial.com and test this url i'll put this in the description you know of this video as well let's say you're editing your website and you're just not sure if google thinks it's responsive well you can ask them saying hey is my website mobile friendly and congratulations so your website is mobile friendly so google is saying your website is mobile responsive and you'll see how this says register for digital nomad life because remember visitors on a tablet or a phone will only see this page and not the default page of this one now we know our website is working so congratulations that was the mobile responsiveness section you'll want to go through every single page and make sure your website is mobile responsive congrats on learning how to make your website mobile responsive let's go ahead and move on to the next section hey guys welcome to my design tip number four now as you're building your website you might come into a common problem that your website is running slow you're going to say hey darryl i built the website using divi but now my website's really slow what's wrong with divi what's wrong with my web hosting and generally around 90 of the time it's neither it's the images on your website if you go to my website and you go to fix slow websites i have an article and i just want you to follow each one step by step and i promise you if you follow these step by step your website will load faster number one which is the biggest problem for most amateurs is your page size you want to keep your page size under three megabytes what that means is don't go to your website and just add in random images that are very large because what's going to happen is that these images will usually be massive and they will slow down your entire website if you want to measure the size of your page you can go to tools.pingdom.com i also have this on the ultimate list of resources that you can check out it's on my website under the website resources and these are all free they don't cost you anything or some of them do you got to pay for fiverr you got to pay for uh themeforest pingdom is down here pink number is what i use to test the speed of the website for example you put in your domain and then you'll see your performance grade my page size on this website is 4.5 megabytes so as a result because my i'm on shared hosting my load time is 3.36 seconds a little high i want to keep that under three seconds if i go back to my article here what other things that you can do is you can you know get reliable web hosting which you all did image optimization and you can use a tiny jpeg as a great resource so maybe a lot of you aren't good with photoshop and you don't know how to reduce the image size you can just drag and drop your images on this website and it will drastically reduce the size of the images speeding up your website for example i had an image of 714 kilobytes and we reduced it just to 76 kilobytes that's another thing about your uh or your post your images should be no more than around 100 kilobytes so if your images are more than 100 kilobytes you probably could do some work and reduce the size of it also add a caching plugin that makes it so your website doesn't have to keep loading everything all over again for every single visitor it creates a cached version of it and also reduce the javascript and css javascript and css is basically all those really cool animations and all those cool graphics and everything that is javascript and the more javascript that you have the more your website will be slow so i made some modifications to this specific website i want to retest this specific domain so i'll click on save here and you'll see that this is dvt tutorial however i just decided to optimize around five or six images on this website and now i want to retest it so i'll retest it i am closest to washington dc and i will click on start test and i'll show you all how to read this chart so you can know what to look for when you're running these speed tests on your website okay so my result is 3.1 megabytes i've reduced the page size and as a result my website is now loading at 1.8 seconds which is fairly good you want to keep your low time under 3 seconds now i'm going to show you all how to read this chart we have the image the font the javascript and the css you want to keep the images try to keep it around two megabytes or under i'm a little lazy i could have probably reduced this a little bit more you want to make sure your javascript is low javascript are those fantasy animations and every time you add an animation to your module or you add an animation to something that is javascript so just know that it will slow down your website in the long term and we have the css which we have fairly little and css is actually good uh css is a lot lighter than javascript but the main thing here is you just want to make sure that your javascript is no more than one megabytes your css you'll probably never get to one megabyte anyways and your images try to keep it under two megabytes 2.5 is a little bit too much but uh still the website's loading at a decent speed so i don't think that's a big cause for concern i just find a lot of beginners tend to say their website slow because of wordpress themes or something but it's exactly what you put on the website that is the end result of making it fast or slow so check out this guide it's a great guide i spent a lot of time making it i was very thorough i gave you examples of my websites and other websites on how to make your website with optimal performance so remember no one likes a slow website always optimize all the images and everything on your website to make sure your website is loading fast for all your visitors at all times all right you guys made it to the last step this is like the final boss of a video game so in this section i'm going to introduce you all to the advanced features of divi in the video there were some advanced features i didn't cover i'll be covering all of the advanced features that davey has to offer i'll also touch base on what third-party plug-ins are and i'll introduce you all to the divi marketplace all right party people welcome to the advanced section of the video so in this part of the tutorial i'll be teaching you about how to use the divi theme builder along with all of the other advanced features that come with divi such as creating custom headers and footers custom 404 pages and also custom post pages with dynamic content first things first let's create a new header and a new footer for our website now on my website durwilson.com if you go to the view layout section you'll actually get templates that will help you follow along in this part of the video so right here we have custom footer layouts now these were all created by elegant themes and these just create some really nice footers on your website if you want to add those and upload them to your websites there's also the divi theme builder pack which you can download and have different styles of 404 pages or different category pages and so on and so forth and also i do have a header ui kits so this is the divi uh ui kit that you can also download which just comes with just various header styles for your website and it's completely free you can go ahead and download any of those and once you download those or once you you know decide to use whatever one you want let's go ahead and activate the theme builder so let's go over here to my dashboard and on the left side you'll see divi and go to theme builder now remember essentially what the theme builder is is creating a custom header and a footer for various parts of the website so i'll go ahead and open up a second browser so we can see our work so right here we have global header global body and global footer let's create a global header now before i do that i want to upload whatever i downloaded from my website so i'll go over here under the divi library i'll click on import and export and import and i want to choose the file now remember earlier how i gave you all that file the divi agency layouts i did have a header in there as well that you can download and i also do have the divi theme builder settings that you can download as well but i'll just download the divi header 32 and click on open and import divi builder layout okay so now you'll see we have the divi header 32 and this is how you can import layouts to your website like such as a custom header and a footer to apply on the theme builder so let's go back to the theme builder and now i'll click on add a global header and we can add it from library or build a global header so i'll click on build a global header and i will choose this from scratch right i think that's standard so now you can basically build your header just like you normally would with the modules so for example we can just select you know one module here and in the middle we can type in menu and we can apply the menu there so remember we have the menu the main menu for our websites and then you can design this any which way you want you can center align this then you can change the background color and you can decorate this outer part you can make this smaller and bigger so essentially now you can build your header and your footer any which way you want you can give it a certain background color you can add different modules you can make it as customizable as you want however i don't want to make this part of the video very long by creating a header from scratch so i'll be using a template that i uploaded so what i'll do is click on the purple buttons and click on this little plus icon and under your saved layouts now you'll see we have that header that i uploaded in my library this will be 32 right i'll click on that and there you go so now we have this header we have this logo we have this uh you know we have our menu and we have this button that we added as well and then of course we can add in a background color by clicking on the section settings under background and you know we can apply a specific background to this as well so if you want this to be black we can have it black and then we can maybe even to turn this text to white to make it stand out i think i'll do that actually so what i'll do is i'll i'll dim this black right and then for this section under this gear icon i want to take this and i want the menu text to be white right our menu text color to be whites and then also the logo here so for the logo we can change the logo to anything that we want so maybe i'd probably want to put in something lighter right i'll put in this one essentially now we have our menu we have this button and we can link this button to maybe our contact page and so on and so forth i'll click on close or save and exit whoops whoops make sure you click on save at the bottom right i thought i did so now we have this global header right now with this global header it's being applied on the entire website click on save changes go to our websites refresh the page and there you go so now we have this header being applied throughout our entire website i'll go to the about us the services the contacts and there you go i never added the services layout guys i was really lazy you know maybe i should have you know shame on me shame on me but now we have this custom header on our website and what you can do is you can just basically change this to any style that you want and it'll dynamically update on all of the pages so that's how you can achieve a global header now we can do the same thing for the global footer as well so i'll go ahead and upload a divi footer that i downloaded from my website so import exports imports choose the file and under my desktop i downloaded this divi 100 footer pack number six and import that one all right so we have footer six and again you can download all these for free on my website so let's go back to the divi theme builder under the global footer i will build a global footer build from scratch close this and i just want to add it to my library so let's go ahead and go to my saved layouts and footer number six and this is now my new footer we have these icons here that look really cool we have this and then we have you know we have our pages and so on and so forth of course now i can edit this maybe change this to black right because we have our header black so i want this to be black too and then click on save all right now let's go ahead and close this save the changes and let's take a look at our website so i'll refresh this page and scroll to the bottom and voila so we have this footer it looks really clean really professional and we can add anything we want here we can link these uh text to anywhere that we want such as our other pages and so on and so forth so that is pretty much a quick rundown of the divi theme builder pretty simple right now let's get a little bit more dynamic let's say okay daryl you know we have a really picky client but for the about us page they want a different menu and this is very common for squeeze pages where you're trying to sell a certain product so i want to have a different menu for the about us page i don't want to have it for the global so let's do that i'll go to add a new menu or what is that what is that add a new templates right add a new templates now i want to have this on a specific page so i want to only have this on the about us page all right so just on the about us page and that's it so add a new menu about us page sorry create a template so now we have a specific page here but i want to get rid of this one i want to have a custom header only on the about us page so let's do that let's create a custom header on the about us page so let's go to view save layouts and let's use 35 this time you know 35 you're coming back we're you're back in the game so now you'll see we have 35 here and we can go ahead and customize this by clicking on the pencil icon and now you'll see this is the default header that i originally used for the website so i say all right that looks good we can change this we can edit this and all that stuff but you know i'm lazy so i'm not going to do that so i'll just click on save and i will click on close next i will click on save changes and now let's see what our website looks like so let's go to our home page all right home page looks good right contact looks good however if i click on the about us page the header should look different and there you go so now the header looks different and it's using a different header so essentially what you can do with a theme builder is you can keep adding new sections and saying you know what uh for my blog post i want a different header for this i want a different header and footer and so on and so forth so now let's say all right zero well that's cool but uh you know let's go to my website you know dv theme tutorial and let's say someone enters in a wrong domain name like something like that now we have this and this is the default with divi this looks really ugly you know i want a custom 404 page let's create a custom 404 page back to our website so let's click on add a new template i will scroll down to the 404 page and click on create a template so now you'll see we have the 404 page now you can choose to hide the menu and the footer and only have a custom body i think i want to do that let's just click on add a custom body and let's just do a build custom body let's see if davie has any custom 404 pages i don't think they do you know i don't think they do but uh choose a pre-made layout and under the search let's type in 404 no they don't so let's make one it's really really simple right i'm going to go ahead and find something really quick i will pick this one and i want to use this layouts when you're using when you're building your website you can just grab sections from certain templates and just use specific part of those sections you don't have to use all of the page okay so we have divi for business now you notice how the footer and the header is gone because remember i don't want that and this is just gonna say something like lost like are you are you stupid you're are you stupid lost and then we can redirect them to our home page so what i'll do is this is the i think this is the full slider module so what i'll do is i'll double click on this and i don't want two buttons i only want one button and this will be back to home right so i just want them to go back to home and for the link it'll just be the website www dot baby theme tutorial dot com right and close that and i can get rid of this text obviously i can design this i can you know do whatever i want but i think that's all they want now there's other parts of the websites that we just don't need so let's just do this let's just this is trash trash trash trash trash trash i should make a song no trash trash and man that is a lot of sections good good lord all right so finally all that stuff's gone and uh it looks like down here is there any padding down here we can check it out is there any padding here nope that's about it i will click on save okay now let's close this i will save the changes now let's test this out so remember i am hiding the header in the footer and i only want the lost page to be displayed so let's click on home make sure everything's cool right everything looks good now let's type in a bogus url this will be like that enter and there you go are you stupid are you lost go back to home and you notice how the header and the footer are gone because i don't want them to navigate to other parts i just want to take them back to the home page click on back to home and that's it they're back to our home page so you can create a custom 404 page really easily with the divi theme builder so next let's talk about posts so i'll show you how to create posts with the divi theme builder as well but before i do i need to actually create a page for my blog posts so let's do that i'll go to plus new and go to page now you don't have to follow me here this is only for people who want to have a blog on your website and blogs are really helpful actually so this will be my blog page i'll publish and publish right so now that i've actually created the blog page i need to assign the blog page as our blog page and do you guys remember how to do that you'll go to the theme customizer if you if you remember congrats congrats remember home page settings and post page so this will be blog right i'll publish that and we need to add it to the menu so we need to have a blog on the menu so under the menus main menu for website i'll go ahead and add the item so add the item the blog right and publish so that's just another shortcut on how you can add the blog or add pages to your menu using the theme customizer so i'll close that now so now we have the blog page here pretty cool and nothing is here so let's create a blog post so first plus new and post and 10 things women are good at or no no let's see what here we go 10 things woman women think they are good at think they are good at it's a very controversial post you know these posts they just get a lot of you know like 10 things men need to know or five things women need to talk about with their husbands you know those those topics just get so many clicks it's ridiculous what we can do is use the default editor or use the divi builder so i'll click on use the default editor okay so i got some dummy text there that's that's a lot better i went to my secret website and got some dummy text now also i'll click on this plus icon and we can just add something in here so for example we can add in an image so if i click on an image we can upload an image from our media library you know we can build it like that and so on and so forth now with divi they also have integration so you can add a block and you'll see this divi layout so you can insert a divi layout and insert it inside of your post so you can use divi within the editor so for example load from library and you know i'll just put in something here really i don't even know we'll put in footer six guys i don't want to upload a whole template so now you'll see how that has been uploaded so you can just you know use the builder from inside of the gutenberg editor that's where the integration from divi comes in very handy because now you can add in full layouts to your posts right so i can build the new layouts and you can put something in there you know that you want to add so you can build within the gutenberg editor now i'm not going to go into that too much because i don't want to spend another hour talking about the blog post which i easily can but uh what i'm going to do here is i'll just take this copy this and i will just add a new block of a paragraph and just grab in some text and there you go now i want to add in a featured image so under featured image i will click on one now this is the image that uh people are going to see when they see your article so i'll put a picture of these images are a little small here saying again the bigger one let's see there we go that's a good one we'll put in a picture of this this happy happy woman and click on publish and publish so now let's click on view the post and there you go so 10 things women think they are good at and then you can go ahead and talk about your post and maybe i would probably want to get a better image that is not so pixelated you want to get a probably an image a little bit bigger than a thousand pixels um you know so yeah that'd be it but now let's say this is the default editor right and you know it just doesn't look good you know we have all the stuff on the side it's not creative it doesn't look good we can use the divi builder to create all of our posts for us instead of using the default gutenberg editor quickly show you how to do that with the theme builder let's go back to our theme builder and i'll click on add new templates now i want this to be under all posts and click on create a templates let's go ahead and select a custom body and let's add one from the library i'll type in posts and i do think they have some post page for us guys they do have some which are pretty helpful let's go ahead and scroll down so you want to find the post pages for example this one post page post page two post page three post page four uh i used that one last tutorial last year so i'll just select this one all right and i will use this layout okay so now we have all posts so now this is going to be my default template for all of my blog posts let's check it out let's make a new post so let's just give you an example of how this works and we gotta pick on men this time five warning signs to break up with your boyfriend ooh that is a good one man i should i should have like a a blog talking about relationships i can really get some some uh some you know people to watch my stuff so i'll click here on publish and publish what i'm going to do is set a featured image so we'll add a featured image of a guy all right that looks good and i'll use the default editor and here i'll just type in some you know content right and that's it i'll update it and now let's view the post so now you'll see how dynamic content is working we have this title dynamically updating five warning signs to break up with your boyfriend we have written by we have the actual author the date and then we have the featured image here which is a little bit too big and then we have some content here and it just looks really nice it looks really professional this will be like the default way of creating your post and you have other categories and you can stay up to date with other stuff so all this stuff is created by the page builder and it's a default a post template for all of your blog posts now let's just say for example you want to move something around if you want to change anything on your website you can go back to the theme builder so let's go to the dashboard divi theme builder and i'll edit the custom body so this is the current post template this is the post title and again you can move this anywhere you want it'll update dynamically this is the featured image if i click on the gear icon you'll see that this is an image however to make this dynamic it's very simple for example i'll delete this image and you'll see this on the right side how this says dynamic or there's that little icon that's dynamic content so what this means is you can basically reflect certain images to be here automatically maybe you want the site logo to be here every single time you make a post right or the featured image or the profile of the author so i'll select featured image so that means the featured image will be displayed here and then over here you'll see that a blurb setting however they decided to add the author of this and maybe you want to add in the logo of your website to update dynamically so i'll click on plus i'll type an image right image now for the image i want the logo of my website to display here so i will put the trash can click on the dynamic update uh i guess you want to say i don't know what that is guys it's just a barrel or something so and then i'll just put site logo and then i'll click on check and there we go save that's how you can use dynamic content with your posts i hope i was very clear on that so remember the divi theme builder just gives you tons of control and flexibility over your website so again you can add new templates and say hey you know what for my category pages for my blog i wanted to look different which you can do for your search results you can change the way your search results look and so on and so forth so in a nutshell that is the divi theme builder it's a very powerful tool and it just gives you total flexibility and control over your website so now that we talked about the divi theme builder let's now talk about the advanced features that come with divi all right let's talk about some advanced features that come with tv that can help speed up the workflow of your websites now you don't have to use these features however i just want to introduce you to some of them just in case you want to apply them to your website so number one is find and replace now when you're building your website you might notice that you have specific colors on your website wouldn't it be nice if you can change all the colors at one time to a different color just to see how your website will look so let's do that so i'll click on this specific icon i'll double click i'll go to the design tab and i will go to the image and icon and i'll see the icon color now this works for any module so you can do this for any blue module so click on the color now i have the specific color but i want to change all of the blue colors here on the page to maybe like green or something so i'll right click and i'll click on find and replace so now what it's saying is find this color so find the blue color and replace it within this page this column or row to this color so you know what let's change this to something like uh this color right here and then once that's done i'll say replace all so i want to replace all the blue colors with this teal turquoise color and click on replace now let's scroll up and now you'll see how all those colors that we applied on our websites are now being changed to this specific colors it's a very fast way on how to change the design and workflow of your website so now you'll see all of these colors that we had are being changed to a different colors number two is the paste styles so for example i have these four columns here now i've already modified this column and you know i don't want to have to do that all over again i can right click i can copy the module styles and then i can paste it within this other column all the settings that are being saved on this specific module we can apply it to other ones another really cool feature is not really advanced feature but this is the shape dividers so when you're building your website you might want to add shape dividers onto your website amateurs love shape dividers i'll click on this gear icon and i'll go to the design tab i'll see this divider section and under the top section i can change this divider to something else a lot of different ways on how you can design dividers so we can add it to the top and also the bottom can add a different divider style maybe something like blue or black or something like that and there's a lot of different ways how you can customize it i don't use them too much but they are very trending and i do recommend using shape dividers just don't go too crazy with them because then again you have to carry it out throughout your website and that can be a little tough so shape dividers are really cool i'm going to do something called bulk editing so with bulk editing you would simply click on a module and hold shift so i'll click on this module one two three four and i'll click on the gear icon now what i can do is i can edit all these modules at the same time so for example if i want to add a specific border to this i will add in a black border and i will increase the border width and now you'll see how it's being applied to all of the modules pretty cool you can apply this to all the modules you just need to hold shift and click on all the modules and whatever changes you make for one module it will be applied for all of the modules so that is basically called the bulk editing and it's a feature that came out sometime this year the next feature is called the divi presets feature wouldn't it be nice if you can create modules and they were already preseted and created for you without having you to design everything all over again or duplicating it we can do that with the divi presets feature so for example i'll go on this button right here and click on the gear icon now this works for all modules you'll see this preset default we can click on that and click on create a new preset from current styles and this will be the main button now we can assign this button style to other modules or i can assign this preset to default meaning every time you create a button it will look like this so that's pretty convenient right so i'll click on check and say yes and then we can style that button preset right here but i'll just click on check and check now let's add a new module here so i'll click on the plus icon and i'll select button and there you go so now you'll see the button is created for us automatically with this specific style so that's a really cool helpful feature now of course you can create new styles and you can store them in your presets by going to module settings and then go to presets and you can add another one so for example you can create a this is like this will be like the black button style or something like that and i'll click on check and now you can design the black button styles the button you'll have it as a black or will have a white color and then i'll have a black background right something like that and i'll click on yes we have the main button right and then we also there we go main button and we also have the black button style so you can create different presets for different modules and you can go apply them throughout the website um yeah the green button i just made that because i was just you know during my editing time i just made it just to mess around with things but you get the idea here so you can have different styles for specific modules and create presets for your modules so the next feature which i think is really cool is called the fixed positions feature now there's a few ways on how you can apply this and i'll just go ahead and just give you an example so i'll scroll down on my website here and now you'll notice that this button on the top right keeps following us it's sticky so what we can do is we can have certain section sticky we can have module sticky we can create a sticky feature for pretty much any specific module column or row so let me show you all how i did that so for example i'll click on this module and i'll go to the advanced section under the advanced section we have scroll effects now there's different type of sticky effects and there's different sticky positions so we have stick to the bottom we have stick to the top and bottom and we have just do not stick so for example the do not stick it's just going to remain not sticky right if i click on the stick the top when i scroll past it it will stick to the top of the screen something like that and you can set the actual top offsets right here so basically saying i want it to be 135 pixels from the top that's what that's referring to so the next option we have is stick to bottom now this is a very interesting effect and it works on some websites but let's say for example we pass the button so you'll see the button however if we scroll up the button will now follow us on the bottom right so that is where this stick to bottom comes into play and when i scroll past of where i originally put the module it is now there that's just a way on how you can add stick to the bottom or we can have it stick to the top and the bottom so if i scroll down you'll see how it scrolls to the bottom and it scrolls to the top but i have that preset up there so i'll reduce that to zero and it'll remain there it's a pretty cool effect we can have that button there and also there now this is a great feature to have on your blog so let's say for example you want people to sign up or you want people to do something it's a really cool effect and you can apply it not just to a specific module but you can also apply it to a specific row now what i'll do is i'll apply this with a sticky so under the advanced scroll effects i can put this as stick to the top so when i scroll down past this you'll see here how now it eats up everything because it wants me to kind of you know wants me to click on this and when i scroll up it's gone and i can do that again i can do stick to the top and to the bottom so the scroll effects i will put stick to the bottom now you'll see how when i start the website it loads at the bottom and if i scroll to the bottom it then fits into place and then everything's normal let's talk about another really cool feature which is the transformation of the scroll effects scroll effects on the advanced tab you might notice that you have these other options so you have you know the sticky positions but you can also do really cool things like vertical motion you can have rotating now i'll just click on this image and use this particular one to give you an example so what i'll do is i'll first rotate this object now you'll see as i scroll we can rotate the specific object which is really cool and we can turn that off and say okay i don't want the rotating however i want to add vertical motion so now basically when i scroll up and down the object will go into place like that and we can control the viewport bottom and the viewport top by you know just selecting something like that so now what happens when i scroll down it'll it'll come up more at a you know at a better angle you can go through each of these options and find out what you want to do for your websites the horizontal motion is really cool and there's a lot of good examples to use it like right now so i'll just scroll down and the image will come out of the website and be placed there now there's various ways on how you can you know design this page so you can put the you know the end starting off and the mid starting off so for example i can put it off the screen and then as i scroll we can have it come on and off like that so there's just so many different ways on how you can customize with this section with the transformation effects there is actually an article by elegant themes and they do give some very unique styles of how they apply the transformation effects so you'll see how they add these donuts and the donuts roll off the screen as you scroll up and down also we have this one with the car goes off and on the screen when people rotate off the screen like that so as they scroll up and down the car kind of you know kind of goes in and out so there's just a lot of ways on how you can apply these scroll effects personally i don't use them too much but there definitely is a reason to use them it's a really cool feature and the scroll effects can really add a lot of nice design in the core to your website next is an amazing feature that i think that you're really going to love and it's called the a b split testing with divi so for example we have this text right here and we have this button now how do i know if this text is being effective or not you know are these people clicking the button because of this text well we can a b split test with different versions of this specific text so i'll right click on this module and click on a b split testing or split testing and then click on ok i will then click on this button because i want to test this specific button so essentially i want to test this text versus this button but what i can do is i'll click on this little arrow here and now i'll create a different version of this text so click on the gear icon here and then put something like and i'll click on check and then we have two different versions i'll go ahead and save this right here and on these little block icons i'll click on that and i'll scroll down and now you'll see that we have two different versions of the text so what divi will do is that it will distribute this to different visitors on your website so when you have visitors on your website it will distribute this text and this text equally to all your visitors and they will find out which text is performing better based off this text who is clicking this button and again we can make a third version so we can make a third version we can change this to something like um a hundred percent money back guarantee and click on check and save you can split test every single part of the website to see if something's being effective or not and this is great for home pages this is great for call to actions what we can do is we can just wait this out and you can even visit your website on other browsers and you will see that the text will constantly change and rotate to other visitors to determine what text is being the most effective so let's open this up really quick i'll click on these three bars and now you'll see text one text two and text three so what this is going to do is that it's going to compare the impressions that the clicks and the click-through rate to determine is text one more effective is text two more effective or is text three more effective you can read the reads the bounces and then they have a goal engagement as well so the abs but testing it's really cool it's really helpful and let's say for example text 2 is performing the best you can end the split test pick a winner proceed and say you know what text 2 had the highest rate of conversions so i want to select text 2 to be the permanent text and that's your winner so now text 2 will be displayed on your current wordpress website so that's it that's all of the advanced features i hope this part of the video was helpful um i hope it wasn't too much for you guys so remember feel free to pause the video go get a drink go get a beer and and come back now that we talked about all of the advanced features with tv let's talk about some of the creative styles that you can achieve with the divi builder next let's talk about some creative designs in the beginning of this video i showed you all some really cool animations like this animated clock when users scroll on your website or this expanding blurb section or an expanding call to action or a creative divider scroll you'll see when users scroll on your website you'll see these section dividers that actually move with the actual user which looks really cool there's various ways on how you can design and style it or you have this divi test mask with background animation which also looks really cool now elegant themes kind of did a poor job at keeping all these together and having records for them so what i did is i went back two years on elegant themes blog and i created a blog post and i linked all these tutorials and layouts on one specific blog post so you'll have access to all these tutorials in this blog post i'll put these tutorials in the description below of this video so you can go ahead and download all of these layouts also some of these are tutorials for example this mobile contact bar this is a tutorial where they'll show you how users can click on something and then it'll call on their phone or if they click on this it'll pull up a google's maps and uh yeah i just didn't want these to go to waste because they have some really good tutorials and they have some really good stuff and i just wanted to kind of put them all together in one source so you don't have to go back and scour the internet and you know spend hours of your time and everything i wasn't going to make these in this video because i felt it would have been too long of a tutorial and i figured these guys have already showed you how to do it so i just wanted to include that in this tutorial you are welcome go have fun and download all those free layouts on your website okay welcome to my design tip number five now let's say for example you're like zero i know how to use divi i'm really good at it but you know i just lacked some design aspect i need some inspiration i just need some help in order to you know make my website vibrant and really good and i want to get some help and ideas so if you go to my website under the divi tab you'll see the best divi resources tab that i have now what i've done is i've compiled a list of a lot of divi plugins divi templates and also divi child theme so for example i'll click on the divi theme plugins and these are all plugins that are made specifically for divi so we have the divi supreme plugin which gives you 50 more elements to your website like gradient text and other stuff we have divi carousel which is a plug-in that allows you to have a carousel onto your website with divi and then we have something like a divi mega menu as well which just gives you a really cool mega menu to your website so you can go ahead and check out this list and you might find something that you need sometimes you're building stuff and you might need just like one or small plug-in and that'll complete your website also for those of you who need templates uh i recommend dividend they have just tons and tons of templates that you can use they have more than 1600 templates that you can purchase and download on your websites also divi monk the landing factory this resource page it took me it took me weeks to you know compile and get together but you can find templates dv plugins and also divi child themes now essentially what a divi child theme is you might come across that a lot and we'll talk more about that at the end of the video essentially what it is is a theme that's created with divi just with some php modification it's just basically geared a little bit more towards people for a specific niche like divi e-commerce or digital marketing and it just adds new features it adds new styles that normally don't come with divi so it just adds a little bit more to your websites and if you see something that you like you can just purchase it and it'll import all of the demo contents for you so it'll basically it's basically a pre-made website just with some small modifications just to kind of push the design limits of divi if you want to go ahead and check out some of the davey child themes you can check that out also memberships and packages let's say you just see a large list of something that you like they have memberships where you can purchase a membership and you get access to all of their plugins all of their themes everything that they offer like the divi space membership and mark hendrickson and also the be superfly membership also for those of you who just want some help you know with uh you know divi and everything else all these websites offer membership courses which can really help you with your web design flow so go ahead and check out the divi resources page i just spent a lot of time making it just to make sure that everyone out there has a resource for something again go ahead and check those out and that was my design tip number five in case you suck at designing don't worry about it you can always get work and inspiration from other designers you guys are going to love the divi marketplace it offers uh plugins for dvd templates and child themes and all sorts of goodies for your website with that said let's go back to the video guys all right so we saved the best for last in this section of the video i'll be showing you how to use layouts how to use tv extensions and also divi child themes that you might come across on the internet now if you go to the divi website and you go to divi and go to the divi marketplace i'll leave a link in the description below to the marketplace you're going to come across tons of really fun stuff you're going to come across divi extensions divvy channel themes daily layouts and it's overwhelming there's so much stuff here and you know i can't have a video on every single one but you can just get a general idea of what some of these plug-ins do for example the divi essential plug-in this plug-in is the one i used earlier in the demo and this gives you access to 55 different modules and it has 500 layouts for those specific modules it's really cool and in this video i'll give you an example of this specific plugin now whenever you purchase a product from the marketplace it's going to end up in your account so you'll go click on my downloads and if you scroll to the bottom of the page it'll say your divi marketplace products and then you can download that specific product that you purchased i'm going to use the dv essentials plugin first just to give you an example of what you might do if you come across a divi plug-in plugins click on add new i'll click on upload plugin i'll select browse and now i'll select the zip file so whenever you purchase these plugins they're going to be in zip files so i will open the zip file and i will click on install now all right cool so i'll activate the plugin and now you'll see the dv essentials plugin is activated so everything is pretty much done now i'll just go back to visit sites and now i will enable the visual builder pretty simple now i can just add different modules to my website click on the plus module and i'll scroll down and now you'll notice that we have these blue modules so we have a flip box we have the business hours a next dvd review a dual button a next button i mean there's so many different buttons and different things that we can have on our website that are a lot different than what divi normally offers now this is a bad example because i have to fully customize that but let me just give you an example of something that you saw earlier in the video which was the gradient text and they also have a lot of animations they have all these really cool modules that you can add to your website text gradients and you can design this just like you normally would any other module with a gradient color we can pick a specific gradient color and then we can change the direction of its and maybe i would want to change something like the font right so for the fonts i think we're sticking with poppins right poppins heavy and then there you go and you can also control the speed of the gradients you can control the direction you would use these just as regular divi modules so i'll just drag it up there and uh yeah you know you can change the design the reveal effect what's that huh i think that's when you hover over it it adds like a it adds like a something over it and the hover effects grow oh see that oh that's cool that's interesting so you have all these cool goodies you know that they offer so you know you'd have to just go through a lot of these modules and then just oh there it goes yeah that's the reveal text it's like a black little thing that pops over it so you'd have to just go through a lot of these modules and just kind of you know figure out what they do like here we got this really cool flip box and then we can design the color we can add uh different icons we can change the front and the back a new element okay oh it's a floating image how cool is that so let's add in an image here let's put in uh put in this guy put in this guy oh that's really really cool and then we can uh probably customize that more the animation settings horizontal oh look at that that is really that's really cool actually so for this specific plug-in i do have a discount code if you go to the developers normal websites and you go to their products and go to divi essentials uh i have a coupon code for 20 off that specific plug-in if you want to go that routes now every developer on the marketplace they have their own websites but at the same time we want to probably buy it off the marketplace because we want to support elegant themes and we also want to support a lot of these other developers but sometimes these guys give me discount codes and they're only good on their websites so if you enter the code darrell wilson you will save 20 off this particular plug-in so i do have other discounts and offers on my current website for other divi third-party companies so if you want to check that out just go to the divi tab on my website but in general you can find the most extensions and plugins for divi on this website and you can see what they do like for example the divi carousel module it makes like a carousel for your blog post and just gives it you know a lot more style also divi supreme is another really good one i do have a discount code for them as well on my blog and that basically gives you 40 more modules however the divi essentials plug-in it gives you 55 modules so it does give you a little bit more and i think they're on the same price 79 bucks and 79 bucks so yeah so that's exactly how you would upload dv extensions to your website all right so i showed you all how to upload plugins now let's say for example you want to upload a template that you might come across from the divi marketplace or from just someone giving out a freebie over here under the divi layouts you'll see that there's just tons of different layouts that you can uh purchase so the one that i purchased just now i just bought this one you know i just it was just something really cheap it's three bucks and it's just a coming soon page i'll show you how to upload these to your websites once you purchase a specific layouts from the actual marketplace whether it's this one or this one or or whatever the product will end up in your account so you'll go to accounts my downloads you'll scroll down and you'll see your divi marketplace products so you'll click on download and then you will just save the file now once you save the file you will receive a zip folder and again the same thing you will have to unzip the folder and then you'll get the json files so it's the divi coming soon one that i downloaded to upload a layout just go to your dashboard you go to divi and go to divi library you will then click on import and export click on the import tab click on choose a file and then you will just simply upload that json file so here it is coming soon and i will import the db builder layouts all right cool so once that's done it will be displayed in your layout section of your divi library so let's add it to our website now i'll go over here to my blog visit site and then i will enable the visual builder then i will go ahead and delete this just you know start from scratch and everything in the bottom of the screen you'll see these dots click on those dots and then click on the plus tab so then you'll click on the your stage layouts and then you'll go ahead and click on the layout that you wanted to you know to upload to your website i have the coming soon layouts so i'll just go ahead and upload this one here so that's how you would upload layouts onto your website that you might come across from various other websites or facebook communities or the divi marketplace okay so this is the last part of the video and i'm going to show you all how to upload divi child themes to your website now first off what is a divi child theme so dv child theme is essentially just a layout on steroids it basically is a enhanced version of divi and it basically takes all the features for divi and it adds a little bit more such as different features different animations different modules or different javascript and it does involve some custom code so it is a little bit more useful than a normal divi layout for example we have this divi ecommerce child theme now you'll notice right away if i scroll down you'll see that a lot of this is very hard to do with tv like this line animation also we have this add to cart now by default divi does not offer this right here so this was done with custom code and this is what the child theme does it just adds some custom code to your websites and it just gives it a little bit more featured and enhancements that dvd normally doesn't offer so what you can do is just go through this list and just kind of browse around and shop around and see what you like now i'm just going to upload the divi business pro because that's the one i purchased and again remember all of the layouts that you purchased or child themes will be in the my account section under your marketplace products and i will go to dashboard i know i deleted my website oh it's all gone so sad so i'll go to the appearance and this time we're going to themes so we're not going to layouts now in order for child themes to work divi must be installed so you must install and activate divi then after divi is activated and installed we will click on add new and we will upload that theme that we purchased click on browse now the one that i downloaded was the divi business pro and it will be in a zip folder so i will click on install now child theme recognizes divi and remember divi must be installed for this to work so next i will click on activate now every child theme has a different way of importing the content some have to upload plugins some will have an easy demo importer so you'll just have to follow the documentation for every single child theme because they are different now whenever you install a child theme on the left side you might get a new setting so here i have the db business pro and i want to import the demo data so next it's asking me if i want to import the demo data with a plug-in i guess this is their testify plug-in but i'm just going to install it without the testify plug-in and i will click on continue next it's going to ask me if i want to import all of this information so import the images the pages the blog post essentially it's going to import the entire website for me automatically we'll click on import demo data all right so the import was complete let's just take a quick look at the website all right so here is the website now there's different slides you'll notice here are the slides on the left side see that's kind of where the child theme comes into play just adds a little bit more style and decor uh to your website so i'll scroll down here and just take a quick look we have the images this really cool project section we have this image and some text and some more text and our services page with some really cool slides so that's a you know cool little feature so that is pretty much the end of the tutorial guys so congratulations on making it this far if there's anything that i missed out about child themes or plugins feel free to let me know in the comments below all right you guys did it congratulations tie yourself on the back for making it this far now you have an amazing wordpress website you have all the resources that you need now if you guys have any questions for me feel free to put them in the comments below i do my best to get to every single comments of course i can get to every single one but if there's a question i can answer i'll go ahead and answer it let me know how this tutorial was did i do good was i too fast was i too boring go ahead and let me know in the comments below my favorite beer is modelo so go ahead and put that in the comments below and just let me know that you got this far but until then guys congrats on your new website and i will see all of your party people in the next video guys take it easy

Channel: Darrel Wilson

Views: 225,355

Keywords: how to make a wordpress website with divi theme, divi theme, divi theme tutorial, divi, wordpress, how to make a website, how to make a website with divi, divi theme builder, darrel wilson, make a website, build a website, create a website, divi 4.0, wordpress website

Id: RvehqgXKvmM

Length: 174min 46sec (10486 seconds)

Published: Sat Nov 28 2020