WordPress Tutorial For Beginners 2023
*Web Hosting 80% Off Discount Link Here: wesmcdowell.com/siteground
🔥 Welcome to the ultimate WordPress tutorial for beginners! 🔥 If you’re a small service business owner—whether you’re a designer, a plumber, or a landscaper—you know that having a killer website is non-negotiable. But hey, you didn’t sign up to be a web developer, right? That’s where this guide comes in. We’re diving deep into WordPress and Elementor to help you craft a beautiful, fully functional website without breaking a sweat.
Timestamps:
👉 What You’ll Learn:
How to set up WordPress like a pro
Mastering Elementor to bring your vision to life
Essential plugins that’ll make your life easier
Tips and tricks only the experts know
🛠 Tools You’ll Need:
A computer (obviously!)
WordPress (it’s free!)
Elementor (also has a free version)
A sprinkle of enthusiasm and a dash of creativity
🎯 Who This is For:
This WordPress tutorial for beginners is tailor-made for service business owners. You’re not just building a website; you’re building a tool that’ll bring in more clients and grow your business.
📈 Why This Matters:
Imagine this—you’re a local plumber. Someone’s got a leaky faucet, and they’re frantically Googling for help. Your website pops up, it looks professional, and boom! You’ve got a new customer. That’s the power of a well-crafted website.
👊 Let’s Do This!
So, grab a cup of coffee, roll up those sleeves, and let’s get started. By the end of this tutorial, you’ll not only have a website but a digital asset that works as hard as you do.
📌 Don’t forget to hit that “Subscribe” button and ring the bell 🔔 so you won’t miss any of our future guides and tutorials!
In this video I'm going to take you Through every single step to getting Your very own WordPress website without Needing to know any code at all so even If you've never done this before I'm Going to make it super easy and it's Only going to take about an hour or so To get the whole thing done and I Promise you once you've gone through This you're going to be able to create Just about any website any design any Section you can think of it's really Customizable and you're about to see Just how easy it is so let's get started So here we are inside of the WordPress Dashboard but we should probably Backtrack a second because to get here You actually need web hosting first so Hosting is just the computer server Where all your website files are going To be stored and if you use my link That's in the description below it's Going to take you to siteground it's my Host of choice these days I love them And using that code is going to get you A 299 a month price versus the 14.99 They normally charge so from here we're Just going to click on view plans and I'm not going to go through everything Here I know we want to get started I do Just want to show you a couple things to Help you out so in case you're wondering Which of these plans you need 99 of you Are fine with the startup plan unless
You get over 10 000 months visits a Month this is going to be just fine for You you can always upgrade later if you Start getting more traffic now it's Asking if you have a domain name already Or a.com website address so if you Already have one you're just going to Click here it'll take you through those Steps if you don't have one you're just Going to want to see if it's available Right here And as you can see with that coupon You've already you're saving two dollars On that as well so pretty good and I'm Going to click on proceed And it looks like the domain was Available if it's not for whatever Reason you just have to go back and Create something else just going to fill Out all this information and you want to Make sure you're choosing 12 months That's going to get you that 299 a month Price and then we've got that domain Registration here this may not be Checked for you if you already have your Own we can leave these other two Unchecked and then you just have to Check this first box not the second one And pay now From there it's just going to ask you For some basic info about your site and Your business and then you'll be able to Sign into your WordPress dashboard okay So here we are back in the WordPress
Dashboard it may look a little different For you depending on what they're uh Deciding to advertise today I'm just Going to dismiss these things so we Start off a little cleaner I'm just Going to give you a really quick Overview before we get to the fun stuff Of building Um just show you the lay of the land Here where some stuff is so first of all Over on the left panel we have things Like pages so if you want to add a new Page this is where you would do it and If you click on pages you'll see all the Pages there's not a not a whole lot here In fact I'm just going to go ahead and I'm going to delete the ones we've got There And apply And then we've got things like posts up Here so this is like think of these as Blog posts so if you want to add a new Blog post in the future you would click Here to see all of them you would click Here and another really important thing To know is users right down here so this Is where you can add yourself as a user You can add someone else on your team as A user but we want to make sure your Password is set so that you can easily Log into this in the future without Having to go through your host so I'm Just going to click on all users and Then it should have one for you here
Based on the information you filled in With your host and I'm just going to Click on edit And down here we just you can edit the Um the username itself if you want to do That you can change your email if you Need to but the really important thing Is changing your password so I'm going To click on set new password it's it's Going to suggest something for you you Can put in whatever you want and then Just click on update profile So now we're going to add a few things That are going to help us actually build The site so we're going to go over to Plugins And then add new and if you don't know What a plug-in is it's just something That helps extend the functionality of Your site Because right now it's a bare bone site With nothing on it so we have to add Plugins to make sure things work Now the first one I'm going to search For this one is optional It's called icon elements now this is Imp this is really important if you want To be able to use different kinds of Icons it just helps give your site some Extra personality again it's optional I'm just going to click on install now You might as well do it that way you Have the option later and then on Activate
Easy as that now we're going to go up to Add new and we're going to add one more Really important plug-in this is the one That's going to make building your site Possible in the first place So I've typed in starter templates and This is the one we want right here it's Really reputable as over a million Installations and five stars across the Board so I'm going to click on install Now and then again on activate so now That we have starter templates installed On our site we're just going to scroll Down and find it where it says starter Templates we're going to click on see Library And you can watch this overview if you Want to but we're going to skip that I'm Going to click on build your website now Now is where we choose which page Builder we want to use now I always Recommend Elementor it's all I ever use To make websites I love it okay so now's The cool part these are all the Templates that it comes with you can use You'll notice that some of them are Designated as premium meaning you have To pay for them but there's quite a few In fact some of the best ones in my Opinion the easiest ones to use are Actually free and don't worry you can Customize them as much as you need to to Make anything so we're just gonna go We're going to choose this first one
Right here I love this one to start with It's just a really nice clean design and We can add sections that will we can Delete stuff we can swap things around I'm going to show you how to do all of That stuff so if you have a logo at this Stage you can go ahead and upload it Here we're going to skip that for now We're going to handle that last actually So I'm going to click on Skip and Continue and this is kind of cool it Actually lets you choose from a few Different color schemes they've got Don't worry you're not locked into any Of these but what I would do if I were You is just choose one that maybe feels The most right for you right and how and Then later we can go ahead and change Things if we need to And the same thing here with fonts it Gives you some really good out of the Box combinations that you really can't Go wrong with so you've got all these Different looks here I'm just going to stick with the first One though I think it's a nice clean Look and then click on continue So I'm going to skip all this stuff I'm Not going to fill that out I don't think You have to and I'm not definitely not Going to click this I don't want to get Emails from them but make sure all of These things are checked these are all Things you need and I'm going to click
On submit and build my website okay so It built it really quick it says 24 Seconds is all it took it may take a Little longer for you but but it should Never take any more than just a couple Of minutes so click on view your website So here is basically how it would look For your clients or customers who are Coming to your website this is the front Facing side of it they they will not see This bar up top this is just for you and You're logged in and you can see we've Got all these Pages here home about Services contact and I will show you how To change those too if you ever need to Swap it out for a different kind of page Totally doable so in order to edit let's Click back on home Let's make sure we're on the home page And we're going to go right up top to Edit with Elementor and I'll just click Out of here Actually just don't show any of those Okay so here's what it looks like for You when you're actually editing the Site so we're inside of Elementor again It's a great page builder that lets you Create any page any section of any page Without knowing any code whatsoever Which is awesome I'm not a coder at all and I was able to Pick this up like within just an hour of Playing with it so this is definitely Going to be easy and you can do this
Okay so the first thing I'm going to do Is I'm going to close out of this that's Not really needed here and I just want To show you the lay of the land here What we've got so over here on the right Side we have what I call the staging Area this is where all the actual Content is and then over on the left Side This is our element panel so this has All the different widgets you can drag And drop over here And anything over here on the stage you Can go ahead and click on it and then Edit it over on the left And there's a few different tabs and Don't worry we'll get to them over the Course of this video so you'll know Exactly what to do but but the first Thing I want to show you is basically How these sections are like what they're Made up of so what we have is Essentially each section and a section Has this like pink box around it it's Really small and I hope you can you may Not be able to see it in this video but So this is a section this is a section This is a section and every section is Made up of columns so this section has One column this has three columns this Has one column this has two columns and Within each column you have these Widgets so if you come up to this uh Elements icon these are all elements or
Widgets you can just drag right from Here into here And then edit it right here I'm going to go ahead and do a command Z On that But I'm just going to go ahead and right Click on this and delete it okay so Going back up to the top section this is What we call the hero section at the top Of any page so now it's time to have Some fun and actually customize this Thing so it looks like how we want it to Look so there's a few things going on Here we have the background image we Have the text and we have the button so Let's go ahead and start with the Background image and I can show you all The fun stuff that we can do with that So in order to edit that we need to Select the section And we're going to go over to style that Has our background stuff over here so Right now it's set to a background image But you've got some options if we got Rid of the image you could have just a Background color any color you want you Can play around with this bar You know it can be blue could be Anything you also have gradients so you Can choose any two colors That can just kind of fade into each Other now be careful with this one Because it can look really bad if you Don't know what colors go together but
It is an option for you nonetheless then We have video you can actually add a Video from YouTube here all you have to Do is just paste in the URL of that YouTube video or you can do a slideshow Where you can select multiple images to Kind of cycle through in the background But the standard what most people do is Actually just use a background image Here so I'm going to do that I'm going To click I'm going to go back to this First one that says classic and then I'm Going to choose an image so you just Take whatever image file you have and if It's for a hero background image I do Recommend it being about 1900 pixels Wide you definitely want to make sure It's big enough to not be pixelated but I've already got all and then you just Drag it right over onto the stage here And it would upload I've already got all My media files uploaded previously so I'm just going to click there and I'm Going to choose this one right here And that's looking pretty good but maybe In your case the text is hard to read Over an image well there's an easy Solution for that so I'm going to go Under where it says background I'm just Going to collapse that and go to Background overlay so this is going to Put a color either a solid color or a Gradient on top I generally recommend Sticking with a solid color but I'll
Show you how to do a gradient overlay Later so you just choose a color I Almost always recommend simple black I've seen it go sideways way too many Times when you choose a crazy color and It just tends to not look great so black Is generally best and then you can play Around with how transparent or opaque it Is so if it's all the way on one it's Just all black if it's on zero it's not There at all so you want to play around And you want to basically get it to a Point where you can still see the image And you can definitely still see the Text so to me something like this looks Pretty nice And now if you want to change your text It's really easy to do you're just going To click on whatever text you want to Edit and like let's let's say we want to Edit the sub headline here and you just Write it over here you can even bold Certain key phrases if you want to and What if you want to change the style of The text right so just click on any text You want to edit the style of then go From content to style and then under Text color you can change that to Anything you want Again play with the color wheel here get It to wherever you want it to be I'm Just going to stick with white then Typography so here's where you can Change things like the font by the way
Thousands of Google fonts to choose from It can be a little overwhelming that's Why I recommend just sticking with the Pre-formatted choices they give you Because you really can't go wrong with Them but you can choose anything else You want here you can change the weight Of it like you can go thin and by the Way not every font has thin and all that Stuff so I'm just going to go back to um Just to be able to show you that I'm Going to go back to default we can do Thin we can do bold if we want to do That If we go to transform we can make it all Uppercase you know all kinds of stuff we Can do I'm just going to go back to Default and let's say we wanted to make This sub headline text a little bit Bigger because I think it's kind of Small easy to do just go up to style Typography and then bump up the size Just like that Okay and now we are left with our button Right here so if we click on that we've Got a lot of options so the first thing We can do is change the text of it so Something like Something like schedule now or call now Or whatever you want it to be then for The link this is so basically that has To go somewhere right so this is where You would just enter in the URL of the Page that it's going to go to in most
Cases it'll be your contact page So just make sure this all you really if You're linking internally on your own Website this is a really important thing All you need to do is do a backslash and Then the name of that page so this is Usually best left is kind of a last step When you know what all your pages are Called Um so it would be you know in my case it Would be Wes mcdowell.com contact but All I would have to actually type here Is slash contact because it knows we're Already on that site from there you can Change the alignment you can do left or Center or right But obviously Center looks best there You can change the size if you want to You can even add an icon if you wanted To do that you just click on the icon Library and it'll bring up all these and You can you can try to sort through it I'm just going to type in um A Chevron here that's kind of the one of These little fancy arrows I'm just going To click on that that tends to look best In a button like this and I'd probably Position that after now Beyond this we Can obviously change the style too so if We go up to style we can change the font Right like we did with the other text You just choose it here you can change The size of it make it a little bit Bigger
You can make it Bolder I'm just going to Put it back on normal for now You can transform it to all uppercase if You wanted to do that and then if you Click out of here you can go down to Changing the color so text color it's Set to Black now but what if you wanted It to be white really easy to do You can change it to a gradient button If you wanted to do that And then you just choose two colors You know something like that but I'm Going to go back to Classic And I'm just going to choose the same Color we had already but you can choose Anything click here again play with the Color wheel go nuts have fun with it but I'll just go back to what we had for now Then you can add a border if you want You could add a solid border to it and Then you just decide how thick you want That border to be and change the color Of the Border And then we have border radius so this Is like if you can see it's really uh Slightly rounded Corners so the higher This value is the more rounded it is Until you can even get to like this pill Shape if you wanted to do that But I think I'll just put it back to Where it was it was on four earlier so We'll do that and I will get rid of the Border as well I think it looks better Without personally and one last thing
Here for buttons is a hover state so you Know how on websites when you go there And you you Mouse over it it changes Color slightly that's a good thing Because it helps people kind of realize That it's a button so just go over from Normal to hover and from there you're Just going to choose a new color for the Background So just click on color I'll choose our the same color we have But I'm going to make it slightly darker Just like that so now when you hover Over it it changes a little bit so People kind of get that it's something To click Okay so to me this is looking pretty Good now whenever you want to get a Preview of what it's going to look like Without all these boxes around Everything all you have to do is Collapse this left side by clicking this Arrow and now we get a really good Preview including the the header up here Which goes away when we're editing but So this is what it looks like looking Pretty good right so I do actually want To show you one more thing before we Move on the image scrolls with it so let Me show you how you can change that and Kind of achieve what I think is an even Cooler look so we're just going to Choose this section again as a whole and Then go down to the image and all we're
Going to do is go to attachment right Now it's set to scroll we're going to Choose fixed and now here's the effect We have which I think is pretty cool so I'm going to go with that here and now I Think it is time where we can actually Move on So we have this little title here and we Already know how to edit text we just Click on it and then edit it over here So I'm not going to bother doing that But I want to show you how to delete Something in case you ever wanted to do That so we have this little divider line And they love adding these things on These uh these templates I don't ever Love them but you might and that's fine You can keep it but I'm just going to do This so I can show you how to delete Stuff so all you need to do is right Click on anything you don't like and Then go down to delete simple as that And then if you ever wanted to bring Something back or if you ever made a Mistake this is really important too you Just want to go down here to the bottom Left corner click on this little uh it Looks like a clock icon it says history Click on that and it just allows you to Go back in time all the changes we've Made so far you can go all the way back To the very beginning If you wanted to do that so but I'm just Going to go back
And we will continue so now we've got This section where it's got three images And three basically descriptions of Services or these could be benefits Anything you wanted to be so I'm just Going to show you now how you can change Out images super easy to do I'm just Going to click on this one and then go Over under content choose image and all I've got one picked out right here I'll Select that And I'll do the same for the middle one Choose image and one more time And if you're ever stuck for images I've Got a few suggestions for you here so The first one is let's go back to choose Image they actually have a bunch of free Images that you can use from I think It's from pixels it's a free or pixabay Sorry it's a free stock media site so They do have a lot of stuff and some of It's pretty good so You just type in like the kind of image You're looking for and see what it comes Up with and since we were dealing with a More vertical image and a horizontal one In that case maybe that's what we're Looking for you can change you can Choose vertical here and it'll only show You those Then you just click on the image And then save and insert But I will just undo that for now And my other pick if you actually want
To pay for images is Adobe stock they Have a lot of great stuff not free but They have everything in the world you Could ever imagine so that's what I Recommend for paid images and again for Any image that's going to be a full Width I would again recommend about 1900 Pixels wide anything more for like this Purpose I would say could be about you Know 500 pixels wide something like that Would look pretty good And then of course we can change the Text it will whatever we want so we just Click on what we want to edit and then These are set up as kind of a twofer It's got a title and a description in One it's what we call an image box and Then obviously we can change the text we Already know how to do that we click on It we can change the title here and the Description here if we wanted to change Maybe we want to make these titles bold Let's see how we can do that let's go to Style I'm going to collapse image and Then go to content so again this is Split into title and description so all We need to do is click on typography and Then under weight I'm going to choose Bold and you can bump up the size if you Wanted to do that now let's say we Wanted to apply these changes to the Other two well we could one at a time do The same thing but that's kind of time Consuming right so what I'm going to do
Instead is I'm going to click on this Pencil I'm going to right click on it I'm going to do copy and then right here Paste style and one more time it just Paste the style you that just lets you Create a style once and then paste it Across the board pretty easy And since this is a three column layout I do want to show you your options when It comes to to columns and what you can Do with them first thing you can do is Swap the order so all you need to do is Find this little icon right here so this Is the column border so you're going to Click here and drag it to whichever Column you want it to be in and we could Do that one more time maybe we want this One over here And what if they gave you three but all You really need is two easy fix as well So all you have to do is choose the Column you want to delete right click Delete and that leaves you with two Columns now I'm going to undo that What if you need four easy as well all You're going to do is right click here And then duplicate adding a new column Is going to add a blank one but if you Want to keep all the kind of content in There what you can do I'm just going to Go ahead and delete that you can right Click duplicate then you would just Change out the image we already know how To do that and you would change the text
We already know how to do that too but I'm going to go ahead and just delete This And the last thing I want to show you Here is you can change the width of each Column they don't all have to be equal So all you have to do is put your cursor Right between them on the dotted line And just start dragging you can drag it To whichever whatever feels best to you Know if you want to go a little funkier With it something like this kind of Looks cool I think but for simplicity's Sake I'm just going to Undo that And just like you can move columns Around you can also move sections around So all you need to do to do that let's Say we wanted this quote to be above our Services all you all you got to do is Click this little uh this six dots icon Right here where you're selecting the Section drag and hold And then you're just going to scroll up To where you want it to go and then the The pink Color will show you where it's going and Then just drop it right there you can Also delete a section if you want just By clicking the X couldn't be easier all Right so I'm going to go ahead and I'm Going to undo both of those actions for Now so everything's back where it was But here's where it gets really
Interesting because we've done the best We can with this template they've given Us the problem with that is sometimes it Doesn't have all the section blocks that We need to properly showcase our product Or our service or whatever it is our Website's about so that is not a problem They've got you covered with being able To add new sections now there's a couple Ways you can do this I'm going to show You both I'm going to start off with the Easier way and that's by adding a Pre-made section block so if we want to Add a block between this section and This section we just have to go to the Bottom one and then click on the plus Icon and from here we're going to click On the starter templates icon and we're Going to switch from pages over to Blocks and these are all the different Section blocks that it comes with and Yes they look extremely boring right now But that's just because there's no Images there's no in the images that are Here are black and white right so just Think of these as layouts not full on And design choices at this point so Let's say we wanted to add in like a Benefit section here so I'm just going To go ahead and choose something that I Think works the best and by the way you Can filter through these if you go up Top there's all these different um Categories right about sections or team
Sections so there's nothing here for Benefits so either features or Services Work pretty well for that but just play Around look through all of them see what Fits your content the best layout wise So I'll click on features and I'm just Going to try to find something that I Think works the best and I think this One right here is good so we're just Going to show you a little preview then I'm going to click on import block All right and there it is so let's get To customizing this so as you can see it Comes with four features or benefits I Think three is a better number so I'm Just going to go ahead and right click Delete on this one so we're left with Only three And before we move on here I am noticing That these fonts are definitely not the Fonts that we kind of picked out when we First did this so I think I know what we Need to do here so the first thing I Want to do this is really important we Need to click on update we haven't done That yet you want to periodically make Sure you're clicking on update to save Your changes now we're going to click on This little eyeball icon where it says Preview changes So now we're out of Elementor we're just Kind of looking at it as a as a viewer Would look at it we're going to go up to Where it says customize
And we're going to choose Global and Then typography And then we're going to choose whichever One of these we like so you know we made That choice already for some reason it Didn't apply to all the the new sections We were doing so I'm just going to click On this one Montserrat Source Sans Pro I think it's really Clean but you can choose any of these or You can just mix and match whatever you Want to do so you can just choose a body Font from all of these Google fonts you Have access to and then a headings font And call it a day but I'm happy with This combination right here so I'm just Going to click on publish and I'm going To x out of here okay now if we go down We can see that our new fonts have taken Effect And everything's looking pretty good Let's talk about icons because we Haven't uh we haven't dove into those Yet so this is what we call an icon box So it has all three components of it in One widget essentially it has the icon It has the title and the description all In one place so changing the title and Description that's easy we know how to Do that already but what about the icon Itself so so before we choose a new icon Itself I want to show your options of How it looks like how you can style it So we have view we have framed which is
Selected right now which is basically The circle around it we have stacked Which is just a solid circle behind it Or default which is just the icon itself Now I tend to gravitate toward this the Most I think it's the cleanest so now It's time to actually choose our icon Itself so just click on it then go to Icon library now if you went through the Step earlier of adding uh that extra Plug-in the icon element plug again then You'll have all these plugins like this Is this is all you would have access to If you didn't do that but I actually Like these a lot better I think they Have more personality now my favorite Style personally you may disagree feel Free to go with whatever you want I like The wp page builder style and they have Quite a bit of icons here so just look Through them and decide which one is Going to kind of sell your idea the best So I'm going to go ahead and pick one Out here Find a little coconut drink here and Insert Cool so the problem with it though is It's pretty small right so how do we fix That let's go up to style and size we Can make it as big or as small as we Want to I think something like that Looks pretty nice and then of course we Can change the color I'm going to choose Our theme color we've been using
Oh and I should show you this too Whenever you choose a color let's let's Just find a random color here let's say You love this one and you know you want To reuse it throughout the site easy to Keep track of it all you need to do is Click on the little plus icon and that's Going to save it for you as a basically A Swatch so You could name it if you want to you Don't have to and I'm going to click on Create That way if we go over here to this one We can go to style and then go on custom Colors like the little Globe icon and Then it'll be right down here waiting For us but I'm actually going to put That back to the other color and now I'm Going to apply this style to the other Two doesn't mean it's going to change The icon itself it's just going to Change the style we've made so I'm going To right click on copy then right click Paste style and one more time so it has This little box around it now I think That's just some kind of a bug so let's Go ahead and change the icon out and it Should fix it so so every now and then You'll run into something like this but It's usually not permanent so I'm going To go to Icon Library down to WP page Builder just and that's really important Too make sure when you're dealing with Icons you're not choosing three from
Three different icon packs okay they Need to match or it's going to look Really Um it'll just look really disorganized And kind of unprofessional so I'm just Going to choose an icon for this one The globe and insert that okay we're Still dealing with this so what I'm Going to do is click on update and then Usually all you have to do is kind of Refresh the page so I'm just going to Click on refresh and that should fix the Problem there we go it's looking better Already so now I'm going to choose an Icon for the third column Icon Library let's choose something okay It's looking pretty good so Um one thing to show you here so if you Notice The this text kind of comes dangerously Close to this text for me I prefer more Space between columns I think it Generally looks better and it's a really Easy fix so I'm just going to choose This whole section that has the three Columns in it and go to layout And then under columns Gap I'm going to Choose wider that makes the gap between Them a bit wider so I think that for my Money looks a little bit nicer okay so Now let's say we want to add a Background image here really easy to do We're just going to click on the whole Section and then go to style and then
Under background remember we have all These choices but I'm going to go simple With an image classic choose image And I've got one right here but oh boy That is hard to read right so all we Need to do is choose a background Overlay to put on top of it to really Make the content pop so Make sure you have normal background Type classic and then I'm just going to Choose black And I think I'm going to bump up the Opacity slightly so it's just really Easy to read really easy on the eyes And another thing I'm noticing a lot of Times they put this text as kind of a Light gray That makes it a little harder to read on A background that's not completely black So what I'm going to do is I'm going to Choose this text style I'm going to Change the text color to Pure White and I'm going to do the same with this first One here as well choose the first icon Box go to style now the title is already White so we don't have to worry about That All we need to worry about is the Description color I'm going to put that As white as well now remember we don't Have to do it the same we don't have to Do it two more times we just have to Right click copy right click paste style And paste style and one thing I'm
Noticing is I I know that this image has A lot more going on in it than what We're seeing so I if I want to show more Of the image rather than crop in it on It like this just choose the section and Then go under background and what we Have here is Display size is set to default what we Always want to do almost always what we Want to do is set that to cover that's Going to make it just big enough to Cover the entire section and I think That looks a lot cooler and remember if We want that to stay in place as we Scroll we just go to attachment fixed And then we scroll let me just go ahead And collapse this so we get a nice Preview of it and that just stays in Place as we scroll and I think that Looks pretty cool so I actually want to Show you some inspiration here so we're On the Apple website so let's say you Wanted to make a section like this where You've got kind of a black uh column Over here and a white column over here With text on it so let's take this as Our overall inspiration and create Something that feels kind of like this So we're just going to go back to our Page let's say we want to put it right Between these two sections we're going To click on the plus icon right here And rather than clicking the starter Templates we're just going to click on
The plus sign here so this is going to Allow you to build something completely From scratch starting with how many Columns you're going to have now don't Worry you can always change it later I've shown you how you can delete a Column or add a column so but for now we Need two columns so I'm just going to Click that and since this is pretty much Full width it goes all the way across so I've selected the section itself now We're going to go up to layout it's set To be content width boxed what that Means is you can see this section like There's a bot all the content is kind of Boxed inside it doesn't go all the way To the edge same with this it doesn't go All the way to the edge but we do want This to go all the way from edge to edge So enter content width we choose full Width and each of these has basically a Headline and a little description text And then you know a little button or a Link underneath it so I'm going to go Ahead and just start by dragging those Elements those raw elements into each Column so go up to the elements like Icon I'm going to take a heading And put it there and then back to the Elements then a text editor underneath It And then A button
And then I could do the same thing over Again or what if I just did this I'm Just going to right click Duplicate and then I'm going to go ahead And right click Delete on that one so now we've done it Twice and it it took a lot less time Okay so now I'm going to edit this text I'm just going to make this our light Background section And I might make this text a little Shorter Just about that long And then this will be our our dark Background so I'm going to click on here Go to style background type for now Let's just set this to be black just a Black background we'll add an image in Later but I'll click our title And I'll just call this dark background There we go And then I'm going to go to style and I'm going to change the text color to White And I will do the same thing with this First of all I'll make it I'll make the Text shorter just to kind of more Closely match what we have here it's a Really short text and then I'll go to Style and I'll also make that white Now if you see here what do we have we Have text it's it's a lot smaller than What we have and it's all centered so Let's go ahead and do that
I'm going to click on this text and I'm Going to start by centering it And I'll do the same with the The smaller text Then I'm going to click here and I will Go to style and typography size I'll Make it A little bit more like that And now I think this text is a little Too far away from this text so let me Show you how to fix that this will Happen from time to time all we need to Do is choose either one of them I'm just Going to choose the title and I'm going To go up to Advanced don't let that Scare you it's really not that it's not That hard but we have to change the Margin between this and this margin is Simply the space outside of a widget so If we make it less this will come up and Get closer to it so the first thing I Want to do let me just show you what Will happen if I do this all the way Around it's going to change all the Different values so I'm going to unlink The values so I'm just dealing with the Bottom because we just need to change The margin on the bottom right to bump It up so I'm just going to go into the Negatives here totally fine to do that To where it looks pretty good So I hope you're seeing like how much Fine control you have over all this Stuff so now that we've got that about
How we want it I'm going to go to the Button click that first of all I'm going To make it centered and since we're Dealing here with a button that doesn't Really look like a button it's just more Like text right so I'm going to show you How you can do that here so First of all you would change the text Here you would change the link here of Wherever page that's going to go to but Then let's go up to style And under background type we'll click Right here on color And all we're going to do is we're going To take this right down here this slider This shows how opaque or transparent the Background color is so we're just going To bring it all the way down to Transparent And we'll change the text color to our Green that we've been using and then if We go to content we can because I think What they've got here is they have a Little kind of Chevron arrows next to it So to uh to incorporate that we're just Going to go to content icon icon Library And I will just type in Chevron again and I'll just choose this One insert and then I'll place it after But now it's a little too far away again Right so we know how to do this now we Just click on either this element or That one Go up to Advanced
I'm going to unlink the values and since We need less margin on top this time I'm Just going to go to the the top one and I'm going to start pulling it down to Where it's a good distance away Like I feel like that looks pretty nice To my eye And since we've done so much uh Fine-tuning here I'm actually not going To do it all over here I'm just what I'm Going to do is I'm just going to do a Mulligan here I'm going to right click Delete and then right click duplicate I think at this point we can just put in Our our image background here that we're Going to use so I'm going to choose it Right here I'm going to click on the Column and then style so by the way yes You can do this too up to now we've only Been putting images as backgrounds of Whole sections but we can put an image In the background of a column as well so Just click on the column Style Background type classic and then go down To choose image And I've got this one here that's a nice Dark image Now obviously this isn't looking great Yet because it's not all sized correctly But I'm going to put the image in over Here as well I found a lighter one Style background type classic choose Image And I've got a lighter one here I'm
Going to select that So obviously this is really short right As opposed to what we have here which Has plenty of space on it so we're going To fix that really quick all we need to Do is choose let's go and choose this First column And we're going to go to Advanced and Now we're going to be dealing with what We call padding so is all the space on The outside of a widget or a section or A column but padding is the space you Get inside of it so we're just going to Start bumping up the padding all the way Around first just to see kind of how it Looks Just to kind of make it even and I feel Like something like this looks good size Wise but obviously it doesn't look great Still so the first thing we need to do Is change the sizing of the image Remember what we did before so we'll go To style and it's because this is what The image looks like it's like a boat so We're only seeing a tiny little piece of It so what we need to do is go to Display size remember cover is what we Always want to choose And that already looks a lot better but I am noticing the text is still really Hard to read right so What I think I want to do is actually Let's go back in our example this text Is more is up higher on on the section
It's not quite in the middle so what we Need to do is do a little bit more fine Tuning so we'll choose the column Go back up to Advanced and what we're Going to do is we're going to compensate So we don't want the padding to be the Same on the top and the bottom we want Less padding on top more padding on Bottom so let's unlink the values so Let's play around with this real quick Let's let's just kind of put cut this in Half roughly in half to about 70 or Maybe even like 60. and then maybe make This about 200. so do you see what Happened there the padding is much less On top and much bigger on bottom kind of Pushing the text up And then if we change this to about 220. The spacing of this feels pretty good so Again it's a lot less padding it's only 60 pixels of padding up top but it's 220 On the bottom effectively pushing all This content up to the top but it's Still a little hard to read right Because of the background image so I'm Going to show you something and again Remember this this is meant to be our Light section so let's go ahead and fix That a bit let's choose the column and We'll go to style And under background we have background Overlay so rather than choosing black This time we could choose White But to me I never love a white overlay I
Feel like it just washes an image out Unless that's a style Choice you're Going for what I think I'm going to do Here is get a little fancy just to show You what you can do I'm going to choose A gradient instead it always defaults to This magenta color so We've got white on top if it's not white For you make sure it is white make sure That's selected then under pink what I'm Going to do is I'm going to choose white Again but I'm going to take this this Opacity bar so that's white that's all The way Um solid I'm going to bring it all the Way transparent so what we have now is It's it's white the transitions to Transparent okay it's still a little Hard to like see that it's going on Because the overall background overlay Is not super dialed up yet so we fix That by going down to opacity and let's Just play around and see what looks good So if we bring it all the way up that Gets very light on top and if we bring It all the way down it goes away Completely so you want to find where it Reads the best in this case I think it Might be dialed all the way up Okay so now let's move on to our other Columns so we're going to choose that And the first thing I want to do is Um talk about the image sizing that we Just fixed so we're just going to go
Down to Display size and cover so you can really See what we've got going there And I think what I want to do here is Rather than having the text okay so like Let's go back to our example here I think I want to do something more like This to where it's this one's up here And this one's down here I think that That way Um we can kind of get this text where we Want it in a better Zone down here where It's not competing with so much visual Noise up top So all we really need to do to achieve That first of all let's go ahead and Change the color it's black it's hard to See so let's make that white and we'll Make this white as well Now what we want to do let's go ahead Over to our other column Advanced and Just take note of these values so we Have 60 on top we have 130 on the left 130 on right 220 on the bottom so Maybe just want to write that down so I'm going to go over here Advanced and I'm just going to do kind Of the opposite so I'm going to unlink These values on top I will do 220. Right I'll do 130. left I'll do 130 and On bottom I'll do 60. we can even push That a little bit further like maybe I Want it to go a little further
Underneath here so let's go ahead and Just start Pulling that Down and then Compensating by making that a little Smaller Something like that thing looks really Nice I think so it's just all a matter Of playing around with stuff and then I Think it's still a little hard to read So what I want to do here is do a simple Go to style a simple background overlay Of just black We could get fancy with the gradient Again but I think it's fine I don't Think we need it here and I'm just going To dial this back until it's bright Enough for the image to pop but also Dark enough for the text to pop and if We zoom out here I think this is looking Pretty nice Okay I think we're ready to move on Let's go ahead and click on update good Practice just always do that make sure We're saving our work okay so let's move On down Um let's take a look at this section now So let's say you have use for it but Maybe you don't need an image here so Let's go ahead I'm going to right click And delete that image and now is a good Time to kind of go over all of these Widgets with you so there are a ton of Them there's a lot of basic ones that
You get for free with Elementor the free Version there's also a lot of pro ones a Little more little fancier and you only Get those with Elementor Pro which you Have to pay for so for now we're kind of Just stuck with the basic one so again You can drag over a heading you can drag Over a Google map if you wanted to do That and then you just put in your Address or your business name or Whatever over here and it coordinates With Google Maps so if you just type in A business name So I didn't even type in the name of the Restaurant right but it's still got it And it's still a little map pin here so It works pretty well So I'm gonna get rid of that just right Click delete and we can drag over an Icon Then we now know how to edit those right So I'm going to right click delete there Now I'm going to show you something Really cool so you can also add in a Video so I'm just going to drag that Widget right under here and also delete This text that we added we don't need That and the way this works is super Easy just click on the video then you're Going to choose if it's hosted on YouTube Vimeo Self-hosted which I never recommend Doing that means you're uploading a Video file to your own website I don't
Recommend doing that it's going to slow It all down I always recommend YouTube For this then you would just find your Video that's on YouTube grab the little URL of it the link for it and just pop It right in here And then I like unchecking this option All the rest are hidden by default I Like to hide uh player controls as well Makes it a little cleaner looking But if you notice there's a lot of dead Space over here right so let's go ahead And try to fix that all we need to do Again is drag remember I showed you how You can uh change the width of columns Just go right between them and then drag It right on over and it looks like There's quite a bit of padding here That's why there's still a lot of space Here so we've already dealt with padding As well so we're just going to click on This column go up to Advanced and here's Where you can see the problem on the Right it has 250 pixels of padding which Is probably Overkill right so let's just Maybe play around with that maybe say a Hundred I think that looks a lot better Already and now what if we wanted this To not be sitting up so high what if we Wanted it to be more centered well easy To do all we do is click on the column Itself and under layout vertical align We just go to Middle And now if we take a look it's just nice
And centered looking great and if we go Down here let's say this section we just Wanted to change out the background Image we already know how to do that Click on the section And then Style And let's choose something Like this Select that and let's go ahead and do Our treatment just just so we can really Hit it home attachment fixed and display Size is already set to cover so we're Good to go there And then we probably just want to make Our text a little more readable so let's Change it to from Black To White And the same with this Black to white And then it probably just needs a Background overlay over it as well to be Really red so under background overlay Let's choose a simple black one And let's maybe make it a little less Opaque we do all we need is just we just Need to be able to read the text And I think that looks pretty nice So let's click on update one more time Now we're not quite done with this page Because there's a really important step That we still need to do which is this Is only Everything we've done so far is for Desktop right but half of people coming
To your website are very likely coming There on a mobile device but Elementor Makes it really easy on you especially With all these pre-made sections they're Pretty well thought out in advance to be Mobile friendly but we just want to do a Reality check at this point and make Sure that actually does look good and I'll show you how to make minor tweaks So um so it does look as good as Possible So the thing we need to do is go down Here to the bottom left and click on Responsive mode And then up top it lets you choose your Device and here's what's what it's going To look like on tablet which looks Pretty good and then you would just want To go through and make sure and then We're gonna we're gonna concentrate Mostly on mobile because that is really Where most people are searching tablets Are they make up a small percentage but Mobile has to be right so let's go and See what needs fixing for sure this text Is too big so let me just show you what We can do here I'm going to start with This text because I think that might be Big as well I'm just going to click on The text go to style typography now we Already know how to change the size but One thing to really You know hit home with you on is Whenever you see this icon here that
Means we're only changing this on that Device on mobile that means that what We've done in desktop remains unchanged So if we did this and went to desktop it Still looks exactly like how we left it So whenever you see that you know you're Just changing it for that specific Device which is pretty cool now we're Going to go to this line and we're going To do the same so typography size and Again we're seeing the little like the Little mobile icon so we know we're good To go and we're just going to make it About the right size for our eyeballs And we're just going to eyeball it to See what looks best Now I will say at this point this text Is a little close to this text right so What do we do we go to Advanced we go to Margin and so what we have is a negative 40 margin on top we don't want that so We're going to make that a little taller So there's more space between and I'm Actually going to add a little space Underneath too because I feel like That's a little tight so let's just go Ahead and bump that up slightly as well And I think that looks good now going Down all we're doing is we're looking For stuff that looks off I think so far All this looks pretty good All our icons are looking good okay so Now we get to a section where I think it Doesn't look so good it's just the
Section's too big everything's pressed Way too far in the middle so what we Want to do is choose this column and I'm Actually just gonna I'm gonna link all These values together I'm just going to Kind of go back to square one and see What looks good so let's just start Oh wait a minute I do want to make sure they're all Linked together and I'm just going to Start playing around with the padding to See What looks good more or less that looks Pretty good and so we've got 42 all Around I'm just going to do the same Thing here going forward so I'm just Going to click on this column Advanced Padding 42 all the way around okay moving on Down Okay so this is interesting this video Has been grayed out which basically Means it is not going to be visible on Mobile so if we collapse this we'll see An actual preview of what it's really Going to look like This just shows up like this here while We're editing if we wanted that to show On desktop all we need to do is choose The column up to Advanced And then under responsive It's been this has already been selected To be show be hidden on desktop we want To click on show
Okay we're scrolling down from here this Is the last we left it Okay looking to see everything else all Looks pretty good and now we'll click on Update And then you would probably want to do The same thing on tablet just to make Sure that everything looks good going All the way down doing all the little Tweaks and fixes that we talked about Okay so now I think we're ready to Actually move on to our next page so What we're going to have to do to get Around from page to page is we're just Going to go down and click on this Little eyeball icon right down here this Is going to get us back to where we can See our main menu from here all we have To do is click on the next page which in This case is about And then go up to edit with Elementor And editing this page is going to work Exactly like editing the home page so The first thing we might want to do is Change this header so you could get rid Of it all together if you didn't if you Didn't want to have that I will undo that though you could change The height of it maybe it's taking up Too much space which I personally think It does I don't think it needs to be That tall so what I'm going to do is Just click on the section And then under layout
Here's where you control the height so You just kind of drag it to wherever you Want it to be like I think something Like this feels a little more Appropriate it doesn't make people Scroll down quite so far and then of Course you know how to change the text You just click on it and then change it Right over here And we know how to change the background Image too we're just going to click on The section go to style And then choose image And I'll just go with this one again And make sure to set to cover like we Always want for these full width images But what if we don't like the area of The photo that this is showing well easy To change it remember all we have to do Is go to position we can play around With these Pre-defined positions or again we can Just do custom and then we can start Dragging it Um I would do the y-axis because remember That controls up and down so we can just Drag it to wherever looks good to us But let's change this image out for Something that's inspired by uh the Farmer's dog website See how they have these kind of counters It's great for showing statistics or That kind of thing so what if on your
About us page you kind of wanted to have The same thing where you're talking About how many clients you've helped how Much money you've saved and that kind of Stuff so the first thing we need to do Is right click on the image and delete And then to replace it we're just going To go up to the elements icon remember To find all of our widgets here and We're going to look for What's called The counter so I think we have to go Past all these Pro features and we have More General features here so I'm just Going to click hold and drag Go back a bit now notice how this has Four different statistics or four Different numbers showing up here so in Order to do that we need four different Columns now but we only this is only a One column section how do you get four Columns into here it's actually really Easy you're just going to go and find This first widget which is called Intersection you're just going to click Hold and drag right to where you want it This lets us put multiple columns inside Of one column So the first thing I'm going to do is I'm going to right click I'm actually Going to delete this one you'll see why In a second and then I'm going to go and I'm going to find a new widget called You have to scroll past all the pro Widgets there's all these down here
Underneath as well Under General we're going to be looking For the counter widget so I'm going to Drag that right into our intersection Make sure it's going into the Intersection And the first thing I want to do is Actually style it so we're going to go To style and text color We can make it any color we want let's Go ahead and stick with our kind of Green color we've been using And then typography we can choose Whatever we want here I'll do DM Sans to kind of go with what We've already been using And then we can go under title and we Can actually change the that for where It says cool number we can change the Style of that as well so If we wanted to change the text to the The green color for that we can do that Too And typography I'm going to choose the Same fonts which is DM Sans But I do think there's a little bit too Much space between the 100 and where it Says cool number so the way to fix that It's a little hidden so you have to go To typography again And then under line height so we're We're dealing with the number here not The description so we're going to go to Line height and this is where we can
Give some fine control over that spacing And I think that looks a lot better so Now what we're going to do is we're just Going to duplicate this three times so Right click duplicate Right click duplicate and one more time Cool so that gives us all that gives us All four of them now we just have to go Through one by one go to content and This is where we can change the starting Number the ending number So let's say you saved your clients I Don't know 44 million dollars over the Years so the first thing you're going to Do is I'm going to type in 44 where we Want the N number to be and the number Prefix this is what's going to come Before the 44. so this is where I would Type in the dollar sign And then number suffix this is where I Would type in you know the M for a Million and then down here is where I Would type in and this is where I would Type in something like Client savings Pretty easy right and of course you Could change all this text you could get Rid of this whole thing if you didn't Want to use it replace it with something Else so let's say we have no use to have A testimonial right here well we can Definitely replace it with something Different so all we need to do Is hit the little X to delete it and now
I'm going to add a new section let's say We want to have Team bios like you want To be able to feature everybody who Works in your business all we need to do Is click on the starter templates icon And go up to blocks and now we're going To filter this by team in this case you Can filter it again whatever you need Right if you need a testimonial if you Need to call to action section Services FAQs you name it it's there but anyway We're doing team here so then you would Just find the overall layout that you Think works best for you remember these Are all these all look very boring right Now because they're all black and white But again you customize them with all Your own stuff so I'll just take a look Around here I think this one's probably Going to be our best bet so I'll click On that and then on import block cool And then you can obviously change this Maybe we just wanted to say our team Instead And maybe we don't need this I'll right Click delete and then you just go one by One and change the image you just click On each one and to change the images you Just click on each column go to style Choose image and let's see we've got Down here let's grab this guy Obviously these would be your real team Members not just not random stock images But and you change the name just right
Here like we've always been doing job Title same thing right over here and I'll just take care of the other two Real quick And just speed through this please And let's say we wanted this section let Me just kind of take a peek at what We've got what if we wanted this section To kind of have a different uh Background to it so all we need to do is Click on the section Style background type we'll just stick With classic solid and then go to our Colors that we already have now let's Choose this one just nice and subtle And then if we wanted this to be Centered we would just click on the text Under content alignment center Super easy and then of course you'd want To go ahead let's go ahead and click on Update before we move on And then you want to go back to Responsive mode remember you always want To check it out and see make sure it Looks great on mobile as well so I'm Just going to go over to the mobile icon And we'll go to the top and just see how It all looks I see no issues so far all looking good The only thing is maybe this is Too Tall On mobile right what if we wanted to Make it a little smaller we would just Click on the whole section Layout
And then see we see the little uh mobile Icon so we know we're making a change That just impacts the mobile view so we Can kind of make it Just a little bit smaller something like That maybe And we're good to go so I'm going to go Ahead and click out of this and click on Update one more time And now we're ready to move on to the Next page so let's go ahead and click Again on preview changes And now let's go to services And we'll click on edit with Elementor But what if you have no need for a Services page or any of the pages that It comes with out of the box You don't really need that page you need Something different well it's really Easy to just change the name of a page And change the content on it And I'll show you exactly how to do it So the first thing is obviously just to Change the title of the page so click on It and maybe we'll call this Testimonials And now we've got this header section That looks different from what we have On our about us page right so the Easiest thing to do I mean you could Make the same changes but then you run The risk of it being slightly Inconsistent if you're just kind of Eyeballing it so what I think you should
Do is just go back to the first page Where you created whatever your header Is going to look like in this case it's Our about us page I'm just going to go Up to the top top section right click Copy And then go back to testimonials and Then right up here right click paste Style so that way it's nice and Consistent across the board okay so Obviously this stuff doesn't really Apply to our new testimonials page right So what the first thing we're going to Do is we're going to just zero this out We're going to get rid of everything so I'm going to click on the X's just to Get rid of all of these little sections One by one and now we're just going to Add our testimonials so we could make it From scratch by clicking on the plus Icon choosing our columns but I tend to Prefer when I can to use a block for the Simple reason that the blocks are Already pre-thought out in terms of Being mobile responsive so whenever you Create a section from scratch you're Going to have more work to do to make it Actually look good on mobile but these Blocks when you click on the starter Templates icon and go to blocks these Are already pre thought out they're Already pre-responsive So I'm just going to go up and I'm going To go to testimonials to try to find the
Best layout for us here and honestly There's no best layout I'm just going to Choose something that I think works for This but again it's up to you it's up to Whatever style you're trying to go for So they've got a ton of different styles Here I'm just going to make it easy and Choose this one it's nice and simple Just click on it and then import block All right looks pretty good and then You're just going to go one by one just Click on it And this is set up it's called an image Box so it's again it's another one of Those compound widgets where you have The image the title and the description All in one spot So obviously you just change the the Testimonial text right in here You change the name of the person here You could even put in you know the city They live in Order job description if you are more B2B that might be important but for now I'm just gonna I'm just going to choose The image Let's choose this one right here And one more time And then um just speed this up I'm just Going to do all these just so it looks Better And if you want to change the the font Here I can tell this doesn't really Follow our font format so I'm just going
To choose it go to style And I'm going to collapse image and go To content And then under title we have to do this Twice we have to do it for the the title Here and if you do it for the Description here so Go to typography I'm going to choose our DM Sans And I'll do the same for the description And if we want to tighten up the spacing A little bit all we need to do is go Under title spacing and I'm just going To drag it about like that And then I will right click copy right Click paste style all the way across so That that change has affected across all Of the testimonials Now what if you had more testimonials in This well you could add a whole new Section but I don't think you need to do That all I'm going to do is I'm going to Choose this last one here I'm going to Right click duplicate And I'll just do it as many times as I Need to fill out You know all the testimonials I have so And then from here obviously we change The text you would change the images and You're good to go I'm going to click on update And over unresponsive we're just going To do a quick reality check on mobile Make sure it looks good
I think it's all looking pretty nice Okay so I'm going to exit out of here And there's one more step we need to Take to make this actually reflect Because let me show you something so if We collapse this and we can see our menu Again We change this to testimonials but it Still says Services up here how do we Get that to reflect in our page Structure and our menu so it's also easy To do we're just going to actually we're Going to go back out to WordPress for This one so I'm going to click these Three this like hamburger menu right Here And then exit And I'm just going to choose WP Dashboard here and click apply Ah good catch it's telling me that we Did not save our work so I'm glad it Told me that so stand page I'm going to Click on update one more time Let's try that again so I'm going to Click on the the three lines here and Then exit Okay so we're back in the WordPress Dashboard How do we fix that menu all we need to Do is go down to appearance Menus And what we've got here we've only got One menu it's got It's the main menu Here are all the different uh pages that
Are on it first of all I like to get rid Of the home page I don't think it needs To be in the menu because generally Speaking the logo over here that's up Here somewhere that will be the link to Your home page But it's up to you you can leave it if You want I'm just going to go ahead and expand This and I'm going to click on remove Now Services is the one we want to Change right so I'm going to click on That So I have to expand it here and I'm just Going to change the navigation label Okay so we've left elementor's dashboard And now we're inside of the WordPress Dashboard so all we need to do to change That uh that menu is go over to Pages And we're going to find the one in Question so it's Services remember we Changed it to testimonials all we need To do is click on quick edit And we're going to change this to Testimonials And we're also going to change the slug To testimonials The slug is really just what hap like When you think of your website for me it Would be like it would be Wes Mcdowell.com Testimonials that's what the slug is if We change this to about us it would be
Westmcdonald.com about us so I'm going To click on update and that should have Taken effect on our menu now so let's Just go to home and we'll click on view Yep so we have Home about testimonials and contacts so That change has been made and if we Click on it you can see it's going to Take us right to our testimonials page So now I've shown you how to change the Content of a page to change one page to A different type of page what if now you Need to actually add a brand new page From scratch And I'll show you exactly how to do it So let's head up back up here to where It says what's the name of your WordPress website and then dashboard The first thing we're going to do is we Have to install a plug-in so we're going To go down to plugins add new And I'm going to search for it's called Duplicate this And I think it's this one right here Actually duplicate page it's it's the One I always use it's got the best Reviews And this just allows you to duplicate Any page any blog post and then you can Edit it from there so I'll click on Install now Then on activate Then we'll go back over to pages So let's say now you need an FAQs page
Right so the first thing you're going to Do is just decide like I like to just Kind of choose the simplest page that we Have and I think right now it might be The testimonials page just take a simple Page and click on duplicate this Then it's see it's got a copy of it Right here but it's a draft so let's Just click on quick edit We'll change the title of it to FAQs And the slug will automatically fill Into that later And then to make sure it's live and not A draft which is kind of like where it's Hidden from the world just go down to Published And then update Then you just click on edit with Elementor you would edit it the exact Same way we've done for all of the other Pages you'd find the right block you'd Customize it you know how to do it by Now so the last thing I want to show you Here is how to actually get that new Page into your menu Because if you go to home I'm just going To click on view I'm just open it in a New tab Because you can see here that new page The FAQs page it's not in our menu yet We have to actually put it there it's Easy to do though so all we need to do Is go over to appearance menus And we've only got one it's our main
Menu as of now it has home about Testimonials and contact so what we need To do is go over here under pages so This is showing us all of our most Recent pages that are created or you can Do view all so I'm going to click on the I'm just going to select this and then Add it to menu Easy as that and one other cool thing About menus you can do is you know how On some websites they actually have kind Of a drop down menu so this is my Website and then when you hover over Free starter kits we've got all these Little drop down items well the way you Achieve that in here is like let's say You wanted to have testimonials and FAQs Under about like nested under that so When you hover over about testimonials And FAQs appear as uh drop down items All you need to do is drag them and pull Them in to the right and that just Automatically nests them like that so That's a pretty cool thing I think but I'm just going to go ahead and put them Back where they were And then important last step save menu Now when you go back to your website and You look at the menu look what we got Here we got FAQs And speaking about our menu and our Header overall we haven't done anything With it up till now but it's time now to Style it including adding our logo we
Can do anything we want in terms of Styling this and the button as well so The way we do this is a little different Just make sure you're looking at your Website and you're signed in like right Now I'm just looking at the home page Not editing it in Elementor From here we're going to go up to here Where it says customize and we're going To go down to header Builder So if you look down here you can kind of See what's going on here so this lets You build like a three layer header I Don't recommend that I think it's too Busy I don't and I don't think it's Needed so what's going on here is right In the middle layer we have the site Title and Logo right here we have Primary menu here and the button here so It's set up in three columns what we Could do is we could take the primary Menu and drag it to the middle and That'll make it be more centered which I Think looks a little nicer and I highly Recommend keeping the button I think That's a great thing to have so it's Always right there and I I recommend Keeping things pretty much in place Don't get too creative with putting your Logo over here and your button over here People just aren't used to it and they Will not Um be able to navigate your site as Easily if you do that so now it's saying
The header on this page is set from the Transparent header so we actually need To click right here on customized Transparent header okay so first thing We want to do is change up the logo so I've got one right here I'm just going To click on change image And I've got my logo file right here Just make sure it's like legible on top Of whatever image you're choosing this One's just pure white I think it looks Pretty good that way and then to change The size of it because it's really small Right now all we got to do is go down to Logo with and we can just drag it to Whatever looks good I'm happy with that now what about our Menu so I'm just going to click on that And then we can change things like the Width of it oh maybe not Should I just ignore that And we're just going to go to design and I'm going to ignore most of this stuff Because a lot of this has to do with the Sub menus remember like a drop down menu Which we don't really have but if you Have that feel free to play around with These to get them to looking the way You'd like and here's where we can set The menu color so I'm just going to Choose on white And then we've got our Green color for hover State and the same Green color for active state is what I'm
Going to do And we can't really preview it here but You can just imagine it's going to show Up white then as we hover over it'll Turn green and then whatever page we're On that particular link will also be Green and we can also change the font of Course right here I will probably type in in this case It's actually inheriting the Styles we Already selected so I'm happy with that If you weren't you could just choose Whichever font you wanted but now let's Talk about our button generally speaking I recommend it matching your normal call To action button right here so so we Wouldn't click on the button we would Just click right down here where it says Button this is where we can edit it so Text this is this is just what it's Going to say so let's have it mimic what We've already got With schedule now and the link this is Where you're going to put the actual Link of where it's going so if you want If it's going to be a a tap to call call To action then this is exactly how you Would format it Tel colon then the phone Number Problem is that doesn't really work on Desktop so you have to know that most of Your people are coming from mobile if You want to have this work so I'm just Going to do slash contact then whenever
Somebody presses that button it's just Going to go to you know Website.com slash contact but now let's Talk about the design of it because it Definitely does not look like what we Currently have so I'm going to go to Design the text color is white that can Stay but the background color let's go Ahead and choose our normal green color And then let's choose this slightly Darker green color for the hover state So that when you hover over it it Changes ever so slightly then we can do Things like we can get rid of the Border I mean you could definitely have as much Of a border as you want in our case We're just going to get rid of it to Match what we've got and then border Radius if I remember right this is Already a four Um four pixel border radius so I'm just Going to keep that here as well and Remember the Border radius just refers To how round the corners are so if we Made this you know 25 So if we were to link this together and Make that 25 for instance it would be More like this pill shape but let's just Go back to four but now it's time for The Moment of Truth we actually have to See if this is going to look good on Mobile too right so the way we do it is We just go down to the bottom and we're Going to click on this little mobile
Icon and see what we've got all right Looks pretty good to me so we've got the Logo here we've got a little hidden menu So we click on that and then we have our Drop down I think it all looks pretty Nice So I'm just going to exit out of here Actually make sure you've click on Publish already I have but you're going To lose your changes if you don't do That so click publish then click X And now let's go back to Pages there's One more thing we haven't done yet and That is our contact page so I'm going to Click on view Okay so right down here we have a Contact form now right now it doesn't Actually work it doesn't do anything how Do we get it to connect so where when Someone fills it out you get an email Notification for it well This next video is going to show you Exactly how to do it we'll pick up just Where we left off so click on this video And we'll take care of this last step of Getting your contact form
Tips That New And Old Internet Marketers Can Use
Internet marketing can be pretty exciting if you know what you can expect from it while promoting the products and services of your business. It can be a winning strategy for you if you can do it successfully. To ensure that this happens, try looking at the tips that are listed below.
When email marketing, test both HTML and text versions of your email message. While you might think that the graphics possible in HTML would offer higher open rates, oftentimes it is the exact opposite. Text-based emails can be a surprisingly strong tool in your arsenal. They are less likely to be marked as spam and they typically feel more authentic to the reader.
Use a link validator tool on your website to check for broken links. These links should be fixed immediately. Broken links keep the person that is trying to read your website from finding the information that they want. A search engine will also downgrade your site if it has a lot of broken links.
Use press releases to get traffic to your site. Submit to public release directories and wait for people to find you. The great thing about press releases is that you may even be contacted by reporters who want to talk to you about your product or service and print it in their publication.
Most search engines show brief descriptions of your business, product or service on the search results page. If your description stands out from the rest, you optimize your chances of driving traffic to your website. Instead of using the manufacturer’s bland description, write your own unique content using keywords that potential buyers are likely use in their search engine description. Don’t wildly embellish the usefulness of the product or service, but be creative and resourceful in your word choice.
Iinternet marketing really is exciting, isn’t it? There is so much to do and expect from working to promote your own online business. That’s why you need to stay with it and keep going so that you can see results. Luckily, these tips contained advice that can be beneficial to you.
