Summary
To build a website from a template, you'll need to follow three main steps: getting website hosting and a domain name, installing a baseline template, and customizing the content, colors, and images to make it unique.
Use a hosting service like Hostinger, which I find easy to use and reliable. You can often get discounts of up to 82% off, with added benefits like free domain names and SSL certificates.
When choosing a hosting plan, the Premium plan is usually sufficient, allowing you to create up to 100 websites with 25,000 monthly visits. If you expect higher traffic, consider the Business plan for higher capacities.
Your domain name should preferably be a '.com' since it is most recognizable and people are more likely to remember it.
Install WordPress for free website building. Avoid other website builders to prevent restrictions in customization and design.
Set up your WordPress site's admin details, making them easy to remember yet secure.
For page building, use Elementor which allows you to customize without coding. Choose templates that fit your needs best, and remember you can alter them to suit any industry by changing images and text.
Maintain a clean and minimal starting template; it offers flexibility to add your style.
Customize sections by uploading your logo, choosing font pairings, and selecting a basic color palette to ensure consistency throughout your site.
When customizing text, images, and other elements, pay attention to details like text alignment, font size, and image dimension to make the site visually appealing and user-friendly.
Ensure elements like buttons are styled consistently across the site; this enhances the theme and professionalism of your website.
For dynamic elements like testimonials or reviews, ensure they are visually distinct and easy to read, using icons or symbols where applicable.
Pay attention to responsive design; use Elementor's mobile view to ensure your site layout accommodates different screen sizes effectively.
Regularly save changes to prevent data loss and check your site in different modes (desktop, mobile) to ensure consistency and usability.
Create new pages or modify existing ones as required by using duplicate functions or editing page titles and contents directly in WordPress.
Configure your site’s header and footer through the WordPress Customizer to manage menus, logos, and other navigational elements effectively.
Update settings like contacting form fields to filter leads effectively, ensuring data collected aligns with your business needs.
Test all forms and functionalities to ensure that every element, such as email notifications, works as intended before launching your website.
By following these steps, you'll build a professional, appealing, and functional website with flexibility for future changes and scalability.
Video
How To Take Action
I would suggest implementing the lessons from the transcript by starting with building a professional-looking website using a template, which is a low-cost, high-value strategy. First, get a hosting package and a domain name for your website. Use a service like Hostinger because it's easy to use and often comes with discounts, making it budget-friendly. Focus on getting a '.com' domain since it's memorable.
For building your site, install WordPress as it's free and flexible. Create an admin login that's easy to remember but secure. Use Elementor to customize your pages without needing to code. Start with a clean, minimal template and customize it by uploading your logo and picking font pairings and a color palette that matches your brand.
Pay close attention to making your site mobile-friendly using Elementor’s mobile view tool. This ensures that your content looks good on different devices, which is crucial since many people browse on their phones.
Save changes regularly and check different views to maintain consistency. Familiarize yourself with the WordPress Customizer to tweak your site’s header and footer, keeping them organized and functional. Setup your contact forms properly for collecting leads effectively.
By starting with these strategies, you will set up a professional and functional website with room for future expansion. This foundation will help draw in visitors and effectively communicate your business's message.
Quotes by Author
"In this video I'm going to show you how to take a template like this and easily turn it into a beautiful finished website like this"
"We're going to tackle it in three simple steps"
"We're going to do all of it without any code or any Tech headaches whatsoever"
"Hostinger, it's just the easiest to use and the most reliable in my experience"
"No matter what kind of website you have, it can look any way you need it to look"
Full Transcript
in this video I'm going to show you how to take a template like this and easily turn it into a beautiful finished website like this and depending on your colors fonts and images it could look like this this this or even this and we're going to tackle it in three steps so first you're going to need website hosting and your domain name second we'll install your Baseline template and third I'll show you how you can add in all your own content colors images and even new section blocks to make your site truly unique and we're going to do all of it without any code or any Tech headaches whatsoever so let's just get started by getting you set up with your domain name and your hosting so the domain name is just you know your businessname docomo is pretty much just the place where all the digital files that make up your website are stored so there are a ton of web hosting companies out there and I've tested them all my faite one is called hostinger it's just the easiest to use and the most reliable in my experience and I've worked out to deal with them for my viewers so if you go to hostinger.com West you're going to get the best possible price it's usually around 80% off so go to hostinger.com West and we can get started okay so if you follow that link you'll wind up on this page this is hostinger this is my absolute favorite web host and using my link you will get up to 82% off I can't promise this is always the deal right here they might be running an additional sale right now but it's not going to be too much more than this and you get three extra months for free and a free domain name too so let's just click on start now and then we have a couple choices to make so there's premium there's business you're very unlikely to need Cloud startup so let's just focus on these two almost everybody will be fine with this plan right here the Premium plan you can make a hundred different websites with it so if you're a web designer and you're using this for clients you can literally have a hundred different staging websites going on at any one time it includes 25,000 monthly visits all this good stuff here free SSL that's super important for security and for Google search and all that stuff email backups the one thing actually two things that might make you want to choose this uh middle plan business instead um it will get you up to 100,000 monthly visits so if you have a hight trffic website you might need that the other thing that's really cool with this is free CDN that just makes your website a lot faster so if you're worried about speed you might want to go with this plan but for now I'm just going to choose the Premium plan to get us started and here you choose your term um I'm just going to choose 12 months for now okay so yeah it saved to 78% which is awesome so it goes down from 13 to 3229 for the year and then click continue then you'll put in all of your billing information and then continue and next you're going to need to put in your payment information so once you do that just click on submit payment okay so then it says something like this so payment's done just click on the get started button now it's going to ask you some questions you can skip all this it's really not that important and since we're doing a new website from scratch we're going to click on create a website next and then WordPress we're not going to go with their website builder that's just not the way we're going to do things in this program so WordPress click on next okay so here's another important step where we need to set the admin details for your WordPress dashboard so why do we need that well whenever you want to keep building your website or if you want to go just check out the back end or anything like that you need to log into it so these are the details you're going to need for that so I just recommend it be your email address and then a password you'll easily remember that's still secure okay so I've got mine now we're going to click on next and we're not going to choose either of these options we're going to go down to create blank site okay and now is the part where we can actually choose your domain name remember that's something like your business name.com so hopefully whatever you want is available sometimes it's not though and you'll have to get a little more creative so I'm just going to try for say West McDow link now you've got all these options for all these what we call domain level extensions that's your doc your me doio there's a lot to choose from and there's more and more all the time I tend to always recommend just going with do for the the really important reason that that's how most people think of domain name names and if you were to give people your domain name as a net or a.org their brain is more likely to remember it as a doc so they're going to probably type in the wrong thing so if you can possibly get your or something close to it that's a do that's what I would go with and then we'll click on next and it wants you to choose if it's personal or or company just going to choose company and then next step okay so just make sure your company name is filled in and that all this information checks out and is correct and then you're going to click on finish registration then it's going to ask you where your audience is located because here's the thing you want your website to be stored remember how we talked about hosting is just a a reliable computer that's set up somewhere always ready to go so you want that computer to be as close as possible to most of your customers and clients so these are all their data centers so if you're on east coast of the US you might want to choose the one in Massachusetts if you're more in the west you might want to choose Arizona or just choose whichever one in the world is closest to your customer so for me in Chicago I would probably do Massachusetts and then click next so now it's installing WordPress now this might take a couple minutes so we're just going to let that run till it's finished okay so that brings us to our WordPress dashboard so this is where all the magic happens and we can actually build our site but in order to do that we have to add what we call a plug-in so if you're not familiar with that phrase a plugin is simply an add-on that we're going to add to the the website that extends its functionality in this case it's going to provide us with a website builder where we can just choose a template and then customize it without having to know any code so the way we're going to do it is we're just going to go over to this is the sidebar we're going to go to plugins add new plug-in and we're going to go up to where it says search and we're going to type in starter templates and then this is the one right here we're just going to click on install now and then on activate so whenever you install a new plug-in you have to install it then click on activate Okay so then you're just going to come down to under starter templates click on get started so the AI website builder is definitely not really a good experience and it's not the best way to do it so we're going to click on build with templates instead and we're going to choose Elementor that's the best page building plugin there is okay so now we have all of these options of templates so the thing is some of them are very designed some are more minimal a lot of them are they basically tell you what industry it's for which honestly you can use any of these templates for any industry the only reason this says politician is because there's a picture of a politician here if you change the image you change the text it could be for anything right but when we're getting started with the new website I like to start with something that's very Bare Bones and very minimal so we can just apply whatever Styles we want to to it so I'm actually going to go back up to the top and I'm going to choose this one called hope it's very easy to work with you could just as easily use planet Earth or love nature but I happen to like hope I just think it's it's just kind of the the cleanest so I'm going to click on this and here you've got like kind of a basic preview of the layout this is just a really good starting place where we can customize what's here plus we can add in a lot of extra content blocks that will serve the content that you have perfectly no matter what kind of website you have so now we've got three things that we can kind of work on right now the first is uploading your logo if you have it if not no worries we will do the whole header at the end of this video so you can just wait to then if you want I am actually going to wait on that myself next you can choose your font pairing so they've got some really good ones right here cu the thing is you do have access to literally thousands of Google fonts here which can be overwhelming and they've done a pretty good job of choosing some combos that look really nice so just click through these see if any of them appeal to you and you'll notice it doesn't just change here it changes everywhere on the site so if you click through you know we've got all these different looks I think I'm going to choose this one outfit in DM Sands I think it's a nice modern look and the other thing you can choose is your basic color palette so if you click through these it's just going to change you know things from like the button these little lines it's mostly like the button in these kind of backgrounds and stuff though so I might just choose um this nice green one right here I think that looks pretty nice but go ahead and choose whichever one you like and by the way you're not locked in into any of this stuff you can change things on the fly as you go but it just helps to kind of have a good base to get you started so we're going to click on continue I'm not going to worry about any of this stuff I'm going to click on Skip and I'm not going to put any of this in either just going to click I understand and then submit and build my website so from here it's probably going to take a few minutes it's just bringing in all of the images all of the pages so that we're ready to go with a NIC looking base of a website okay we're done so once it's finished we're just going to click on view your website okay so here's a preview of what we have so far obviously we're going to customize every bit of this so it's going to look any way you need it to look so in order to start customizing we're going to go up to where it says edit with Elementor okay so now we're inside of the Elementor dashboard so this is the tool where we're going to start customizing everything and you'll notice we have two distinct areas here we have I call this the stage I don't know if that's official but this is basically where all the elements go and then over here is the sidebar where all the different widgets are and this is also where we can style everything and change the text so the first thing I'm going to do is I'm actually going to get rid of this box here this always appears when you first get into the editing area but I'm just going to click on the X so we have a nice clean slate so this is the homepage and it's really important to know that pages are really just built of stacked sections so this is a section then we have a section underneath it and another one and each one is filled with columns and then within the columns we have different widgets so for instance this is a text widget this is an image widget so let's just start off with the top and we're going to start customizing every element so that it looks like our website in the end so starting with our top section we call this the hero section the first thing you'll probably want to do is change the headline text so to do that we're just going to click on it and then over here in the sidebar you'll see it says edit heading and this is where you would do it you just type in whatever your headline is right here you know something like that so once you've put in your own content we can also change the style so if we click right here we can change the alignment if you want to make it left aligned or right aligned or centered probably looks best in this case then under typography we have access to a lot of different things so family means font essentially so it says default because we already picked those default fonts but if you wanted to change it to something else like I said literally thousands of options so but for consistency sake I think it's best to just choose your your font choices and then just keep going so I'm going to do a command Z on Mac to undo that you can change uh the size if let's say it's too big and you want to make it a little smaller you can do that pretty easily you you can make it really small or really big whatever you want obviously you know you don't want it to be too big big or too small I think this looks pretty nice and weight is just how bold or how thin it is so maybe let's look at medium think that looks pretty good transform so this is basically if you want it all uppercase or you know the first letter capitalized you can control it that way I'm just going to leave it on default style is things like you know tallic whatever just going to go back to default decoration underline that kind of thing but I'm going to put it back now line height is one that you might have to use quite a bit because I think a lot of these templates they make the line Heights a little too big by line height I mean The Space Between the Lines it just feels very loose to me so if you were to change this you can drag it around to what looks good to your eye and I feel like something like this looks pretty good to me and you can do the same thing with letter spacing that's a little less necessary in most cases okay so now we have a button and we've already chosen the color based on the color palette but again all this stuff can be changed on the so let's go ahead and click through here and the first thing you'd want to do is change the text of the button so maybe it's not get started maybe it's you know schedule a free consultation and you do want to make sure that the link is set so I'm going to type a backs slash and then the word contact so that's going to link it to our contact page which we'll get to later but we want to make sure the button actually does something right so that's changing the text now again we can change the style and there's lots we can do with the button so go to style you can change the background if you go down here to background type classic means a solid color like it is now and you could choose literally any color you want to um by sliding you know this around you can get to pretty much any color I'm actually going to click right here to clear it and that's going to put it back to our default or you can choose a gradient so that can be a cool look too so if you choose two different colors you just got to make sure they're two colors that look good together cuz like something like this does not really work so if you don't really trust your design sense solid color is going to be a lot safer of a bet so I'm just going to click on clear again to get us back and then text color we could change that to anything we could change it to Black I think white actually looked better and then of course typography we can change that's the one thing it didn't really change it to the right font I don't think so I'm going to type in outfit that is the particular font that we chose for our headlines but you'd want to either leave it as is or put in whatever font that goes with your own choices here and again weight we could make it you know semi bold looks good now what if we wanted this button to kind of stand out a little bit more against the background well what we can do sorry I'm just going to click here to get rid of that we can go down to where it says border type and I'm going to choose solid because right now there was no border you can choose a nice simple stroke around the whole thing and then under border color you can change the color to whatever you want it to be I'm going to leave it on white but a cool trick you can do is you can actually unlink these values so you can operate these independently I'm going to do zero on top and that gives it a little bit more of that 3D look right so if you ever want to get a good preview of what your site's looking like just click this little arrow and it contracts that so you're you can see what it really looks like so I think that looks pretty cool you can also do something where um you do zero on the left so it just kind of has that slight bevel over here so it looks 3D and another thing you can do is border radius so right here it's like you can see that it's kind of a rounded rectangle that's the default but if you were to make that under border radius zero that makes a perfect rectangle or if you really amp that up and bring it up it can look more like a pill shape like this you can do a box Shadow behind it if you really want to give it some extra you know popping out effect from the background so this is looking pretty good but what if we wanted to add something here what if you have kind of a headline and a subheadline well the sub headline isn't here but we can easily add it so what we want to do is go up to the top where it has the little plus icon and that's where all of the widgets live so that's you can drag a a heading or an image over here or a video or in our case we're going to drag a text editor so I'm just going to drag that right where I want it to be under the headline so you can see there's words here but it needs work right because it you can't really read it first of all what we want to do is change the text itself self to be you know your sub headline so obviously we still can't read it right so we're just going to go up to style and then text color is the first thing we want to do so we're going to make that white as well so we're just going to click right up here on white and we probably want to Center AL line this too right to to match what we have above and then we'll go to typography because I think we need to make it slightly bigger and probably slightly thicker too so we're going to leave the font family the same but let's see what we can do about the size just to make it a little bit bigger while it's staying on two lines and then wait let's see what medium looks like I think we're already on medium what about semi bold eh that looks too much I'm going to put it back on medium I think this is looking pretty good so far but what about the background image how do we control that super easy to do all we need to do is select the section so just click anywhere up here or on these six dots at the top and then we need to go over to style and now we'll go down to where it says image and here's where you would select your image you would click on select files and you would just choose the file that you want to use here I happen to have already uploaded all my images so just to make it things easier so I'm going to choose this one right here and it's as easy as that so um in this case this reads really well on top of the dark image if you ever run into an issue where the text is hard to read though what you'll want to do is still um choosing this section or container as they call it under where it says background we'll collapse that we're going to go to background overlay so you can see there's already one applied here so you can choose whatever color you want I will caution you to probably only choose black because when you start choosing colors it just kind of gets a little funky looking it doesn't always work and again if you're not a designer and you don't really trust your design sense I think black is almost always going to work the best from there opacity is where you control how you know how much that color takes effect so one means that you're just seeing the color zero means you're not seeing anything at all so you would just drag it to where you can still make out the image and you can still read the text so in our case I think we're probably fine about where it was I think it was at 0.15 something like that and that looks pretty good to me okay so but what if you wanted a different kind of a treatment for your hero section right because the thing about this one is sometimes times when textt is on top of an image it can make it a little more difficult when it comes time to optimizing it for mobile so if you wanted something different let's go ahead and just do a really quick different version of a hero image so you can see your options so um in order to add a new section we're just going to go right here and we're going to click on the plus sign you have different options the plus sign here will make it to where you can make a section from scratch and then this is the Elementor provided blocks which aren't as good I prefer the starter template block so we're going to click on the little s icon and we're going to choose blocks not pages so now we have access to all of these different content blocks they look very boring right now because they're not really styled but it doesn't matter the layout is what we're looking for so they've done a good job of separating them by purpose so instead of all we're going to go down to Hero so now you've got all these different layout choices they all seem pretty similar but you know there's a few little distinctions like the size of the image this one is bigger than this one uh what we're going to be looking for though is this one right here because the image takes up the whole right column that's what we're looking for here so I'm going to click on this one and then import block and then I'm just going to get rid of this little Remnant section here so basically this is what we're working with and the first thing I'm going to do is actually get rid of this right here I don't really know what to do with it so if you have something you want to put there great otherwise I'm just going to click on the little X and of course we're going to start by changing the headline we know how to do that we just click through to it and we just paste in our headline here and then obviously it's it's too big the line Height's too much it doesn't look good so we're going to click on style typography and then let's just make it kind of a an appropriate size I feel like three lines looks pretty good and then line height let's just just tighten it up a bit something like that looks pretty nice and then we'll put our sub headline in and then we would change our Button as well to what we want it to be and I just want to show you a trick here so we could go through the steps of you know restyling it but whenever you have something already that you uh like style-wise you can apply that style to other versions of it so for your button for instance I'm going to right click on copy and then right here I'm going to rightclick paste style and that just applies that style to it the one thing it did though too was it made it uh Center aligned cuz this one is but we actually want this one to be left align so we have to probably manually override that so we'll go to under style position and we'll just click on the left then we can do things like change the background color over here so just click on this little gray box to edit the column we'll go to style and then background type you can do a solid color you can do a gr but you know that can get pretty funky if you don't really know what you're doing design wise so I almost always recommend if you're going to do something like this I think make it a solid color so just go back to Classic and I think neutrals tend to look the best here so I've got this nice kind of neutral beige color picked out and another trick for you whenever you know you have a color that you want to reuse once you have it selected here in the Color Picker just click on the plus icon I happen to already have it in here but you would just you know you could just save it as a new color or you can name it if you want if it helps you you know something like background beige and then click on Create and then of course there's this image so the way we control that is it's it's a background image for this column so click on the little column marker under style and then click on the image and we're just going to use the same one that we used in our original hero section so I think this is looking pretty good so you can see now how flexible this is you can have you know something that looks like this or you could have a hero section that looks more like this or you saw all those other options it can kind of look like anything you want it to so you've got options and like I said a hero section where the the text is not overlapping on the image just tends to look a little cleaner on mobile so it's up to you what you want to go with I'm just going to go ahead and delete this one for the sake of our tutorial but choose whichever one you want all right so let's move right along to customizing our next section so what you'll notice with with these templates is they've kind of put together a rough assembly of like here are the sections that we want to give you right some of them you might need some of them you might not need and in some cases you probably need a different kind of section to really tell your story your way on your website and I promise we will get to all of that stuff but for now I just want to keep going on showing you how to customize things so you really get the concept Concepts so for instance right here what if you don't need this section here if you do need it you click on it you change it over here we already know how to do that but if there's something you don't need just right click on it and then click on delete and it's gone and we've got this little line here they like their little divider lines here there's a lot you can do with them if you click on it you can change the width of it so it drags out that way you can add an icon or text in the middle if you click on text you can you know type in something here or you could do an icon instead right and you just choose click here to choose whatever icon you want to choose maybe a sun and then of course you can style all of it by going up to style changing the color if you want the weight you know you can make it thicker or thinner you can control the Gap like this if you've chosen an icon or text you can obviously style all that stuff too you know you can make the icon bigger or smaller so it's all pretty intuitive once you know what you're doing over here on the sidebar but I don't think we need it so I'm going to right click on delete for now let's go ahead and change this uh headline so I'm just going to click on it and we'll just type in whatever we want that headline to be and then we can style it go up to style typography obviously we probably want it to be a little smaller than it is I think something like this feels better to me and then what if we had a paragraph of text that we wanted to kind of expand on this with well we know how to do that too we just go up to the plus icon and then we grab grab another text editor widget and just drag it right underneath where we want it and then we paste in our text right here and since this is Center Justified we probably want this text to match it so we'll just go up to style and then under alignment we're going to choose Center and of course if you wanted to change the size of it you're just going to go to typography change the size by dragging this around you can make it thicker or thinner if you want to I think it looks fine as is though so I'm just going to leave it okay so now we have basically three services or these could be three benefits so up till now we've only dealt with images as backgrounds right this is a background image it's not really something that was dragged into place and customized like these are so these are handled a little bit differently but it's still easy you just click on each one and go over here to content and then click on the image and this is where you just put in your own version of the image so I'm just going to click on this one and then I'll do the same for the other two as well and as you can see like these are a certain you know Dimension they're taller than the r wide you can change that if you want like if you wanted these to be more Square might be more appropriate it would be like less scrolling for people just click on the image and then go to style and then you're going to go down to where it says height and you're just going to drag this to where whatever looks good for you like something like this like let's just call it 320 20 to be a nice round number and then rather than have to redo that across these I'm going to rightclick copy then rightclick paste style and one more time that's just a nice little shortcut but what about this guy here wouldn't it be better if he weren't facing out and we're facing more in easy to do we're just going to click on that image and then go to Advanced don't let that scare you and then we're just going to go down to where it says transform and we're going to do flip horizontal you know you can do things like flip vertical but obviously that's more limited in its uh in its use case but there's a lot of times where you do want to flip an image horizontally like this and then you can do things like if we go down to mask you can turn the mask on and you can choose from these different shapes you have a circle flower sketch blob you see blobs a lot kind of on websites these days but unfortunately it's just this this one kind of kidney shape so things you can do the circle is probably going to be the most versa one here but I'm just going to go ahead and turn that off for now just wanted to show you that that's possible and then of course we would just change the text for all these so what we have here when you're editing these it's called an image box there's just no image attached to it like for whatever reason this is separate from that but this is kind of what I call a compound widget which is basically several different elements that are tied together so we have a headline and then a or a title and a description and you edit both in the same spot so for title I might put in a different service that we offer and then I would do that for these two as well and maybe I feel like this description text is too big so I would just make sure I'm selecting this then go to style um and then under content you know you can change the typography and the sizing of the title right here but I want to focus on the description so I'm going to go to typography and I'm just going to let's just make it more like that I think it looks bit more appropriate and then go down to line height let's tighten that as well okay looks good to me so now of course I'm just going to rightclick copy then rightclick paste style and one more time okay it's looking good now we can change the background of this as well so if let's say we didn't want it to be white we would just choose the entire section go to style and then under color if you click here you have access to the whole color palette but if you click on this little Globe icon that's going to give you all of your pre-made color selection so remember how we chose colors to begin with those all appear here as well as any colors you happen to add like our background beige that I added earlier so it's just nice to have them all at the ready um whenever you need them without having to you know find them all over again okay so that is how you customize an existing section but what if you don't need a section that it gives you right like this one here it it gives us just one single testimonial maybe we don't have any testimonials or maybe we want to do something different for testimonials right so I don't need to show you how to change all these things we already know how to do it you click through one by one and you change the text and the images so I'm just going to go ahead and assume you don't need this and I'm going to click on the X right here that deletes it and that leaves us with this kind of like about us section and then a a final call to action section for the page so what if we need a couple more sections between this in this I'll show you how to do it so we're going to click on the plus icon and again if you click on this plus icon you can build a section from scratch I don't always recommend doing that because you can get in too much trouble and it really becomes a hassle when you're trying to convert it to mobile that's why I like using pre-made blocks better because all that work has been done for you and you can get almost anything you need with these pre-done blocks so I'm going to click again on the yes icon and then block so we have all of these these content blocks but let's say we need a benefit section so we'll go up here where it says all we're going to filter it unfortunately there's no there's nothing called benefits here but there's a few things that come close so features and services can be kind of retrofitted to be benefits too so I think features works the best so I'm going to click here and then we've got all these different layouts to choose from I think for the look of our website I like the idea of it going from light to dark so I'm going to try to choose a dark version here I think maybe this one is the way to go so I'm going to click on this one and then import block and then we'll get rid of this guy here so you'll see it imported it all of our fonts are already applied so it's already looking pretty good and let's say if we wanted to make the background slightly darker we would just choose the entire section go to style and then color let's go ahead and make it like a little closer to Black like this looks pretty nice all right now I don't think we need this Top Line supporting subheading if you if you have a use for it go for it and you know how to change it but I'm going to rightclick delete and then I'm going to click here and just change the headline to why work with us and I think the size of that works just fine now when it comes to a benefit section I think three is the magic number so let's say you don't need all six easy to get rid of the second row you're just going to click on the this row and then click on the X and then you're just left with three okay so now we have these three columns each one has its own benefit so just going to click through to each one and know you would change this to you know whatever your first benefit title is and then change the description right here and then we have the icon so icons are interesting click through there and you're just going to try your hardest to find whatever basically represents your benefit the best visually and sometimes you have to get creative to think about it but if you're ever stuck just go to like chat GP BT and say hey this is these are my three benefits give me options for really common icons that will help you know tell that story visually and it'll usually point you in the right direction so I'm just going to leave it on the light bulb and I'm going to click on insert and we can style it just going up to style so this is another instance of one of those compound widgets right where everything is controlled in one place the icon the headline and the description so if you go to style to change the styling of the icon you'll let's click down here so primary color let's choose one of our these are the the colors it came with out of the box I might want to make that a little brighter though so I've chosen the green but now I'm going to fine-tune it so I'm going to click on the green Swatch here and I'm just going to go a little up from there to make it brighter and I think that looks pretty nice so you know maybe you want to make the title Bolder so let's just go to style content title typography weight let's see what semi bold looks like okay looks pretty good so once you get it the way you want it all we need to do again right click copy then rightclick paste style and one more time so this is how you can really easily and closely control the content of your website you just go bit by bit section by section and find the best layout that serves your content so we're going to do this one more time just to really let it sync in so let's say we need a testimonial section here always good to have on your homepage so again we're going to click on the plus sign right where we want it to go click on the S icon blocks and then we're going to choose testimonials this time and since our last section was dark I'm going to make this section light so let's look for a layout that's going to serve the content the best I think something like this looks pretty nice so I'm just going to click this one and then import block and we'll click out of there all right so this is what we're working with you can change this headline right here and then for each individual uh testimonial let's click on the image first I I'm not sure why these are showing like this when over here we're seeing the the actual image but anyway we just going to click on the first one click on choose image over here let's go ahead and grab our client and then if you go up to style we can change the sizing of it by dragging this to wherever it looks good and for whatever reason I don't know why they do this opacity is not it's like kind of transparent for for no good reason so I'm just going to drag this all the way up to where it's one that means it's full opacity and then you would just put in the actual quote right here be careful not to make it too long you don't want it to be like a crazy long testimonial shorter is almost always better I like to actually put quotation marks around it though so it really reads as a quote then you change the name right here you know we know how to do that already now what about these uh these five stars we don't want to be showing four star emojis right so we're just going to click on this and it says rating scale 0 to five rating we're just going to say five because ideally whenever you're putting in a testimonial that should be a festar review and then if you want to change the color of the Stars you just go to style and then I like to choose just a nice kind of golden color like between orange and yellow and maybe slightly darker than that that looks pretty good now we're just going to apply that we're going to rightclick copy then rightclick paste style and then one more time over here and then we're just going to on each one make sure it's also set to five and then we'll add in the photos one by one and then remember what we did over here we changed the size and the opacity so we're going to rightclick copy then rightclick paste Style on each of these and if we want to change the background color maybe we want it to be our same kind of background beige color we'll just choose the whole section go to style and then our globe remember that gives us all of our pre-selected colors and then we'll choose background beige and just a slight design note here so you'll notice I'm not putting any crazy colors as like background images because it almost never works like it it is a very big risk to do that so again if you don't really trust your design skills I would recommend keeping it nice nice and neutral with pops of color that come in in places like the icons and the button that kind of thing so just a little color advice for me um otherwise things can go really sideways it can it can make your website look pretty amateur if you handle colors wrong okay so now we have this last kind of About Us section so let's just go ahead and lightly customize this so again I don't think we need this little uh copy here so I'm going to click on delete and then we would change our headline here and for some reason they have put all these text blocks as like separate text blocks it's very confusing and awkward to to deal with so I'm just going to get rid of all of them except for one so I'm just going to right click delete on all of these and just work with the top one and customize that text so I'm just going to paste in what I've got and within this text editor there's a lot of extra things you can do right you can bold certain key phrases want to make sure people see you can italicize them underline all that good stuff and then you know you know how to customize all this stuff you can keep whatever you want delete whatever you want I'm going to delete all these down here I don't think they're really doing much heavy lifting and if you want to change these buttons so if we click here you'll see this is already linked to our services page and this is already linked to our about us page which we're going to get to both of those a little later but we probably want these to match the other buttons we've already made if we're going to have them so I'm going to go back up here and and I'm going to rightclick copy and then rightclick paste style and I'm going to do it do it on this one as well but then I'm going to slightly modify it so I'm going to I want to make this one more prominent than this one let's say if you wanted to do it that way so all I'm going to do here I'm just going to go to style and I'm just going to choose the background type classic and I'm going to choose black very simple okay now we know how to change the image but I'm going to show you one extra cool thing so you know if you want to keep an image you know how to do that I'm going to right click delete and I'm going to go up to the plus sign because sometimes what's really good to have in a section like this is a video right so if you happen to have a video um that you want to showcase or let's say a Google map or anything like that you just take what you want and you drag it where you want it but obviously you don't just want this video placeholder here you want your video so the way you control that is under video content you got to choose the source first so you have choices between YouTube Vimeo daily motion video press or self-hosted self-hosted I don't recommend that means you are physically uploading it to your website hosting that's going to be a drain on your hosting plan and it's going to slow down your site much better thing to do is to First upload it to YouTube Why YouTube and not Vimeo or these other ones well because YouTube is searchable people can find you on YouTube people aren't really going to find you as a business on Vimeo or Daily Motion so YouTube is definitely the play there upload it to YouTube grab the the link to it and then you're just going to paste that link right here and a few more things we can control so now we have two columns what if we want the video to be slightly bigger well we just need to choose the column that the video is in we're going to go to layout and width it's currently set to 37% of the total width here so if we drag that up it kind of takes some away from this column but it makes the video bigger and I think that looks a bit better so um but if we look at it it looks fine it's Justified with the top of this text but if you wanted something different if you wanted it to be centered here cuz sometimes you will have a need to have different columns centered vertically we're going to choose this whole section under layout and we're going to go under where it says justify content and align items we're going to choose this middle option right here and to me I think this looks actually a little bit better but that's completely up to you it's just good to know how to do stuff like that so all right so this section I'm going to call done now we have one final section on this page where it's basically a hail of like hey you've made it down this far let's get started how about you contact us so but again if you don't need this section you can delete it you can put something else in whatever you want but I want to show you this one because there's a really cool thing that we have not covered yet so and it has to do with the background so obviously you would you know how to change the text here you just do it right over here you would change this over here the button I'm going to go back up to the top and I'm going to copy our button we already have and I'm going to rightclick paste style okay so our background we've already done a background image like we did in our hero section we've already changed the background color so we know how to do all those things if we click on the section we go to stop you know you either choose a different background image or if you get rid of it you choose a color we know how to do it but I'm going to show you something different so let's click over here where it has this little camera icon we can actually put a video background on this section or any section you want and it can be a really cool effect and the way you'll do this is again you'll want to use an image that's on YouTube so what I recommend doing if you don't already have a video like this in mind just go to YouTube type in something like like you know fill in whatever your Niche is and then the word b-roll you know something like creative business b-roll b-roll just means extra footage that you can put in the background for things basically so you would just see what you can find that would be a good fit so I just found this one it's just kind of nice ambient video footage anyway you can choose something like this you can choose something that's just kind of abstract or even like gradient background colors that shift and all you're going to do is grab the link to it you'll come back over to Elementor under style and then I'm just going to pop in that link right here like so and then you'll notice it starts at the beginning maybe you don't want that it lets you specify a start time though so this one happens to really start the action at around 4 seconds in there we go that's a lot cleaner and obviously you can't read the text super great over this video so what we really want to do is knock it way back and make it much more subtle so the way we do that is again we collapse background and we go to background overlay and then you choose your color remember I said black is almost always the best one here I in this case it's not even set to Black it's set to like almost green so that's we want to set it to actual black and then we're going to bump up that opacity to where it's it's just kind of Barely There in the background cuz we want the text to really shine and we just want that to be some like extra flavor on top of it so that is our page that's our first page our homepage but we're not quite done yet cuz we have to make sure that it not only looks great on desktop but on mobile too so what we want to do is go up to the top where it's got like a little icon of a computer a tablet and a mobile phone so we're going to click on the mobile phone and that is going to give us our view of what this all looks like on mobile so the good news is almost everything's already been thought out in advance it's just our job now to kind of make tweaks that will only be affected on mobile so it looks great there too so right off the bat I think we can do some work on this headline because again it's very uh it's very loose right the line Height's loose so we'll go to style typography and then under line height let's go ahead and make that look a little bit more appropriate something like that's great now in case you're wondering okay Wes but does that affect what we've already done on desktop it doesn't right so if you click on the desktop here it still looks the way we left it that change we made only applies to mobile and the way you know that is if anything you're changing if it has the little mobile icon next to it that means you were only changing this for mobile or for desktop or for tablet whatever you're working on so I think that's great so now maybe this text is a little too big we would just click there go down to typography and again size and we're we're looking at that little mobile icon again so we know it's just uh taking effect there and then maybe we'll make the line height slightly tighter I think that looks good and then all we need to do is just go down the page and start making little tweaks that we feel like would be better so this again I think it's too big so we click here style typography let's go ahead and make it you know I think that looks nice and then line height let's give that a little love think that's good this text looks good okay so one thing remember what we did on desktop we made these more square that did not take effect on mobile and that's really where we would want it we don't want people scrolling too much on mobile because they'll get tired of it so what we need to do is choose this image so we'll click on the little pink pencil and then under style and we're going to make this height whatever we think looks the best and I would actually make it a little less than Square I would make it more like this to be honest just to save that scrolling space so then I would just do right click copy and then paste style here and then here as well and we go down so like this one I would probably want to put this on one line why work with us so style typography let's just make it uh about like that and this all looks pretty good to me I think I want to make this on one line too perfect and let's go ahead and make this yeah that looks better I think okay looks good to me so let's go back to our desktop view important last step before we move on to the other Pages we got to click on publish to make sure that we've saved all of our changes and to where this is actually going to be live for people to see it so all right congratulations on one page down we've got a few more here so so in order to get to our other pages to edit them all we're going to do is click on this little eyeball icon here to preview our page that we have and then you'll see we have all these other Pages they're pre-built they're pre-laid out we're just going to click on the next one about so this is kind of what we're dealing with and then to edit it we just click on edit with Elementor okay so we're now back inside the Elementor uh editor and this should look very familiar it's just like the homepage we just still have a series of sections with columns and we got our sidebar over here so we're just going to handle this very much the same way that we did our homepage so the first thing we need to worry about is our little top bar here it has the title of the page with a nice background image behind it so first thing you can do is if you needed to change you know maybe you wanted this to be about me rather than about us or you know whatever you want that headline to be you can change it and obviously you can change the style typography all that good stuff is handled over there but what about the background image so we know how to do that too it's just as simple as choosing the section going to style and then image we will go ahead and choose something different ideally it should be kind of a big full width image like this it shouldn't be square I'm going to click on select and then if you're running into readability issues again we just go up to under background we go to background overlay ideally choosing the color black um we're going to bump that up slightly to where we can just read it a little bit better I think that looks pretty good oh and I forgot to show you this on the homepage but there's a cool effect you can do here so still choosing the section if you go down under background so you've got the image selected notice how when you scroll the whole image scrolls with the page but what can look a little more modern and interesting I think if the image stays in place and everything Scrolls around it so if you go to attachment it's set to scroll but if you put it on fixed all of a sudden the image stays put and then this Scrolls around it which I just think kind of looks better so that's something you can also do with the hero section on your home page but anyway let's move on down to our next section so any about us page should have kind of a nice section like this where you know you introduce yourself you kind of talk about your own experiences what makes you qualified all that good stuff so you would change your headline by clicking here and then putting it in here something like that and then we style it typography I think the size of the font is fine but the line height again is a problem so let's do that and here we have another instance where the designer of this decided to just make four separate text blocks for no reason so I'm going to right click and I'm going to delete all of these except for the first one and then you would put in whatever your text is here and then we want to change our image just click on it choose image and I'm going to choose maybe this one right here so I would call this section finished now it gives gives us all of these other sections which are basically like you know it's like kind of a redo of the first section and just these like big quotes here so I'm going to just get rid of all these and we're going to put in whatever it is you need for your Abus page so click on the X on all of these guys just start with a nice blank page so we've got this section now let's go ahead and add in something else so we're going to click on the little s icon blocks so again all you need to do is see like what do you need to communicate on this page and what section is going to be the best layout to help you do that so I'm going to go ahead and do something that I like to use on an about us page which is a um statistics block so I'm going to click on on that and you've got all these different ways of showing you know like if you you saved people so much money or you have so many five star reviews on Google anything like that you can communicate here so I think I'm going to choose this one right here here click on import block so this one's cool cuz it has these little counters that count up from zero so it's a little animation it's just something kind a little bit of interest for your site and this gives you space for four different stats obviously if you don't have four maybe you just have three it's easy to get rid of one just by clicking there and actually you'd want to get rid of this whole column so everything spreads out so I'm going to right click on that column and then delete cool and then you would you know whatever you want to say here you would just change that right over here or you know if you didn't if you didn't need the Preamble for it you can just rightclick delete on the column okay but so now you're just going to add in your numbers if you have them so might be something like you know put in 98 and then we have number prefix or suffix I'll show you both a suffix is what comes after the number like if it's percent so 98% and then subheading one you would click here and you'd write something like you know client satisfaction or if we want to click on this next number so let's do a prefix and a suffix so it would be a dollar sign is a prefix and then number suffix might be K right $70,000 and then you type in you know whatever that means or you know 84 or like maybe I would say 100 plus F star reviews I don't know you get the point we're we're we're providing some proof here that way you do actually work so from here I might just want to change the background color more to black oh we've actually got an image here that's why okay I'm going to click on the trash can to get rid of that image nice black background and then we can change the typography here to anything we want we know how to do that under style number change it but Tech I'm going to do text color instead I'm going to make this kind of that our green color but brighter and I didn't save that color last time I didn't follow my own advice so I'm going to click here and let's go ahead and make that a little bit brighter just by dragging it right up from where we were and now I'm going to save it so we have it and then I'm going to right click copy rightclick paste style and again and that's looking pretty good but now Okay so we've we've run into something here that we have not had a chance to talk about yet and that is the idea of margin and padding basically what I'm getting at here is there's not enough room here between this image and the next section and kind of looks a little janky to be honest so what I want to do is go up to this top section click on the whole section and then go to Advanced so here what we have is padding refers to the space within a section so you can see here we have 90 pixels of padding on top zero on the bottom that's why there's like no space here so if we added a 90 to the bottom too then we have more room and it just looks a little nicer okay so let's finish out this page what if you need now a space for you know team bios or just kind of pictures of your team members well just click on the little s icon blocks and you know when I say that it's any section you need I'm just going to show you all the different options and how to customize stuff so and we'll choose the one that says team and then we've got all these options now I recommend not doing one where it has all everyone's like socials you don't want to be sending people on your website to your team memb social media I'm just going to do a nice simple one this layout right here but again feel free to use whichever layout works best for you and kind of matches what you've already got going so I'm going to click this one right here then import block and I would change the headline to something more like and then we would change this or if you don't need it at all right click delete and then just click on each picture one by one and add your team numers photos and then you would change their names right here their name is the title and description would be their job description basically but what happens if you don't have exactly four team members well it's easy to to manipulate this all you need to do is let's say you had three you would just rightclick delete the last one that opens it up let's say you had uh six well all you need to do is duplicate this row right so we're just going to click right here so we're choosing this like intersection right click duplicate now we have another row of them and let's say we had five we just right click delete this one so it's very customizable and very easy to kind of get to the number you need but I'll just go ahead and get rid of this for now and I'm going to change the background color to our beige so we'll go up to style background type color she's choose our background beige color there we go then if you have need for other sections on this page we know how to do that right we click here we go to blocks we just choose whichever section layout we want and we customize it but let's just call this one done except for we still need to uh reality check it for mobile so we're going to go up to our mobile icon here and we're just going to be on the lookout for anything that feels off right so everything's looking fine right now I think uh let's go ahead and tighten that up again like a broken record with the line height but there we go I think that looks better I think this all looks good great I'm going to call that done and we're going to click on publish and then to get to our next page we're going to click back on the little eyeball icon to preview changes we're going to click on our next page which happens to be services and then edit with Elementor then we're just going to go Section by section and make all the same kinds of changes we've already been making and don't worry I will show you in a bit how to make any new pages you need or how to change any of the existing pages that they gave you into something different and then we're just going to go ahead and change our background image we choose the section go to style choose image and then maybe this one right here and then let's apply that background overlay so the text is easier to read we'll go back to background overlay make sure it's pure black and then um drag that up up to where it's nice and easy to read somewhere like that okay now we know what we're doing from here right we just click on each element and we change it to what we need it to be so starting with the image we're going to click on our first service we'll change the name of it here change the the dollar amount here maybe it's starting at you know $5.99 and then you know again they've they've made this difficult with all these different content blocks I'm to delete all of them and then just click here and you would just tell them what's in that package and then the button you can change that to something like you can either keep get a quote or schedule a consultation and that's already linked to your contact page which is good but the button does not match what we've already done for the button so I'm going to go back to our homepage over here and I'm just going to rightclick copy and then rightclick paste style then now I got to make sure it's left Justified again so I'm going to go to style and choose left there we go now we're just going to do the same thing for the rest of these or if you didn't like this particular uh treatment for the services all we need to do is go down to the plus icon and then the S icon blocks and then let's choose Services right here and now you have all these these other layouts right you could choose something that looks more like this where like an image and then you've got the text block next to it you know there's all different ways that you can handle it so but even within this you could change the look just by you know making the background dark and making the text light there's all kinds of things you can do but anyway for now we're just going to click on the mobile phone just to make sure it looks good on our devices before we move on to our next page but yeah every I think everything things looking pretty good as is so let's click on publish and then back on our eyeball and now we get to go to our contact page this is a really important one this is where you want people to go on your website to get the ball rolling with you so once we're here we're going to click on edit with Elementor okay so now we've got our contact us header right here I actually recommend changing that to something with a more of a point on it I would say something more like you know get a free consultation make it mean business rather than just contacting you and then we'll change our background image just by clicking on the section style choose image and then select okay and then if we still had a hard time reading this we would just go to background overlay choosing black and then you know just drag it to where wherever it looks good okay now we have where the action actually happens starting with this headline we respond to all messages within 24 hours super important to have have something like this um just to let people know what they can expect next so what I'm going to do here I'm going to leave it as is content wise but style I'm going to make the line height slightly smaller and I'm probably going to add a little text block underneath it just to further explain what they can expect so I'm going to click on the plus icon and we'll do a text editor and here's where I would tell them something like you know give us as much information as possible or tell them like what information to give you really just break the process down so it's easy for them to understand what's coming next and then I'm going to go to style and I will align that to the center to match what we have above it and we do still need to edit this form but we don't actually do this inside of the Elementor environment we do it somewhere else so before we move on to that just going to go down here we have this extra section work with me online or in person I don't know how helpful this is if you have a need for this section great some people like to put like a map of where they they work so if you wanted to you know just I just want to show you that option we'll delete all this stuff here this can be a good like local SEO play just to put your map there so we'll CL make sure we're up on uh where it has all the elements all the widgets and we're going to drag a Google map from here right over to here and here's where you would put in generally speaking if you put in the name of your business if you're currently on Google already it should pop up for you if not you just want to put in your full address here and then from there you're just going to want to go bit by bit here and change your information highly recommend not listing your email address that is going to lead to massive amounts of spam so what I would always recommend doing delete your email address this form is all they need they fill that out it goes to your email they don't need to actually possess your email address that shouldn't be made public so then you can click on these social icons and you can configure which ones you want to use maybe you don't want to use Twitter anymore you'll click on you know where it says WordPress you can go to Icon library and choose you know YouTube let's say you're on YouTube go and insert Alo we have two of those so and then for each one you're just going to go one by one and you're going to paste in the URL to your social profile if you want to get rid of one you just click on the X if you want to add another one click add item and just keep going like that then if you go to style under color it's set to custom now right this is our kind of custom green color that we've already chosen but you can choose anything else or if you want to choose the official color that's going to put it at the actual color you know YouTube is red Facebook could be blue for instance you know it's your choice but I'm going to go ahead and get rid of this section I don't think we need it and now I'm going to go ahead before we actually configure the form let's stay inside the elemental environment just to make sure that it all looks good on mobile so I'm going to click on this up here everything looks fine these fields look fine to me button looks good Okay cool so now we're going to click on publish and let's go back out to desktop and I'm going to click on our form and over here it says need to make changes edit the selected form so I'm going to click on that right now okay so now we can actually edit the form itself so this is going to go in two stages the first one is actually putting in the form Fields you need and the second is we're going to actually make this work so that whenever anybody fills it out you get an email about it otherwise if if we don't configure that they're going to fill it out and it goes nowhere so currently we have your name your email your phone your message let's say there was one of these things that you didn't even need like if you didn't need their phone number you could just click on the little trash can and it would be deleted I'm just going to click cancel but that's how you would do that generally speaking these are the things you want to ask for especially if you're going to call them back you do need their phone number if you're not planning in calling them back though I would not ask for this it's going to result in a lot fewer people filling out your form but they might be more qualified because anyone who gives you their phone number is a little bit more they're raising their hand a little higher for help you know but maybe you want to add something else here like maybe you want to ask people what their budget is because you know you get a lot of Tire kickers who can't afford you and you don't even want to get on the phone with those people so you could ask that in the form of a drop down so if you took that and you dragged it into place maybe right here we'll click to edit so the label here would be what's your budget first choice would be second choice and third might be and then you have the choice to make it required or not so if you're going to ask a question like this you might want to make sure that they fill it out if so you just click on this little uh button right here and that way they have to answer it in order to send this out now we get to your message so if we click here and then click to edit so I recommend doing here is rather than saying your message because people may not know what to say there and they if if they don't know what to say they tend to put stuff off so I would actually ask a real question here even if it's just is there anything we need to know about your project before our call that way you know they get the idea that they can say no or they can tell you whatever they need but if you need to know something specific I would ask for that here and then I like to you generally make this one not required unless again you're trying to get rid of Tire kickers and you know they're more serious if they fill this out okay so I'm going to click on Save just to save all of our work that we've done here the next important thing we have to do is we have to go to settings to make this thing actually work so we're going to go to Notifications and you want to make sure all this is filled out so send to email address that is your email address that it's going to send to so you know if you already configured your admin email in your WordPress then that should be good to go otherwise you might want to just be safe and type in your actual email address and if more than one person is to get it you can separate them with a comma and then email subject line so what do you want the subject line to be when you get one in I might change it to something more like you know new consultation request or new meeting booked something like that okay from name this one's important so you actually want the name to be the person's name who who filled out the form right so I'm going to click on show smart tags and then I'm going to choose your name because that was one of the ones that we chose and I'm going to get rid of hope that was just the placeholder so whatever name they typed in it's going to show it's from that person and then from email we don't want it to be from your email right that's admin we're going to do show smart tags and it's going to be your email so whatever emailed address they typed in that's going to be the address it's from allowing you to easily just respond to that email address and then reply to you've got that email message is it's just going to include all the different fields and that's pretty much all you've got to know here so I'm going to click on Save and then I'm going to exit out of here so what I would definitely do though is I'm going to click on the eyeball icon again I if I were you I would fill this out and make sure that it all took effect and you actually get that email you always want to test those things okay so we're nearing the end here I do want to show you two more important things that you might need to know how to do though so the first one is how do you change a page like services for instance what if you don't need a Services page what if you need a pricing page or a testimonials page instead so I'm going to show you how to change any page that they give you and I'm also going to show you how to just create any new page you ever need so in order to do that let's exit back out into WordPress so what we need to do then is go click on the little WordPress icon here and now we're back where we started inside of the WordPress dashboard so let's just go over to Pages this is our list here we have about contact home we have a privacy policy and we have services so let's say for a second we want to change services to pricing okay the first thing we want to do is just do go to Quick edit and I'm going to change this to pricing and slug I'm going to change that to pricing as well so all slug means is that's the part of your website address so it' be your businessname docomo if it was the about us page so that's what the slug is and we're going to click on update and then we'd want to go to edit with Elementor and then we would change right here we would just change it to our pricing and then here this kind of works because it already is about pricing right it it basically does the job already but if you needed to add whole new content here we know how to do that right we can get rid of everything we have just by clicking on all these little x's and then we can add new stuff by clicking on the S and then going to blocks and then just choosing what ever content is going to fill the bill the best for whatever it is we need just stack it up one after the next I'm going to go ahead and do command delete I'm going to get I'm going to undo or sorry command Z I'm going to undo what we just did so that's how you change a page how about just adding a brand new page what if you needed everything they gave you but you have need for more pages beyond that so we're just going to click on the little Elementor logo and then exit to WordPress that's how you always can go from Elementor back into WordPress and then the WordPress icon here and here's the thing you can add a new page but then it's not going to give you the same like header that you had already so what I'm going to do instead I'm going to search for a plugin so remember a plugin just extends the functionality of your website in this case we want a plugin that's going to allow us to easily duplicate a page so we'll go to plugins add new plugin I'm going to type in duplicate there there's a lot of plugins that will do this I tend to go with this one just duplicate page it's super lightweight super easy and then click on activate Okay so now if we go back to Pages we can just choose any of our internal pages that are like I would just choose the simplest one let's say we need to add a testimonials page right I would go to about duplicate this and then here's the one we just created I'm going to go to Quick edit and I'm going to call this testimonials and then slug I'm going to type the same thing remember so now you'll go to your website.com testimonials and that'll be that page so click on update and then edit with Elementor okay so now we have basically a a carbon copy of your about us page so from here obviously we just need to change the title and you you know you could change the background image if you want and then I would just get rid of all these sections just X them all out start from a brand new page then we click on the yes icon blocks and then look for testimonials and then you would just choose a layout that works the best so you know I might choose this one right here and then import block and then I don't know that we need a secondary headline here but you know obviously you know how to change that but I'm going to rightclick delete and then here just go one by one choosing the right image for the right person then you would input the right uh testimonial here and then the person's name would go right here and then if you have more than three you're just going to want to duplicate this section so you just right click duplicate now the only problem with this is it gives you way too much space here so this is where you're going to have to mess with the padding a little bit so I'd go to the top section Advanced on the bottom I'd probably put about 10 padding and then I would go down to the second one and I would go to Advanced and I would probably do another 10 on the top and then another 10 on the bottom now you can just keep duplicating it over and over again as many times as you need to you can even add in like a featured testimonial section here so if you wanted to add let's say you have a great video testimonial you can just click on the plus icon again on the S and then blocks they don't really have that under testimonials but if you go to about it'll give you a nice starting point here I would just choose something nice and simple like this right here and then import block and then we can just rightclick delete this image and then go back up to the plus and we would bring our video in and then obviously again you'd have to have that uploaded to YouTube or Vimeo or something I recommend YouTube and then you would paste in the link to it right here and then the headline it would be something like just kind of a a gist of what it's about you know something like that and you might style it you know might uh make it a little smaller maybe like that and then you put the text here so I would probably put it in quotes So I basically what you're doing is you're just pulling out like a really good pull quote from the interview or from the testimonial and then you could you know put their name here maybe you want to make that bold and then if you want to go above and beyond click on the plus I'm going to type in Star so we have a rating here we'll just drag that right underneath and there you go and again you just want a reality check for mobile so we'll click right up there this looks good let's make this a little smaller and then let's see okay so now we're running into it remember how we duplicated that section so we need to actually make it uh work on mobile too so I'm just going to click on this section and then on padding I'm going to unlink these values on the bottom I'm going to do 10 okay so now I'm going to right click on the section copy and I'm going to paste that here so paste style and then paste Style again so like that's looking pretty good we'll click on publish okay so let's take a look one more thing we need to do we still have to deal with our header and our footer right so let's go ahead and take care of that right now so we'll click on the E the elemental icon and then exit to WordPress and then on our WordPress icon okay so now under Pages these are all of the pages that we currently have so the first thing we need to do when we're dealing with our header is choose which of these pages are going to be in the menu so um we need to go over to appearance and then menus and here we've got one main menu already set up for us and it has the homepage about us services and contact but remember we changed services to pricing so just changing it on the page wasn't enough to change how it's going to show up in the menu so the way we would change that if you ever want to change the wording basically on any of these so let's go ahead and do that for a couple of them so for services what we have here is navigation label so that just means that's the actual wording that's going to show up in the menu so if I were to change that to pricing instead now that change will finally take effect what if you wanted about to say you know about us you just change the navigation labels as easy as that now there's a few of these that we might want to get rid of and a couple that we might want to add so I'll show you how to do that first of all home we don't really need home in our main menu items and here's why because pretty much Everybody Knows by now that when you click the logo it takes you to the homepage so you don't really need it here the other one we don't need is contact because this button is meant to take people to the contact page right now it's set up as a phone number but we're going to change that so we can probably get rid of home and contact making room for a few other Pages you might need so let's go back here so to get rid of one we're just going to expand it and then click on remove and we're going to do the same for contact as well so what about adding new ones so we added a testimonials page for instance so all we need to do is choose any page that we want to do or select all and then add to menu so now we have all three and then you from there you can drag and drop them in whatever order you want I think this is probably a good order for now and then we'll just click on Save menu okay so now we got to figure out how to actually add in our logo and style this to where you know this button looks like this button and every we can control the fonts and all that good stuff so we're going to go back into WordPress and we're just going to go down to under appearance customize and then we're going to look for the header Builder and I'm actually going to go ahead and hide the Builder we don't really need all that down there um we can control most of everything from the sidebar instead so it says this header is set from the transparent header so we're going to click right here customize transparent header and we're going to click on this enable on complete website toggle right here and then we're going to go down and make sure it's set to desktop and mobile and then we're going to change our logo so right here it's got this kind of white dove we're just going to click on change image and I've got one right here to go now ideally what you want is some something along these lines that's wider than it is tall we call that you know landscape mode versus portrait mode cuz think about if if your logo is taller than it is wide it's going to look kind of funky up here in the header so that's why you want something like this and ideally when you're dealing with the transparent header you want the logo file itself to be a transparent background and you need to make sure it's a color that's going to work with your background so in this case our backgrounds are kind of dark so we want to go with a light uh logo file and obviously though it's really small up here right we can barely see it so the way we adjust it is under logo width we can just kind of drag it to where we want it to be something maybe around you know just under 200 is probably good now the problem is sometimes it bugs out and it won't really show you what it looks like as you're doing it so what we have to do I'm going to click on publish and then I'm going to refresh the page and that should show us uh yeah there we go now it's taking effect okay so now what about these other elements so we have our menu and we have our button so let's start with the menu just going to click on the little pencil right there and then I'm going to go over to design and I'm not going to worry about any of these things I think all the settings are pretty good as is but I can tell that the font is not really the font that we're going with on the site so I'm going to go down to menu font and I'm going to choose outfit that's just the one that we've been using but feel free to use obviously you want to use whatever font that you're using on your site and then we also have this issue of these ones are all in caps and this one's not it's just how they were put in originally so I'm going to go ahead and click right here on this uh this icon which will just capitalize everything and you can of course change the sizing of it I happen to think this looks good you can change the weight so if we wanted to make it a little thicker we could do maybe a semibold I think that looks pretty nice okay now what about the button so obviously we need to do a few things with it we don't really want it to be linked to a phone number cuz that's not really a great user experience at least on desktop and we definitely want it to match the called action we already have so let's just click on this little pencil and here's where you'd put in the called action text you want it to match what we've already got and then for the link we're just going to do a backs slash and then contact that will take us to the contact us page so that takes care of the content of the button what about the style so we got to go up to design and then background color it's set to like this is the hover color so if we go up here and we hover over it it turns green but it's basically clear until that point so what we want to do is choose that same color for the non-hover state so something like that and then if we wanted to change the hover color we can click here and we can maybe make it a little bit darker just so it you know it kind of reads as you Mouse over it people know that it is a button so we can change the font because right now it is definitely not the same font as this so I'm going to click right here and I'm going to choose our same one we've been using outfit and then weight I will make it uh semi bold it's starting to look a little bit more like this now let's go to border width so remember what we did here and feel you know whatever you did for your button we just want to repeat it so in this case we did um a border on the bottom and on the right so what we want to do is unlink these values so they're independent so top will'll do zero and then left will do zero and now we need to round it out the same way so it's this nice pill shape so we're just going to go to border radius we want to make sure that these are linked up together so now I'm just going to type in I don't know 30 there we go but now we need to reality check this on mobile and make sure it looks good there too so we're going to go down to the bottom this time and just click on the little uh mobile device icon and this is what it looks like looks pretty good right so if we click here the menu drops down and we can see a lot our Pages my one gripe with this would probably be I think the logo is a little small so let's fix that by clicking on the little pencil and then we'll scroll down to where it says logo width and again we're seeing that mobile device so we know that we're only changing it on mobile so let's see if this yeah this doesn't give us any feedback in real time again so let's see what 100 looks like I'm going to click on publish and then refresh I think that looks great we've already published it but if you haven't done that go ahead and click publish now we're going to go down to our footer Builder last step and let's just let's go over to uh to desktop version so we can see what we're doing here so we have here our menu the old logo for the site and just kind of a basic copy right line I don't think it's necessary to really have your logo down here if you want to do that go for it you just click here and you would have to add it as a as an image in this text box it's not a great user experience honestly I'm just going to go ahead and delete it I don't think that we need that at all things you could do here are you know you can just use this text box Editor to add in your phone number your address any of those things that's going to maybe help your local SEO now for the footer Builder it doesn't actually allow you to change the font here on the free version of the footer Builder so not sure about that but over here we can at least change our text to the name of your business we click right here and then go back to design we can change the background color um you know there's all kinds of things we can do there but unfortunately we are not able to change the font here but small price to pay for using a free Builder I say so I'm just going to click on publish and click on the little X then if we go over to pages and then home and click on view now we've got our finalized website looks great and it didn't take much time or effort to get here but of course that's just the how to build your new website but what about the more important part what should go on your website to actually get a ton of clients from it well if you're a service business and you want to use your site as an automated lead generation tool I am saving a seat for you in my brand new Master Class how to build a client generating website that sells your services for you in just one hour you're going to have a step-by-step plan to turn your website into a client attraction machine that works for you around the clock with no Tech skills required so just click right here to sign up for free and I'm going to show you all my secrets so see you right there
