How to Make a WordPress Website | Divi Theme Tutorial 2021

in this video i'm going to be showing you step by step how to create a wordpress website using divi that looks like this this is a very modern and sleek portfolio site where you can display your services with a call to action a full gallery and even a testimonial section to display the reviews from your clients and i'm going to be showing you how to do all of this in this tutorial step by step we'll also be covering how to get your very own custom domain name and hosting for your website i'll show you how to install wordpress which is a free software and we're going to be using it to launch your website i'll show you how to sign up download and install divi to use it and customize your website exactly how you want it i'll even show you how to create your very own logo for free without having to download any software and i'll show you how to make your website fully mobile responsive as well that being said what's going on guys welcome back to another video on create a pro website my name is levi hagan and for those of you who are not familiar with divi divi is an amazing page builder theme that utilizes a drag and drop method to provide a seamless and easy way to build your website it's pretty straightforward and has the capacity to produce some stunning designs during this tutorial you can use the right and left arrow keys to go forward or backwards by 5 seconds i also put timestamps of this video down in the description below so you can go ahead and skip back or forward to any of the steps at any time all right now that you have an understanding of what we're going to be covering in today's video let's go ahead and get started now step number one is to get a domain name and hosting a domain name is just the address of your website it's what people type in to get to your site so something like yourwebsite.com and web hosting is just renting space on a server somewhere that is connected to the internet so that you can store all of your media files on a website such as text pictures videos themes plugins and much more there are web hosting companies that have buildings full of these servers and they also offer you 24 7 support in case anything happens to your website if you want to own your own website and have a custom domain name for it then you have to purchase your own web hosting which i'll show you how to do in the tutorial and i'll give you a massive discount code for it as well yes you can get a free website but it comes with a lot of limitations like you won't have your very own domain name it'll be something like yourwebsite.wix.com or squarespace.com or whoever's hosting the website or it might even be a random string of numbers and letters that you don't even get to choose you also can't upload new themes in order to customize your website exactly the way you want you also can't upload plugins to increase the functionality of your website you can't monetize your website with ads in order to make money from it and your website could be deleted at any time because you don't technically own it for these reasons i recommend web hosting because it places you in control so in order to get it just click on the very first link down in the description or go to createaprowebsite.com hosting and it will take you to a page that looks like this also important to note this is how you'll receive that massive discount that i was talking about earlier all right now that being said you can see that we have three different plans before us we've got the hatchling plan the baby plan and the business plan now the hatchling plan you get a single domain you get free ssl if you do the baby plan you get unlimited domains and then the business plan you get pretty much everything but i only recommend the baby plan and the business plan only after your website starts making money you know if that's what you're trying to do with it so for now you know if we're just starting out i'm going to choose the hatching plan which is the cheapest and then on the bright side we can always upgrade to the baby plan and the business plan later on whenever you want to and it's very easy so let's go and start with the cheapest one which is the hatching plan so i'm going to click on buy now and here's where you can register your very own custom domain name and then if you already have your own domain you can just click on this tab right here but i'm going to go ahead and create a custom domain right now so something like create a divi site dot com perfect and when the search bar glows green like this you know that your website is available so you can see that we've got create a divi site dot com selected over here in the corner but you can click on this and you can choose between dot any of these so you can also see down below that they've got a bunch of different examples they've got dot com dot club com.club.site.net blah blah blah all the way down i'm going to stick with com because it's the most professional looking and it's also the most common that people will type into the search bar when they're looking for your website so i'm going to stick with this one so then we can scroll on down to the next section right here you're going to notice that there's a checkbox for domain privacy just make sure that it's checked what this does is it protects your information like your email and your phone number that way you don't get called by a bunch of solicitors and telemarketers who try to offer you different services for your website it's honestly kind of annoying so i always leave it checked for the additional 14.95 but it just makes sure that your you know personal information is protected so scroll on down to number two which is choose a hosting plan right here now you can already see that the hatchling plan which we selected earlier is already selected but you can go ahead and change it here as well to the baby or the business plan but again i'm just gonna leave it on the hatching plan and then over here we've got the billing cycle for 36 months now you can go ahead and click on this and we can change it from 36 months to 12 months or six months or one month and so you can see that 36 months is going to be the cheapest plan if you're really planning on keeping this website for a really long time now if you're just dipping your toe in the water and starting a first website and you want to just do it for one month that's totally fine keep in mind whichever one of these you select you're going to be paying for all of the months up front so if i click on 36 months i am going to pay for 36 months up front even though per month it's this much another thing to keep in mind for this 12-month plan right here when you're buying your domain name you're buying it for one year and so if you select the 12 months that is the equivalent of what you're already paying for the domain name for so you might as well do this for the hosting as well so that's another option for you but i'm going to go ahead and click on one month because i want to pay for only one month up front right now now i'm just going to scroll on down to number three which is creating a hostgator account so this is just your basic account creation so i'm going to go ahead and enter in my email and password and create a pin as well and i'll see you in just a second all right welcome back and now we're just going to scroll on down to number four which is entering your billing information and you can select between different payment types so you've got your credit card or paypal i'm going to go ahead and use the credit card so i will see you guys in just a second while i insert my billing information all right welcome back so let's go ahead and scroll on down to the next section for add additional services and what you're going to want to do is actually uncheck both site security uh the site lock essentials and then also the back up your hard work because i've got videos on the channel that show you how to do both for free and i'll put those links down in the description below so we're just going to leave them unchecked and let's go ahead and scroll on down to the next section now you scroll down and you'll see the coupon code right here that says create a pro website so make sure that it says that because it will give you the massive discount that i was talking about earlier and again this is my affiliate link so i do receive a commission whenever you use it but it also saves you money on your website so it's win-win all right so now we can just scroll on down to review order details and we can take a look at everything here so 29 for your first website's not too bad and so we can see the domain registration for one year like i mentioned earlier went from 1799 down to 4.99 so that's pretty good and then you've got the hatchling plan for one month went from ten dollars down to seven dollars and then the hosting add-ons is a one-time fee of 14.95 and this right here is the domain privacy protection so this is that one-time charge that's going to be protecting your email and phone number from solicitors and stuff and then other than that we've got to just scroll down click on the check box right here to agree to hostgator's terms of service cancellation and privacy policy and click checkout now now hostgator is just setting up your account so we're just going to give it a minute all right and so now it's going to ask us to tell us a bit about the goals but i'm going to go ahead and just close out of it perfect and when it takes you to a site that looks like this we're just going to go ahead and skip all this scroll down to the bottom and just go straight to the dashboard so i'm going to click right here perfect now that we're on hostgator's dashboard we can go ahead and move on to step number two which is to install wordpress so in order to install wordpress all we have to do is just go over here to this button right here that says install wordpress it's pretty simple and then i'm just going to click on install now okay so first up it's going to ask you to choose a version that you want to install so just make sure that you're on the newest version as you can see but we're already on the newest version so we're good to go there so 553 and then you get to choose your installation url which is where you're installing wordpress to and so just make sure that the new domain that you just created is selected just in case you have multiple but it's going to automatically select it if it's your first website all right so then we're going to go ahead and scroll on down to site settings and this is where you get to change your site name and site description and so what the site name and site description are is for example if i were to just open up a new tab and type in apple so the site title is going to be this blue hyperlink right here and then the site description is going to be this little bit of text down below so let's go ahead and change that now so the site name i'm going to change from my blog to and then the site description i'm going to go ahead and change to something like perfect now a little tip that i want to share with you guys a lot of people actually take advantage of the site description in a good way and so you've got the site title here and then for their description they actually write something like a hook or something interesting rather than just saying what the website is and it kind of draws the reader's attention in so sometimes you can use the site description to your advantage anyways let's go ahead and scroll on down to the admin account and so this is where you're going to actually create the login for the back end of your website so let's go ahead and create an admin username so i'm going to switch it from admin to my name and then for the password i'm going to go ahead and type in my very own password all right and then for the admin email this is kind of important you want to make sure that the admin email is the same email that you use to log into your hostgator account okay perfect so then we can scroll on down a little bit more and we'll see choose language and you can select a different language here but i speak english so i'm just going to leave it like that all right and so it gives you the option to select some plugins to go ahead and install alongside wordpress but we're going to go ahead and skip this step as well as advanced options and we're going to skip selecting a theme because i'm going to show you how to download your own theme and your own plugins later on so we're just going to go ahead and skip down to the bottom and click on install all right and it's just going to take a second to submit the data and download wordpress so i'll see you guys in a little bit all right welcome back so it looks like it's already done downloading so congratulations the software was installed successfully and that is wordpress and so now it's going to show us right here the administrative url which is actually just the domain name we created slash wp dash admin and so this right here is incredibly important to remember so either just memorize it which is pretty easy it's just your domain dot com slash wp-admin or what you can do is go ahead and copy-paste this into a new tab and just create a bookmark but this is how you're going to log in and update your website every time so it's crucial that you remember this url so let's go ahead and take the admin url and open it up in a new tab alright if you get taken to a page that says your site doesn't exist or that your connection is not private like this it just means that your website needs to propagate first and what that means is that hostgator now has to send out your new domain name that you just registered across the entire world to let every server know in the world that your new domain name now exists and it's live so this can take anywhere from 30 minutes to an hour sometimes it takes only a few minutes but then sometimes it can take up to an entire day as well so just keep refreshing the page to check on its progress and once it takes you to a page that looks like this you know that you can now log in alright now that we have our login screen for wordpress we can go ahead and move on to step number three which is to install and activate divi's theme it's incredibly easy so let me show you how to do it now i've placed a link in the description to make things easier on you you can open it on a new tab or you can type in createaprowebsite.com divi and this will take you to the elegant themes landing page using my affiliate link i do receive a commission for providing this link but for the sake of providing easy access i'm extending this affiliate link to you so first go ahead and click on pricing all right and then after clicking on pricing you can see here that i actually have a cyber monday sale going on even though today's tuesday and it's on for the next 27 days so i'm gonna go ahead and click on get the deal before it's gone and it's gonna take me down to the very bottom of the page here so between the two plans that we have for divi you've got the yearly access right here which is normally 89 a month and then you have the lifetime access which is usually around 249 dollars a month so it looks like it's actually a pretty good deal right now but if this is the website that you think you'll own for a very long time you can go ahead and choose the lifetime access but for now i'm just going to go ahead and choose the yearly access so i'm going to go ahead and go down to the bottom and click sign up today and this is where you just create an account using elegant themes which is where you get divi from so i'm going to go ahead and create the account right now and i'll see you guys in just a second all right welcome back so now i went ahead and created an account and put in all my personal information so now i'm just going to go ahead and click on check to agree to our terms of service and then this is just a personal decision but i'm going to go ahead and uncheck this box for getting email updates but again that's just a personal choice so now we're just going to click on complete registration all right so after agreeing to the terms and creating an account it'll show you the two different divi themes that you can use you've got the divi builder plugin and then also just the regular divi theme and then if you scroll down let me close that out if you scroll down you'll see a bunch of other apps that you can get along with divi but you know we're going to skip past all of these and we're just going to download the divi builder theme so from here between these two i'm going to go ahead and choose the purple one for divi theme because it includes the divi builder right here so i'm just going to click on log in to download and i'm going to log in alright so now that i've logged in it's going to give me the option to download one of the two so i'm going to go ahead and do the divi theme like i said earlier because it includes the divi builder so i'm going to click on download the divi theme all right so now you'll see that a zip folder just downloaded to my computer so we're going to go ahead and take this and upload it into our website so we're just going to go up to the top for login and then we're just going to log into our wordpress website using the admin username and password that we set up earlier all right so now that we're back on the wordpress dashboard i'm going to go ahead and toggle and remove some of the stuff that's here on the dashboard just kind of clean it up so i'm going to go ahead and click on dismiss let's go ahead and toggle these guys up just to make it a little bit more neat so that there isn't much stuff on my dashboard i think that looks pretty good so then we're going to go over to the left hand menu over here on hover over appearance and then we're going to go over to themes go ahead and click on it all right now from here we can choose between any of the themes that wordpress already has installed and then we can click down here and click add new theme but what we're going to do is actually go to the top up here and click on upload because we're going to upload our own theme from our computer and then we're going to click on upload theme choose file and now we're just going to select that file that we just downloaded which is the zip file for divi so here it is click on open and click on install now all right so now wordpress is unpacking the package which is that zip folder so it's going to take a second it looks like the theme has already been installed successfully so we're good to go so now that we've installed the theme i'm going to go ahead and click on activate right here just to make it the active theme for our website and there we go so now we've got active is divi which is our new theme and as you can see all those other themes are here so we've just uploaded it as a new theme alright so now that we've downloaded and activated divi as our new theme we can go ahead and move on to step number four which is to create a header menu before we get into creating and customizing your website i think it's best to start from the top and create a menu and a logo where we can choose things like services or a contact page and so on so first let's go ahead and go over to the dashboard and we're going to click on pages and go to add new so this is where we get to create new pages for our website i'm going to go ahead and close out of this and so now i'm going to go ahead and title the first one and so i'm going to create a few different pages so that we can have a multi-page website now i'm only going to edit the home page the rest of the pages i'll leave up to you guys to edit but i'm going to go ahead and show you how to just add a bunch of them to your website so let's go ahead and create one called homepage and then you'll go all the way over here and click on publish and publish again all right so homepage is live so now i'm going to go over here and click on the little w for wordpress and so it'll take me right back to the pages menu right and so now i've got home page and then the two automatic pages that come every time you download wordpress so now i'm going to click on add new again under pages this one i'm going to call consultations all right and then click publish publish again back to wordpress and so now you can see how we add multiple pages i'm going to go ahead and add the rest right here and i'll see you guys in just a second alright guys welcome back so i went ahead and created a few more pages so you can see that we've got home page photo shoots consultations brainstorm ideas videos and web design so each one of these is a page that we can edit but again i'm just going to be editing the home page and i'll show you guys how to do that so let's go ahead and first create a menu on the home page and so in order to do that we can actually do it in two different ways we can go over to the dashboard we can hover over appearance and go to menus right here or the way that i prefer to do it is going down to divi and clicking on theme customizer right here alright so again i personally like using the theme customizer because it breaks out all the different settings that you can change right here into a bunch of menu headers here and so if i want to go into general settings i can do things like site identity typography stuff like that or i can go to the header and i can edit the header in different ways and so i think it's just a little bit more organized i like it this way all right so now that we have the theme customizer open i'm going to go down to menus because we're editing a menu and then i'm going to click on create new menu and so we're going to create a menu name so we're basically just titling the menu that we're about to create so i'm actually just going to call it primary menu all right and so i've called it primary menu that's just the name that i want to use and so the menu location is where you want primary menu to show up do you want it to be a secondary menu a primary menu or a footer menu and so a primary menu is going to be up here and as you can see it looks like it already took most of them including a sample page and uncategorized page so it looks like it just threw a bunch of stuff up here but this is the primary menu you know second area menu and then the footer menu is going to be down here in the footer so i'm going to go ahead and click on primary menu and click next and so now the name is primary menu and we can actually add some items here so i'm going to click on add items and as you can see it went ahead and took the pages section which is what i want it to do but you can also do custom links and you can type in your own what you want it to say right here is the link text and then the actual url is where it'll take them when you click on the link text and so like if they click on brainstorm ideas i could put in a url right here but instead that would be if it's you know not an actual page in my website so i'm going to close custom links and you can do you know other things like posts projects categories and things like that but for today we're going to focus on pages and so it looks like it has a whole bunch of pages so then i'm going to choose home page first and there's home page and so then i want consultations will be next and then photo shoots and you can see that they're adding over here and then videos and then web design and brainstorm ideas all right so now we've got our menu here on the left hand side i've got homepage consultations all the way down to brainstorm ideas and now this is actually drag and drop and so if i want to reorder them it's as simple as clicking on one holding and just dragging it down below and as you can see i can already kind of rearrange it wherever i want now one thing you'll notice you see the dotted line right there i can either have it all the way over or it goes like halfway under like this see that right there and so if i were to place it here home page is now a sub menu under web design and so if i were to go over here to web design you see how there's a little arrow you would click on web design and then you would see home page underneath and so that's how that works but i'm going to go ahead and click and drag home page all the way up to the top again just like that and then i'm going to go ahead and click on publish to save my work and update my website and we're done all right now that our menu is made we need to make a secure home page and now i know what you're thinking didn't we just create a homepage and yes we created a page that says homepage but now we need divi to understand that the home page we just created needs to be set as the default home page for the website and i know it sounds a bit confusing but i'm going to show you how to do it right now so we'll just go to the top left corner and click on the back button and one more time and so now we're going to go all the way down to homepage settings and so right now your homepage displays your latest posts and so posts are like blog posts and i'll show you you know just in a second where you can do that but we want to go ahead and change it to a static page and then we'll click on for home page we want it to display home page just like that all right so now our homepage is right here so i'm going to go ahead and click on publish to save my work all right so now that we've saved our work and we have our home page displayed as the default home page i'm actually going to show you guys how to create a logo so that you can place it right here and i'm going to show you how to do it for free without downloading any software as well so on a new tab we're going to go ahead and type in logomaker but without the e dot com just like that all right and so when we open up logo maker we can go ahead and just close out of this it's like a little video tutorial but i'm going to show you how to use it right now so this is logo maker it's a free logo maker that you can use i use it all the time and i really like it so on the left over here you've got just some basic functions so if i click on the text part it'll just open up some text and i can type whatever i want into it i'm going to hit the trash can to delete it and then if i want to go to shapes i can slide over and i can choose just a basic shape right here so if i wanted a square for instance now i've got a square over here on the right side we've got color and so i can change the color of the square if i want to i can change it to red or yellow or green whatever i want to do so i'm going to delete that one but instead of using just the basic text or like a random shape like that i'm actually going to go up to the top here and you can search from over a million different graphics to place it in your website and so for instance if i wanted to search something like a camera it'll show me just a bunch of different cameras here that i could use and some of them get kind of detailed and some of them are just you know pretty plain like this or i could search like a dog if you're making like a dog website and you've got a bunch of like dog icons and there's millions and millions and if you look right over here on the slider there's just so many that you can go through and it's going to take forever to load so i'm going to go back to canvas and so for the website that we're going to be creating it's going to be a portfolio kind of photography web design kind of website so i'm going to go ahead and find a camera that i really like so you can search camera but i already have the number saved if you go up to the little icon right here the little i for information you can actually copy the number if you ever want to save like which specific you know unit number the logo was and so i already have it saved and so here's mine it's like that and there's my logo right there so i'm going to click on it you can click and drag and move your icon around wherever you want it to be you can click on the corner right here and you can make it a different size if you want i think you know that size looks fine you can rotate it like this but i'm going to go ahead and undo that you can also do different colors like this you can do a different opacity if you want to be you know not all the way there but i'm going to go ahead and go all the way and i want it black right now and so then i'm going to go ahead and click on the text right here and then you can click and drag this icon to move it around so i'm going to put it here and i'll type something like levi hagen actually i'm going to do levi in the first one and then let me do another one because i want different fonts and so then i'm going to resize this to where it's just the size of the text same for this one just like that and so from here you can go up to the top so first i need to highlight it so you can go up to the top and you can choose first a category of font and so you can do 3d decorative funny handwriting or simple and modern which this is the one that i use pretty much all the time and then you can click out of that category different fonts that you want and so these are all simple and modern fonts just very you know plain and that's how i like it and i'm actually just going to use roboto and so then you can go over to the setting right here and you can change the basic you know text settings you can do line width line height letter spacing so you can make it wider if you want which i'm not going to do that and then i'm going to go up to bold it just like that and i think that looks good i'm going to make it a little bit bigger and i'm going to make it black to match the logo same with hagen so let's make it black and i'm also going to make it all caps just like that all right i think that looks good and so now you see that when i hover over i can actually hover and highlight the box like this and so if i were to click and drag i can just move whichever one i want and then if i want to hover over two you can actually click and just highlight like this and then now i can move both of these as a unit but then the second that i click away from it i can move individual again so that's kind of handy so i'm going to put that one right there and then i'm going to put hagen right underneath it i'm actually going to make hagen just a little bit bigger as well just like that all right i'm going to center both of them so i centered hagen on levi and so now i'm going to highlight both and move them as a unit now once you have the box highlighted like this you can actually use your arrow keys and you can move them around by small increments which is also very helpful all right so i think that looks good i'm going to go ahead and take hagen and i actually want to spread out the letters a little bit more so i'm going to go ahead and go back to the setting right here letter spacing and i'm going to spread them out just a little bit just like that let's move it over there we go all right so i'm going to highlight the whole thing just bring it to the center and so now you can go up to the top right corner right here and click on save logo and it's going to ask if you want to download the high resolution license file for 19. uh but no i'm just going to say no thanks download the low resolution file and so that's going to be free and so you can see that it downloaded to my computer right here so we'll go ahead and move that into a folder in just a second close that out now what i also want you to do go ahead and highlight everything and do the exact same logo but make it a white logo so all the way into the corner and click on save and then you'll go over to no thanks download low resolution and now i've got a black logo and a white logo just in case you know depending on what background i have behind it i can make sure that it's always visible like for instance if this was a white background i could put my black logo and vice versa so i'm going to close out of it and i'm going to do one more thing i'm going to again select everything and change it back to black just so i can see it and then i'm actually just going to take these away and just take this logo right here and so now i'm going to hit save one last time no thanks download the low resolution and so now i've got all three logos that i need and the reason that i took away the text and i just kept the logo is for instance we're actually going to change the site identity logo or the site icon which is this little icon right here anytime you have a tab and so for logo maker they've got like their own right here elegant themes has got like the asterisk and then like hostgator has their little alligator and so now we're going to take the logo right here and we're actually going to put it into the site icon right now so let's go ahead and go back to our website and we're going to go ahead and click on the back button right here because we're already in the divi customizer so we're gonna go to general settings site identity and so now we can actually change the site title and the tagline which is the exact same thing we did back when we were downloading wordpress and remember i created the name or excuse me the title create a divi site and then i put the tagline as creativity site in seconds to make it look professional and so you can also change it here if you decide to change your mind but we're going to go down to site icon and click on select the icon and so it's going to open up this little import so we're just going to click on select files make sure you're on the upload files tab i'm going to click on select files and so i'm going to go over to my divi folder and so here's my logos i've got the black one i actually created a white one off screen and then i've got both of my logos right here white and black and so for the icon we're going to go ahead and take this one now you can use the white one just in case you know you wanted to have a you know a white one but i like the black one especially on like a white background like this so click open it'll ask if you want to crop it in a second so from here just make sure that it's checked and click on select and so here's the cropping essentially you just kind of want to remove all of the white space that you can but i'm kind of skip it so i'm just going to click on skip cropping and we're done and now you can see that my little icon is actually right here on the tab i think it looks great so i'm going to click on publish to save my work and we're done all right so now that we've created our header menu right here let's go ahead and insert our own logo as well and we just did the icon up here so this is the final step so we're going to go ahead and go back to the dashboard by clicking on the x button here and then we're going to again go down to divi but instead of clicking on the customizer we're going to go up to theme options all right so we've got things like our default colors and things like that a lot of different settings that we can change but we're just going to go right here to logo which is up on top and we're going to click on upload and so this is the media library so just make sure you're on the upload files tab and go to select files and now we're going to select the logo that we created and so here it is right here click on open and set as logo all right so let's go ahead and make sure that we click on save changes you're going to notice that i saved my changes very often because uh there's nothing more frustrating than making a whole bunch of different changes to your website and spending a really long time on it and then accidentally closing out or you know something happens like the internet goes out or the power goes out and then you know you lost all those changes so i like saving my changes a lot all right and so now if we go and hover over the the name of our website which is create a divi site we can actually click on visit site and we can take a look at what it looks like right now and so i'm actually going to open it up on a new tab just like this and so now we've got our logo right here and then we have our home page consultations and our menu right here and then we also have our site icon i think it's looking pretty professional all right guys so next up we have step number five which is customizing your website now we can go right into actually editing the website using divi builder so i'm gonna go ahead and click on the x right here to go back to the dashboard all right so now that we're in the dashboard we can hover over our website name and go to visit site which i'm going to open on a new tab and so this is our home page so now i want to go ahead and edit this home page so i'm going to go over to enable visual builder all right and so the first thing it's going to ask is if you want like a small little tutorial but i'm going to show you how to use divi builder completely so we're going to go ahead and skip this so just start building perfect and so right here we've got three different options we can use build from scratch then we can choose a pre-made layout if we wanted to go into divi's library and use a template for their web page or we can clone an existing page and so from here i'm going to go over to use a pre-made layout so from here you can see that we have a bunch of different layouts that we can choose from if you hover your mouse over you can actually see that it will automatically scroll through and give you a little preview of what it is but you can also click on it and then you can scroll through yourself just to go a little bit faster and so we can take a look this website actually looks pretty cool and it's got a bunch of different pages that we can go ahead and download so right now we're on the landing page but we can go to the home page and this is their coffee house we can go to the about page and look at their about us i think it looks pretty cool let's click the back button you can choose a different one and take a look at it you can actually click on view a live demo and it'll open up a new tab and show you this page but just on a new tab which is kind of cool i'm not going to do that right now so i'm actually going to select a specific layout that i already chose in advance which i really like so i'm going to type in fitness and i'm going to scroll down and use this one right here which is the fitness gym landing page all right and then for this page i'm going to use the landing page as my homepage because i actually liked it better than the home page so this is what the page looks like here's the about page or we've got like their homepage which i didn't think looked anywhere near as cool as the landing page so i'm going to use this one so i'm going to click on use this layout and so right here we're actually going to have to go back to our elegant themes divi account and we're going to pull our api key which is special to your account so the way you do that is you go up to the elegant themes tab that we were on and since you're already logged in you can just go over to my account which is right here and go to account details and so from here you'll just scroll down and click on api keys but because the api key is special to your own account i'm going to go ahead and skip this part and so you'll just click here and we'll copy paste it into our website and so now that we've copied our api key which was pretty simple you just click on the api key and you can click on it and copy it we'll just go up back to our website clicking on this tab and we can type in our username and the api key which i'm going to paste right here and we click on submit now divi is downloading that pre-made loadout and so we're gonna have it in our website in just a little bit so i'll see you guys in just a moment and all right so it looks like the template downloaded just fine and i really like how it looks so let's just take a quick peek at the whole website so scrolling down we can see they've got like the top part they've got like a join now some featured programs testimonials and then a divi nation which obviously divi is you know the website builder that we're using so this is obviously a template all right so now we're just going to go to the very bottom and make sure that you click on those three dots which i already have and so i'm just going to click on save to save my work all right guys so the first thing that i want to do is go through the entire template and switch out all the colors for my default colors that we did at the very beginning of the video so first we're just going to scroll down and we can already see some orange right here and right here so let's go ahead and switch that now so with my mouse hovering over i'm going to go ahead and go to the gear icon click on edit then i'm going to go to the design tab and then under the button which actually that's probably a border so let's go ahead and check that or it might be a box shadow so let's go down to box shadow and yep it's a box shadow so right here as you can see and then i'm just going to change it to my blue color just like that click check all right now let's move down to this spot right here so it looks like this is probably a half and half so half of it is no color and half of it does have color so i bet it's probably a gradient background so we'll go over here to the settings for the entire row and then yep it looks like we've got two columns inside of the row and so with the first column if i click edit and i go to the background i bet it's going to be blank yep so it's blank and so then if i were to go back and then click on the second column cog the little cog icon and yep so here it is so you can split a row in half by doing two columns and so you can have one side with no background and the other side with a background and that's how you get like this whole box on the side right here which is kind of cool so we're just going to edit the background to be our default color just like that and click okay and scroll on down so now we've got our learn more button so i'm going to click on the settings go over to design let's go to box shadow it doesn't look like it's a box shadow so this one must be a border so let's go ahead and go to the button and we can edit the border in the button tab yep there's the border and so there's the red so let's just change it to blue all right and then click on the green check button and we'll go over to join now hover over it and click on the setting all right so we'll scroll on down to the border there it is so i'm just going to switch it to blue and just like that now the border is blue for that one as well so we'll click on check scroll down a little bit more let's change this guy settings let's drag this over if you click on this little blue pencil icon right here next to whatever text you're trying to edit it will take you straight to the design tab and whatever specific font it is so for instance right now if i try editing font heading one and i change the color so let's say heading text color and i change it to blue it's not going to do anything because this is heading number two not heading number one as you can see so i'm going to click undo so i'll go back up to heading 2 and if i change that color it's blue and so now it's blue so there's a big difference and so what i always use is just clicking on the pencil mark so now to change this orange i'm gonna click on this pencil mark it'll take me straight to it looks like it's a heading three and so i'll just scroll down to the bottom and i'll click on the blue and the check button all right here's another one i think that's going to be a border actually or excuse me a shadow because it's on the bottom and then click on the blue and the check mark all right let's see what's going on with this one actually this whole section i'm not even going to use so this one right here this whole join now spot i'm going to go ahead and go up to the blue and i'm just going to delete and that'll delete that section so now we're down in the featured program section so we'll click the little cog design tab and let's go to the box shadow and change it to blue and that changes the bottom to blue and just so you guys understand so for that box shadow right there to make it look like an underline rather than an actual shadow if i were to change the spread that obviously makes it thicker right but i'm gonna change it back down to 1. if you change the blur that's what makes it look more fuzzy like an actual shadow but if you change the blur down to 0 it's going to just basically be a line and so that's how they did that and then i bet they chose the bottom yeah it's down there and then they changed the vertical position right there down to or up to a two so that's how they do it and click check so we'll scroll down we can change the background of this guy to blue and we'll go down to background and we'll just change it to blue and we can change the background of this one to be the same gray that we've been using for the whole website so instead of text we'll just go down to background i know it's a subtle change but it's good to have continuity all the way through the website so it's really important so we'll scroll on down here's another button right here so let's go ahead and click on this one change the color that one's going to be a border change it to blue check and as you can see it's now blue let's change this guy so we'll actually hover over and go to the little blue icon right here the little pencil icon and it'll show me what kind of text it is which it looks like it's a header too so then i'll change the text color click on check edit the button right here go to design down to box shadow and change the color to blue and finally down here in their divi nation we can go to the background of this guy first close text go down to background change it to blue check and then we can actually change the background here which it looks like it's going to be the second column of this row and so yep here's column number two we'll click on the settings right there and go to background and let's change that to blue as well and so i'm actually going to edit this blue and i'm going to change the opacity to be just down a little bit so it's more of like a background and then both of my boxes kind of pop out a little bit more so something like that i like that i'm going to click on the check box one more time and then we'll go down to the bottom right corner and let's click on save just to make sure that we save our work and update it to the website all right so now that we made sure that the same blue color as the accent color is consistent all the way throughout the website let's go ahead and go back up to the top and we'll edit the top first so looking at the top i'm going to go ahead and take out this dotted line by clicking on the delete icon and i'm actually going to take out the row as well and so now i want to edit this text back here in the back corner it says gym so i'm going to go ahead and click on edit and you saw how i hovered over the actual gym until i could find the gray square so let me do that one more time here so i hover over the gym until i can find the module right there which it looks like someone put a giant negative padding in there so if i go to settings and change the actual text from jim to hagen or whatever your name is and then from there you can also go to design and it's going to be a filter remember filters are how you can kind of change things like a picture you can add hue saturation brightness contrast but down below they actually just blurred what is just basic text so just like that so i'm just going to take the blur and they had it at five i'm gonna have it at four i think that's pretty good and click on save changes and so i've got my name in the background here so now i'm going to change their title section here so i'm going to hover over and go to the settings and so for the text settings i'm going to go ahead and move this over and so now we're editing the title so i'm going to change bigger faster and stronger to the three things that i would be offering on this portfolio site and so i'm kind of putting together like a photography web design and videography website but of course you can do whatever you need to do for like whatever your business might be and so i'll put something like photography here and then something like so i've got photography videography web design and then for the title got levi hagen just like that okay and now that we've changed the title i'm going to go ahead and change the text for the button as well so let's go over to hover over the button and click on the module settings and so the text is right here so instead of get started today i'm going to do something like schedule your session and click check and so now i've got this really cool button right here that says schedule your session and so it's kind of prompting them that the second they see that i do photography videography and web design they would you know click on the button here so now i can go ahead and click right here on the module settings for this part right here and then we can edit the text here so it'll be something like 1 2 3 4 divi street and i'm just going to change this to austin texas just like that all right scroll down just a little bit all right and then right here we can change this text as well so i'm going to go ahead and click on the gear icon and in the body i'm going to go ahead and tell them something like let's talk ideas and then i'll type out a little description right here so i'll see you guys in just a second so i went ahead and typed out the rest of the description right here so i'm going to go ahead and click on the green check box and then from here i'm going to go ahead and click on save just so that i can save my work perfect all right so now we're going to go ahead and move on down just a little bit more because we're still editing kind of the content of this first page right here so i'm going to go ahead and edit this contact form and so the way that they put this contact form in here divi actually already has their own contact form that makes it really easy to just insert so for instance if i wanted to duplicate this all i have to do is click on the plus button to add a new module right below it and i can literally just type in contact right here and so there's a contact form super easy and so it automatically gives you a name email address and message box and as you can see in the content tab we've actually got all three right here so i've got name email and message now i can always go down to add new field and i can add whatever field i want and so the cool part is i can actually create the text and make my own field so for instance if i want to make a phone number field all i have to do is type in the title phone number and as you can see let me scroll down so here's my new field and it says new field so if i type right here phone number just like that it's going to put a space as well the reason i'm doing all caps is because you know it's the same as up here and so if i type in phone number it pops up right here now the field id is just a unique identifier for this field and so what would be unique is just saying its phone number because you're not gonna have a second phone number field so i'm going to do that right now all right so i've got the field id and the title and its phone number and so now i can actually edit what people can put into this field by closing the text option and going to field options right here and so under field options i can change the type of this field and so basically what it's optimized for so if i change it from an input field which can take anything to an email field it'll specifically look for a something at something.com or i can do a text area which is just text check boxes which is kind of cool or radio buttons which is where you select one check boxes you can select multiple and then i can also do a drop down and then have multiple options underneath it so i'm going to go ahead and do an input field because it's a phone number and i need to put numbers in there now input field takes anything so i can first of all give them either a minimum length or a maximum length like i only want you know nine characters or ten characters depending on how long the phone number is i can do allow symbols so here i'm actually going to change it to numbers only but you can do letters only or alphanumeric so i'm going to do numbers and now it's a phone number field so they can only put numbers in and the last one right here under field options is required field and so essentially if they were to fill out this form but skip the phone number and click on submit is it going to tell them to come back and do this or not and so if i say yes it'll highlight this box in red and be like hey this is a required field come back and fill this out before you can click on submit so i'm going to say yes because i want a phone number and so going down a little bit farther you can do conditional logic which i rarely do but you can click on enable and then you can do a bunch of different options here and i'd recommend playing around with conditional logic because it's kind of fun and then you can place a link so if they click on it it'll go somewhere but you hardly ever do that you actually want them to click and type in and then you can change the background here so it'll change this this background to you know something like a color just like this which the background only you can see right here but the background is all the way behind this and so i again hardly ever do a background on this guy so i'm going to remove it or just hit the reset just like that you can also do the same thing for any background you can do the gradient image or video but i'm gonna leave it the way it is now you can go over to the design tab for the phone number for instance and again you can highlight or excuse me hover over and go to the blue icon right here and click on edit it'll actually let you edit that specific field rather than editing everything and so that's kind of cool and so field background color so if i wanted to make it black now the background of the actual light gray turned to black which is interesting or you can do clear and so now it's kind of similar to these guys right here so i'm actually going to leave it clear because i want to show you how they did this one so they made the background clear the text is just all caps and black or it's like a dark gray and so if you want to change the text color you can just change it right here so i'll choose our set black color that we use for our default colors you can do a focus text color and so let's do blue and so i believe that's when you hover over it it's not going to do it right now because we're in builder but i'm actually just going to leave that so i'm just going to reset it all right and then you've got you can change the font font weight which is like bold so stuff like that i'm gonna leave it all your font styles you can center the text if you want i'm gonna leave it on the left that because that's what they did it looks like their later spacing is just a little bit more than mine and so let's go up by one or two pixels something like that yep now they obviously have a different font here compared to mine but you know you can always change it later you can add a text shadow if you want so this is a shadow behind the text or you can do a box shadow which is down here and a box shadow is what's behind the actual whole field like that but i'm not going to do that now it looks like they've got a line underneath which is a box shadow and they change the blur down to zero so it looks like a line rather than being blurry like a shadow so let's try this one or maybe it's just below there it is that's the one and so from here let's do the blur down to zero there's my bottom line we can change the spread strength let's try going down first yep looks like that's the right way a nice thin line just like them and then they actually made the color white so just like that and then i'm gonna go ahead and edit this color because it looks like they probably changed the opacity as well just like that i'm going to click on the check button and so i was editing the phone number but now you can edit message email or name or you can just do all of them at the same time which is kind of cool so i'm going to go ahead and click on check and i'm going to go ahead and remove oh one more thing i want to show you this little seven plus three right here is actually just a recaptcha so if you go in the content tab scroll down instead of text we can go down to spam production and use basic captcha right here you can say no and it'll take that off or you can use spam protection there's a few other things that you can do here as well like you can change the email address or you can change the redirect so the second that they click on the submit button is it going to take them to a different page and you can say yes and then put in that page url right here but i'm going to say no you can also say right here this is the success message you can also change the text of the submit button so instead of saying submit you could say something like good job and now a good job shows up in the box right there so that's a basic contact form for you i'm going to go ahead and remove this one because i like the one that's already there i don't think i need a message or a phone number a name and email address is good enough here this is basically a call to action right here on my front page so the second they load into the home page they're going to look over and say hey let's talk ideas feel free to just give me your name and email we're getting contact and so i like how it's right there on the front it's nice and easy all right let's go ahead and click on save to save our work so now that we've saved i'm going to go ahead and edit this section right here so let's go ahead and change this first text i'm going to go ahead and click on the edit button right here and then i'm going to come over and change as low as i'm going to change it to negotiable rates just like that and then instead of 39 i'll change it to 25 dollars per hour just like that and so now i'm going to go ahead and hover over negotiable rates and click on the edit button because i want to edit whatever header type this is which it looks like it's a header 3 and so i'm going to scroll down and i'm going to change the text size to be a little bit bigger just like that change the line height to be a little bit smaller so they're scrunched up against each other and maybe spread out the letter spacing i think that looks good let's go one more down all right and then you can play with other things like text shadow and everything else but i've already shown you how to do that so you guys can play with that later so i'm going to hit the check button to save changes and then from here you can also put like a little snippet about your negotiable rates like how you like to negotiate or how far you're willing to go or something like that but i'm going to leave it for now let's edit the text of this button to you know match the theme of the website so i'll say something like book now like a book your session now for the 25 dollars an hour but we can always negotiate so click on check i think that looks pretty good so now i can go over to this section right here for fitness programs and so i'm actually going to take off all of these options right here including this button so i'm going to go ahead and hover over and click delete and it looks like i've got to do it for each one i'm going to edit this text right here to say something like what are you looking for and this will be a small little menu to have a few buttons for them to click on so i'm going to change fitness programs to what are you looking for and click on check actually i want to change it to center and i think i'm going to make it just a little bit bigger so let's go to design first let's go to content and see what type it is so it is a heading 2 right here so i can either hover over and click on the blue icon right here or i can go to design heading text and click on heading 2 and now i'm going to be editing the same thing as if i just clicked on that blue icon right there and so now i'm going to go down here change the text size go up a little bit something like that that grabs their attention i like that click on the check button to save so now i'm going to insert three different icons down below and so we can go pull those icons from the logo maker website that i was talking about earlier but for now i'm going to go ahead and add the three sections so i'm going to click add another module and i'm going to type in image so now that i've got one image here i'm actually going to click on the check button because i want to insert three so i'm going to hover over it and duplicate it two more times so click on the duplicate icon right next to the setting icon duplicate and one more time so it did just make my title screen a lot bigger but when we insert the images that are a little bit smaller it'll work just fine so now let's go ahead and edit those images in logo maker so i'm going to go up to a new tab so type in on a new tab logo maker remember to forget the e dot com enter while that's loading what i want to put here is three menu options one is for a photo shoot the second will be for video and then the third one will be for web design and i want to have three options of what i provide right here in my portfolio website so we're going to create three different logos that they can click on so i'm going to click on create new design because our old logo is right there and again it's going to give you the video tutorial it does it pretty much every time so let's search something for design [Music] and we can choose something like this one i like this so i'm going to click on it and i move it up just a little bit and i like how it looks so now i'm just going to insert some text and say something like web design just like that change it to black make the box the same width as the text just like that and drag it right underneath and center it i want to make this two different so i'm gonna do this perfect so i'm gonna go ahead and click on the save button and say no thanks i'll download the low resolution file and so i went ahead and downloaded to my computer so that's good now i'm going to create one for photo shoots so i'm going to go ahead and highlight everything and click on delete and let's go ahead and pull a camera image so i'll choose something like this one right here just nice and simple looks like it's already black so that's good add some text and say photoshoot make it black text good so i'm gonna click on save and download the low resolution file for free close it and let's do one more for videos i think that looks perfect so i'm going to go ahead and click on save and do the low resolution file all right so now i've got all three saved to my computer and i can use them so go ahead and close close this tab and so in the first image right here i'm going to go ahead and hover over and click on the settings icon to edit it and then under the content tab because we're adding content to the image i'm going to go ahead and click on the image setting upload files select files and so from here i'm going to go ahead and select all three of the images which i have them here so i'm going to highlight all three of them by just holding command or control and clicking on all three and i'm going to click on open so it'll upload all three so let's do web design first make sure it's checked and click on upload image and then i'm gonna go to the design tab and click on alignment and center align it i'm to go to the sizing tab i'm going to change it to be a little bit smaller i think that's a good size right there so 135 pixels and i think it looks great so i'm going to go ahead and click on the check button right here let's go ahead and do the next one so i'll hover over and click on the setting tab click on image we'll take photo shoot next click upload image and so again we're going to go to the design tab alignment is going to be center then we'll go to the sizing tab and we'll make sure that the height matches web design which it looks like the 100 pixels kind of matches it remember that when you create a logo in logo maker if one is bigger than the other it's going to be a little bit different size so i'm going to click on the check button and the last one so we'll hover over the image click on settings image and we'll do the videos last click on upload image design tab and we're going to change it to the center alignment again sizing scroll down to the height and we'll shrink it up to be about the same size as the others just like that all right i think that looks great click on the check button i'm still going to edit the web design to be a little bit bigger i think it's just a little bit smaller than both the other two but maybe my eyes aren't right so i'm just going to go up a little bit i think that looks great so i'm going to click on save changes and so now i have all three of my icons right here and i want to actually make them buttons that will take them to specific parts of the website or to different pages so we can go ahead and do that right now we'll go ahead and click on the settings icon for web design first and under the content tab we're going to scroll on down to the link now i always say to change into a new tab because you want them to be on your website for as long as possible so in order to do that instead of having it open in the same window so if i were to click on this button it doesn't open a new tab it would just open on this tab i want it on a new tab so that my website stays open on their browser and then it'll open a new tab to the site that they click on right here and so the image link url is when they click on this image where is it going to take them and so i'm going to take a url from my actual web design page right here so let's just click on the check button for now let's go ahead and click on save so what i'm going to do is open up the web design page on another tab and copy the url so i'm going to go ahead and go back to my dashboard i'm going to open up my website on a new tab and so now i'm going to go over to the web design page which we have not edited yet so it's going to look like the beginning of our homepage just plain like this so i'm going to copy this url by hitting controller command c i'm going to paste it behind the link right here so i'm going to click on this one go to the settings under content just go down to the link and it still says new tabs and i'm just going to place the url right here by hitting control or command v and clicking save changes and then i'll go ahead and click on save which it looks like it's auto saving so that's pretty nice all right and so now i'm going to go ahead and do both of these buttons the same way that i did the web design button so i'm basically just going to go back to this tab and open each one of them on a new tab copy the url and put it into the link section so i'll see you guys in just a second all right guys welcome back so i went ahead and edited all three of these icons to be buttons so for instance if you click on settings and then under the content tab you go down to link you'll see that i have the hyperlink from the videos photoshoots and web design tabs for these three services that i would provide and so i have them all three set to open a new tab and so the second they click on one of these three it takes them to a new tab under the web design page and so that would be where you would actually edit one of these pages on your own time and change them to be what those services are all right so i'm going to go ahead and click on the check button and i am going to go ahead and save my work all right so now the fun part let's go ahead and customize this website to be a little bit cooler so i'm actually going to use my own images so i'm going to go to the settings tab for the entire section which is the blue and so as you can see it wraps all the way around the screen and so i'm going to click on the settings tab and then from here we're going to go to the background under the content tab right here and then for the image which is the image tab right here i'm going to go ahead and click and upload my own image so i'm going to go to upload files select files and so from here i'm going to go ahead and upload all of my images and now it's going to take a second to upload all of my images so i'm just going to wait a second here all right so now that all my images have uploaded i'm going to go ahead and select this one which is a picture that i took of myself doing a flip so i'm going to click on upload an image and that's that so now i've got a background image now i'm going to go ahead and edit kind of where it's standing so i'm going to scroll down and so the background image size is under cover which is good but it looks like the background image position is top right so i'm going to change it to center just like that and then for image repeat i'm going to leave no repeat which if i said repeat it would look like tiles but because i have it under cover you're not going to see the tiles unless i selected something else so i'm going to say no repeat background image blend we're not going to deal with that right now so now under the content tab i'm going to go back to background and this time i'm going to edit the actual gradient because they've got a gradient overlay just like i showed you at the beginning of the video and so they did place the gradient above the background image so that's good looks like they've got the start position and the end position almost at the ends but this one's like 90 so i'm going to change this to be actually kind of a blue color so let's do this i'm going to change it to blue just to kind of match the whole theme of the website change the opacity down a little bit maybe a little bit more gray actually it's a little bit more white i think that's fine and then for this color we can do the dark gray color but we'll change this opacity way down that's a little too white i actually like the darkness so we'll do that let's change the direction well it looks like it's a radial so i'm actually going to do a linear just like that and then i'm going to change the direction anytime you want to see the actual direction a little bit more clear you can bring these two together and you'll see a definite line and so now i'm going to change the direction to a little bit more of a diagonal i like that and so now i'll change the start position to way over there and the end position to way over there maybe a little bit darker like that yep i think that looks good i actually want a little bit more blue in the top and now i'm going to change the blue color to be a little bit more blue kind of like that i think that looks good there we go i wanted like darkness with like a tinge of blue all right so now i'm going to click on the check button to see my work and i'm gonna go to the bottom right corner and click on save and so as of right now i think it's looking pretty cool we've got my name in the background i've got my name and big letters here and the three things i provide we've got our you know header menu up here and it looks pretty good our logo and everything and then when you scroll the header menu stays in place and just shrinks up a little bit and so i like that we've got a little idea section where they can contact me about you know content creation phone number and where i am we've got the three services that i provide as well as how much it's going to be so they really get a lot of information just by looking at my home page well specifically the top of my home page just right here so i do like that one thing i want to do is for this column i want to add a gradient and i also want to add a gradient back here as well so i'm going to go over to the row settings because i bet you it's going to be the row with three individual columns which yes it is and so i'm going to take column number one which is way over here and edit the background i have a gradient so go down to the background tab and under gradient it looks like it already has what i'm looking for but it made it a whole line and so i actually want it to be a little bit more like a gradual so i'm going to go down and see how it's 50 50 that's what makes it a line but if i were to drag these apart it's going to make it more of like a fade which i like so now when you scroll down my image fades into the white background down here i kind of like it so i'm going to click on check and then we can also change the background of this column as well because there's one two and three columns so i'm gonna go over to column three click on the edit tab i'm gonna add a gradient to this side and so it's automatically gonna throw it over the background which is good but i'm gonna make it a lot more opaque so let's change white actually i want the dark to be on top and i want the white to be on the bottom just like that so it kind of looks like it goes from the background up into my image i'm going to do the same spread that i did on the other one so 90 so it matches in the same spot right there and it's going to go up into the darkness the start position is fine because this is the start of the black so i think it's fine just like that and then one last change i'm going to do is i'm actually going to change this darkness to be a little bit more opaque so that it shows the image behind it just like that i'm going to change the white down to a little bit more of a darker color just so that you're able to see the text right here and i'm going to click on the check button and as you can see as i'm editing the website i kind of play around with what looks good i don't just choose one thing and just leave it there so i'm gonna click on the check button one more time and click on save okay so i think it looks pretty good up on top so let's go ahead and scroll on down to the next section which right now it's like a join our gym section but i'm going to go ahead and customize this to be an about me section so first things first i'm actually going to delete this top part because i don't really need a number with an initiation fee i already have my fee placed up on top which of course could be anything but i just chose 25 an hour i'm going to also delete that dotted line i think it's kind of pointless so you can delete just the gray module but then the green row would still be there so i'm going to go to the green and delete the row and it'll bring everything up just a little bit and so now it's clean i've just got one green section one module here and one section so now let's go ahead and edit this guy right here i'm going to click on the gray icon i'm going to take out the bottom paragraph and say something like about me and click on the check button i'm going to go ahead and add another gray module underneath it and it's going to be an image so now i'm going to add an image of me because it's an about me section so i'm going to choose this one right here and click on upload image now it's a little too big for what the image actually is so i'm actually going to go ahead and shrink it down a little bit so it's not as pixelated so i'm going to go down to design sizing go to the height and shrink it up just a little bit i think that looks fine and now we're going to go ahead and scroll on up to the alignment right here and then change it to center and so now it's right underneath the about me tab i'm going to go ahead and scroll on down to the box shadow actually i'm going to do a border instead so i'm going to go down to the border tab i'm going to add a bottom border but of course you can add a left side a right side or a top or all the way around i'm going to choose the bottom the border width i'm going to increase just a little bit and so now you can see it and i'm going to make sure that it's my default dark dark gray color which it already is i'll scroll down just a little bit more just to give it a little bit of like an underline for my image i think that looks pretty good i'm gonna go ahead and click on the save changes so now i've got an about me title an image right here so let's go ahead and add an actual about me section so i'm gonna go ahead and underneath the image click on the gray add new module and now i'm going to type in text and so now right here i'll see you guys in just a little bit i'm actually going to paste an entire paragraph of an about me section that i already have written out so i'll see you in just a minute all right welcome back so i went ahead and pasted my own about me section that i went ahead and typed out beforehand so i'm going to go ahead and click on the check button right here let's go ahead and save our work and so i'm actually going to edit this button right here and click on the settings tab and for the text for this button i'm going to change it to something like learn more and click on check and so right here this could be a button that you have as a separate about me page or it could go to like a consultation or a contact page if you wanted so if they wanted to learn more about me for some reason they could click on that button and get you know an email or something like that i think that looks pretty good let's go ahead and edit the background image because right now it's still got that gym membership kind of image in the back along with what looks like a gradient so i'm going to go ahead and go up to the sections tab up here click on the gear icon and for the background you can see that whatever is blue means that they already have activated so if it's gray they don't have a video or a color but they do have a gradient and it's right here and it looks like they've got white and clear and then they do have an image as well and so it's this guy right here so i'm gonna go ahead and change the image first to a picture of a train that i took right here and click on upload image and so now i've got that picture of the train in the background and let's just make sure that it's cover and center i like that and so now we're going to go to the gradient and let's edit the gradient a little bit i actually want the image to be a little bit more prominent rather than a white background so i'm going to go ahead and change this to be a gray background and then for this color let's change it to a white background it's 180 degrees so the gray is on top and the white is on the bottom let's actually switch them so i'm going to change this one to white and this one to dark there we go now i'm going to change the opacity of both to be a little bit lighter here we go and then scroll down and i'm going to check out so it looks like they've got it from 0 to 100 so i think it looks pretty good i'm actually going to change the white to be a little bit brighter so that the black pops out a little bit more so go back to select color and for this white side i'm going to edit it to be a little bit brighter just like that and i actually do want the bottom to be a little bit darker maybe just a little bit more transparent just like that i think that looks great so i'm going to click on the check button and then click on save to save my work all right so now that we've saved our work i actually am going to edit this text to be white now so i'm going to go ahead and click on the gear icon go to the design tab and then under text i'm going to go down to text color i'm going to change it to white so we could do like a gray color or a white color which pops a little bit more i think that's good so i'm going to click on check now i'm actually going to add a little bit of space in between the image and the text so i'm going to go ahead and use the margin by just hovering over the edge and on the outside of the square i'm going to drag down just like that all right so i think that looks pretty good let's actually add a little bit more of a darker background so click on the settings tab for the section background and then under the gradient actually i'm not going to change the color i'm just going to move it up a little bit there it is i think that looks perfect so i'm going to click on the check button and so here's the about me section it goes from dark so you can see the actual trees and you know some of the grime of the bridge and then when you go to the top it goes straight into white and then blends into the background of this image here so i think that's a very smooth transition i like it so let's go ahead and change the text of the button to be white so that it pops off the background so let's go back to design for the button so i clicked on the gear icon go to the design tab now under the button tab you can change the color of the text and so button text color change it to white save changes just like that and then save our work all right so let's go ahead and scroll on down to the next section so this is like their featured program section so they've got two rows one row right here and it looks like they've got three columns in it and then they've got another row up here and this row just has two columns they left one of them blank so that it would provide space so that the text could be on the other side so i think that looks cool let's go ahead and edit this text i'm going to make this into a photo gallery section so i'm going to go ahead and click on the module settings and let's change this to something like photo gallery and then i'm actually just going to leave this as dummy text but you could put some kind of like a little description here of like the type of photography that you do or whatever else that you're trying to show or display here so if this was like a you know a services section you could do you know a little explanation about your services so i'm going to go ahead and click on the check button to save my work now of course you can always go to the design tab and change this if you wanted to do a different font or something so you guys already know how to manipulate text and then down here sign up for a class i'm going to go ahead and edit this button and the text is going to do something like book your own photo shoot so this is like you know i'm showing them the pictures that i do and then i have an option right up top for them to go ahead and book a session and actually instead of a i'm going to say your just to make it sound better for them so it's like book your photo shoot now all right click on the check button so let's scroll on down so now in this row right here we've got two no three columns so if i were to click on the settings tab right now you'll see three columns just like this one two three so first of all let's go ahead and delete everything in the columns because i want to insert pictures not text boxes i'm going to delete this widget or module hover over this one and delete it and this one and the button all right and so now i've got three but i actually want to make it into two so i'm going to go up to the layout or the structure of my row and instead of having three columns i'm going to go back to two and so now i've got one and i've got two and it already has a little bit of like spacing above so that's kind of cool so now i'm going to click on add new module actually first let's go ahead and make the row the full width of the screen so we're going to go to the settings tab for the row under design we're going to go to sizing and for right here for max width and for width we're going to change the 100 from 80 and then we're going to change the max width to the whole screen just like that all the way up and so now if i click save changes you'll see that the row takes up the entire space and so each picture will take up half of the screen and that's how i want it so i'll go ahead and click on the add new module and let's add an image and now as you can see this image takes up half of the screen which is what i wanted to rather than only getting cut right here and so now i have an image i'm going to go ahead and click on save changes i'm going to hover over the image and duplicate it a few times one two three and so now i've got three images down below and now i can drag one over to this side and so now i've got this cool offset kind of setup so now i'm going to duplicate this one a few times one two so now i have three so let's go ahead and do a third one three so now i've got a few images actually i'm going to delete this one we'll see how many we do so now i'm going to insert some of my images just to show them off so i'm going to go ahead and hit on the settings tab under image under the content tab which always opens up first i'm going to click on this one and i'll start inserting some of my images here click on upload image check here click on the gear icon i'll do this one click on upload an image check edit this one let's use this one now let's use this one to be the other train now right off the bat i think this image is a little too dark i'm going to go ahead and go to the design tab go down to filters and for this image i can actually apply my own filter so i'm just going to increase the brightness just a little bit just like that and now it's going to be a little bit easier to see without someone having to turn up the brightness on their computer screen just to see this image all right and click on the check button and you can do that for anything so you can have i can edit any of these pictures right here but just go into the filters tab and i can change saturation brightness contrast whole bunch of different stuff you can even blur it for fun if you wanted to make it look terrible i'm gonna leave it just like that and click on the save changes let's go ahead and edit this one as well that looks pretty sweet click on the check button then i'm going to actually add one more picture because it looks like now there's just a bunch of blank space here because that was a vertical picture so i'm going to go ahead and just duplicate this one it's going to place the same picture right below it and so now i can just change the picture by going to the settings tab click on the image that's already there and insert my own image and this is a picture of a friend of mine that i took and click on save changes i think that looks pretty cool so now i've got this photo gallery section so anytime they come into the website and they come down here they'll see a bunch of images and here's a little tip or trick for you guys when you guys are doing like a portfolio website in case you are interested in photography always try and place the same images close together so for instance i've got my hawaii pictures right here and then i've got my two train pictures and then i've got my friend now for this one this is the same rain picture that i took so i kind of keep them grouped together so i think that looks pretty good let's go ahead and go down to the bottom corner and click on save our work all right so let's go ahead and move on to the next section which is the testimonial section and so these right here are just two testimonial widgets and so if i hover over the gray right here you can go ahead and add as many as you want so if i hover over and click on the duplicate button now there's another one right below and then i can just change the picture in the text so for instance i'll click on the gray gear icon right here and i can go ahead and change the author to my name i can scroll on down to the body text and i can just highlight all of it by triple clicking and edit to something like this is a cool website and then i can click on image right here and i can replace the image with whatever i want and so i'm going to put my image in there and then i'm going to click on upload image and just like that clicking on the green save changes button now i've got my own testimonial right here with my picture name and what i want to say so i think that looks pretty good but i'm going to go ahead and remove mine because i think it looks better just with two like that all right so let's go ahead and scroll on down to the next section which is the contact section so first let's go ahead and insert our own image into the background i also want to remove this blur text i really only wanted it on the front page so i'm going to go hover over the section that's over here and just delete it completely all right and so then i'm going to kind of come up a little bit and i'm going to add a little bit more space above so i'm going to click and drag on the margin and add a little bit more space just like that i think that looks pretty good so let's go ahead and go over to the section settings i'm going to add my own image into the background it looks like they've got a gradient and a background and i bet you it's radial because it looks like a circle so if i click on the gradient it is radial yep and i think the radio looks fine so i'm gonna go back to the image and i'll change it to another image that i took of some palm trees just like that and then i'm going to go ahead and scroll on down and change the gradient so actually click on gradient and then scroll down i'm going to change this color to be a little bit more opaque just like that i think that looks pretty sweet and i don't mind the start position and end positions i'm going to leave them just like that i'm gonna go ahead and click on check to save my work let's go ahead and change the title of this section as well so we'll go ahead and hover over go to module settings and under text let's go ahead and change this first to contact me and then i'm going to change this to something like schedule create inspire all right i think that looks perfect go ahead and click on the check button to see my work so now i've got schedule create inspire contact me we've got another contact module it's a contact form down below so we can go ahead and click on the edit icon i want to go ahead and add one or two more fields so this is where they can actually get a little bit more specific about what they want when they contact me so i'm going to go ahead and add two more fields so this one is going to say what are your expectations just like that and i'll change the field id to expectations there we go and now for field options i don't need a minimum length or anything all symbols are allowed an input field is perfect i don't need like email or anything i can do a text area is it a required field yes i think i want it required because i want to know what their expectations are for their photo shoot or video shoot or what they're looking for for web design i need to know some details so i'm going to leave it there so click on the check button it'll take me back to the contact form so i'm going to go back up i'm going to add another field and so you see that the id is what you see on the back end of the contact form so when i put in expectations even though the text is what are your expectations this says expectations so let's actually edit that because it's going to bother me i need to have a capital there all right click on check so let's go ahead and add a new field by going up to the top click on add new field and so this one is going to say something like estimated number of subjects just like that and then for field id it'll just be subjects just like that so now let's go down to field options it's going to be an input field but i want to specifically only have numbers so i don't need minimum or maximum length allowed symbols only numbers so now they can only insert a number and i need it to be required because i need to know how many people will be in the pictures or the video or what we're going to be doing there and then you can do conditional logic links or anything like that but again like i said for contact forms you really just want it to be pretty simple i'm going to click on the check button for the contact form here i'm going to change the email and so if you don't know what this means you can always click on the little information button but this is the input email address so this is where it's going to send to and so i'm going to go ahead and click right here and i'm going to type in my own personal email and then you can change the message pattern as well so you can put in some hard code where you can kind of type in like topic message body conclusion and things like that so you would put like message colon and then you could insert you know the bracket of code that would insert an actual intro or outro or something like that so you can actually code the message but i'm not going to get into that right now it'll be fine if they just send me an email to this email and again you can do a redirect so the second they hit the submit button do you want it to send them to a separate page like a thank you page or a confirmation page i'm going to say no it'll leave them on this page when they hit submit it'll just send me an email you can do spam protection so you can do you know the basic captcha or you know spam protection service and then you can do uh the link background and admin label i'm just going to click on the check button and so now my contact form looks pretty full i'm going to ask for their name and email address everything is required i need a message kind of what they're asking me to do what they're expecting from it and how many people i'm going to be doing it with so i think that looks pretty good let's go ahead and go over to this side over here and this can be like one last services section kind of listing off like okay what do you want me to do for you just as an idea as they're typing out their message and their expectations they'll look over here and see oh i guess he can do a brainstorm session or he can work with me on a photo idea so click on settings under text let's change this to something like what we can do so this is like what we can do together if you contact me and so we'll go down below and we'll change this one first to and then we can change the second one too and then lastly all right so i've got three things that we can do together click on check i think that looks pretty good and then lastly i can go down here and i can change this one as well and so this is like a specific button straight for you know the brainstorm ideas and so for instance i can open up brainstorm ideas on a new tab and take the url and then i can go into the button settings here go to settings and then under link for the button i can take the link url and i can paste brainstorm ideas as its own page and put it as the url here and so when they click on help me create that'll say help me create something i need a brainstorm and so then we'll go to the brainstorm page and then i'll have more information about you know my brainstorming services or whatever so i can click on the check button there i think that looks pretty good so let's go ahead and click on save in the bottom corner all right so now that we saved our work and we finished our contact form at the very bottom let's go ahead and scroll all the way up to the top and the last thing that i want to add is going to be just some motion animation to the website so when it loads in it's going to do some fades and some cool zoom effects just to make it look a little bit more professional we'll click on the gear icon to edit and then from here we're going to go over to design and drop down to animation tab under the animation tab we can choose between none fade slide bounce a whole bunch of different things so if i click on bounce it'll bounce in just like that it kind of goes back and forth so i'm going to choose slide just like that because i think it looks pretty professional i'll change the duration which actually it's all the way up so i kind of like that so i'm going to go ahead and click on the check button now i'm also going to go over here and hover over the module that i have in the top corner and click on the gray module settings go to design all the way down to animation and it looks like slide is already selected and so the animation direction is from the right so that means it comes from here over this way so check let's go ahead and make sure that this animation is from the left so we'll click on the gear icon go to design all the way down to animation and it is from the left so let's go ahead and hit check and we'll go down to the bottom right and click on save my work now let's go ahead and see what we just did so i'm going to go over to my dashboard again hover over my site name and click on visit site on a new tab and you'll see that the second the website loads in is going to have both of those texts fade in just like that and so i think that looks great one goes one way and one goes the other way and it kind of pulls up together so i think that looks good so now let's go ahead and do motion effects for the rest of it so i'm going to choose this section first go over to the row settings design down to animation i'm going to choose slide and for slide direction i want to go up so it's going to slide up like that i think the duration is fine and the delay is fine now for this next one down below i want it to slide in differently and so i'm actually going to go to the row settings and then under column number two which is the blue part over here go to the settings design all the way down to animation again now i'm going to slide and i want it to slide from up or i want to slide two in that direction up the duration is fine but i'm going to change the delay to be a few seconds behind so let's go with 200 ml actually i'm gonna go with 100 milliseconds and so what this does is an animation delay does the exact same animation as this gray part but this blue part is going to wait 100 milliseconds to go so this one will come up first and then the blue will come up second and so i think it looks better when it's sequential rather than both of them coming up at the same time and i'm actually going to increase it back to 200. i want to have a little bit more time just like that and we'll click on the check button to save our work so i'm going to go ahead and scroll on down to this next section right here and for the what are you looking for part i want these three to zoom in so i'm going to go ahead and click on one of them go to settings design and down to animation and then i want it to zoom in from the center just like that i think that looks great so we'll go ahead and hit check we'll go to photoshoot for the second one click on the settings design down to animation again we'll choose zoom and this time same duration but let's change the animation delay to 200. actually let's change it to 100 and we'll do videos as 200 so we'll click on check let's do the last one video design animation zoom and we'll change it to 200 delay and click on the check button let's go ahead and click on save and now go and open it up on the new tab again just to see what we did so i'm going to go to our dashboard and click on visit site on a new tab so now our title slides in from two directions these two slide up i think it looks pretty good scroll down one two and three i like how it does that so that looks good let's go ahead and edit this section over here so i'm gonna go ahead and close out back to our website editing i want the negotiable rates and the 25 an hour to bounce now you'll rarely see me use the bounce animation just because i think it looks a little cheesy in most ways but when you're using it just to kind of put emphasis on a price i think it looks okay so under the design tab we'll go down to animation and instead of slide we're going to choose bounce and instead of that we're going to change the direction to center and so now it just bounces in place which i think looks good it's kind of putting emphasis on i've got negotiable rates so i'm going to leave it like that the duration is good we don't need a delay or anything so i'm going to click on check and bottom right corner let's click on save so now let's go ahead and scroll on down to the next section for about me i think i'm going to have the entire section just slide up as an animation so i'm just going to go to the section itself up in the top corner click on the setting go to design all the way down to animation and we're going to click on slide and instead of center i want it to slide up just like that now i want it to slide up very slowly just like that now click check so i think that one's going to be fine scroll all the way down photo gallery i think everything looks good here i don't think i'll add any motion effects to the pictures because it might get a little uh a little too much a little dizzy especially with having so many pictures there anyways all right and lastly we've got the testimonial section i think this one looks good but i do want these two to flow in from each side so i'm going to go to the settings for the individual module go to the design tab down to animation and i want it to slide in from the left and go to the right so i want direction is to the right just like that let's change the duration to 1500 and we'll click on check and let's click on the other one and do it from the left so click on the design tab and go all the way down to animation and we'll choose to slide in with left as the direction and let's change the duration to 1500 as well and click on the check button and so now that's done let's go ahead and scroll on to the next section which is the contact me section and so what i want to do with this one is i want the title to slide in from the left side and i want these two boxes to slide in from the right side and so what i'm going to do is i'm going to go first to this row and i can change each column so the first column is going to be the contact section so for this one settings design animation and i want it to slide in to the right side so this direction i click on the check button and then the column number two which is this blue column i want it to design animation slide in to the left click on save changes one more time and then just the title can also come in from the left hand side to the right hand side design animation slide in from the left looks like it's already done so we'll click on check go to the bottom right and click on save and now we can open up the website on a new tab and we can preview our work so let's go ahead and do that by going up to the other tab and opening our website up on a new tab actually i'm going to do a new window all right look at that so now we have our title that slides in from the left and right right there and this guy came up from the bottom so as we scroll down just a little bit we'll have these three pop in sequential and then this guy was bouncing so i think that looks pretty good for the rate so we'll scroll down a little bit more the about me section slides up from the bottom i think that looks clean the photo gallery i left pretty plain just because i wanted the emphasis on the photos and then we pass over the testimonials section and here is the contact section and so everything slides in from left and right and i think it looks fantastic all right so let's go ahead and go back into the visual builder all right and so now that we're done with the animations we can go ahead and move into our final step which is to configure your website for the mobile version so in order to do that we're just going to go down to the bottom and click on these three little dots right here and then go over to the left hand side and you'll see that we've got a desktop mode right here we've got a tablet view and a mobile view and so these are the different responsive modes of your website so if i click on the phone view you'll see that it will compress my website down to what looks like a phone screen now divi is going to do its best to fit everything into the mobile screen but usually what you're going to have to do is just move some things around and play with the spacing just to make sure that it's cleaned up on this smaller version now it's important to clean up the mobile version because more than 52 percent of the traffic that goes to your website is going to be from people on their smartphones while they're on the go and so it's important to make sure that this looks clean and professional so let's go ahead and scroll on through it looks like the call to action is compressed correctly so i think it looks great scroll down a little bit further we've got all three of the icons which they can click on and it will take them to different web pages the about me section looks just fine looks like the photo gallery just put all the pictures on top of each other so that's good going to the testimonials section it put them on top as well and then the contact section looks fantastic so it looks like we don't actually have to make too many changes in the mobile version looks like it's already pretty good now keep in mind whatever changes we make to the mobile version will not transfer over to the tablet or their desktop version it always cascades down so if i make a change on the desktop it'll affect the tablet in mobile and same if i make a change on the tablet it'll just affect the mobile but if i make a phone view change it's never going to affect the tablet or the desktop so this allows me to change the mobile view to be customized just how i like without having to affect the tablet or the desktop view so i think it looks pretty good i'm going to go ahead and switch back over to the desktop view i'm also going to go ahead and click on save just to save my work all right guys and with that i think we're pretty much done with the website i think it looks fantastic very professional congratulations on making it to the end of the video and finishing your website using the divi theme alright everyone that's how it's done together we built a professional multi-page wordpress website using divi's drag-and-drop theme how do you guys feel about it my hope is that this video has helped you guys tremendously and has given you guys the tools to edit your website long after you've finished watching me monologue now that you have a basic understanding of how to manipulate the basic aspects of your website using divi you have reached an exciting part of your web design journey from here you can edit the rest of the pages just as we did the homepage and complete your fully functional website for your business or whatever else you want to use it for if you learned anything of value from this video i would really appreciate it if you would drop a like on today's video in addition be sure to subscribe to the channel because we're constantly putting out in-depth tutorials like this one and feel free to check out create a pro website on instagram and tick tock for more quick tips web design ideas and behind the scenes my name is levi hagan with create a pro website wishing you the best keep creating my friends you

Channel: Create a Pro Website

Views: 10,726

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

Id: jxGyudEYnvY

Length: 108min 40sec (6520 seconds)

Published: Thu Dec 10 2020