Wordpress Tutorial for Beginners 2022 | Create a Complete Website Step-by-Step

Key Takeaways

hey guys in this video i'm going to show you how to make any website you need to create using wordpress for any business or really for any other purpose with absolutely no coding needed so we're going to cover every single step in the process from start to finish so by the end of this video you're going to have a really beautifully designed wordpress site like any of these or honestly any combination of any of these that you're going to create simply by choosing a base layout customizing it with your own elements images text colors content all that good stuff and then you can make it even more custom if you want by just dragging and dropping any element you want to include or by adding in any whole section that you need for your content choosing from hundreds of these pro designed fully customizable layout blocks and with just a few extra clicks we're going to make sure each page looks perfect on all of your mobile devices too so i've personally created hundreds of websites like these using this exact method it could not be any easier and the possibilities are truly limitless so i think you're honestly going to forget you ever needed a web designer or a developer to do any of this for you and in case you ever want to skip to a specific step in the process i have included chapter markers below this video down in the description for easy reference so if you're ready we're going to start from the very beginning by getting you set up with a free domain name like yourbusiness.com for instance as well as a huge discount on the easiest most reliable and cheapest wordpress hosting plan that i personally always use and in case you don't really know what exactly web hosting is it's just the digital storage for all your website files like you know your web pages your images all that stuff needs to be stored on a really reliable computer somewhere so that's hosting and to get that you just want to go to westmcdowell.com hosting and that's going to give you my affiliate discount pricing on web hosting along with that free domain name so just go to westmcdowell.com hosting and we can get started right now okay so when you follow that link wes mcdowell.com hosting you're gonna end up right here so as you can see you've got quite a discount 295 as opposed to 8.99 a month and you've got all kinds of great stuff with bluehost you've got expert 24 7 support i hardly need them but when i do they're right there it's just a really easy way to get your wordpress set up and you do get that free domain name if you need it so i'm just going to click on get started we're going to get through this pretty quickly okay so now it's time to choose your plan basic is just fine as long as you're just creating one website if you're a web designer creating multiple sites for clients and you want staging servers then go with one of these but if you're just a business all you need is this 295 a month plan so i'm going to click on select now here's where you can either use a domain you own so if you already have a dot com you want to use you would just type that in here and it'll walk you through the steps of transferring it or if you want a brand new domain all you need to do is see if the one you want is available so i would just type in yourmostprofitablewebsite.com and we'll see if that's available click on next all right we are in business it's available so all you need to do from here is input all of your billing information choose your account uh plan so basically it is cheaper the longer out you go with 36 months but you can go down to 12 months that's fine too then we have all these extras so i like to just uncheck all of them i don't think any of them are that necessary and i'll click on turn it off this one domain privacy and protection is the only one you might consider that's going to keep your name off potentially being on any spam lists but i've actually not really encountered that so it's up to you if you want to keep that checked or not and then enter in your payment information and check right here and then click on submit okay so when everything goes through all you have to do is click on create your account you've already got your domain name here now you're just going to create your password and i'm just going to use the the one that they got for me i'm just going to take note of it i'm just gonna do a copy then click right here to show that you've read an agreed and then create account now go to login and then type in your password and then log in i'm just gonna save it okay now create your website i'm gonna choose skip this step and i'm gonna keep choosing saying skip this and then i'm finally gonna choose limitless customization and they're gonna ask you a few things what type is it let's just say you know just choose the type of your business or you know we can actually just click on skip this step i'm going to do that now here's where you want to put in the name of your business or the name of your website tagline's not that important i'm going to skip that and click continue we actually do not need to pick our theme here because the next step we do is going to take care of that for us so i'm going to click on skip this step for now they're installing wordpress and now we're ready to actually log into wordpress where the fun can begin so just click right over here okay so we're now inside of our wordpress dashboard actually if we click right here we're actually in the dashboard uh where you would be when you log in to wordpress each time so a few things i want to show you real quick before we get started so within wordpress the side panel is where you're going to go this is where most of your options are so whenever you write a blog post for instance you can click on posts add new same with pages but the main thing i actually want to talk about right now is users because you didn't actually choose a password for wordpress yet so we're going to go ahead and click on users all users now when you signed up it did create a user account for you so i'm just going to click on edit and i'm going to go down to the bottom and it allows you to put in your first name your last name all that stuff the really important thing though is that it has your email correct and then it has your password so change it to something you'll remember and then click on update profile then whenever you need to log back into your account you just go to yourwebsitename.com wp admin you're going to put in your username and your password so the only thing left before we can start building is we need to add the right plugin so let's go over to plugins on the left side and i just want to do a little cleanup here so i'm going to click on dismiss i'm going to get rid of all of these annoying pop-ups this is up to you if you want to do it or not but what i'm going to do is i'm actually going to choose all of these plugins and i'm going to deactivate all of them and i'm going to choose them again and then i'm going to delete them and then click on apply now we're going to add in the only plugin we actually need and that is called starter templates so just type that in the search bar and this is the one right here it's got a over a million installs it's a great plugin so i'm going to click on install and activate so what this is doing is it's getting us set up with the page builder we need as well as the theme we need which is astra now just click on see library and here it's going to ask you which page builder you want we want elementor it's definitely the best one it's all i recommend okay so now you can see how many options we have for website layouts there are i haven't counted them but there's got to be like hundreds of them and they're organized in a few ways so first of all you'll notice that some of them have this little premium marker on them that means you have to have the the pro version i believe of starter templates so let's go ahead and get rid of those so we're only left with the free ones all right so we're just going to go up to all and then we're going to choose free and then that's going to give us that's going to leave us only with the free options so from there you'll notice how a lot of these are named for the kind of business uh that they're marking this out for so online health coach looks like a plant store learn baking but i want to tell you there's nothing inherent about this website that makes it only for online health coaches right if you change that image if you change the text to say something else suddenly it could be for a lawyer or a doctor's office it could be for anything really so i don't want you to get too bogged down in the the categories that they kind of come up with for you because you're meant to change all the images change all the text change the colors to fit your brand so all we're really looking for here is the right layout to fit your content the best and you can go ahead and preview any of these just by clicking on it and then you'll see all the pages it comes with this one comes with three different pages and you'll just scroll down to see the basic layout of it and if it fits your content really well and you can kind of start to see it coming together then it might be a good one for you and you can just click through all these and see what the different layouts are there but again don't be too uh don't look at the the images they're using or the colors they're using because that really doesn't play into it whatsoever all right so we're going to get started though and 9 times out of 10 i like to start with this first one outdoor adventure i think it's just a nice base layout for just about any business it's got some sections that i don't always use but i'm going to show you in this video how easy it is to delete a section that you don't like add in a new section that fits your content better and then you know swap section for section we can rearrange them to really fit exactly what your content needs the most so this particular template comes with one two three it comes with five pages and they're named obviously about services projects contact but there's nothing like i said how you don't need to follow the category of the business when you're choosing your template you don't need to follow these page names either there's nothing that says we can't change the projects page to a testimonials page or a case studies page or we could change services to a galleries page it really is super customizable and you're going to see what i mean as we go so we're going to start with this one but you feel free to start with whichever template you think serves your content the best and this all goes pretty much the same way no matter which template you choose so i'm going to click on import complete site and then they just ask you a few questions here and then next and i'm just going to click on skip so now it's just importing all the pages all the images all the content and that generally takes just a couple minutes all right so this message tells us that was a success so now all we have to do is click on view site to see what we are working with okay so here is our home page with all these different sections on it and we are just going to get to work now kind of customizing section by section changing the text the image the styles the colors all that good stuff so it's going to look very unique for your business in the end so the way we can actually start editing this because this is just basically showing us the page as your customers would see it oh and i do want to point out too we have a nice navigation menu up here that's all been imported in and all these links actually link to the respective pages so there's not a whole lot to do there at the end of this video we're going to get to customizing this to make sure it looks the way we want has all the pages we need but we'll get to that later on so let's just start editing this so we want to go up to edit with elementor and here we are inside of elementor which is basically just our page building plugin that starter templates installed for us when we installed that so it's a really easy way of dragging and dropping any little content blocks you need and then customizing them so just a little crash course here we have two sides to the screen we've got the stage over here which is the preview of what your website is going to look like and then on the left we have our side panel with all the different widgets anything from headings images videos buttons text editors dividers google maps all the icons all that good stuff is located over here anything you want to put on your website you would just simply take and click and drag into place and then once something's over here you can edit it over here you can change the text over here you can change the style things like text color things like uh the font all that good stuff you can change over here so you drag things that you want over here and then you edit them by clicking on them and then over here it's pretty easy and you're going to get the hang of this really quick i promise so i'm just going to go ahead and right click delete that we don't need it now let's talk about fonts for a second so there's a couple ways we can change our text as we go on the page the first way is a little annoying and time consuming and that involves clicking on each instance of some text like we click this we go up to style under typography family we would change it there we can change things like the size the the weight meaning how bold or how thin it is we can change things like if it's all uppercase or just however you type it so there's a lot of things we can change one by one however there's a much better way a much easier way and that's basically taking care of all of it at once so i'm going to show you how to do that so let's say you've got a few fonts picked out you do have access to thousands of google fonts by the way so if you want to go to that website just search for google fonts and you can see all of your options there's a ton or maybe you like this font which i think is perfectly fine it's a nice clean font to get started with you don't have to change it if you don't want to but if you wanted to this is how we do it so we're going to go up to this little hamburger menu these three dot three lines rather and then we're going to go into site settings and now we're going to go down to typography so here's where we're going to change the default fonts for all the different types of text you'd have so you can see we have body right here which basically is any of this you know any paragraph text this would be body copy this would be so we can change that if you want to the way we would do that is we go to typography and then under family i'm going to pick one that i happen to like a lot called montserrat it's just a nice clean font i think it's perfect for a paragraph font i actually like it for a headline as well and you could also change the the sizing of it like if you knew you wanted it to be a larger body copy font you could absolutely do that i'm just going to get rid of it and go make it go back to default for our purposes so now we need to talk about our headings okay these are generally known as h1 h2 h3h4h5 basically h1 is the most important headline on the page it's always the one on top it's like the name of the page usually then h2 would be you know this kind of a heading it's not quite the big heading on the page but it's it's still there it's like that one would be h2 this one would be h2 then h3 would probably be these guys it's basically a ranking of importance so what i like to do is i like to take care of h1 through about h4 and they can all be the same font in this case i'm going to choose one for h1 so i'm going to go in to typography i'm going to choose biebus new kind of like that one and i'm gonna make the size a bit bigger as well i think that looks good and then under h2 through four i'm just gonna choose montserrat make it nice and easy okay so i've done that for h1 through h4 you could continue with h5 and h6 if you want but those are hardly ever used and they're easy just to kind of change on the fly as we go so i'm going to click down and update that's going to save our changes if you don't do that everything we just did kind of goes away and then i'm going to click on the x to get back to where we can actually edit this particular page all right so here we are on the homepage let's just start editing this so the first thing i might change would be the headline so i'm going to click on it and then right over here is where i can change the actual text [Music] and then if i wanted to override any of the settings that i created uh in the last step all we need to do is go to style i could change the color of it if i wanted to i can just kind of drag this around i can drag this color bar around so you can find any color you need or if you have a color code you may have some of those you would just paste that in right here but i'm just going to go back to white and now what about all this other content so i don't really like this text being above the main headline i'd rather have this be a sub headline underneath it so if we want to move something around really easy we just click the pencil and we drag it right underneath drag it right into place where we want it and then we're left with this little divider line um they love these divider lines in these themes i don't see much use for them but that's up to you if you wanted to keep it you can change the width of it up here if you went to style you could change the color and the weight meaning how thick it is all kinds of things you can do but i'm just going to right click delete all right so now already it looks like there's a lot of space between this headline and this text right so so the way we fix that is we just click on that headline and then we go up to advanced and here we have padding right so this is basically giving this is padding out the bottom and the top so we have 13 on top 20 on bottom let's see what this looks like if i just delete that and i still feel like there's too much so i'm actually going to go up to margin and i'm going to on bottom i'm going to go down into the negative range here and you'll notice the same value is reflected on all of them on all sides so i'm actually going to delete this and i'm going to unlink the values so we can just deal with the bottom so i'm going to drag this up so it's a little closer and i think that looks good just like that alright so now what about this background image how do we deal with that so the way we do it is we have to select the entire section so we can either click right up here or we can right click edit section and then we would go over to style now styles where we get to choose the background basically there's a lot of different options you could have just a solid color you could have a gradient in the background you could have a video we'll get to that later that's kind of a cool one or you could choose a few images to have a slideshow but we're just going to go simple we're just going to change out this image for another one so i'm just going to click on choose image and then if you had an image all ready to go you would just take that file and you would drag it right into the window here and then click on insert media the other option you have is you have access to i mean i would guess hundreds of thousands of free images these are stock images from pixabay it's a website now this these all look stretched out in the preview i don't know why it always does that to me but they but they're actually not stretched out when you use them on your site so you would just do some kind of a a search for what you're looking for you could choose by orientation like if you wanted something in our case we'd probably want it to be horizontal you just find the one you like and then you would click on insert media and it would import it in for you totally free to use totally illegal to use so um but i've already got a few images picked out so i'm just going to go to my media library and click the one i like and insert super easy so now you will notice that this image looks quite a bit darker than the image over here does the reason is there's a background overlay added to this background image by default the reason they do that is because a lot of times you need that overlay you need like kind of a color on it or black on it to make the text really stand out um that was totally not intentional by the way but in this case i actually want to see what it would look like to knock that back a bit because i don't think it needs it in this case so we would just go to background overlay this is how you change it so you can do classic solid you could do gradient as well now be careful with gradient i've seen this go really sideways for a lot of people and it really makes a site look kind of amateurish if you don't choose the right kind of gradient so in most cases especially if you're not a designer i highly recommend just sticking with a black overlay you really can't go wrong there and we've already got that we've already got a black overlay so i'm just going to go down to opacity and i'm going to just bring this down i'm going to bring it all the way down first to see what that looks like now that text is a little hard to read that way so i'm just gonna start sliding it to the point where now we can we can actually read the text but it's not darkening the image too much so i think this looks pretty good alright so now moving on to the button so let's go ahead and click on that and there's a few things we can change we can obviously change the text that's on the button we can change things like the background color you know how rounded these edges are and of course where it links to so the first thing we'll do is we'll change the text we do that under content we could type in you know let's get started anything like that we could change the alignment of the button to the left or the right but in this case center is right on the money so let's go oh and link this is important so i generally recommend at the end of this once you have all your pages that's when you would uh link all your buttons together so you would just basically type in you know https colon backslash backslash and then you know yourwebsite.com contact for instance you know whatever that page's addresses that's what you'd put in here so now let's go over to style and this is where we can change the color so what if we wanted the button to kind of match this inner tube right here we could go to under background type first of all we have classic or we have gradient so you could choose you know a couple colors and it would be a gradient on it but let's just be simple for now we'll go go to classic and i'm just going to type in a color code that'll get us close to that but i don't know if i'm feeling that let's take a look preview that and i think we can do better let's just keep playing around so let's just click right in here and then we can move the slider all around we can try to find the right color maybe something in the green family or again if you have a code that you want to use you just type that right here and here's a tip that'll save you a ton of time so whenever you have a color that you're that you've used and you know you are going to want to use it again on the site somewhere else you can save it so that you don't have to fumble for it each time so once you've got it loaded here you just click the plus sign and then you can give it a name or not it doesn't really matter i'll just call it button green and then create all right so let's take a little preview of this so whenever you want to get a true view of what it's going to look like without these you know boxes around it or the sidebar we just have to collapse it so we do that by clicking on this little arrow panel right here now what if we wanted to actually kind of push this image up a little bit maybe we wanted the girl on the inner tube to be a little higher up and we would want less beach to show this works really well like especially if you have a picture of a person and their face might be in the wrong position so all we need to do to kind of tweak the image positioning is click on the section and then under the image let's go to position and you can choose any of these like center center which is going to change it a bit that didn't really do it but then let's let's try custom and here's where we can really have granular control over that we can change the up and down or the left and right but in this case that's uh that's not gonna work out so let's just mess with the top and bottom part let's see what that looks like and i do think i like this better so we'll just keep going with that and now it's time to move on to our next section now what they have here for us is a quote i don't think it's necessary and i for me it's not going to fit the content so a good lesson to show you how to get rid of any section that they have so all we need to do is click on the x and it's gone pretty easy right so what if we wanted to replace that with a different section or a different uh layout that's going to fit our content the best so in order to get a new section we're just going to click on the plus sign and now we've got two basic ways of creating a section okay so the first one would involve just choosing how many columns you want and then dragging and dropping different elements into place where you want them and then customizing them and we'll get to that later i'll show you how to do that as well because it's good to know how to create basically anything you need but you usually don't need to do that because they've come up with so many great section blocks for you that are super easy to customize so let's start with that let's just click on the starter templates icon right here and then we're going to move over to blocks so check this out look at how many section blocks there are all these different layouts to fit pretty much any type of content you need and don't be worried these look very boring right because it's all black and white but that's not what it's going to look like when we're done with it so that's what you always need to keep in mind and these are arranged into categories so if you knew you wanted an about us section or a gallery section you would basically just come here and you would look for the closest thing that you're trying to find you could also filter you know you could do a search you could filter by color like if you knew you wanted a dark section right there you could do dark or light or i'm just going to leave it on all and i'm just going to take a minute to find the perfect section that i think would work best for our content um and actually i think i've already found it right here i think this one will work great so i'm going to click on that and then import block okay so here we are with our content block so we have room for a nice image here and then you know we could have our three benefits or three services whatever it is um that would fit your content best so the first thing we want to do is we would want to change the text up here nice little sub headline so you would change that over here and then you would change the description over here or if you wanted to delete it you could just right click delete if it doesn't fit meaning if it's something you don't need that's what i meant not not it doesn't fit physically i do want to make one change to this i feel like there's too much space between these lines which is a common thing i found on a lot of these so i'll show you how to fix that you just click on the headline itself then go up to style typography so again we've talked about how we can change the size and the weight and the make it you know if we didn't want it to be all uppercase we could change that but line height is what i'm going to look at so i'm going to make it a little less spacing between the lines something like that looks good to me so it's 1.1 i'm going to remember that so we can make that change each time all right so let's change out this image just by clicking on it and then we'll go over to choose image and again you would drag whatever image you want over or you could use a free one from pixabay but i've already got one picked out so i'm going to click right there and then insert media all right that's looking good so then we just wanted to tackle each one of these so let's say these were going to be the benefits of working with you you know fast service all the extras start to finish whatever that looks like for you so these are what i call compound widgets so this is a an image box which controls everything in one place you can change the image the title and the description right here and we already know how to change an image that's easy we know how to change the title and all that stuff so what i think i want to do though i want to show you how to actually use one of the widgets that it comes with just to show you that you're never locked in to what they're giving you so i'm actually going to right click delete and again i'm going to get rid of this one and i'm going to get rid of this one and i'm going to replace these with icon boxes just to change it up so let's go up to our widgets this six are these nine dots in the grid i'm just going to type in icon and look yeah icon box is what i'm looking for so i'm going to drag that on over into our first column and what i want to do is i'm going to get this looking just right and then we'll just copy and paste it into the other ones so what if i wanted it to be more like the layout we had before where the icon or the image was over here and then the text was over here you've got the choice here well first of all there's a few things view a default for the icon or it could be stacked meaning it could be on a circle or a square or it could be framed by a circle or a square but i think i'm just going to put it back to default and then icon position it can either be on the right or the left or how it was on top but i'm going to put it back over to the left and then i might change the title to fast service and then i might kind of edit the text over here i'll just make it a little shorter and then of course you're not locked into having a star your icon you can do whatever you want just click on icon library and there are a ton of these so you do have to do a little bit of digging though a lot of times it's it's not super intuitive there a lot of them are named kind of strangely so you you will have to just look around find something that fits so if i'm looking for something that's like saying fast i would maybe type in fast first um now i'm just gonna maybe make look for an airplane or something or a plane see that's what i'm talking about i would have thought it would be airplane but it's just plain so i'm gonna choose that and then insert and then you can change the style by going up to style and then under the icon you can change the primary color to whatever you want and i've got a color already picked out i'm going to type in there and then i'm going to save it as well remember how we save it we just click on the plus icon let's name it magenta accent and then if it looks like how you want it to look and you're happy with it you just do a right click copy right click paste and one more time and then we just go through each of these changing the titles descriptions and the icons okay so let's check out what we've got so far i think it looks pretty good and now we're ready to move on to our next section okay so let's say we wanted to make this next section our services section so i think we can actually work with this content let's say we have two different services if you had three all you need to do is take the column right click and then duplicate and now you've got three and if you wanted to have six you would just take this whole section right click duplicate and now you've got another row there so it's super easy i hope you're kind of getting how easy it is to customize all this stuff but i'm anyway i'm going to x this out i'm going to go back to how we had it and i'm going to delete this column as well all right so first things first i do want to kind of see get a sense of the space of this section so i'm going to right away change the background color so we just click on the section then go up to style now remember again we have different background choices we can do a solid color they call that classic we could do a gradient video image or slideshow but i'm just going to choose a nice neutral background color something like that and then i'll just change our title here by clicking on it to our services and then we probably don't need this divider line so i'm just going to right click that and then delete it now we'll customize each of these columns right here so we'd obviously want to add our own images and change the text too so let's just start with the images by clicking each one then go to choose image we already know how to do this you would drag it over or you would just choose something from stock so i'm going to click on insert media now this is something i do want to direct your attention to i don't know if you can see on this video but the coloring is pretty different from here to here this is what the image should look like but it's like kind of red the reason is they've added these like styles to the images for this theme and i don't know why they did that i don't agree i don't think that's a good idea but i'll show you how to fix it and get it back to exactly how you want it to be so you'll just go up to style and then they've added these what they call css filters so if you take a look at that you can change things like you know the brightness the contrast the saturation and the hue now we don't recommend necessarily doing these things if you don't know what you're doing so i'm just going to put it back to default and get rid of all of them so we just click this little icon right here and now it looks like how it should and then we will change the just the title and description and the learn more button so we click either if if you don't need that you would just right click delete because this should go to a page dedicated to that particular service but let's just say you have that page and you want to just customize the button you can change the text of it here you can change the link where it links to right here you just type in the entire web address and then go up to style and background type color let's go ahead and choose our same green color that we already chose and going back up to the image for a second i do see there is this very slight kind of shadow behind it they've kind of added this in as a design element but what if you don't like that so all you need to do is choose the image under style box shadow is where that's controlled so i'm going to click on this you can change the settings of it you can make it blurrier you can change how far it goes to the to the side or to the bottom you can change if you click on the color you can make this much darker if you wanted to i mean i don't recommend these things necessarily and i just got rid of it by clicking on clear and i do want to show you one cool thing actually that elementor finally added that i've been wanting them to add for a while and that is a mask we can make this image into a shape if we want to so let's just click on the image we go up to advanced and then under mask we can turn it on and then we've got choices of circle flower sketch triangle we've got all these different things blob that's kind of a trendy one right now so depending on your needs these may be kind of a cool design element for you but i'm actually just gonna turn that off for now and just go super simple with it so now let's just go to column two and we'll start customizing that with our own content as well all right so now we just want to copy and paste our styles remember we changed the style of this between those css filters and the drop shadow behind it so i'm going to right click copy then right click paste style and i'm going to do the same thing with our button right click copy right click paste style all right so let's take a look at what we've got so far from top to bottom i think it's coming together pretty nicely so let's go on to our next section now all right so we've got this section they've got this for us they've got this for us i don't know that we need either of these particular sections if you wanted to work with whatever they have we already know how to edit a section that we like so i'm just gonna delete these and we're gonna add some new sections so i'm gonna click on the x and then one more time so let's just add in a nice little testimonial section here so again we're gonna click on the starter templates icon and then blocks and i'm going to search for testimonials let's see what they have that kind of looks good all right so i think this one looks nice we've had a few light sections so i think a dark one would actually look kind of cool now and then i'm gonna click on import block all right so first of all let's go ahead and give this a really nice dark background image i think that would be cool so let's uh let's click on the section itself go up to style and then under image we'll just choose one and i think this might be a good case for choosing one of those stock photos so let's see what they've got for us just gonna type in tropical and see what comes up and again these will not be stretched out like this when we actually put him in okay oh and i'm gonna do uh orientation horizontal all right so let's find the perfect photo now all right i think i like i think i like this one in this one but let's just go with this one beach sand island we'll click that and then save and insert okay so you'll notice a few things right away this text is hard to read we're going to need to put a dark overlay on it and it seems to be repeating over here which is what we don't want so what we need to do to to combat that oh and let me show you this so let's go back up to the top see how the image stays in place and everything else scrolls on top of it i want that same effect here as well all we need to do to get that is under attachment we choose fixed then so that we don't have this repeating pattern we need to go under size and choose cover so that means the image is going to be big enough to cover the entire window alright so now let's go to background overlay and classic and i'm just going to choose black and then we can make this as dark or transparent as we want i think that's going to look pretty nice now we just need to customize we would obviously change the headline text if we wanted to do that but i think i definitely want to change the styling of these testimonial boxes i want the boxes to be white the text to be black so let's choose each one of these we'll go up to style text color i'll choose black and now to change the background color this one's a little tricky it's a little hidden i don't know why they did it this way but we have to go up to advanced and then under background that's where that's hidden so let's just choose white looks pretty good and then we'll change the image by clicking on it and then choose image and then obviously you would want to pick the real image of the person leaving the testimonial if you have that i always love including an image of the person leaving a testimonial i think it works best that way and now with the star rating let's go ahead and make those yellow because i like them always to match what people are used to seeing on actual review sites it makes it a little more trustworthy so i'm going to go under style to color and we're just going to kind of play around and find the right shade that looks good and i think that looks nice and i'm not sure why they default to less than five stars here like that's kind of we definitely want to have actually five stars showing up here and then you know how to change the name and the title you just click on each and change it on over here all right so now i'm going to apply these changes across the board so i'm going to right click copy right click paste style and one more time and the same thing with the stars edit copy paste style paste style now we just need to go in each of these columns and change the content out you know meaning the text for the testimonial the image the star rating and the name and all that good stuff so i'm just going to do that really quick and let's say we wanted to change the font here for the name we would just click on it go up to style typography i'm going to choose our biebus new to see what that looks like and then bump up the size a bit and wait let's make it normal not bold all right i like that so now we'll just right click copy right click paste style and one more time all right so moving right along let's put a little about us section on the page so there are definitely good blocks that'll get you there by clicking on the starter templates icon but i do want to show you the other way of creating a section just to show you how easy it is and how truly anything is possible uh when you do it yourself so i'm going to click on the plus icon this time and from here all we need to do is choose how many columns we want so in this case we're gonna pick two so i'm gonna click on two and so now we've created this little section and it's tiny and it has no form to it yet so what we need to do is start adding our own content to it uh so we're gonna go up to the widgets icon up here and we'll start with a heading let's drag that over into column one then we'll get a text editor and we'll drag that right on underneath the headline and finally let's have a little fun here let's get a video so we just drag that widget on over into column two now the first thing i want to address here the first thing i want to fix is the spacing issue so notice how tight everything is i'm just going to kind of expand this out notice how tight everything is here now this is a very common mistake i see when people are diying their own website i'll see a lot of issues like this and that can really make people abandon your site quickly because it feels chaotic right you want to give everything a lot of breathing room places for their eyes to rest that's all going to make it feel much nicer so to give this more padding on the top and bottom we're going to choose the whole section and we've already done this a little bit before we're going to go up to advanced and we're going to do go to padding so we're gonna unlink the values so we're only dealing with padding on the top and bottom not on the sides so let's see what 50 would look like on top and bottom i think that's fine but let's actually give it more let's give it 80 on each and that feels about right to me so now obviously we just change the text by clicking on it and then we might give this a little bit more text here i'm just going to do a paste and it helps to break it into paragraphs that helps people read it a lot better and now what about the video how do we change that out so first of all i do highly recommend you hosting your videos on you know upload them to either youtube or vimeo i do not recommend just uploading your video to your website and have it play from there it's just a huge drain on your hosting and your site's gonna load really slowly as well so totally free always free to upload to youtube and it's good for seo value too so make sure it's uploaded first then you're just going to click on the video player and under content you'll choose it's on youtube by default if it's on vimeo or dailymotion which i've never used before then you would choose that and then you're just going to pop in the link to that video and it never hurts to have a nicely designed thumbnail on it and then to get rid of this little thing the watch on youtube banner we're just going to go under player controls and click that off and then what if we wanted to have a little another call to action button under here well we could drag a button over and then customize it or we can just take one we already have i'm going to right click copy then right click paste and then i might left justify it to be in line with everything else or right over here and i think we're looking pretty good at this point so i'm going to do one more section on this page and then we can move on to the rest of the site so i did promise you i'd show you how to do a video background so that's what we're going to do right now we're going to do a little uh final call to action section so let's click on starter templates blocks and then i'm going to see i think they've got called out yeah call to action right here i'm just going to choose something nice and simple like this one right here and then import block now we just want to edit the content i'll do a copy on the button and a paste style then i need to recenter it because it was taking those styles over there and then we've got our social icons i think these are misplaced here i wouldn't actually include them but you can always edit them if you want so you would just click on you would click on the pencil and then each one of them is here you can go to icon library to find a different social network then you link to your profile here you can change the colors and everything under style but we're just going to delete it i'm going to right click delete all right so now we get to have some fun and put in the perfect video background so the first thing you need to do is find or either you have a video you want to use or you need to find one so here we are on youtube and you are technically legally allowed to embed a youtube video on your own website even if you didn't upload the video yourself you know people who up once you upload a video to youtube it basically becomes the property of youtube and they can and you are allowed to embed it so what i like to do though when i'm gonna find a background video i generally like to stick with stock video that's made for that purpose just so i'm not stepping on anybody's toes so in this case i might search something like beach stock video free then you would just go through and you would find something that works either as an entire video or all you really need is a good 15 second chunk from the video and i'll show you how to loop that in a second so i've already found one that i like and all you really have to do is you just have to go to the video itself and then you would just grab the uh the url up here you just highlight that and copy it and then once you've got that copied to your clipboard you would just choose the entire section go up to style and then now we get to choose the video player background and then i'm going to type in the the url that i just copied all right so here we go and remember always said you can just isolate a chunk that you want to use so i've found a little bit of the video that i like from the 76 second mark so i'm gonna type that in all the way up to 100 seconds so there we go i think that looks pretty cool and i just i do just want to add that uh color overlay on top of it to knock it back a bit so that the text really stands out more so i'm going to collapse background i'm going to go to background overlay and again i'm just going to choose basic black it works the best almost every time and then let's play around and see how how it looks with different opacities so i think something like that actually looks pretty awesome so i'm just going to collapse this and now we can take a look at our entire page from start to finish i think it's coming together really well now it's time to do one last step before we can move on to the rest of the site and that's just to make sure it looks as good on mobile as it does on desktop so first of all i'm going to click on update to save our changes if you don't do that all our hard work is pretty much going to go out the window so you always want to make sure you update before you close out and the way we're going to check this on mobile is just go right down here they've made it really easy on us just click on responsive mode and this is going to open up the preview on on a mobile and there's definitely some issues here we'll get to it but as we scroll down we'll see that there's not a whole lot of formatting issues it looks pretty good and the reason is all those starter template blocks we've been using they've already been pre-programmed to look good on mobile so our work is not going to be very intensive here we probably got a few things to do and that's about it so there are definitely changes we can make that will only apply on mobile so basically what i mean is if we change this text to be smaller that's not going to affect what we've done on desktop it's only going to apply on mobile so let's go ahead and do that right now we'll just click on the text we'll go to style typography and anything you see that has the little mobile icon next to it that me that tells you that whatever you whatever change you make is only going to apply on mobile so things like size we can play around with but things like weight meaning how bold it is that would apply across the board so if we changed it it would also change on desktop so you only want to change stuff that has the little icon next to it right so let's just go ahead and play around with this and see what looks the best i think that looks pretty good just like that and the other major thing i'm seeing is see how the image isn't covering all the way down the reason is remember how we changed the positioning of that image so we need to change it again for mobile so we need to choose the entire section so edit s