In this easy-to-follow Elementor WordPress tutorial, I’ll be teaching you how to use Elementor, a popular WordPress theme and plugin development tool to easily create your own beautiful WordPress website. We’ll start by creating a simple homepage, and then gradually build on this example until we have a fully functional website. By the end of this tutorial, you’ll have the skills you need to develop your own websites with Elementor!
😎 You’ll need to start with webhosting and a domain name. Grab my exclusive affiliate discount and save 70% off normal hosting price 👉
🎬 Want a plan for what to put on your website to attract new clients automatically? Register for the FREE On-demand video masterclass training, “The Automated Clients-on-Demand Website Blueprint for Service Businesses” Just go to:
Timestamps:
Intro & Overview 00:00
Webhosting and Domain Name 00:40
Basic WordPress Setup
Wordpress Installation 03:36
Wordpress Dashboard Overview 04:15
Wordpress User Setup 05:25
Install Elementor
Install Plugin 05:47
Elementor Website Templates 06:45
Building Website
Choosing Website Template 07:26
Elementor Dashboard 09:17
Building Homepage 11:55
Making Homepage Responsive 46:40
Customize About Page 53:13
Making About Page Responsive 01:11:20
Customize Services Page 01:13:34
Making Services Page Responsive 01:17:40
Customize Gallery Page 01:18:14
Customize Pricing Page 01:20:26
Making Pricing Page Responsive 01:27:09
Customize Contact Page 01:28:44
Making Contact Page Responsive 01:35:08
Creating a New Page 01:35:27
FREE On-Demand Video Masterclass Training 01:36:45
By the end of this video you're gonna Have the knowledge and the confidence to Create a website yourself with no prior Knowledge design or marketing experience Needed and you're going to get my Designer Pro tips along the way to make Sure it looks good we'll be using the Free version of Elementor the world's Best Drag and Drop page building program To create it so that you can easily Control it yourself it could look like This this this this Or any of these because what you'll Learn in this video is that versatile so Yeah you could have a website like this This or this live and online today and I'm not going to waste any time here so To get started we'll just need to get Your domain name if you don't already Have one and a simple hosting plan so Your domain name is just the address of Your website like any of these and your Hosting is pretty much just a dedicated Computer that's always online that Houses all of your data Pages images and Content so there's no getting around Hosting you need it to get a website up But I've worked at a special pricing Deal with my favorite web hosting Company Bluehost to save you about 70 so Just click the link down in the Description below or go to Westmcdowell.com Hosting to get that deal okay so if you
Followed that link you should end up on This landing page and if it looks like This that means you're getting the best Deal so as you can see here it's Normally 9.99 but I've worked out Special pricing for you guys for 295 a Month so I'm just going to click on get Started now And from here you can select your plan They've given you three options here but I'm going to go ahead and tell you basic Is just fine for your purposes here Unless you have a crazy big website That's going to take up more than 10 Gigs of space you get all the good stuff Here you get unlimited bandwidth a free Uh security certificate which is really Critical and pretty much everything you Need so I'm just going to click on Select and now is where you make that Choice of if you want to use a domain You already own maybe you already have a Website and this is more of a redesign In which case you would type your domain Name here But I'm going to assume you probably are Starting for the first time so so here's Where you just type in the domain name That you would want generally it's your Business name some variation on that Something like that and then you can Choose.com or any of these other Extensions I always recommend.com just Because that's what people are most
Familiar with so I would always try that First and then you click on next and now We get to see if it's actually available Or not Okay so good news that one is available If it's not it'll come up red and you'll Just have to kind of go back and try Again you can do a variation on your Name or you could use uh you know.net or Something like that and now you're just Going to fill in all of this information Here And you can choose your account plan and I would do the 12 month because that Gives you the 295 a month if you do 36 Months for some reason it goes up so That makes it easy now we get down to Package extras so you can pretty much Get rid of almost all of these I will Say I recommend you get this one domain Privacy and protection simply because if You don't you're likely to get spam Calls and spam emails for like the next Few months so I always like to check That but that's completely up to you Maybe you're okay with getting those Calls and then you're just going to put In your credit card information and then Go down and click on these options and Then finally on submit Okay so if all went well you'll get to This screen where we'll just click on Create your password And I'll just do that right here
And we'll click this little check box And click on create account all right so We've got our password now just click on Create your website and I'm going to Click on skip this step and here you'll Choose whatever uh purpose your business Your website is going to fulfill and I'm Going to click on skip this step and Here we'll just type in the name of our Business And a tagline if you want one it's not Really necessary and then continue so Now it's asking us to pick a theme we're Going to skip this because we're Actually going to do it a different way Using uh my favorite plugins we're going To go and click on skip this step so now We're actually in the dashboard area for Bluehost but to get building we need to Be in the dashboard for WordPress so Right up here there's this button I'm Going to click on log into WordPress Okay so I don't know if you've ever used WordPress before but this is the Dashboard this is what you see when you First log into it and I'm going to give You a really quick crash course of where Things are located so first thing you'll See is it says site status coming soon That means that there's it's whatever You build here is not going to be live And people won't be able to see it so It's your choice if you want to take This step later or right now I'm just
Going to show you really quickly how to Get it on launched so that it's live so If you come up here to where it says Bluehost at the top and then go down to Launch with confidence And then just click on launch your site That means whatever we do today whatever We build will be live and people can see It right away so if you just click over On dashboard this is what the the main Default view is going to look like as Soon as you log into WordPress and over Here we've got a few things so we've got Posts this is where you would add a new Blog posts you want to do and media this Is where all of your photos and files Would live and then Pages this is where Your pages go so any if you have a home Page about us page all that good stuff It comes pre-done with a privacy policy And a sample page and then appearance We'll get to that later plugins we'll Get to that in a minute that's really Important and users this is where you Can set your own username and your Password and all that good stuff you can Actually give someone else access to it As well by simply clicking on add new And going through those steps highly Recommend doing that if you have if you Work with anybody else rather than Giving them your username and password It's nice and clean just to have Everyone have their own login and that's
Pretty much all you need to know for Right right now so let's go ahead and go To plugins and then add new So now we're going to add the plugin That's going to help us actually build Our website complete with uh pre-built Site kit so you can customize to look Any way you want to so right here where It says keyword and search plugins I'm Going to type in Elementor And then this is the one we're looking For right here Elementor website builder It is my absolute favorite way of making Any new website and it's super easy be Able to get the hang of this in just a Few minutes so I'm going to click on Install now And then on activate So I'm just going to click on skip right Now and then continue with hello theme And you'll type in your business name Here then click on next and if you have A logo you can add it at this point but We're just going to add it in later so I'm going to click on skip for now and Now we're going to click on browse from Over 100 templates or import your own And here's where we have all of these Different what they call site kits that You can start from and then customize With all of your own images and fonts And colors so it really looks branded For your business so you will notice
Some of these say Pro that means you Have to have Elementor Pro which is I I Think it's around fifty dollars a year To have that and if you can afford that I highly recommend it simply because you Get more options when you have Pro in Terms of widgets and whatnot but we are Completely going to be using the free Version today so don't worry and it's up To you to decide which of these layouts You want to start with every single Thing I teach you today you can start With any of these templates and make it Work for you but to make things easy I'm Going to choose this one right here it's Called local Services wireframe three I Just like starting from a place of like No real design happening yet so you can Truly make it your own and I like this Kind of a layout where the the headline Is on the side and the images on this Side it just works a a lot better on Mobile I find than a layout like this Where the the text goes over an image so I'm going to choose this one right here I'm going to click on view demo and You'll notice it has it comes with all These different pages and by the way we Can change any of these pages to be like If we don't like Gallery we'd rather That be you know testimonials or Something like that we can absolutely Make that change and you'll see it has All these different sections that we
Customize and we can change the sections Around we can add sections delete Sections at will it's all very Customizable and I'm going to show you Exactly how to do it step by step so I'm Going to click on apply kit And then get started and here it's Actually going to prompt you to create a Free Elementor account so at that point Just click on create an account and then Just put in your email make up a Password and then click on create Account and you're set okay so once You've signed up it's going to ask you To apply the kit and I'm going to click On apply all And then it's going to prompt you to This I'm going to click on enable and Now it might take a few minutes to set Up everything because it's setting up All of the pages that it comes with all The layouts the theme all that good Stuff so I'm going to come back as soon As it's finished loading Okay so the kit we chose is now live and I'm going to click on close So now we're back in the WordPress Dashboard so to get editing on our home Page we're just going to go over to Pages all pages and you'll see we have All of those here they all loaded for us And click on home edit with Elementor Okay so here's our first peek at the Elementor dashboard so first of all The
Navigators popped up here it may or may Not be for you I'm going to close it out Just for simplicity's sake and see we've Got our header up here so we've got just The name of our business we're going to Change that in a second to be the logo But we can see we have all these Different sections and every section You'll know it has a blue box around it That's how you know that's a section and Then every section is made up of columns So this one has two columns and every Column has a gray box around it with This little box up here Then this has one column this has three Columns and so on and within the columns Are widgets so this would be a headline Widget this would be a divider line Widget and a button widget and the the General gist of how this works is this Is the staging area over here on the Right and this is the editor on the left So anything in the editor when you click On uh this grid up here to get all the Widgets all of these widgets can be Dragged onto the stage And then customized over here on the Editor I'm going to go ahead and delete What I just did here so I'm going to Right click delete and one really Important rule for the road here before We even get going this little green Button down here that says update you're Going to want to press that pretty often
That's just going to save your work as You go it generally does a pretty good Job of saving for you anyway but we want To make sure that nothing gets lost so Whenever you think about it click on Update and that way nothing will ever Get lost for you so before we get Started just to start off really nice And clean I do want to get rid of this Uh this magenta text up here so I'm Going to go up to these this little uh Menu icon right here go to site settings And then header and then downward says Site logo I'm just going to click on That and under type right now it's the Title of the website like we just typed In the title Um in an earlier step so I'm going to Switch that to logo and I'll set the Logo with I know we don't have it set up There yet but I'll set it to about 90 Pixels wide or so and I'm going to click On update and if you have your logo at This point you can click on site Identity and we can set that up or you Can do that step a little bit later Let me click on select logo and then I've got mine right here I'm simply Going to take the file and drag it onto The stage And then click on select On skip cropping And there we go it's it's up at the top Let me click on publish
Now to get back to editing the home page We're just going to click on the X Okay so now we're back in the Elementor Editor okay so I think we're ready now To edit our home page and we're going to Start with text I'm going to show you Exactly how to modify not only the Content of your text but also how it's Styled so remember how I said anything You see over here on the stage can be Edited over here in the editor so let's Just see that in action so we've got a Headline right here so we're going to Click on it and when when you see the The blue box around it that's how you Know it's selected then you'll go over To the editor under content this is Where you would actually type in Whatever kind of headline you wanted And you can set that to be aligned on The left like it is now or centered or On the right and that goes through Pretty much all the text on your site And then you could type in a different Description down here so again you just Click on it and you would edit it over Here you can even uh you know you can Bold certain things you can italicize Certain things and that's a great thing To do if you want anything to kind of Stand out And going down the page you can do the Same thing so here we have another Heading you just click on it change the
Text right here And it's the same for almost all of These and here we have a text editor This isn't a headline so again you just Input whatever text you want here and You could uh bold some of that right There And maybe maybe like that Then you would just continue this all The way down but here we have an Instance of something that I call a Compound widget okay so here we don't Have a separate image headline in Description this is all one element and It's called an image box so if you Wanted to edit this you would just go Over here under the image box and we'll Talk about images later we won't do that Right now but under where it says title And description You know you'd put that in there and Then the description would go in here Like so pretty straightforward and the Same thing is going to go down here for Benefits so this is an icon box it's Very similar to the image box it just Happens to use an icon instead of a Photo so title description is edited Here And here's another instance of a Compound widget this is a testimonial Block so here you would just input the Actual body of the testimonial and here In quotes and then the person's name
Would go here Then if you want to give them a title You just put that in right here so I Think you get now how to actually change The text on your page but what about the Style of it because really anything goes Here you can do pretty much anything you Want so I'm just going to take this Headline here I'm going to click on it And then instead of content I'm going to Go up to style so here's where we can Change things like the text color the Typography meaning the font and the size Of it how bold it is all that good stuff So for text color we can just click on This little uh color block right here we Can make it anything we want and Sometimes it helps to have like an Actual color code but if you don't have It you can just play around with it Until you get it how you want it I'll Just put it back and here's a good note So basically anytime you want to go back In time and undo something you can Either do command Z or you can actually Go down to uh this little icon where it Says history and click on that and then You can go back all these steps back in Time to get it back to how you wanted it But I'm just going to click back on the Text to get back to where we were now Let's go to typography so I'm going to Click on the little pencil icon and Here's where you can choose your font so
Family just refers to font and the cool Thing is you have access to literally Thousands of Google fonts so you can Obviously do a search for Google fonts And you can pick which ones you want or I've actually made it really easy for You because there's tons to choose from I've actually put together some of my Best font pairing combinations that will Work for almost any case so the link for That is in the description below if you Want to grab my guide and make it easier On yourself but so we can choose things Like the font here we can choose the Size of it I might make it a little Smaller we can choose the weight so some Fonts are going to have a ton of Different options some are just going to Have normal and bold but it's on you Know it's in the middle right now but if You wanted to make it like really really Heavy you could do 900 I'm just going to Put it back to 600 I think that looks Good you can transform you can make it All uppercase if you wanted to do that And style you can make it you know Italic if you wanted to do that Decoration I never really used that but Here's an interesting one you might need To use LINE height so sometimes things Can be a little too spaced out in which Case you'd want to control it here Letter spacing I don't use very much but It controls like how much space is
Between the letters so you obviously Have really granular control over Everything with your fonts but the way I Like to do it is to make it really easy So that all your fonts are controlled in One place so you don't have to click on Each instance of it to change it just go Up to the uh the menu icon up here and Go to site settings And then Global fonts so then you would Just take whatever fonts you want for Your headers and you would input that Under primary and secondary so just Click on each one and input it the way You want it and then body text is like Uh good and like this would be a good Instance of body text right down here Like I might make it slightly bigger so Even if I was okay with the font I might Bump it up to maybe 17 and then accent Text that's usually for your buttons Then oddly enough the one thing that Isn't controlled by primary or secondary Headers is this top uh headline in your Top hero section so this is where you Would modify that under hero headlines You just click that and choose whatever You want and make it whatever size you Want it to be as well and then once you Made all your choices click on update And then back to editor and and I should Mention anything that you chose there in That Global Styles you can modify in a One-off basis so let's say you wanted to
Make this a different font for some Reason you could do that just by going Over to style typography and then choose You know whatever you want there but I Will command Z that get us back to where We were but now let's say you wanted to Actually add a text block that's not Already there it's really easy to do Just go up to this little grid icon up Here this is where your widgets are and Let's say you wanted some kind of little Text Above This headline you just take a Text editor drag it right above here and Then you would edit it of course in the Editor And then we could style that if like Let's say we wanted it to be all Uppercase we'd go to typography Transform uppercase and then maybe we Make the letter spacing a little bit Wider And the same thing goes for headlines if You want a new headline just drag it Right here Just drag it right where you want it to Be You would edit it right here And then you can even move it around if You wanted to or if you want to delete It just right click Delete and it's gone and I'm also going To delete this I don't think we need it And I'm going to show you one more thing That's uh you need to know in terms of
Text and that are that is linked so Right here under our services you'll see A good example of some link text it says Learn more I'm just going to click on That and then here's where you'd set That link so let's say you wanted that To go to our services page we already Have one built because it's part of the Site kit so I'll just type in Services and it's right there and then That's where that will go and if you Wanted to make just a kind of freeform Link anywhere else on your page it's Really easy to do too so here we have a Text editor you can't really do this in A heading but you can do it in a text Editor so if I wanted to link up the Text the services you offer I'm just Going to make sure I've selected this Block then I'm going to go over here on The left and highlight the services you Offer and then click on insert edit link And then again I'm going to type in Services Then in order for this to actually be Applied you have to click this little Blue button and now we have a link right Here but I'm going to go ahead and do a Command Z and now I want to talk about Buttons so we've got buttons all Throughout the page that are really Important obviously so there's a lot you Can do with these as well and just like With text all you need to do is click on
It to get started and then under content Here's where you can override the text That's on here so right now it says Contact us maybe you want to say Something more like Schedule now or even buy now or download Anything like that then underneath that This is where you set the link for it so Similarly to how we just set the text Links all you're going to do is click in This field and let's say you want this To go to our contact page up here so I'm Just going to start typing in contact And then here we go it pops up for us so Now I've set it to link directly to that Contact form and you can also set the Alignment currently it's set to left or You can Center it or you can uh Set it over to the right I'll just put It back to the left that's what it looks Best here and you can change the size Here if you want to do that or you can Even make it a little fancier and choose An icon to go with it so you can upload Your own icon but we don't really need To do that they've got plenty for us to Choose from I'm just going to click on Icon Library I'll type in Chevron that's going to get us these Little arrows so I'll just choose this Little right facing arrow and then Insert and then you can play around with Where it's placed right now it's before I think it's going to look better after
And then you can play around with the Spacing make it a little further a Little closer whatever looks good to Your eye and if you wanted to get rid of It you just click on this little none Button right next to it but that's not All we can also change the color of it Too pretty easily so let's just go up to Style and we can change the color right Here we can change the text color let's Say we wanted to make that you know Black maybe and then maybe the color of The button itself You know something over in this family I've actually got a color code I'm going To type that in right here I'll put the text color back on white I Think that's going to look best but You'll notice when you hover over the Button it changes right the style of it Changes and that is controlled by hover So right now we have normal styling then We have hover styling so you can do kind Of anything you want here I like to do Something that's just pretty Um subtle so what I would probably do Here is I'm going to go to color and I'm Going to type in the same color code but I'm just going to make it slightly Darker like that and then you'll see the Text changes to Blue so I'm going to Change that back over to White so here's What we get it's just a nice subtle Little variation and then I can also see
That we have a a little bit of a border That's blue you can either you can play With that if you want you can change the Thickness of it you can change the color Of it obviously but I actually just want To get rid of it so I'm going to click From solid to none and then we have Border radius so notice how it's like a Pill shape it's all rounded so if we Were to make this zero it would be a Complete rectangle if we go up a little Bit it has that nice little rounded Edge Look Or if we keep going it's just going to Make it completely around like we had Before completely up to you how you want To handle it they're all good It just really depends on what kind of Style you want to go for now one cool Thing we can do is notice how we have a Lot of different buttons around the site So what we can do is we can actually Apply that style across the board simply By right clicking on it copy now we'll Go down to our first instance and we'll Right click on this button and then Paste Style That you'll notice that left aligned it Because the alignment is not controlled In style so we actually have to go under Content and we'll just re-center that And we'll do it again here we'll paste Style And once more
And let's say you want to add another Button somewhere else like maybe under The benefits section here so I'm just Going to go up to widgets and button and I'll just drag it right underneath And then of course I'll right click Paste style and we've got another Instance of the same button and if you Wanted to get rid of one just right Click on it Delete Okay so now for the fun part now we get To talk about images and backgrounds so This is kind of the part I like the best It's what will really make your site Feel like it's for you and for your Business or for whatever purpose you're Creating it for so images can be thought Of in two distinct ways okay so first of All we have Standalone images like this These are widgets that you go and you You basically drag an image widget over That's how that would work and we also Have images as backgrounds so you'll see Here this image takes up the background Of this entire column images can also be Backgrounds for an entire section so to Really make this come alive let's put a Little focus on our top hero section Right here that's what we call it the Hero section so here we have an image in The background on the right and we have Just a normal kind of blank background On the left now the way we control these
Is just make sure you've selected the Right columns so we're in this case We're going to start with our image Column so I'm going to click on it then Go over to style and then under Background and background type we've got A few choices here so we have classic Where you can click just any color or You can choose an image we also have Gradients where you can choose you know Any two colors so we'll choose a red and Then maybe we'll choose a blue here and Then you can choose the location of it You can make it kind of as severe or as Blended as you want and you can change The angle of it just like that or we can Do a slideshow so if you click here you Can add multiple images that will cycle Through but for now I just want to make It really simple we'll go back to Classic and there's already a Placeholder image here so I'm just going To click on choose image And I've already uploaded all the images For the site but what you would do if You haven't done that is you would just Locate your image file and your finder And you would simply drag it over onto The stage here but I'm just going to Choose this image for our hero section And then click on insert media okay so Now you can see this image is in the Background of this column and you've got A few choices here you can choose the
Positioning of it like Center Center or Top center it's probably not going to Make too much of a difference right now Because Um there's not too far for that image to Go so I'm just going to click on Center Center for now I think that's going to Be the cleanest and it's going to work The best when we go to our mobile views And our tablet views and that kind of Thing and you always want to make sure Size is set to cover that means your Image is going to cover the entire Column no matter what size it is and This does look like a pretty good hero Section as is like we we could go with Just a white background back here it Looks fine but I want to show you also How you can use a color over here so I'm Just going to make sure I've chosen this Column now and I'll go over to style and Choose classic I'm going to come over Here and you can choose any color but I'm going to choose one that's pre-made So I'm going to go to default and I'm Going to click on primary that just is What it comes with and obviously you can See our text went away that means we Have to restyle the text so that it Reads on top of this background so I'm Going to click on the text block Then under text color I'm going to click On the color and just choose White And then I'm going to do the same with
This And I think we also had a little um Divider line here but I'm just going to Go ahead and delete it I don't think we Need it but if you wanted to change the Color you just go to style Same thing as as before I'm just going To right click delete nice and clean and Speaking of clean whenever you want to Get just a nice view of what it's going To look like without the edit box over Here just simply click on the little Arrow to the left and this gives you a Nice little preview of what your site's Going to look like okay so we'll get That back And then scrolling down the page we can Make any of these backgrounds any color We want if we wanted to do that I happen To think it looks nice having a lot of White but then we'll probably have one Section here where we might want to add A little bit of a background so I'm Going to click on the whole section and Again it's going to be surrounded by This blue box once it's selected and I'll go to style Background type classic and then I'll Choose our color palette and I will type In this nice kind of beige color and This is really important whenever you Want to save a color to get back to it All you have to do is when it's selected Here in the Color Picker just click on
This little plus icon and that's going To let you save it you can even give it A name if you wanted to Maybe like beige background and then Create and then scrolling down maybe we Want to give our our testimonials Section A little bit of a background Color as well so I'm going to click on The section And then style and then you know how to Do it now to go to classic and then I'm Actually going to choose this really Um this blue light background it already Comes with it and you'll notice how Tight this section is on the on the text And the the content don't worry we're Going to get to that we will definitely Fix that in a step that's coming up I Think I want to give this background a Little bit of a treatment as well so I'm Going to click on the whole section then Go to style background type and I'm Going to choose our beige background Color and now we actually need to talk About those other types of images the Widgets right so like this is not a Background this is an actual image that Started as a widget that was dragged and Dropped over into place so how do you Change those up well just make sure You've selected it then under a Content An image just click on choose image and Then you would drag it onto your stage I'm going to go ahead and choose this
One and click insert media It's as easy as that so now let's go Ahead and populate the rest of our Photos so we have this about our company Section so I'm going to click this guy Right here oh and this one is actually Kind of funky because it is a background Image so yeah it's kind of a it's a Weird one sometimes you'll get these Pre-made sections that have some funky Stuff going on you just have to be able To kind of figure it out so this is a Background so I'm going to click on the Section oh sorry I'm going to click on The column and then Style Choose image I'll choose this nice Team image here and then I'll do the Same for the rest of these two now these Are actual image widgets so they're not Backgrounds so we'll Click on each one Choose image let's choose this one here And then over here We'll choose a nice other one And then scrolling down We'll add some Images to our services so I'm just going To click on it remember this is an image Box it's a compound widget so everything Is controlled in one place from the Image to the title and the description So I'm going to choose the image Then I'll choose this one insert media And now I'm just going to quickly do the Rest of these in the same way And then going down we'll go to our
Testimonials section so this is another Compound widget so if you want to Include the photos for your testimonial Subjects which I think you should I'll Just go ahead and click on it and then Under content choose image I'm just Going to choose images of the people and We'll do it again right here Okay so now I want to talk about a Different kind of image this is an icon So everything we've dealt with so far Are photos but Elementor actually comes With a lot of great icons that you can Use and it's a great thing to do in a Benefit section like this so not only Can you choose what the icon represents But you can also style it with your with Your colors and your sizes and all that Good stuff too so I'm just going to Click on benefit one and here we've got This placeholder icon so I'm just going To click on icon library and I tend to Like font awesome regular I think these Look a little more modern a little less Blocky than some of these do so there's Just a personal preference though so you Just try to choose the icon that best Represents what you're trying to talk About maybe a credit card here if we're Talking about Good pricing and then Benefit two we might choose something Like This guy And I'll just choose the rest of them
Right here real quick So that's just the content of the icons Now of course you can change the styling As well so I'm going to click on the First one and then go up to style I Think you're getting the hang of this by Now right so we have two colors we have The primary color which is the color of The icon itself and the secondary which Is kind of this background behind it so Let's say you didn't even want a Background behind it at all you could Definitely click on this and then click On clear and then that would get rid of It nice and clean but I actually want to Do uh the beige background and then for The icon itself I might want to choose Something that kind of goes with our Green button But a little more muted something like That and since I want to maybe save that Color for later I'm going to click on The plus icon and I can save it that way Just click on create now I could go Through all those steps for all four of These but I don't have to all I need to Do is right click on copy and then right Click paste style Paste style and one more time Super easy right and if you go up to Content you can actually change other Things here as well so we've got framed We could do what's called stacked or we Could just do default which also gets
Rid of the Box behind it I'm going to Keep framed then from there you can do Either Circle or Square so lots of ways To customize this and here's an instance Of a of a photo gallery you can see These three little dots that allows you To scroll through multiple images so if You wanted to use that you just click on The edit button and then under image Carousel click on the pencil and here You would just get rid of these Placeholders so you could select new Files or I'm just going to click on add To gallery and I'm just going to choose A few That I already have and then add to Gallery then insert gallery now we have All of them here scrolling through and Of course if you wanted to add an image Anywhere else like let's say right here You wanted to put an image maybe Underneath this text you would just go Up to widgets find in image and drag it Right where you want it then from there Choose image and then you know you drag It under the stage or you choose one You've already got and then from there You can do other things if you go to Style we could actually give this maybe You want to give it a nice black border You can change the width of it you can Make it as thick as you want or as thin As you want you can give it a border Radius so remember those rounded edges
We could do it like that if you wanted To you can even give it a shadow like a Drop shadow underneath it you can change The the placement of that if you want to But I'm actually going to get rid of That go back to default and Border type I'll just choose none and Border radius I will Zero that back out and if we Don't even want that image I'm just Going to right click and delete but now Let's talk about how we can actually Tightly control our different sections And columns okay so now I want to talk a Little bit about sections and spacing Because it's really useful to be able to Control the spacing within sections and Around different elements to get really Tight control and make sure everything Looks good so I'll show you the basics Of what we're talking about here so Let's say within this column here we Wanted to have a little bit more spacing On the top and the bottom and maybe even Over here on this right side so what we Need to do is choose I would just choose This column actually because all we're Trying to deal with is what's in inside Here and I'm going to go up to Advanced Now don't be intimidated by the word Advanced it's actually pretty simple and I'll go over this so we have two Different elements that we can control Here the first is margin and that refers To the space between the outside edge of
This column and the content outside of It so this would be referred to as Margin from here to here Padding is the opposite that is the Space from the outside edge in so this Spacing right here would be padding and This would be padding over here as well As this and on top so right here within This column we have 15 Of the screen space as top padding and Bottom and on the left so if we wanted To bump that up let's just try to make That 20 and see what that looks like Gives you a little bit more on top and Then I'll try that on the bottom as well I'm pretty happy with what it looks like On the left and then on the right let's Maybe make that five I just think that Looks a little better being a little Further removed from that edge now let's Say you wanted to tighten up the spacing Between this header and the top section Here so that would be a margin above This uh this section right here so I'm Going to choose this section and again Go up to Advanced and we can see the Margin has 15 on it so I'm going to bump That down to to 10 just to tighten that Up ever so slightly and I think that Looks better already and scrolling down Here I'm going to do the same thing here I'm going to choose our services and I'm Going to go to Advanced and I'm going to Bump that down to 10 and let's say we
Actually wanted this button to be closer To this text so I'm just going to choose The button then go up to Advanced and we Can see we have a margin of four percent On top let's just kind of see what it Looks like as we go down and I think That looks better as well so let's see What else we've got here so okay so here We have a section where I think this Element the slideshow element is just Way too close to the top it looks pretty Bad that way so I'm just going to choose The section and what I'm going to do Here is actually different this is Another thing you can do I'm going to go Up to layout and under vertical align I'm going to choose middle now that is Just going to make everything within Both these columns aligned to the center Of of this particular section and I Think that looks pretty good I think we Are good to go there I think this Section looks pretty good but here we Have a scenario where the content is Just way too close to the edge again so What I'm going to do is I'm just going To choose the entire section go up to Advanced right and then padding let's do 10 on top and 10 on bottom and maybe Actually that's a little bit too much Let's go ahead and bump that down to Eight and eight there as well and to my Eye I think that looks pretty good and We'll do the same thing right here so
Choose the section advanced Let's choose uh under padding eight on Top And eight on the bottom and we can even Do our Center align trick here too so we Can go to layout vertical align middle Okay so what about this dead white space Here though so what do we think that is I think that is a margin on top of this Section or possibly a margin below this Section so sometimes you just have to Kind of troubleshoot your way around and See what's causing what so I'm going to Choose this section go up to Advanced And yep I'm right it's uh it's a margin Above This section so if I were to just Zero that out and delete it now we have This section touching that section which Is more like how we would want it to be But there's actually a lot more that we Can do with sections so let's say we Wanted to actually bring this section More toward the top all we need to do is Just click right here where it says edit Section and drag it up to where you want It to be So let's say we wanted to be here just Put it right here where you want it and Then let it go and then of course we'd Want to just tighten up a margin here But I'm going to go ahead and do a Command Z to put it back where it was so Yeah you can move sections around you Can move columns around let's say we
Wanted to swap this column for this one We just choose either column and then Drag it over to the other position you Know and then you'd have a little bit of Work to do to uh fix the margins here Like you'd probably just choose this Column go to Advanced and then under Padding I'm going to unlink the values So they're not tied together and then on The right I would just give it You know however much padding it needs But I'm going to go ahead and undo I'm Just going to go to history and then go Back in time to before we made the move And of course if you wanted to delete This section altogether or let's say you Want to delete a column right click on The column delete or on a whole section Right click delete and it's gone but I'm Going to go ahead and put it back and if We go up here to This section let's say you think it's a Little too busy which I think it kind of Is I think there's a lot going on let's Say we want to get rid of a column we Just right click delete and let's say we Want to just tighten all this up and put This text and this button right into This section here so all we would need To do is click on the edit and then drag It into place and the same thing here And then we've got an extra section we Don't need so I'm just going to click on The X to delete that so I hope you can
See now how easy it is to actually move Stuff around it will controlling columns And sections and all the different Widgets because here's the thing like Most of these uh site kit templates that You're going to find are not going to be A perfect fit right out of the box for Your content so it's nice to know that We can add stuff and change stuff around As necessary and speaking of adding Stuff here's where it gets really Interesting I'm going to show you how to Add a brand new section wherever you Need it so let's say we want to add a Section between testimonials and this Section right here we would just go Between them and I'm going to click on The plus icon and you've got two choices Here I'm going to go over this option With you in a little later in this video Where you can actually just do it Completely from scratch choosing the Columns then adding widgets manually but I'm going to start you off nice and easy Here with something that's more Pre-built so I'm going to choose the Folder icon And here you've got some options so We're going to bypass this we're not Going to add in a whole page in the Middle here we're going to go to blocks Now these are a bunch of pre-made blocks By Elementor and you will see a lot of Them have this Pro designation on them
That means you have to have elements for Pro to use them but there's lots of free Ones too so I'm going to go up I want to Make an FAQ section here so we're going To go up to category and here's where You can kind of look you can browse Based on the purpose of the section but Keep in mind you can mix and match these Like there's nothing saying this has to Be an about section necessarily but Anyway I'm just going to go down to FAQ And see what they've got for us here All right so I'm going to use this Layout right here and just click on Insert okay so here we have this brand New section and now all we have to do is Customize it so we already know how to Do all of that we choose each text block And we add in our own text And it would go the same for all of These right here you would this happens To be an FAQ section so you would click Here and then you would type in the name The title of the question then your Answer for it here we already know how To do all of that and then of course we Can style it by choosing the section Going up to style and I'm going to type In the this green color value here and I'm actually going to save it too I Forgot to do that earlier so create new Global color Create then maybe I don't like how bold This text is so I'm just going to click
On there go to style Typography weight let's just do 600 Semibold and then this text is hard to Read it's gray on green that doesn't Look so great so I'm going to go to Style and I will make that white and I Think I'm going to make it a little Thicker as well so typography let's go From 300 light to 400 normal and let's Say I want to make this a little green Divider line first of all if I don't Want that divider I can just right click Delete but let's say we want it so I'll Do a command Z And I'll choose it Style And I will choose our kind of navy color For that now you could go through the Process of doing that for each of these But there's no need I'm going to right Click on copy and then do that in all of These titles real quick paste Style And I'll do the same with the little Divider line right click copy right Click paste Style And then finally with this text right Click copy right click paste Style And I think that looks pretty good so What though if we wanted to actually add In a few little items like let's say we Don't want this to be a slideshow right Here we don't have any use for that well What we what we can do is let's right Click delete it and then from there we Can go up to our widgets we could bring
In anything from you know Google Map if You wanted to have something like that And delete it or you know just a single Image if you wanted that but I'll delete That or we could put in a video so I'm Going to drag in a video element here And this lets you put in any video from Either YouTube or Vimeo or Dailymotion Which I've never used or self-hosted Meaning you would upload your own video To your website I do not recommend you Do that it's just going to be a Tremendous load on your on your server I Always like to do YouTube it's good for Extra SEO since uh Google owns YouTube So all you would need to do then is Upload the video to YouTube and then Link to it right there let's say we have A little explainer video and what I Always like to do too it always comes up Like this on by default I'd like to just Get rid of that so it's nice and clean And coming down uh to testimonials what I like to do is add a star rating to Every testimonial so we've got a widget For that as well I'm just going to type In Star rating here we go and I'm just Going to drag this widget right on top Of that testimonial and I'm going to go To style and I'm just going to drag the Spacing out a little bit I think that Looks pretty good then I'm just going to Right click copy then right click paste
Right click paste and then just move Them to the right position on top And we are good to go I think that's Definitely an improvement it helps sells It like an effective testimonial okay so We are almost good to go with our home Page by now you you know all the major Procedures you're going to need to know To kind of create anything you need However we have one really important Step left here which is to make sure it Looks good on mobile because half if not More than half of your website traffic Is going to be browsing on a mobile Device or a tablet so luckily Elementor Has made it really easy for you so if You go down here to where it says Responsive mode it's this little icon Right here I'm going to click on that And this allows you to toggle back and Forth between desktop view Tablet View And mobile view so our big job here Really is to go through bit by bit and Just make small tweaks to make sure it Looks as good as possible on all your Devices and the good news is when you're Using these pre-built site kits they've Done most of that work for you sure There will always be little things to Tweak but for the most part it's going To be mostly good to go so one thing Right away I can see is this image looks Kind of funky right it's just not the
Right size so I'm going to click on that Column now you really have two choices Here the first would be to just hide This on mobile altogether if it wasn't Super important to you in which case you Would just choose the column then go up To Advanced down to responsive and you Can do a lot of cool things here you can Hide stuff on different devices so you Could hide that whole column on mobile If you wanted to and see it's great out Here but that's not really what it would Look like that's just showing you a Preview to get a real sense of what this Is going to look like on a device all we Have to do is collapse the side panel And that's what it would end up looking Like so but let's say you actually Wanted to keep that image you didn't Want to hide it there's something you Can do so let's just go up to our Widgets and I'm going to get a spacer so This is going the reason this isn't Showing Is because there's nothing in that Column that's just a background image That's not taking up any space but if You take a spacer which is just kind of A blank widget I guess you're going to Drag it into that column and then you Can give it Some vertical space just like that now I Happen to think this would look a whole Lot better if the image were on top
Rather than on bottom so here's another Thing you can do let's choose the whole Section again and then go up to Advanced Responsive and here's another cool thing You can do you can reverse the columns So on mobile because that's what we're Looking at here we're not on tablet yet I'm just going to click on reverse Columns for mobile and then that's what That would look like so to me that looks Pretty good so let's keep moving on we Have this about our company section Looks pretty good then our services Yeah this looks pretty good too I don't Have any changes to make here uh maybe I Want to give a little bit more space on The top and bottom here so what I'm Going to do is choose the section then Go up to Advanced now here's something Really good to know so whenever you see Whenever you're in this responsive mode And you're going to make a tweak make Sure that you've got this little icon That shows the mobile device next to it That tells you that you can make a tweak Here that's only going to apply to that Device so if I were to make the padding Here because remember we need padding on The inside I want to unlink these values I don't want them to be the same but if You do that on the top here That's not going to affect what it looks Like on your desktop view which is good Which is a really good thing it gives
You tight control so and one thing I'm Seeing here too is it looks like this Just looks kind of way too close to the Edge over here so I'm actually going to Give it Maybe Five on the right five on the left and I Think that looks pretty good and let's Say you wanted to Center all this on Mobile only you can do that so I'm just Going to click on the text then under Alignment see we have the little mobile Icon meaning if we do this if we Center It on mobile it's not going to center it On desktop so we have free reign just to Kind of make these tweaks here and then I'm going to do the same with the button And going down okay so here's an issue Here so we're we're having spacing Issues they're just not equal so see how Much space is between this and then see How little is between this so what I'm Going to do is I'm just going to choose This column right here and I'm going to Advanced no it's a dealer's Choice here You could give it padding or margin it Doesn't really matter I'm just going to Go with padding here so Let's just do something like that I Think that looks pretty good and maybe a Little less yeah that looks pretty good To me actually then I'm just going to Right click Copy and then on this one I'm going to
Do right click paste Style And then down here right click paste Style and one more time now I think we Still have an issue of the columns Having spacing issues so we just need to Kind of tweak it to our eyes so I'm Going to choose this entire section and Now I'm just going to start playing Around with it so I'm going to take a Margin and you can you can actually go Into the negative on margins I'm going To unlink these values oh and once I did That it kind of seemed to take care of Most of it right there didn't it so yeah This to me looks pretty even and clean So uh now I'm just going to move on to Testimonials so let's go ahead and go to Over to Advanced and then padding I'm Going to give it Just a 10 value all the way around and I Think that looks pretty good as well now Here's an instance of like I just think This text is too big so I'm going to Choose the text go to style typography And see under size we've got the mobile Icon so we know that we can tweak the Size of that and it'll be just fine on Mobile on desktop rather Here's an instance where I think I'm Just going to hide this image on mobile I think it doesn't really add anything Here so I'm going to choose the image Advanced Go down to responsive and then hide on
Mobile and let's see what that actually Looks like and we can always tighten up The space here I'm just going to give it A little bit more of a of padding so Choose the section Advanced let's go Ahead and make this 10 all the way Around and then let's choose this title And advanced and I'm going to just give It kind of a zero margin all the way Around that and I think to me that looks Pretty good and I think our page looks Really good on mobile now and from there You would just do the same thing on Tablet and just kind of make all your Tweaks in the same way I'm not going to Go through that whole exercise but it Would you would just do it the same way And make sure everything looks good and Then remember we're going to want to Click on update to save all of our Changes and once you've done that and We're ready to move on to the about us Page just click on the little eyeball Icon down here to preview our changes And you can go through and take a look And then when you're done just go to About so here is our about us page we Get to customize and to do that we're Just going to click on edit with Elementor So let's just go through bit by bit and Really solidify what we've learned so Far so obviously we would just click on Every text block to add our own text so
If you wanted to change this headline You could do that and then you would Click through here and add in whatever You know text you want to have then We've got an image over here and this Looks like it is a background image Because I'm not seeing any actual widget Over here so I'm going to click on the Column then go to style and yeah so We've got a placeholder image here so I'm going to click on choose image to Replace it and I'll go with this nice uh Team photo here insert media and notice How close this text is to the edge here I'm actually surprised that Elementor Hadn't fixed that already so what I want To do is choose this column then Advanced and I'm just going to go over To padding see it's obviously got Padding around all the edges except for The right for some reason so I'm going To change that to five and that already Looks better and let's say you want it To match the this more to your hero Section on the home page where we have The blue background here I'm just going To click on let's just click on the Whole section actually then go to style Background type classic because that's How you can choose just a solid color And I'm going to choose our Navy color here which means we have to Then change the the text color so I'm Going to choose the headline first go to
Style Text color white then this style text Color white And we did have a little divider line Here so I'm going to click there Style White Now moving down the page we have this Little section our vision with a Slideshow next to it but let's say we Don't want that let's say we actually Want this just to be kind of a single Column layout so what do we do we just Go and right click on this column to Delete it and let's say we actually want It to Center all of this content so I'm Just going to choose the headline first Then under alignment I'm going to Center That and I'm going to do the same with This right here And for some reason it's kicked way over To the side here so this is an instance Where you're going to need to maybe do a Little bit of troubleshooting to see why I would guess there's probably some Margin over next that's attached to this Text block so just make sure it's Selected go to Advanced and it looks Like it's got some kind of custom width Thing going on here if you're ever super Confused oh sorry I just hit default and It fixed it but if you're ever confused All you need to do is just right click Delete let's just do that in fact just So you see how to do it again I'm going
To delete it and then go up to widgets And I'm just going to drag my own text Editor right underneath it And then style it to Center and then We're good to go and then let's see Let's say we don't want this inspiring Quote from a company a player play owner Again we want to design something that's Going to serve your content and if this Isn't included in your content then it's Really easy all we need to do is right Click delete let's say we wanted to have Replace that with a little section of a Couple statistics I want to show you a Really cool thing you can do so within a Section you can have what's called an Intersection so you can have a different Number of columns kind of within this Section so it defaults to two but if you Want to add one just right click and Then Add new column now you've got three but I'm just going to right click and delete To get rid of that one I think 2 is good And then I'm going to look for something I'm going to go down to uh under General And I'm going to look for counter so I'm Going to take this and I'm going to drag It right into our first column So that just allows you to kind of count Up from a number so it's a good way to Display any kind of impressive stats you Have so I'm going to click on that now This is what we call a compound widget
Again where both of these things are Controlled in the same Widget the number And the label so I'm going to have it End at 120. So it counts from 0 to 120 and then Number prefix so this is whatever Appears before the number And this is whatever appears after the Number so you don't always need to use That but if I wanted to do like 120 plus That's how I would do it I always add a Plus sign there And then the title I'm going to say Five star Google reviews And of course we can control The Styling Here go up to style and you can alter The number Through here the text color and the font And all that stuff and the title down Here so I actually think the number looks pretty Good I don't want to change the anything There but I think this text is pretty Big and it's pretty light and hard to Read so I'm going to start with the text Color I'm going to darken that a bit and I'm going to go to typography and I'm Going to make it a little smaller so I Think that looks pretty good so what I Want to do now is I'm just going to Right click copy then right click paste To have a different version here so in This one I'm going to go back to content And I'm going to change this to
I'm going to put a dollar sign And then I'm going to change this to 3000 And I'm going to change the title To average savings so obviously this Would be whatever you need it to be These are just examples and this looks Pretty good my one nitpick is I think it Takes up too much width here so what I Want to do is make this whole section A Little narrower so I'm going to choose The section go up to layout and then Under content width I'm going to choose Boxed and I'm going to give it some Control here I'm just going to see what Looks good to my eye which is something Right about in here I think this looks Pretty nice and then if we wanted to Give it a background color I'm going to Go up to style and then background type Classic and I'm going to choose a really Light blue background here like we have On our home page and let's see what that Looks like Pretty good but now we have to get rid Of that margin remember so let's just go Ahead and choose this section go up to Advanced And then get rid of that 15 margin just Delete it and that there we go okay so Now we have a section of our team so First thing I might want to do is Tighten the spacing up so I'm going to Click on the our team text Advanced I'm
Going to change the margin to 10 and of Course you can change this text to Whatever you want it to say it doesn't Have to say our team so here we have Another compound widget type which is The image box so it controls the photo The employee name as well as the job Title so let's just go ahead and start Adding these so I'm going to choose my First image right here then we would put In the name And job title And then we would do the same for all The rest of them So now let's say though we only have Three employees that we want to feature Here what do we do with this fourth one Well all we need to do is go to the Column don't just delete this Because now we have an extra column here You want to delete the whole column Right so right click on the column Delete but let's say we have maybe seven Employees right all we need to do then Is we can do we can duplicate this Entire column so I'm going to go up to The section right click duplicate and Then Maybe go to this column and right click And duplicate that so here we have maybe Our president vice president that kind Of thing and these are the more Low-level employees down here it's Really customizable however you want to
Handle it and of course what if this Isn't complete what if it doesn't have Everything you want maybe you want to Add their social icons under each Employee's name well again super easy Just go up to widgets and I'm going to Type in Social and we have social icons I'm just going to drag this widget right Under our first one right here so it Just defaults to Facebook Twitter and YouTube so and it defaults to these Three but again this is very Customizable let's say let's say you Want to get rid of YouTube easy just Click on the X And it's gone you can change the shape Of these they're rounded now you can Make them completely squared off or you Can make them complete circles it's up To you I'm going to go back to rounded And then from here we can change what These are so let's say we only want to Show Facebook and Linkedin so let's get Rid of Twitter so we'll choose Twitter And then under icon Library we will type In LinkedIn it has most of the social it Has about all the major social networks Here so I'm going to click on insert There and then for each of these it lets You set the link so obviously the link To their profile you would do that for LinkedIn and Facebook and for all the Different profiles now let me show you
Some other things you can do so let's go To style What I like to do is actually change These from the official color meaning Facebook blue LinkedIn blue uh YouTube Red I like to make it a little bit more Branded so I'm going to go down to Custom the primary color is the Background so I'm going to go down and Choose Um the green color that we've been using And I'm going to bring the size way down To make them a lot less intrusive Something like that looks good to me so Once you have it the way you want it I'm Just going to go ahead and right click Copy and then I'm going to paste them For all these different ones here And of course you just want to reset the Links on each one and if different People have different socials they want To show we already know how to change Them right up here and moving down so Now I want to show you something really Cool we've got this section this last Section of the page so first of all we Have this button so we could change Everything one by one to match the home Page but I'm going to do it a different Way so first of all I'm going to show You how to get back out to WordPress Because we're going to go to our home Page to copy the button we already have So I'm going to click on these little
Lines right here the menu icon then exit Except I'm going to right click on that And open it in a new tab so here we are Back on the WordPress dashboard I'm Going to go to pages Then go down to home and then edit with Elementor so I'm going to go down Um to this section and I'm just going to Right click copy and then go back to our About us page and right click paste and Then I'm just going to right click and Delete this one and then just make sure This one is centered and before I show You the really cool thing I can tell Right now all this stuff is way too Close to the edges of the section so I'm Just going to choose the section and go Up to Advanced and padding I'm going to Make it 10 except that's on 10 pixels I'm going to change it to percent And I'm going to do 10 there just to Give give it a little bit more space all Right so now for the cool part so let's Make sure the section is still chosen I'm going to go to style so remember we Have all these different background Types we have just a normal color we can Do a image we can do a gradient or a Slideshow but you can also do a video Background and I think that is a really Cool treatment especially on these Sections toward the bottom of the page So I'm going to click on video and under Video link this is where it lets you set
The link of you know basically you'd Want to choose a YouTube video I've just Found a really cool free to use stock Video of like a city street so I'm going To paste that in here and that's what That looks like which is pretty cool Right but the problem is now the text is Really hard to read so there's a few Things we're going to want to do here we Could simply make the text white but in Most cases that's probably not going to Be enough but let's go ahead and start There I'm going to choose the headline I'll make it white And I'll make this text white as well go Up to style And white but see it's still a little Hard to read so in this case what we'd Want to do is actually add a bit of an Overlay on top of this now this goes for Videos as well as a lot of times when You're using a photo background you're Going to want to use this trick so Staying on style we're going to collapse Background and we're going to go to Background overlays so this allows you To do either a classic you know just a Normal solid color or a gradient I recommend sticking to a color I've Seen gradients go badly for many people If you don't choose right it can just Look really bad so I'm just going to Choose black and then you can choose the Opacity so if you bring it all the way
Down it's like it's not there at all all The way up and it's just solid black so Let's get it to a place where we can Still read the text but it's it looks Really cool in the background still so To me this looks pretty nice but I just Wanted to show you that this is possible But maybe it doesn't really go with this Site so now I'm going to go back to Style and background and I'm just going To go to I'm just going to choose our Kind of beige background color and then I'm going to get rid of that background Overlay just by clicking on it and then Clicking on clear and then of course you Need to adjust the text as well So I did promise you I was going to show You how to actually create a new section Completely from scratch because there Will be times when you have content that You're just maybe not finding the right Content block that's going to serve it Right so it's really handy to know how To make something completely starting From nothing so I want to add in a Little section between our hero and our Our vision section so I'm just going to Go between them and click the plus icon And this time we're not selecting the Folder we're selecting the plus icon now Here's where you get to choose how many Columns you want don't worry you're not Locked into it you can always add more Columns delete them change the the
Sizing of them everything goes here so I'm going to start with two columns so Here is what we're dealing with it's Really small because there's nothing in It so we're just going to go up to Widgets and I'm going to grab a heading Drag that into place followed by a and Then a text editor and then let's do Something different Let's do an icon Where is it I'm just going to type in Icon list so I'm just going to drag that Right on over so I'm going to start just For my own sanity so because I hate Looking at stuff that's like super tight Like this so I'm going to make sure We've chosen the section I'm going to go To Advanced and then padding I'm going To do this percentage and I'm going to Um just do 10. all the way around and That already makes me feel better so now I'm we're going to just change our Headline Maybe we want to make that a bit smaller I'm going to go to style typography you Know can make it whatever we want it to Be fix the spelling here there we go It's better and one thing we can do I Haven't showed you this yet but with Columns you can basically drag it around To make the First Column really big or The second column really big whatever Works best for you and then I'm going to Put in our text over here choose that Text block
And just paste it like so then for our Button I'm going to change the text on It From click here to Contact us and then I'm actually going To go down to where we have the other Button I'm going to right click copy Then right click paste Style just to Make it easy and I'm probably going to Put that back on left Justified now We've got our list items so let's say You want to talk about three different Benefits that people can expect when They work with you I'm just going to Click on each one and you would put it Right here you know You know the name of benefit one then we Can choose our icon here right now it's Just a check mark but maybe we want to Talk about I'm going to match our icons We had on our home page remember I used Um font awesome regular I just think These look a little more modern than the Super blocky ones I'll choose a clock Here maybe we're talking about how fast Our service is then I would do the same For list item two and three just choose The right icons here maybe a map And then maybe a light bulb And of course there's a lot we can do Here it's really hard to read and the Icons aren't very big so you guessed it We're going up to style and let's start With the icons so let's change the color
Of those We've got this kind of Subdued green and we'll make them a Little bit bigger now they're all mashed Together so I'm going to go up to list And then space between is how we control That now let's go back down to text and Let's make our text color a whole lot Easier to read so I'm going to choose Our primary color and maybe we want Those to be bold so I'm just going to go Down to typography and obviously we can Change the size of it but I think that's Fine let's go to Let's choose medium Yeah that looks pretty good to me Take a look at what this looks like I Think I've got a nitpick I would like This all to be slightly less wide of a Section and I would want all this Content to be vertically centered so Let's go ahead and Tackle both of those Things choose the section go up to Layout and the width I'm going to kind Of Drag it to where it looks good to me Something about there and then go down To Vertical align middle okay so to me This is looking pretty good the page is Shaping up but of course before we're Done we have to make sure it looks good On mobile right so remember how to do That we just go down to the bottom to Responsive mode then we click on our Mobile device here and we just start
Doing a reality check to make sure Everything looks good from top to bottom So to me this looks pretty good but Remember let's say we wanted to actually Uh Swap this image and put it on top Remember how to do that we just choose The entire section go to Advanced Responsive and then reverse columns on Mobile cool looks pretty good now I'm Actually surprised this section looks Fairly decent to begin with because we Made it from scratch that's one really Big drawback from creating a section From scratch is you're generally going To have more to do to make to make it Look good on mobile but in this case it Looks pretty decent I think so I'll keep Going now this looks pretty good I might Have a nitpick I might want to make These two things slightly further apart So I mean I would just probably choose This column then go to Advanced and then Give it a bit of a margin on the bottom So I'm going to unlink the values and Let's go to percentage and let's just Kind of kick it up a little bit like That looking good so we have our team Yeah this is looking pretty nice now we Definitely need more space more padding In this section and I'm going to be Really honest with you I am not sure What these Diagonal lines are doing I think it Might be kind of a bug that's happening
Because Um It's definitely visible when we collapse All this so I'm going to chalk that up To just a temporary bug so I'm going to Go ahead and click the section and then Advanced and then let's go and do let's Make sure it's on percentage I'm going To do 10 On top and bottom And then five on the sides and to me That looks pretty nice I think we are Ready obviously then you would go back To tablet you would uh you would do the Same thing there but I'm going to click On update And then preview changes so that we can Move on to our next page which is Services So this is a preview of what that looks Like maybe you have a need for a page Like this maybe you don't if you don't You would either choose to work with it And do modifications and rename it or You can create a new page from scratch Which I will show you how to do later But for now let's just keep modifying This so you really get the hang of all The different processes so the first Thing we'll do is go up to edit with Elementor so obviously we can just start By changing the name of this if you want To change it to something different
You can change this text but for me I Think it's a little unnecessary to have So I might just right click delete and Right click delete on this little Divider line as well and let's say you Want this to match what we have going on The top of our home page and our about Page which let me get back to uh Kind of the desktop view which has this Kind of uh dark text on it so let's say We want to carry that over we can choose The whole section go up to style and Then give it the background color that Will match Of course then we have to change the the Color of the text so choose it style White and let's say now that this is Just way too much vertical space going On here which I happen to think it is so I'm going to go to Advanced and I can See that there's actually no margins or Padding going on so I think I know what It is let's go to layout yep it's got a Minimum height going on so basically They've specified that this needs to be At least 500 pixels tall I don't think We need that so I'm going to do Something more like this I think that Looks a lot more appropriate to me let's Just even it off at 250. because I'm a Little OCD that way and from here you Would just start adding in your Different services so they have space For uh for four of them if you had five
You would right click duplicate Or if you had three you would just X Out Of the fourth one right but I'm going to Go ahead and do a command Z to get it Back And you just click in each one of these Change the name of the service And you just click into each one of These Change it to the name of the service Right here you would do a little Description of it you could add Bolding Which I think always helps it's very Subtle Bolding here with this particular Font but it really does help direct People's eyes to where you want them to Go especially when there's a lot of text Going on people tend to skim websites Rather than read them so that's why I'm A big fan of Bolding and italicizing and Stuff but anyway we've got another case Of a background image here this is not a Image widget it's a background image so I'm going to go ahead and choose the Column go to style and then choose image And then here's where we would select The image to represent that service and Then let's say we actually wanted to Have a button right to get people Started so all we would need to do is uh We could go to the widgets and then drag A button over and then style it but We've already got our styling going so I'm going to delete that and I'm going
To go back to our home page I will just Right click click copy and then go back To our services page and right click Paste and then I would just do the and Then you would want to set the link for It right here make sure it's going to Your contact us page or wherever you Would want it to go and I'm going to go Ahead and do the same thing with the Rest of these sections with the images And the button And then going down to this section I'm Going to give it a little bit more Padding again go up to Advanced make Sure it's on percentage and I'm just Going to do 10 all the way around and Then under style go to classic and give It our beige background and then I will Delete This button and paste the one we already Have and then just make sure it's Centered again Cool so looking through it looks pretty Good now we just of course just need to Do our homework and make sure that it Looks good on mobile so we'll go back Down to responsive mode we'll choose Mobile And go bit by bit just to make sure I Think this looks pretty good Everything's looking nice Except for this part where we want to Give it a little bit more padding for Mobile so I'm going to make sure the
Section is selected Advanced and 10 on Top And 10 on bottom okay so now we'll click On update and preview changes so now our Next page here that they gave us is Called Gallery so let's go ahead and Click on that now maybe you have a need For a gallery maybe you don't so I'm Going to quickly show you how the Gallery Works in case you need that and Then we're going to actually change this To a different kind of page so we're Just going to go up to edit with Elementor and first things first let's Make sure this matches what we have on Our other page so I'm going to go ahead And delete this divider line And it will delete this little text here But if you if you wanted it you know you Know how to click on it and change it Over here so we're good to go there Delete and then I will choose the Section and I'll Make it match so background type I'll Choose our blue color then I'll choose Our text and make it white I hope you're Really starting to get how all the all These processes go now so make sure We've got the section shows in and then Under layout minimum height let's just Go ahead and match what we had which I Believe was 250 okay so now we have a Gallery widget so if we click on it we Can see what they call a basic Gallery
So it just allows you to upload a bunch Of images and then when you click on Them they open up into a light box like This so if you wanted to use something Like that let's just click on it And click on edit and then I'm just Going to delete all of these all the Placeholders then you just click on you Can either select files which would let You bring all these up like so or I'm Going to click on add to gallery and I'm Just going to choose you know these ones Like this add to gallery and then insert Gallery now we have all of them up and We can change it to you know three Columns whatever you like and I'm Actually I would give this probably a Little bit more space on top so let's Edit the section and go up to Advanced And let's give this padding all the way Around I'm going to do let's do 10 all The way around I know make sure it's on Percentage to be consistent something Like that looks better to me okay cool So but let's say we don't need a gallery Right we that doesn't serve our content So I'm just going to go ahead I'm just Going to right click delete so let's say We wanted to actually make this a Pricing page so I would just change the Name of it first Something like packages and pricing and Then I'm actually going to get rid of This whole section just to start off
Nice and clean so I'm going to x out of That so let's go ahead and add a brand New section I'm going to click on right Here on the plus add section and we're Going to do this from scratch so I'm Just going to click on add new section I'm going to choose a three column Layout so let's say it's the kind of Thing where we have a good better best Pricing model now going up to widgets I Could drag in a heading here but I'm Actually going to do something a little Bit different I'm just going to show you A different widget we have here I'm Going to drag a divider right to the top And dividers can be as simple as just a Horizontal line or you can put an icon In the middle of it or what we're going To do here is we're going to put text in It so I'm just going to use this to uh The text I'm going to type in silver so This is our silver package and obviously We need to give a little bit of love Here so we can actually read it we'll Get to that in a second then go back to Widgets I'm going to drag over an icon List remember we've worked with that Already then I'm just going to drag in a Simple heading so that will be our price So now it's our job to actually make This look good so first of all I'm going To click our divider here and go up to Style and we can change the color of the Line which I might do I might make that
A little lighter and then for the text I'm going to make that darker so I'm Going to choose our primary color there We could obviously change the size of it We could change the weight of it all That stuff we already know how to do it Then I'm going to go to our icon list And make sure we have a Content selected Here and here's where we would put in Our different items so these would Basically be if it's a pricing page like The inclusions that people would get for This package so I'll click into it and I Think having it I think having just Check marks is a really good way to Handle this so I'll keep that as a check Mark and one really easy thing to do Here I could go through all three of These and change the icon but it Actually is easier than that I'm just Going to click X next to these other two And then I'm just going to copy it so Then we're starting from the same thing Now I'm going to go up to style and I'm Going to choose the icon and we'll Change the color to our green color We've been using and under text I'm Going to change that to our primary Color so it's a lot easier to read it Then for our header this is going to be Our price so I'm going to input the Price tag here and I'll go to style I'll Change the color and I'll change the Size as well because it's a little big
And in your face okay so what I want to Do here though for this column is I Actually want to give it some padding All the way around it so I'm going to Choose the column Advanced padding and Then let's make sure percentage is Checked let's see what 10 percent looks Like looks pretty good to me so since we Have all of these Styles already Selected I'm actually going to delete Both these columns Delete Delete then for this one I'm going to Right click duplicate and one more time That way we keep all of our padding and Stuff intact the way it was and then I Would just go over here I would change This to gold and I would change this to Platinum I guess and then you'd Obviously go through and you would Change the different inclusions you get And you would change the prices and Let's say we wanted these to be white Three white boxes on a really light gray Background I'm going to choose the whole Section go to style background type and Then color I'm just going to choose that Same really light Blue that we've been working with so That takes care of the whole background But remember we want these to be white Boxes but remember we want these columns To be white boxes so I'm going to choose The First Column I'm going to go to
Style background type and I'm going to Choose white and then I'll right click Copy right click paste style and one More time but you'll see this hasn't Really accomplished what we wanted it to Accomplish right so there's a few things We need to do here stick with me I'm Going to choose the co the whole section Go to Advanced and then padding let's do Let's make sure it's percent Let's do 10 all the way around then we Need to add a little bit of buffer Between each of these so I'm going to Choose column one Advanced so what I Need to do now I've already given it Padding on the inside now I need to give It a little bit of margin on these Outsides so I'm going to make that Really small let's just see what it Looks like when we do percent let's say 2 that looks pretty good so I'm just Going to now go ahead and right click Copy then paste style and one more time Looking pretty good right so now what if We wanted to add another little section Just kind of explaining how pricing Works you may have a need for a Different section so I'm going to click On the plus icon here now let's just Make it easier on ourselves and see if There's an actual block a pre-made block That we can use so I'll click on ADD Template Blocks then I'm probably going to look
For like a simple about section Something like a layout a layout like This looks pretty good and remember when We're looking for blocks Obviously you're going to be changing The images the colors probably the fonts All you're really looking for here is The correct layout that's going to be Closest for you so I'm going to choose This one and then click on insert From there if we just change the text Over here to something more like Then we would change this text right now I'm just going to change the style of it Because it's a for some reason they love This medium gray that I think is pretty Hard to read and then we would just Choose this Um this image widget this is not a Background it's an actual widget so We're going to click on choose image and I'll click on that one right here looks Pretty good and then we have this Section that we've had all along but I'm Going to show you another way to do this Like let's say you have a section like This that carries over from page to page Rather than Reinventing the wheel each Time I'm just going to get rid of it I'm Going to go back to Um Yeah so it's on all of our other Pages I'm just going to find it right click Copy
And then let's go back here and I'm Going to right click paste Now we've got the whole thing and the Benefit there is it's already good to go For mobile because we've already fixed It right so speaking of that let's make Sure it looks good on mobile I'm going To click on responsive mode and this Time I might click on tablet just for Fun to see what it looks like there Um Yeah it looks pretty good to me I think Maybe there's slightly too much space Here so let's go ahead and choose this Uh section go up to Advanced okay so I Think it's it's a problem of this Section having too much margin Underneath it I think So click there again these are just Things you need to kind of troubleshoot Sometimes so let's give this top margin Zero let's see if that oh yeah that Fixed it okay cool so it's looking Pretty good and then you would do the Same thing for mobile then we'll click On update and we actually have a very Important thing to do here because Remember this section this page was Called Gallery just changing it here Does not change it up here so we Actually have to go into our menu and Fix it so what we're going to do is We're going to click on this little menu Icon exit
To go back out to WordPress Then we'll go over to pages And see we have Gallery here I'm just Going to click on quick edit and I'm Going to change this to Pricing and then we want to change the Slug as well so what the slug is is it's Basically you know your Brandeddomain.com slash pricing so if if This were still Gallery it would be your Brandeddomain.com gallery so that's why We need to change that and then we need To make sure that we click on update to Make to make it reflect Okay so we've Got one more really important page which Is contact us that's how people are Actually going to uh fill out a form to Get started with you but we can't go Right to the page what we need to do Here because we don't have Elementor Pro Which actually makes it really easy to Create forms inside of Elementor we have To do a workaround with the free version So when we're in here in the WordPress Dashboard we're just going to go over And we're going to find this plugin Called WP forms now that should have Uploaded as a plugin when you got Started with Bluehost if not if that's Not here you're just going to want to go Go to plugins add new and you would Search for WP forms right over here and It would be this one and you just click On install and then activate but we've
Already got it over here so I'm just Going to click on WP forms all forms and It looks like we don't have any Pre-built forms waiting for us so we're Just going to go down to this orange Create your form button Now they've got all these different kind Of templates to go with I recommend just Starting with simple contact forms so I'm going to click on use template and This gives us everything that we're Probably going to need in order for People just to fill out a form to Request a callback or request an email Back or something like that so as you Can see here this is just asking for the Bare minimum information for you to be Able to email them back but you can Always add more stuff to it so let's say You wanted to have a phone number field Now there is a what they call a fancy Field down here that's specifically four Phone numbers but I think that is not Available with the free version so what You'd have to do instead is kind of a Work around and just bring a single line Text over to where you would want that To be And then just click on it and then type For the label Phone or your phone number or something Like that and if you want to make it Required you just click on that option Right here and if you wanted to change
Something about this like where it says Comments or message that's a little Impersonal so maybe something like What can we help you with or is there Anything we should know so that's the Basic form there's one more really Important step we need to do though Which is actually to confirm the Settings which is how it's actually Going to email from your website to your Email address because if it just if People just fill it out and it doesn't Go anywhere that's obviously not very uh Effective right so just go to settings And then notifications so if it says Admin email right here that should be Whatever email address that you signed Up that should be whatever email address You used when you signed up with Bluehost if you want to override that For some reason you can do that right Here just type in your email address and Then when someone fills out the form That's the email address it's going to Send to you can change this so that Whatever it looks like in your inbox so That you know it's coming from the Website something like that maybe and Then from name so this would be you'd Want to put in your name here And then just make sure this email Matches this one and you're good to go And see we have field ID one so just Remember that you don't really have to
Write it down just remember the number Here just so we can check it later and Then go up and click on Save cool so and Then exit out of here now we're done Creating the form now we get to actually Put it on our contact page so we're Going to go to Pages all pages then Under contact us edit with Elementor so This is what this particular contact Page looks like I feel like it's a Little busy Um really there's one thing you want People to do here which is to fill out Your form right so what I might do is I'll change this layout to just be a Form up here and then down here is where We'd we would have your address and your Phone number and all that good stuff in Case they wanted to get in touch with You a different way so the first thing I'm going to do is I'm going to delete This column we don't need an image over Here that's just going to compete with People filling out the form so I'm going To do a right click delete then I'm Going to clear the way here I'm going to Get rid of all of these items but I'm Just going to put them down here so Let's say you wanted to keep your Address right here you would just click On it and you just edit it right over Here But then I'm going to take all of these Other elements one by one I'm just going
To I'm just going to hold and drag them To the to the right spot right Underneath the address so business hours I'm just going to do this one at a time Okay so now we have our address our Business hours and our phone number I might actually put that above like This and I might choose to have a few More dividing lines so maybe I'll just Do a right click copy and then right Click paste and then maybe one more time Here and let's see what that looks like Pretty good and then obviously you just Click on each one of these and just edit Them over here and I'm probably going to Do something else here I'm going to Delete This that email address because people Should really be filling out the form That we're going to provide them with Above and oh one last thing so if you Want to change your if you want to keep This map you're just going to click on The little edit symbol and then right Here you're going to put in your address And that should populate right here okay But now let's go ahead and I'm going to Get rid of these extra things these are Just additional instances of the address Which we don't need so I'm going to Delete So now the stage is clear for us to Actually put in our forms so we're just Going to go down and find the wp forms
Widget and we're going to drag it right Where we want that to go and then it's Going to ask us to select the form and We only have one simple contact form and There it is pretty simple right but I'm Not super happy with how wide this is Let me go ahead and collapse this you Can see how it basically just goes on And on over there so I'm going to make This whole section Um kind of uh boxed in so I'm just going To click the section under layout Content width I'm going to do boxed And then there we can obviously kind of Make it whatever width we want it to be I think something like this feels pretty Comfortable so let's go ahead and check It out so if your contact form we have The rest of our contact info oh and then We have this so it's a contact us button Um which leads back to this page so I Say we don't even need this I'm going to Click the X it's probably the one page Where we do not need that panel and now I'm just going to click on update but Then of course we need to go to Responsive mode and just make sure that It all looks good on mobile I think it does look pretty nice okay so I'm going to exit out of here and go Over to exit because we have to do I'm Going to show you one more thing before I can really wrap this up you need to Know how to create any new page that you
Ever want to in the future because Obviously it comes with you know the Standard three or four pages but what if You need to add something different well The way you'll do it is you'll start Within the WordPress dashboard then just Go to Pages add new And then you would add the title here Maybe Testimonials and then edit with Elementor so here we have a blank page But you'll notice this one actually has The title of it right up here we don't Really want that so we're going to go Down to where it says settings this Little gear icon at the very bottom left And under page layout we're going to Choose Elementor full width and that Leaves us with just the uh the top Navigation and a completely blank page Other than that then what I would do is I would probably just steal from my Other pages to get the header set up as Well as any other content blocks that we Would want to modify so I'm just going To go to our services page I'm going to Do I'm going to choose this top section Right click copy then over here I'm Going to do a right click paste and then I would just change this text And then you can start adding stuff down Here we already know all the different Ways to add new sections we can either Use a block or we can create it from
Scratch and then once you've created Your entire page you just click on Publish but what the heck should go on Your website in the first place well if You're a service business of any kind I've got something really special for You it's my free Master Class where I'll Share the ultimate plan to flawlessly Create and launch a website that's going To be easily worth at least ten thousand Dollars to your business and it's proven To automatically attract and convert two To three times more of today's casual Visitors into tomorrow's paying clients Every day on autopilot so click right Here to save your seat it's truly the Missing piece that'll fill in all the Gaps for you so click right here and I'll tell you everything
Useful Internet Marketing Tips For Any Business
As you gain more experience in the realm of internet marketing, you will find out that the methods and techniques used by the experts aren’t that complicated at all. With articles like these, containing good information and tips on how to succeed, you can formulate a plan and experience true success via internet marketing.
To get more exposure, you should record a video of you demonstrating the product. You can even create a user’s guide to help out people who own the product, and to show the possibilities to potential customers. Post this video on your own website and on popular video hosting sites as well. Do not forget to tag your video with the right key words.
To learn more techniques, you should pretend to be a customer and see what other sellers and marketers are doing in the niche you are interested in. Subscribe to other email lists, and analyze what attracts you and what makes you not want to buy the product. Adapt these techniques to your product.
While using Twitter during an internet marketing campaign, do not use your company logo or a gimmicky avatar. Stay away from cartoon avatars as well. Try changing the avatar to a picture of a human being, that human can be yourself or someone else in your company. This may increase your chances of getting more followers.
Time spent in internet marketing is best when your product and services are backed up by a creative and up-to-date website. Keeping your content current is essential, even though the product and services may change very little. Make sure you spend time searching for new and current information on the international and local markets. Keep your website current!
Marketing isn’t going to be everyone’s cup of tea, obviously, but the good news is that you can market just like the experts once you learn the ropes. Use these tips to guide you along your path and you may just find that a successful business is much more obtainable than you once thought.
