How to Create a WordPress Website with Elementor | (Best Elementor Tutorial 2022) Video Tutorial DreamHost

How to Create a WordPress Website with Elementor | (Best Elementor Tutorial 2022)

Tutorial Hosting
In this video I’m going to show you how you can make your very own professional website like the one you’re seeing now this website is Sleek and modern and fully customizable to be any type of website you may want we’re going to be using a free drag and drop page builder

Called Elementor that’s super easy to use to design the website of your dreams and all you have to do is follow along add your own images change your colors and text and you’ll have a live website up and running by the end of this video

Now some of you may have seen my 10 minute versus one hour web design challenge video If you haven’t seen it I’ll leave a link down in the description I’ve been getting a lot of requests to make a full tutorial for the final one hour site so that’s what I’ll

Be showing you today I’m going to cover everything for you step by step but feel free to get creative and make any changes as you see fit this is your website here now if you’re ready to get started let’s jump right into step number one which is to get a custom

Domain name and web hosting for your website now a domain name is just the address to your website it’s what people will enter into the search bar to find your site so something like yourwebsite.com and and web hosting is just renting space on a server somewhere that’s connected to the internet so that

You can store all of your media and files on the site now there are web hosting companies that have buildings full of these servers and they also offer you 24 7 support in case anything happens to your website so if you want to own your own website and then have a

Custom domain name for it then you have to purchase your own web hosting which I’m going to show you how to do in this tutorial and I’m also going to give you a massive discount on it yes you can get a free website but it does come with a

Lot of limitations like you won’t own your very own domain name it’ll be something like your website.wix.com or squarespace.com or whoever’s hosting the website it could even be just a random string of numbers and letters that you don’t actually get to choose you also can’t upload new themes in order to

Customize your site exactly the way you want you can’t upload plugins to increase the functionality of your website you can’t monetize your website with ads in order to make money from it and your website could be deleted at any time because you don’t technically own it so for these reasons I recommend web

Hosting because it places you in control so in order to get your very own custom domain name and web hosting just click on the first link down in the description or you can go to creativepro website.com hostinger and it’ll take you to a page that looks like this so from

Here you scroll on down and you’re going to see the three plans that we have before us we’ve got the single the premium and the business plan now I’m going to be choosing the premium shared hosting plan because not only are you getting 76 off of your plan when you

Scroll on down you’re going to get a hundred websites under the same account so that’s pretty sweet you get free emails unlimited free SSL a free domain name as well which we’re gonna have to purchase anyways so if it’s included in the hosting plan that’s pretty cool and

All of this is for 299 a month but with 76 off that’s a pretty good price so I’m going to be selecting this one right here and then it’s going to ask you to select your term and so you can go for one month and that means you only pay uh

Once a month or you pay every 12 months 24 months 48 months as you can see I’m going to choose 12 months that way my domain registration which is for one year matches my hosting plan which is for one year so I basically just have them both having payments at the same time

So the 12 month is what I recommend right here and as you can see you’re saving 114 dollars but you guys are going to see it down here as well you’ll notice you’re getting your premium shared hosting plus a domain name so everything you have to get and it’s

Going to be 32.29 we’re taking off a hundred and Seventeen dollars so just make sure of course that the coupon code says create a pro website that’s what’s giving you that massive discount that I was talking about at the intro so anyways we’re going to select that 12

Months and scroll on down and we’ve got the select payment function here and you’ll notice that they can take pretty much everything you got credit card PayPal Google pay and whatever else you need so I’m going to go ahead and fill all of this out and then click on secure

My payments so I’ll see you guys in a second all right and so after we complete our payment for the hosting plan it’s going to take you through this little intro and so you’ll click on start now it’s going to ask you some questions I’m just

Going to skip it and continue on so now it’s going to ask if we want to migrate or create a new site and so I’m going to say I want to build a new site from scratch unless you already have a website built somewhere else and you’re

Trying to migrate it then that’s where you would go but we’re building one from scratch today so I’m going to click on select and then it’s going to ask to choose a CMS platform a Content management system right here and so I’m going to be using WordPress which is the largest free most

Trusted CMS system out there for building websites today tons of huge companies use it so that’s what we’re using all right and now we get to create our WordPress account and so I’m going to be using an email and then I can also create a password right here and I’m

Going to click on continue now it’s going to ask if I want to download a free template for my website but I’m going to be showing you guys how to do this in a later step as well for free so we’re just going to skip it here

Because it’s not showing here so I’ll say skip I don’t need a template and now we get to choose the name of our website which is getting our own domain name as you can see and now if you chose the premium hosting plan which comes

With a free domain name which is one of the biggest reasons why I like the premium shared hosting plan then you’ll have this little option right here that says claim the free domain name right here and you can see that it says free if you didn’t do the shared or the

Premium hosting plan and you only went with the cheaper one then you would probably have to only click on biodomain so claim a free domain right here I’m going to click on select and then from here we can search whatever we want and then when we click on search we’ll see

If it’s going to be available now right now it’s searching that with a dot in but instead I’m going to change it and I can select the drop down I’m going to choose a.com it’s the one that I recommend because it’s the most common that people look for as well as the most

Professional looking so I’m going to stick to a.com and I would recommend you do the same and then from here we can try anything so I’m going to try let’s try Levi’s construction tutorial because I’m making a construction website and so we’ll see if Levi’s construction tutorial is a available with a.com right

There and we’ll hit search perfect and when you see this domain is available you know you’re good to go so we can click on continue from here it’s going to ask you to click on finish setup here so I’m going to say yes all right and after everything is done

Loading it looks like we’re ready and everything’s been installed to The Domain so now it’s time to start editing our website and in order to edit our website we have to move on to step number two which is to go to the WordPress dashboard now go into the WordPress dashboard is really

Easy to do all you have to do is click on this button right here edit website and it’s going to take us from hostinger over to our website so it’s going to redirect us so I’m going to open it up and it’ll open us on a new tab all right

And just like that we’re in our WordPress dashboard so we’re good to go but there’s one last thing that we have to do you’ll notice up here in the top left corner it says not secure and that’s because we haven’t installed our free SSL security yet and the SSL

Certificate is just the encryption for your website that’s what’s going to change this not secure icon to a lock symbol so let’s do that really quickly really easy to do we’re going to go back to the tab that it just redirected us from so we’re back on hostinger and

Instead of clicking on edit website we’re going to go over here to manage site and so I’m going to click on it and it’s going to open another tab and all we have to do is click on dashboard right here and you’ll see SSL certificate right down here all we have

To do is click on install and make sure that it’s going to the correct domain name that we just purchased and then click on install SSL that’s it easy peasy lemon squeezy as you can see your SSL is being installed for leviacin or leviconstructiontutorial.com so we’re

Good to go so it’s installing in the background that’s all we have to do so I’m going to close out of this tab go back to our WordPress dashboard so I’m going to go ahead and refresh this WordPress page and as you can see now

It’s going to lock us out of our website and also now we’ve got some encryption so now you can see Levi Hagen connection is secure for Levi construction tutorial so that’s how you install your SSL certificate we’re going to go back here and type in the same password that we

Created when we were downloading WordPress when we created our WordPress account and now we’re back logged into our WordPress dashboard all right so now that we’re in our WordPress dashboard we can go ahead and move on to step number three which is to download starter templates and so we’re going to go over

To the plugins tab right over here and then click on add new right here but I’m going to open it up on a new tab and now this is basically the app store for your website every time you install a plugin it’s like an app on your phone and it

Allows your phone to do more things so same thing with your website we’re going to search for an app or a plugin called starter templates right here and you’ll see right here starter templates for Elementor and this is what we’re using so I’m going to click on install now and activate

Okay so now that we’ve installed and activated it it’s going to take us to the plugins page right here as you can see in the top left corner and it’s basically a list of all of the plugins that we have on our website and you’ll see all the way down here starter

Templates is one of them and so I’m going to click on C library right here now if it didn’t take you to this plugins page there’s multiple ways of getting here the first is just click on plugins and then you’ll be on the same

Page as me or if you ever want to get to starter templates but you don’t have to open up the plugins page every time you can go over to the appearance tab right here and click on starter templates right there so starter templates or you click on C

Library it’s the exact same thing so I just wanted to show you guys that so now I’m going to click on it and open it all right and then I’m going to click on build my website now and now it’s going to ask which page builder we’re going to use and we’re

Automatically going to be using Elementor and it’s automatically going to download Elementor when we create this template so you guys don’t have to do any work or anything like that all we have to do is pick a website that we think looks really cool and download it

That’s it so I’m going to choose Elementor and as you can see this is the part where I wanted to mention that you can basically create any type of website you want with this video so I’m teaching you how to make a construction website because that’s just the example that I

Chose today but as you can see you can make these e-commerce stores if you want to for clothing for shoes for jewelry or or coffee it looks like and then there’s a pizza website over here if you go up to the top you’ll see all the different

Categories that they have and so under business they’ve got agency restaurant hotel construction which hey we’re going to do a construction website but all of these are different websites that they have pre-made that you can use as a template and then you’ve got local businesses so you could you know you

Could be a plumber or an AC technician Roofing Services whatever kind of site you need they’re probably we going to have it here so you can take your time looking through all of these if you want to or you can just search for what you

Want so if we want to have like a plumber website you’ll see that I can search for plumber and here we are I’ve got a bunch of Plumbing websites that I can choose from so I’m going to go ahead and click on the x button here and search for one specifically

So I’m going to be using this one the Sierra natural park because it’s a really easy website for us to manipulate that being said you’ll notice that this is not a construction website and that just goes to show that you can actually pick whatever website you want on here

And you can make it into something completely different and so that’s what we’re going to do today I’m going to be choosing the Sierra nature right here and so when you click on it it’s going to give you a preview over here on the

Right hand side so I get to look at the entire website and you can scroll through it so this is what the website looks like it’s pretty sweet and it’s interactable so I can actually click on the about page and it’s going to take me over to

The about page just like this so it’s like a real website over here over here on the left hand side we’ve got the logo where we can upload our own logo if we want to later on in the video I’m going to show you guys how you can

Make your own logo for free so we’re going to skip and continue right here and it’s also going to ask if I want to change the colors but I actually kind of like this red color and so you can scroll through the site and see that if

I change it to maybe blue just like this you’ll see that now it’s a blue color all the way throughout the website there’s the blue again and there’s the blue again now the cool thing about this is if you don’t like the color that you chose we can change

This at any time and I’m going to show you guys how to do that later I’m going to stick to the default colors which is this red and black and white kind of color scheme and I really like it you can also change the fonts if you want to

So you can choose some of these and you’ll notice that the font starts changing right here so that’s pretty cool and I’m just going to use the default setting for the font so from here I’m going to click on continue and one last step right here they’re

Going to ask for a little bit about yourself as well as the settings you don’t have to fill any of this out I never do we’re going to go down to Advanced options right here and you’ll see that they’re installing all of the important content on their own so this

Is the content that comes with the website all the colors the widgets the settings everything is downloaded here it’s perfect the only thing I do is I just uncheck this box share nonsensitive data if you want to have that checked you totally can but it’s just a

Preference I don’t so now I’m going to click on submit and build my website and we’re going to give it a minute it’s going to load and download everything and I’m going to have a fully functioning website template at my fingertips we’ll customize it in a

Little bit I’ll see you guys in a minute all right guys check it out it says congratulations our site’s been downloaded and we’re ready to go you can click on view your site right here and it’s going to open it up on a new tab so

We can see exactly what we just did here we are you’ll notice in the top left corner my domain name is apparent and so it’s leviconstructiontutorial.com if someone were to type this into the search bar right now this is what they’re going to see so we downloaded that website so we

Can scroll through it it’s the exact same thing you can see all the images downloaded all of the text everything we’ve got multiple pages so if I go to the about page I’ve got an about page ready to go so it makes it so much easier than

Trying to set all this up yourself Services page product take action all of it so I’m gonna go back to the home page okay so now that we have our website downloaded there’s one more thing that we’re going to do we’re going to download just a few more plugins before

We move on to editing the actual website I’m going to go ahead and close out of this tab and I can even close out on my starter templates Tab and go back to the dashboard right here all right so now that we’re back on the WordPress

Dashboard we can go ahead and move on to step number four which is to install plugins and I know what you’re thinking Levi didn’t we just install a plug-in why didn’t we install all the others well because I wanted to show you how to use that one plugin because that’s the main

Plugin the rest of these are just add-ons and so that’s what we’re going to do next we’re going to get this out of the way we’ll go over here to the left hand side and hover over plugins right here and again we’re going to click on add new but again I always like

Opening it up on a new tab reason being whenever I am messing around with these settings over here I can just jump right back to the dashboard whenever I want okay so now I have my plugins tab open and I’m ready to search so we’re going to search for three other plugins well

Actually two of them because one of them we’re actually going to go to a website for so the first one is called preloader plus so we’ll go to the search bar and search preloader Plus all right and this is the one right here plural Plus for WordPress we’re going to

Click on install now and then click on activate all right and so as you can see it’s going to drag us back to the plugins page right here so I’m going to go up here to the top left corner and click on add new again I’m going to search for

One more and that’s called smash balloon Instagram social feed or you can just search Instagram all right right here you’ll see the first option smash balloon social photo feed so I was wrong but you’ll see right here formally Instagram feed so I was kind of right

So this is the one we’re going to install we’ll click on install now and then activate all right so now that we’re done installing all of the plugins we can move on to step number five which is to customize your site so this is the fun

Part this is where we get to make our site look really cool so you can do it from here but I always go back to my dashboard every time I’m doing something new so it’s completely up to you from the dashboard or the plugins page wherever you are you can go

Up here to the top left corner whenever you want to view your site and so you can either click on the name or click on visit site it does the exact same thing I don’t know why there’s two of them so we’re going to right click on it and say

Open on a new tab so we’re going to click over here and view the site as you can see you already see the preloader that just happened there was a little loading bar as well as that bar on the top as well and so if I were to refresh

The page you’re going to see it again in just a second there it is so that is what the preloader plugin does and we’re going to be editing that a little bit later on first we’re just going to stick to the actual basics of the website so

Let’s do that first in order to change around the pictures the colors the text and everything we’re going to be using a page builder called Elementor it’s the best page builder out there in my opinion it’s completely free it provides so much customization capability it’s just incredible I can’t stop singing its

Phrases we’re going to go over here to the left right over here on top and this ribbon right here you’re going to see edit with Elementor this is what we’re going to be clicking on so let’s go ahead and open it up right now and we’re inside of Elementor right now first I’m

Going to close out of this Navigator because I don’t really need it and then we’re going to start editing the zero section now let me go ahead and explain how Elementor works so you’ll notice as I’m hovering over things all these boxes pop up if I move my mouse outside of the

Website you’ll notice how this blue square goes all the way around the edges do you see this all the way around it’s almost like it’s saying that hey the background is what you’re editing right now and so the section is this blue square out here now inside of a section

You can have multiple columns and a column is the gray dotted box right here and then inside of a column is where you have your widgets now the difference is between the two are columns get separated horizontally and widgets are separated vertically so if you want to have text side by side or

Two buttons side by side then you have to have a second column so let me just show you an example and now as you can see I have a second column where I can put more vertical widgets does that make sense and then over here all of my

Widgets again only go down or up they’re vertical so the column is horizontal so if I remove this column and all I did was I just right click on this little gray square right here and then I can say delete that will remove a column so again we’ve

Got a section which is the background we’ve got columns which are the horizontal and then we’ve got widgets which are kind of the vertical so now that you understand kind of how Elementor works if we want to edit the background the way we would do that is

Edit the section right there’s two ways of doing that first you can just right click out here in the nothingness as long as the blue square is highlighted as you can see and you’ll say edit section right here and then you’ll notice right up here we’re editing the section

Or you can click on these six dots right here and if I hover over it you’ll see it says this is to edit the section right here this is to add a new section and this is to delete the section so if I scroll down I can take this and

Add a new section it’s just going to add a new one right above it so as you can see there’s it’s asking me to create a new one so now there’s another section right here or I can delete it just like that I can also right click

And then I can say duplicate and so now as you can see I’ve got two of these right here and I can delete so that’s how you can edit a section right so now over here on the left hand side we’ve got layout style and advanced we’re not really going to be touching

The advanced too much but we’ll change two settings in here that’s it the style tab is where you change things like colors background pictures font sizes typography you’re basically changing anything that’s stylistic about whatever you’re editing the layout tab which is also sometimes the content tab is where

You’re going to kind of edit the meat and potatoes of whatever widget you’re doing we’re going to go over to the style tab to change the background because that’s really all you need to know to make this yours right so let’s go over here to choose our image

And we can literally just click on the image and change the background now it’s going to ask you to upload files and you also have your media library which is on your website you’ve got a library where you can store images right and so these came with a template

I’m going to go over and upload some files and click on select files and then from here I’ve got to find my folder with my images here we go okay so I’m just going to go ahead and install all of these images all at the same time just by highlighting them all and

Clicking on open all right and then once all of my files have been uploaded to my media library you’ll see again I can go back and upload more if I want to or now inside my media library I’ve got all these images and so I can pick whichever

One I want to use and so I’m going to use this one just as an example we’ll click on insert media and just like that in just a few clicks now my own picture is in the background and so now that my own pictures in the

Background we can go ahead and edit all of this text as well so I’m actually going to right click on this heading text right here and I’m going to say duplicate because anything I click on is what I’m editing right so if I click on this button right here now I’m editing the

Button if I click on the text you’ll see I’m editing the text which is just a heading widget right and then anytime you want to change the text on your website it’s really really easy to do so you can literally type straight on the screen

Just like this as you can see I’m just typing right onto my screen or you can type over here you can click on this box and type as well and you’ll see that it pops up just the same so it really doesn’t matter but anytime you

Want to change text just click on it like this and then you can literally just start typing right on the screen so it makes it really easy to change your website so let’s click back into this widget because there’s nothing here and let’s go ahead and type something out

All right so Hagen company development and Contracting right I’m just using my last name just for an example so next I’m going to change this text right here and all I’m going to do is just uh delete it and type something else out and we’ll do the same thing right here

On this one notice I’m not caring whether or not I use capitals or not our mission okay so next thing I want to do is drag these and reorder them and it’s really easy to do so hover over whatever widget you want to drag around you click on this

Little blue pencil icon and you can literally drag the widget and wherever that blue line is is where it’s going to show up so if I put it down here it’s going to show up underneath the button right so I’m going to move this one in between these two

I’m going to move the original and creative thinking to the top and our mission to the bottom simple as that next what I’m going to do is actually edit the section so right click out here and say edit section I’ll go over to the layout tab

And remember how I said content with was boxed well I actually do want it full width and as you can see it just stretched it out so it’s no longer condensed to the middle it’s stretched to the sides next what I want to do is I’m going to click on my text widget

Right here and I can change the alignment to left just like this and just like that you can see that now my text is squished up against the side here I’m going to do the same thing for the next three so I’m going to click here

And change my alignment to left and I’ll click on this text as well change my alignment to the left okay so now all my text is on the side next I’m going to click on this one and I’ll make the changes to this and then I’ll copy

And paste the changes to this and it’s really easy so from here I’m going to go over to the style Tab and I’m going to edit my text my typography right here so I’m going to click on the pencil icon and this is where I can change things

Like the weight the style do I want it underlined or you know italic or uppercase which is actually what I’m going to do so we’ll click on transform and say uppercase and you’ll notice now that it doesn’t matter what I typed out even though those are all lower case it’s changing

It to uppercase and then if I click over here and start typing again it’s all going to be uppercase automatically so that’s pretty cool and then I’m going to italicize it so I’m going to go over to typography style italic and that’s it next what I’m going to do is right click

On the widget and say copy and then I’m just going to paste the same changes to this so instead of saying paste you want to make sure you say paste style because you’re pasting the style settings and then just like that it’s now uppercase and italicized just like that

Okay the last thing I’m going to do is actually touch the advanced tab okay remember I told you there’s only two settings we’re ever going to touch in there here’s the first one we’re going to go over here and edit the column remember the gray dotted line we’re

Going to edit the column and so you just kind of hover over it until you can get to this little square right here and then when you click on it we’re going to go to the advanced Tab and we’re going to add margins and padding and so

Basically I’m saying I want to add some padding on the left hand side so it’s not right up against the edge so let’s add some padding I’m going to unlink the values together because if they’re linked together they all go up at the same time and you’ll see that it’s compressing all

Corners at the same time right so what I’m going to do is unlink the values together and I only want the left hand side so let’s do the left hand side by let’s try a hundred I think that’s perfect yeah that’s a good enough amount of space right over there

Now I also want to add some on the right so let’s add some padding on the right because I want my text not to go that far I want it to stop probably right about here on the right side so let’s maybe give the right side let’s try 500.

Okay that’s actually pretty good now there’s 500 units let’s just say of padding over here on the right hand side I think that’s perfect I know it doesn’t look perfect yet but you guys are catching my drift let’s go ahead and move the button over as well I forgot to

Do that I’m going to click on the button and then I’ll go over to alignment right here and say left so now you’re you can kind of tell I’m putting everything to the left hand side if it’s not already obvious so I think the text looks good and Hagen company

Looks really good as well if you think this is too small you can click on it and go back to the typography right here under the style Tab and you can increase the size by dragging it like this and so you can make it whatever you want

So I might make it something like this size right here I think that looks pretty good and again I can right click and say copy and then I’ll just paste it right here but paste style and so now it’s a little bit bigger the last thing I’m going to

Do is add a widget and then edit the button so let’s do that to add another widget right now it’s already open on the widgets tab so I can pick whichever one I want but if I was editing something to go back to that we’ll click on the little Rubik’s Cube icon right

Here and it shows all of the widgets now these are all the widgets that you can enter into a website and you’ll notice I was already calling them by their titles right so this is a heading widget and so you’ll see right here heading widget

Right here so if I enter this one in right here and I drag it in you’ll see that I’m ready to start typing text right here you can barely see it because it’s dark text but you get the idea I’m going to right click and say delete and

Then I could add in an image if I want to by dragging it and we’re again wherever that blue line is is where it’s going to go and now there’s a picture right so now that you guys understand that you can just drag and drop whatever you want

In here let’s actually pick an icon list so I’m going to go up here and search for it an icon list right here and we’ll drag it and drop it right underneath our mission and let’s make a couple changes to it real quick you’ll see that we’re already

Editing it over here on the left hand side and it’s really really easy let’s change the color first so you can see what I’m doing because you can barely even see it it’s really dark so style tab we’ll go to the text and icon so first

The icon and let’s change it to White right just like that or we can select on This Global icon and this is the color palette for the website so let’s actually do this and we’ll click on number six which is white okay gonna do the same thing but for the text

Click on the little globe scroll on through and choose the white one right here so now you can see what I’m doing all right so we’ll go back to the content tab anytime you want to change the text you click on one of them so you

Can see list item number one list item number one right here so I’m going to click on it and then I can change the text right here quality service and then you can click on the icon right there and choose from their entire Library I’m going to choose this one all right

And then let’s edit the second one so I’m going to close that click on the second one and then I’m going to choose an icon as well for this one and then let’s edit the third one so you just click on it and all I’m doing to

Minimize it is click on it again and we’ll change the text here perfect I can also rearrange these by just dragging and dropping them on the left hand side so if I want to rearrange it like this now quality service is second so it’s really easy to do I can also

Duplicate by clicking on this and I can delete by clicking on this you can also add a new one if we want to and so now we’ve got a fourth one as you can see all right we can also go over to the style tab again and we can change the

Space between the two and so I can increase the space a little bit excuse me this is the space between each individual item but then we can also go over to Icon and oh it’s not under icon so it must be text yep here it is text

Indent and so that’s the space between the text and the icon and then we can also change the icon size as well pretty easy okay the last thing is the button we’re going to click on it under the style tab we’ll go over to the text color and

We’ll make sure that it’s by default it looks like it’s white so we don’t really have to make a change but I’m going to make sure that I solidify it’s going to be white and then the background color will leave as transparent just like this but by default it looks like it’s actually

Selecting this red color so if you want to make it transparent like I did in the one hour tutorial it’s really easy to do you’ll just have to force it to be transparent by choosing an actual color so as you can see I’m choosing the color right

We’ll choose a color and then just remove the transparency or add transparency just like this and then to have that border I literally just added a border type so solid and I chose the color as the primary theme color just like this and then I increase the width

And then also it looks like the Border radius I’m going to increase it to one and then remove it again and it resets it and so now it’s Square border radius is basically like how rounded do you want the edges and so again actually if I remember

Correctly my text color was the red so let’s change it to Red like this so that was the button right there all right so now I’m going to click on update to save my work because we’re pretty much done but there’s one last change that I need to show you guys and

That was the video background and it’s really really easy to do we’re going to go over here and right click in the section and say edit section we’re going to go back to the style Tab and remember how we placed an image here well we also

Can do a gradient of video or a slideshow and so I chose video and then all you have to do is get a YouTube link so let’s go ahead and go over here and search on YouTube all right and then I chose this one right here

And so let’s go ahead and mute that or pause it at least and then I’m just going to copy the hyperlink so control or command C and then I can control or command V right here and then it’s going to automatically play in the background just like this

And so that’s how I have that really cool video background on my website and then you can also choose a start time and an end time so I think I actually chose them on the website but I don’t remember what they were and so I’m just going to leave it like that

Okay so once you’re done making changes to your hero section let’s go ahead and reduce the size a little bit because it’s just really tall right now so in order to do that I’m actually just going to reduce the size of this icon if you click on it you’ll notice that it’s just

An icon and if you go to the advanced tab you’ll notice that it just has a ton of padding on top that’s all it is it’s the same thing how I added padding on the right and on the left over here they just put it on top with the template so

I’m just going to reduce that down to like and I’ll click on update to save my work okay so now that that’s done we can scroll on down and move to the about section now the about section was pretty easy I actually just downloaded a secondary template but from Elementor and not from

Starter templates and so to do that I went over here and clicked on the plus button right here to add a new section and instead of creating it from scratch I chose the this little template folder icon and then inside of Elementor they also have their own Elementor blocks so if

You click on blocks they have 404 blocks they have let’s let’s see an about section so this is the actual about section that I chose right there but they also have call to actions they’ve got contact sections so this is a bunch of contact forms so it’s

Not a whole website it’s just a part of a website but I’m going to go back to the about section and then actually select this one because that’s what I used in that other video so we’ll click on insert and then you have to connect your

Library so I’m going to say get started and you just have to create a free account with Elementor so I’m going to do that real quick all right and then after you connect your email and create that account it’s going to automatically download it onto your website and here

It is just the one right okay you can also remove the old one too because in the one hour video it’s like the 10 minute versus one hour video I actually just removed this one because I thought that this one looked better and then again it’s really easy you just

Click on the picture and there it is so you can change this picture to whatever you want and I think I used this one and then you can just click and type directly on the screen so you can change the text so about the company I think I

Left I think I typed something here all right and so that’s what I typed out and then I also clicked on it and actually edited it a little bit so I went to the style tab and I think I changed the text color to the black

And then I let’s see I think I went to typography and I increased the size for sure so something like this I increase the weight as well to something like 800 and then let’s actually reduce the size a little bit so it looks like a subtitle

And then lastly I went over to the advanced Tab and I just made sure that there was no padding underneath and so we can reset it by clicking on it and it looks like there isn’t so I think I’d probably reduce the margins so if I

Click on unlink the values and I go negative on the bottom you’ll see that it just drags it up a little bit that’s all I did and so that’s the about section that’s how I made this one come to life so next let’s move on to the

Services section we’ll go over here to the plus button this might take a second but I’m going to try and go a little fast now that you guys kind of understand how Elementor works I’m going to click on the plus button right here so you can choose how many columns there

Are so I chose this one and so now as you can see there’s five of them like this and the first thing I did was I edited the section with these six dots and I changed it to full width so now you see I’ve got all five of

These right the next thing I did was added some text to all four of them so I went over to the Rubik’s Cube icon and added some text with a heading text I went over to the blue pencil icon and then I click on the advanced tab

And I added padding on the top and bottom so let’s unlink the values together so on the top let’s add okay I think 300 looks about right and then I did the same thing on the bottom okay so that looks like about the correct height so I had 300 on top and

Three on the bottom and so then I have my heading text right here I went over to the column settings and then from here I went over to the style Tab and did the exact same thing as if I were going to add a background

Image on the section but I did it for the column so I go over here to background type classic chose an image and so let’s see I chose the crane for this one insert and then I went over to position and said Center Center so it focuses on the

Center of the image and the center of the image because you can see that it could be the top Center top left top right I chose the center of the image and then I also said that the size is cover which basically stretches the image to fit that uh Square as you can

See and then after that I typed out a heading here so let’s actually type one out here and then I went over to the style Tab and I changed the typography to be uppercase I changed the text color to be white and then I think I also just reduced to

The size a little bit because it was too big and see how it’s uh it’s kind of moving into the next line so I didn’t want it to do that so I reduced the size and also I forgot I need to make it centered so we’ll go to the content Tab

And Center it back to the style tab let’s choose the correct size where it kind of fits let’s try 25 okay that looks pretty good okay so this is pretty close the last thing we need to do is just that hover animation that I did where it kind of

Turns red when you do that because the red was the color of the website and the way you do that is under the column settings again so I click on the gray dotted box right because each one of these is a column and so in order to do that I go down to

The background overlay right here and I go from normal to hover that’s it because Normal would be there’s a background overlay right now which actually I need to add one now that I think about it I think I darkened them up a little bit so I went to the classic

Here and I just chose like a blackish color kind of like this so I just darken them up a little bit and then you can choose how dark you want it all the way dark not dark at all so I think it was somewhere around like 40 or something like that

And then the hover overlay is just going to be a background type and then I just uh change the color right here but this time I chose like a red color like this I think and I chose to have the opacity be kind of like low so now when I hover

Over it it does this hover animation and you guys can play around with it where it’s perfect you can choose the opacity to be way higher or maybe you want lower opacity but you don’t want it as bright so instead of being a bright red maybe

You want some something more like a dull red like this I think that’s actually a lot closer to what it was on that video so that’s how I did that part right there is the hover of the background overlay so I’m going to click on update to save my work so far

And then what I did was I just copied this across and made multiple of these so that I don’t have to make this section five individual times because you saw how long that takes so what I do is I right click and I say copy and then I right clicked and said paste

And then I would just delete this one and I repeated that over and over again perfect so now I’ve got five of these and now all I have to do is change the background and change the text just like we’ve been doing with the entire website

Right when all you have to do is change the text and the pictures you know it’s going to be really easy so let’s do that right now I’m going to click on the text first high-rise capability I can change this to something else Contracting and estimating just like

That and then I went to the style tab oh just kidding sorry we’re editing the widget right now for the heading I need to edit the column to change the background go to the style tab and I chose my image perfect there’s the second one I’m going

To do the same thing for the next three off camera just to save you guys some time see you guys in a minute all right I went ahead and took a second and did that off camera again all I did was I changed the text directly on screen and

Then I clicked on the column button right here and changed my image under the style tab that’s it really easy to make this section so I hope you guys enjoyed that part so now that we’ve got our services done let’s scroll on down and edit this looks like this was the

Project section and it’s ironic because it’s actually called the service section as you can see I went ahead and changed it to projects like this and then I think I typed out my own text right here check out a few of our current projects is what I typed out and changed my

Typography to uppercase I also increased the size while I’m here so it kind of looked like this and then I can also reduce the spacing between by just changing the line height right here and so you can kind of pick what you want to do like this but I’m just going

To controller command Z and just leave it as the default okay and then the last thing I did was I just changed the text here that was it and then the background as well really easy to do you guys already know how to change the text so

I’m not even going to waste the time doing that but I am going to change the image just so you guys get an idea of what it’ll look like again I just right click out here in The Ether and I say style Tab and I can change my image

And then I chose this one all right and then lastly I think I changed this blue to just black because I liked how the black looked better with this picture and so the way I did that was right now we’re in background I just went to background overlay

And then instead of this blue that they have I just changed it straight to Black and you see how much of a difference that makes and then I also just reduced it obviously it wasn’t so dark but there but it makes a huge difference rather

Than being all blue like this to Black I think it just looks so much better with those clouds and these these uh buildings here so that’s what I chose to do and then I’m going to click on update to save my work let’s move on next is

This one which was the old project section and I actually ended up just completely removing it from the website so we’re gonna do that now okay so now I get to show you guys how to install calendly on your website and so that’s where I had that booking option where

They can schedule an appointment with you directly on your website so this is really really cool now I’ve got a video on the channel that shows you how to do this completely in depth and I’ll have that link in the description as well I’m going to do just a very basic overview

Of it you’re going to go over here to a new tab type in calendly and so from here you can go over here to get started and you basically create an account with calendly and all you need is an email address and and everything like that

Okay perfect and so now I’m inside of my calendly account and from here it’s really simple you basically just have these little cards right here with the free version of calendly you can only create one if you want to upgrade to the paid version you can create multiple

Okay so we’re going to stick to the free version just creating one consultation or whatever let’s just start from scratch I’m actually going to delete this so I’m going to click on it and say delete okay so this is what you’re seeing right now there’s nothing here right or maybe

There’s a default one and you can do the same thing click on that little gear icon click on delete we’re going to build it from scratch you go over here and you click on create it’s going to ask what do you want to make we’re going to say an event type all

Right and now this is going to be a one-on-one event type but as you can see there’s multiple right we’ll say create and now we’re creating the event so let’s just call this something like a 30 minute consultation call and then we can choose a location and a location isn’t

Like a physical address what they mean is where do you want this meeting to take place like what platform or medium do you want this to do so if you click on it you’ll see that it’s either a phone call or do you want to have this

Through Google meet through a zoom call how do you want to do this right you can also do an in-person it’s right here and then you can put an address but let’s just say it’s a phone call and it says uh do you want to call them

Or do you want them to call you I would recommend calling them so we’ll say update there’s the phone call you can add another one so you could say oh you want to do a phone call or a zoom call so you click right here and then you would add

Zoom right so whatever you want to do next we’ll scroll on down and we’ve got the description instructions and so right here is where you can put in a little mini description so something like that right and then we scroll on down a little bit more and this is the calendly permalink

Right here and so 30 minute consultation call that’s just what we’re going to leave it as you can also pick what color you want this to be but this is literally just for organizational purposes when you have multiple so it’s just going to highlight it as green so

If you want different if you have like the paid account and you have multiple that’s where this could come in handy but other than that this isn’t actually going to show up on your website by the way so I’ll just choose purple because that’s one of my favorite colors all

Right we’re going to click on next okay so like I mentioned earlier I just wanted to show you guys how to actually set this up like this uh very very basic so when you click next I’m just going to accept all the default settings but in

That other video on my channel how to make a booking website that video is where it shows you how to do all these settings and what they mean and all of that I’m going to skip all that because the point of this is just to show you

How I built that website it’s not to show you how to use this software so now that it’s good and it’s on you can see your event type is on we’re going to click on the back button so just overview we created one from scratch and

Now it’s right here we’re going to click on the share button and we’re going to say add to website because we’re adding it to our website and then how do you want to add it to the website I’m not going to go over all of them I’m just going to embed it in

Line like this all right and now all we have to do is click on copy code right here again I’m going fast because I don’t want to spend my entire video trying to show you guys this when I already have a video showing you how so you just click on copy the

Code and it’s going to copy all of this short code to your clipboard obviously so then we can close out of this and we don’t even need calendly anymore but I’ll leave it open just for an example here we’ll go back to Elementor and right down here we’re going to add a new

Section and it’ll be one column and inside of this column you can click on the Rubik’s Cube icon we’re going to search for short code and so this widget allows you to put in whatever coding you want and so right here all you got to do is paste the code

Right here boom just like that we’ve got our calendar widget right here on the website just like that and it’s interactable so they can click on this choose a Time confirm and then they get all their meeting details and you can set all this up directly on your

Calendly account so those are all the settings that I was talking about that I’m not going to cover in this video but that’s how they can do an entire consultation scheduling on your website so you could use this for anything so now that that’s done I’m going to right

Click out here and say edit the section because I also had a background image out here and it was really simple I just went to the style tab classic chose my image and I just chose this one and because we’re building it from scratch we have to move the image to Center

And cover so it stretches and then the very last thing that I did was I went to background overlay and I just changed the classic color to white just like that and then I just change the opacity a little bit that’s it because you can

Make it completely wet if you want to or whatever you want to do but I think I just kind of did this right here all right and then the last thing that we have on the website was going to be the contacts section which wasn’t much

Of a contact Section but remember I only had one hour to build this entire website right and so I was kind of speeding through trying to make this thing look really cool but also be functional and get everything in on time that being said again I went to the folder icon

And this time I went over to contact under the blocks Tab and then from here I believe I chose this one but I chose the white version so this is a black background so we’ll scroll through and here it is the White Version right here click on insert

All right so the first thing is editing the map and you have to click on the blue pencil icon to edit this map anytime other than clicking on the blue pencil icon and you’re basically just interacting with it you can’t even right click to try and uh edit this so you

Have to click on the blue pencil icon over here on the right you can basically set the address so let’s just say Austin perfect and so now it’s showing Austin Texas and we’ll zoom out a little bit with your Zoom slider right here and now

You can see I can choose how zoomed in I am just like this so that’s pretty good right there and you can also change the height by dragging it and so I think I made it about this tall something like that the very last thing I did to this map was I

Went to the style tab and under CSS filters for the normal I changed it to be let’s see I think it changed the saturation to be down I think I played with the contrast as well so something where it was darker like this right so that way every time you hover over it

It goes back to normal just like this as you can see and then I also changed the hover uh transition time to like I think one second or like half a second so something like this and so now when you hover over it it slowly gains the color back so that was

How I added that cool desaturation effect that’s it it’s just under the style Tab and I changed the normal and hover CSS filters and these are just where you can change things like if you’re editing a picture okay and then scroll down a little bit more and this

Is the last part of the website so down here all I did was I right click and I say edit my social icons and so these are social icons right here these are the same thing as the icons up top at the very uh at the very top of our

Website right here it’s the exact same thing as these so if I scroll back down you’ll notice that if I don’t want Facebook to be first I can just drag it down like this and now Facebook is second right and now Twitter is first so you can rearrange them however you want

You click on it and you can change the icon but I mean obviously if it’s if it’s a link to Facebook and so you’ve got www.facebook.com Dot Com or whatever you want to take them to Facebook you probably want the icon to be Facebook so that being said

You can choose whatever you want here for the icon but I’d recommend obviously leaving it as the icon of whatever social media platform you’re taking them to but I just want to show you guys that’s how you would put the link in and that’s how you can change the icon

Just like we did earlier the only thing that I did to these was I went over to the style Tab and I just changed the hover color that’s it so it’s green right now item hover right here icon hover you’ll see it’s green I’m just going to

Change it to the global icon red which is the color that we’re using for our theme so now when you hover over them it’s going to choose that red color like this so it matches the whole theme of the website right okay and so that’s how we do it and then

The last last thing I know I keep saying it’s the last thing but this is the last section you guys get where I’m coming from all you have to do to change these is you just click on it and you can literally just type right here on screen that’s all it is

So you can change your contact hours and all that stuff so now that we’re done editing the website we can click on update to save our work at the very end under the map in the contact area I pressed plus right here to add another section

And inside of this section I did the same thing as the calendly widget I entered in a shortcode widget now it’s going to be blank there’s nothing there because I need to paste in some short code right so let’s go get that short code now I’m going to go back

To the dashboard and this time we’ll go to plugins and say add on a new tab and then from here we’re going to go down to smash balloon Instagram feed or go to settings and so after you click on settings it’s going to take you here and so it’s going

To keep telling you hey you should upgrade to the pro version and so that’s what all this is and you have to have a license key and pay for it we’re using the free version that’s all we want and so we’re going to go over here to the

Manage sources right here we have to add an Instagram Source like where is your account coming from we got to add the account so we’re going to click on the plus button it’s going to redirect you it’s going to ask do you want to log in

With Instagram I’m going to say yes log in with Instagram and then it’s going to ask do you want to log in and allow smash balloon access to it I’m going to say yes and as you can see I still have that Instagram created and I still have it active so

Normally it would take you to a login screen with Instagram so it would say uh you know your username and password but if you’re already logged into an Instagram on this computer it’s going to ask to just log into that one immediately so that’s why it’s doing

That I’m going to click allow because that is the correct one that I need all right and then I’m going to say uh it’s going to ask one more time hey are you sure is this the correct domain and I’m going to say yes that’s correct okay so once you’ve added your Instagram

Feed and you see it right here we’re going to click on Save changes and then we’re going to go back out to all feeds all right and then once you’re in all feeds you’ll notice that it’s not there yet because it’s a source we created a source Instagram but we haven’t created

A feed for smash balloon so let’s do that right now we’re going to click on add new we’re going to say yes we want a user timeline because it looks like this you know with your pictures and your username right there right and then we’re going to click on next

We have to choose a source and hey would you look at that my Instagram is a source we’ll click on next after checking on it and then from here it’s going to give you a live preview and so that’s what it looks like right now from here you can make a couple changes

The first one being I actually only want three pictures rather than four column and so we can go to feed layout on desktop how many columns do you want I’m going to say three so that way it’s a little bit more uniform because I only uploaded six fake

Pictures to this fake Instagram account that I created for this right so I want it to look uniform so I chose three columns and you guys can do whatever you need to do right and then after adding my Instagram I clicked on Save and then I’m going to click on embed

It’s going to give me the short code that I need right here so I’m going to click on copy and now it’s on my clipboard we’ll go back into Elementor and that’s the short code that we need so let’s paste it right here and just like that now we have an

Instagram feed on our website it’s not going to show up in Elementor it never does don’t worry we’re going to click on update it’s always going to look like a blank square but if we preview the changes there’s the Instagram right there and people can click on it and it’s going to

Open them straight into Instagram and they can look directly on the post just like that now there’s one final change that I want to show you guys how to do well technically there’s two the first one is going to be motion effects for the website and so motion

Effects are those cool effects that whenever you’re scrolling through the site things are moving right so I’m going to show you guys how I did it for the about section right here and then the rest of the website you can just kind of use your imagination I might

Show you guys one or two other spots let’s do it on the about section so I went over to the uh column settings right here well actually I chose these individually because I wanted all these parts to move in on their own so you have to edit whatever part you want to

Move so I’m going to edit the image first I go over to the advanced tab motion effects right here and all you have is an entrance animation it’s really easy to set up you click on it and you can choose from all of these you can choose to have it uh

Bounce in like this and so now it does that animation or you can choose a fade in which I think I chose fade down so it does that and then I went over here to the text and I clicked on it I went to the style or to the advanced tab motion effects

And I chose fading in from the left just like this same thing for this one Advanced tab motion effects but fade in from the left all right and then for these two as well I put some fade in from the left and then from the right so here I’ll do it

Right now we’ll click on this column Advanced motion effects fade in from the right because I want to come in from the right and I’ll do this one Advanced motion effects fading from the left like that so we’ll click on update to save okay and so now that I have all my

Motion effects on this section and you guys saw how easy it was but you realize how long it’s going to take because every single thing that moved on that website I had to click individually go to Advanced motion effects add a motion effect each individual item it took forever to make

All those motion effects but when you do let me preview the changes of our website if you scroll on down you’ll see that’s how I got those motion effects to start flying in like that so that’s pretty cool right and so I just added those motion effects Tastefully throughout the

Site so I had this one fade in just from the center so if I click on it Advanced motion effects I basically just had this one fade in because it’s in the middle but then this one faded in from the left so let me do it for you guys real quick

I’m gonna go a little faster like that and then I had this one fade in sequentially and the way I did that was motion effects fade in from the left and then I just added a delay that’s it and so I just added a delay of like I think one or two seconds

So when I click on updates well let me do it to the other side really quickly so click on it real quick Advanced motion effects and I want it to fade in from the right we’ll do this one as well Advanced motion effects fade in

From the right and I need a delay of two seconds which uh it’s in milliseconds and milliseconds to seconds is just a hundred so it’s uh two milliseconds so I’m going to click on update to save my work and we’ll preview the changes and then as we scroll through the site we’re

Going to have all these cool motion effects and then I scroll through here do you see how those came in sequentially like that they didn’t all come in at the same time this one came in and then this one came in right and so that’s all it was was just adding a

Little delay close out of that tab now the very last thing because I showed you I said there was two more the very last thing after the motion effects was how to change the global color for the entire website let’s say you don’t like this red color

That I have throughout the site like this right you can change that and it’s all with one click of a button so if I close out an Elementor and go back to my dashboard I can go over here to the appearance Tab and then click on customize right here from here

I can go to Global changes like Global as in the entire website and then I can go over to colors and here’s my color palette the one that I keep choosing from over and over again you guys remember this one and I keep choosing the red or the white or the

Black so now all I have to do is change this color and this color and everything on the website is going to change so first let’s change this one and let’s just pick a blue color like this and then I’m going to do the same thing

With this one and choose a blue color right here and now you’ll notice that some things are using this color and something or you are using this color and you can make these whatever you want but now you’ll notice that everything’s blue so there’s the blue right there

That button’s blue scroll on down a little bit more I’ve got a blue button here these now hover blue and then if I go all the way over to like the about page which we haven’t touched yet but if I go over to the about page you’ll see that everything over here is

Going to be blue so there’s the blue button again these are the global colors for the entire website because we downloaded that template and so all you have to do to change all the colors is click on these two right here now one thing you’ll notice if I go back to the

Home page if I scroll all the way down this hover color didn’t change and that’s because instead of choosing the global color we chose an individual color and so if I were to open up our website on a new tab real quick and you guys don’t have to follow along I just want

To show you guys so you remember and then I scroll all the way down to that Services section right here if you guys remember when I clicked on edit this right here and I went to style and background overlay and I went to hover color I didn’t select the global

Button right here because these are linked to my color palette instead I chose to choose a regular color right here so if I were to change this to theme color 2 like this now again this is different from all of these because I would have to go and

Change this one to the theme color then this one to the theme color this one to the theme color but I’m just going to use this one as an example so I changed this to the global theme color and I click update let’s close out of that tab now back

Here I’m going to refresh the page and then I can go back to my Global colors uh let’s go back to Colors I’ll change this to blue and then I’ll change this one to Blue as well and then from here so now you’ll notice the blue is everywhere if I scroll back

Down because these aren’t a global color they’re in red but this one’s blue so if you want this to change you can but yeah that’s how you change the color of the entire website so from here I’m going to go ahead and close out of this tab and

Leave I’m not going to save the changes because that website that I made was red and so I’m going to leave it as red okay so now we’re done customizing the website I know what you guys are thinking you’re like hey Levi aren’t there a bunch of pages we’re only

Editing the one well the point of this was to make a one-page website so if I go over to the pages tab I have a home page about page contact page all of this I don’t want any of those except for the home page and so if you want to remove

All the extra pages under the pages tab you can just select right here and it checks all of them make sure you uncheck the home page and then I can go to bulk actions and say move to trash and apply all right and so now all I have is my

Home page so now I’m going to go back to the dashboard now if I open up my website on a new tab like this you’ll see that I only have home page right here and that’s perfectly fine because next what we’re going to be doing is editing our navigation menu our header footer

And Logo okay so let’s go ahead and do that now step number six is to edit your header footer logo and preloader so we’ll do that now now in order to edit all of that stuff we’re going to be in the exact same editor and that’s going

To be under the appearance tab under customize right here okay the first change I’m going to make is to the navigation menu up here so it’s really easy to do that we’re going to go over here to the left hand side and go down to menus and then we’re going to select menu

Right here because these are three different types contact services and menu this is the primary menu and if you guys also remember we just deleted a bunch of pages so these are links that no longer exist because the page doesn’t even exist and you’ll notice it says

Page right here so we’re going to click on ADD items which allows this x to appear and then we’re just going to delete all of them Okay so we’ve got the home button right here next we need to add three more we’ve got the about services and

Projects let’s do that right now we’re going to click on ADD items and then we’ve got custom links right here so the first one is going to be about and then we’re going to do a short code right here which is hashtag about basically what that’s saying is take me

To the acre point which is that hashtag so the Anchor Point called about I’m going to show you guys how to set that up in just a second so remember the hashtag with the word Okay add to menu so there it is let’s do that through uh

Let’s see two more times so we’ve got Services next #services you guessed it add to menu and finally projects click add to menu so right now these are three links that don’t actually have a destination so if I click on those they’re not going to take me anywhere because it’s taking me

To a short code called hashtag about or #services and so the reason I call it hashtag Services I could call it hashtag whatever I want but I want to make it really obvious so that when I’m editing an Elementor I can I can hook that up

And so I’ll do that in just a minute here you can also drag and re-arrange them by just dragging it like this and then you’ll see that now Services is in front so that’s a reoccurring theme as well is you can just drag and drop anything to rearrange the order

Okay so now that we’ve made those changes let’s click on publish to save our work and then what we’re going to do is one last change to this button so we’ll go over here and click on the back button twice and then what we can do is click on the

Pencil icon right here and so it’s going to take us straight to the button as you can see right here so I can change this from take action to something else like schedule a consultation and then I can have my link be like hashtag consultation let’s just do that

Okay and then we’ll say publish to save our work so now we’ve got links and we’ve got them hooked up to the top let’s go actually physically hook them up to our website and it’s really easy go back to the dashboard here again I like having multiple tabs so I can do I

Can multitask we’re going to open up our site on a new tab and then click on edit with Elementor I know what you’re thinking we were just an Elementor but I have an order of operations to these things so that it makes a little bit of sense to you guys

So we’ve created those hashtag links up top we have to actually put them somewhere on our site to take us there so in order to do that we’ll go down to the about section and we’ll click on edit the section right here go to the advanced tab

And under cssid put about and so again in the cssid just put about because remember on our website it’s hashtag about and so that’s Anchor Point about this is the Anchor Point cssid so Anchor Point about okay and then when you have a hashtag in front of it you’re

Calling on this Anchor Point okay so let me go ahead and click on update say my work we’ll do the rest of them in a second but I want to show you how this works you ready all right and now that with my site open if I go over here and

Click on the about button it’s going to drag me down to the about section so that’s what we just did we’re going to hook up this button to say hashtag about and then we title this about that’s it so this is about that’s hashtag about does that make

Sense and so I’m going to do this is going to be hashtag Services hashtag products I’m going to call this section down here services and I’m going to call this section right here projects this one’s going to be called consultation this one is going to be called Contact

It’s really simple so let’s do that right now I’m going to close out of this guy scroll on down so I’m going to click on the six dots advanced cssid and this is services now I’m going to click on the six dots right here advanced projects notice how I’m not putting a capital

Scrolling down a little bit more and we’ll say let’s do this one edit these six dots advanced consultation and then this one down here contact and we’ll click on update to save our work close out of Elementor here and then we can refresh this page as well

And we’re done that’s it everything in the navigation menu is hooked up so that’s all the steps you have to do so now whenever I click on the about button it’s going to it’s going to drag me right to the about section if I click on services

It’ll take me straight to these services if I click on projects it’s going to take me straight to projects and you guessed it if I click on the consultation button it’s going to take me straight to the consultation part of my website now I realize I call this contact and I don’t

Have a contact button up here but I could easily just create a contact button here let’s do it right now we’ll go to menus menu add a custom link that’s it we’re done add to menu publish and now if I click on this one it’s going to take me straight to the contact

Section because I called this the contact Section okay so that’s how we edit the navigation menu right here the next thing we can do is we can go over here and edit the logo and so you can click on the little pencil icon right here and it’ll take you to the transparent header

But we’re going to click the back button first we’re going to click on site title and logo so this is the part where I promised I would show you how to create a logo for free let’s do that right now in less than a minute go up to a new tab and

Search for something called logo maker but without the e so just like that and you’ll see I can click on start my design so from here this is where you can create free logos however you want you have complete customization control over here I can search from a million

Different Graphics as you can see there’s a ton of them so if I want a camera I could choose a camera like this and I click on it here it is now that I have my icon I can use the the corner to drag it make it bigger

Smaller I can rotate it if I want to if I want to change its color I go over here to all these colors and I could say hey I want it to be perfectly red and then I can drag it around and change the color

Or I can make it black and white right so you play around with these then over here I can add some text by clicking on text you’ve also got basic shapes like a square or a circle I can drag my text right below it and I could say something like Levi Construction

And then maybe I change the text color to Black by dragging over here again so something like this Levi construction right so from here I can also change the text font and so I can do that by just clicking right here and I can choose whatever I want and so I’ve got

Categories so like maybe I want a handwriting one and then I can choose whichever one I want as you can see and then when you’re done with your logo you go over here to the right hand side and click on Save logo make sure you don’t click here because

That’s going to ask you to pay for the high resolution file you’re going to click on download low resolution file right here accept the terms and then you can download a free low resolution file it’s free click on it instantly downloaded to my computer

As you can see here it is I’ve got my logo downloaded to my computer just like that super easy completely free so I’m going to close out of this close out of this and now I can come back to my website and I can change my logo and

So from here we’re gonna have to upload files again because again I already have these created off camera all right and so I’m going to insert my black logo here first It’ll ask if I want to crop it I’m going to say skip cropping and so now you’ll

Notice that I’ve got my logo there but it’s a little hard to see when everything gets a little dark in the video and so if you have a dark image you kind of want a lighter logo and the way you do that is the transparent logo has an automatic setting where I can

Customize the transparent header right here and I can have a different logo for the transparent header and so I’m going to change this to be the white logo and now it’s using my white text logo which is the same thing it’s just a logo with two different colors and so now I

Can increase the logo size by dragging this as you can see right here okay so now I’ve inserted in my own logo let’s go ahead and do that uh the site icon right here with a favicon it’s really easy to do under the header Builder so from the

Main area you can click on header Builder and then click on site title and logo and so where we just put in the black logo right at the bottom we’ve got site icon you just click on it select one and then you can upload it you can

Create another one in logo maker but I already have one built and so it’s just the square it’s like what would be you know a logo for it without text basically select it and skip the cropping and now you can see that my icon is up here so that’s pretty cool we’ll click

On publish to save and we can refresh this page as well and now you’ll see the icon right here there it is so that’s pretty cool all right so now we’re done with the header we’ve changed the button to take us to the consultation Place we’ve changed the navigation menu with new

Links and we’ve got a logo we can scroll on down to the very very bottom and here’s our footer it’s really easy to edit I’m going to click on the back button here and go down to footer Builder so under the footer Builder you’ll notice there’s a paragraph here a

Paragraph here and a paragraph here and if you want to edit this one right here you’ll click on widget number one and so now you’ll see here’s the about title right there and you can change it to whatever you want and then you’ve got the text right here and you can type out

Whatever you want and then the services section you can click on the widget two and you can change the title so you click on it and you can change the title the title excuse me so maybe instead of services you say projects and then all this is is a menu that they

Created and let me show you again remember so I’ll click on publish back back under menus there was one called services for some reason that’s this menu right here and so you can go over here to services and here’s all of those so if I want

Study nature to be last I drag down now it’s last and then if I want to change the text I can click on it and then just change the label right here click on publish to save that one this is the same thing by the way this

Is also a menu and so if I go over here click back and say contact you’ll see that it’s got the address the phone number and the contact so that’s this paragraph right here and so you can drag these around if you want to so now the phone number’s on top

And then you can put in links if you want to but there’s really no reason because it’s just for people to see and they’ll type it into their own phone or something like that and so again each one of these when they have this like it looks like it’s a link

These are menus but notice how this isn’t highlighting and this isn’t highlighting because this is just text as well so if you want to edit this text we’re going to go back into the footer Builder and we’ll scroll all the way down so I can see what I’m doing

So you’ll see it’s one two and three well here’s one two and three so widget three I can change the title and the text right here so there’s title and text very easy to do and then again the copyright these two down here it’s just

Text you click on it and you can change the text here and you click on it and you can change the text right here very easy okay so that’s how you can change around your footer so we’ve done the header we’ve done the footer and we’ve done the

Logos the last thing is the preloader and the preloader is also in these Astra customizer settings so we don’t have to go anywhere we’ll go right down here to preloader Plus and the only thing that I really did here was if you guys remember when I

Refreshed the page let’s take a look at what it looks like we’ve got the the loading bar up on top see this how it’s red and then we’ve got this little circle buffering icon we’re going to go over to preloader plus I can change the settings right here and I can choose

What’s visible so right here is the built-in icon and then the progress bar I’m going to enable a custom image by clicking on the eyeball so now there’s a custom image and I’m going to remove the built-in icon so now it’s invisible and so now under the Custom Image we’ll go down

Here to custom content you could add text if you want to but what I want to do is an image so I went to the back and I want to icon image and I chose my Custom Image right here under custom right and all that was was just my logo I just

Selected it a second time and so now you’re going to preview it right here you’ll see my logo pops up just like that and that’s how I did the pre-loader I just have my logo right there as well as a progress bar so it looks a little bit cooler when their

Website or when your website is loading so that’s what they’re going to see before they see anything and they can already see that it’s not just some blank default loading page it’s just to add a little bit more Flair and and customization control to your site

That’s all I did you guys can play around with what other icons you want to use but I think the logo with the progress bar just looks uh clean and neat and so that’s what you want to do click on publish to save my work and we’re done with the header footer

Logo and preloader so we’re going to close out of this tab go back to the dashboard and now we can move on to step number seven which is mobile responsiveness and this is our final step and so mobile responsiveness is just making sure that your website looks good on a cell phone

As well as your desktop and so if you’re looking at it your desktop looks like a rectangle right and a cell phone looks like a vertical rectangle like this right and so how do you take a horizontal rectangle and crunch all of it into a vertical well we’re going to do that

Right now by going over to your website on a new tab and we’re going to open up Elementor one final time just to make sure everything looks good but this time we’re going to make those changes to the mobile version of the site and the way we do that is we go

Over here to responsive mode and you’ll notice a banner opens up on the top right here we’re going to choose the mobile version and so you can tell we’ve got a little bit of work to do but most of these were downloaded with the default template

And they look just fine as you can see like that all looks great nothing’s too compressed it all looks wonderful so does the about section let’s keep going uh let’s see here this all looks good actually wow I thought maybe some of the text might be moved around but it

Actually is very presentable and easy to read and we’ve got the consultations in vertical form so that’s perfectly fine there’s the calendar contact looks good and then the Instagram would be vertical as well that’s really good I’m actually kind of surprised the only thing we have to make

Changes to and we built this from scratch so I was expecting to have to make changes to this the only thing we have to make changes to is this uh hero section which looks God awful so let’s make some changes here the first thing I’m going to do and we’ll probably fix

All the changes is reset the padding so I click on edit the column here and I go over to the advanced tab if it has this little mobile symbol next to it it means that whatever changes you make in the mobile will not affect the desktop

Okay so if I go back to mobile and I were to remove the padding completely like zero it out so I’m just going to type in zero automatically everything looks great the only reason it looked like crap was because I had too much padding on the

Right and on the left so if I add 500 right now like it doesn’t even have space to show the text because there’s so much padding in between and so if I go back to zero we’re perfectly set everything’s good to go now uh and and so you remember if I make

Any changes with the mobile icon if I go back to desktop my padding is still going to be there so I still have some space over here on the left and I still have my crunch on the right so that’s pretty cool the last thing I’m going to

Do is just change this to be a little bit bigger and these to be a little bit smaller and so you can click on the text go to the style tab click on typography and you’ll notice that size has the little icon which means that whatever changes you make here does not affect

Desktop and so all you have to do is just resize it so let’s make this a little bit bigger so it stands out and then we’ll make these a little bit smaller so I’m going to click on that and go to the style tab and we’ll reduce the size

And I’ll do the same thing for this one style tab and reduce the size perfect I think that looks great I’m actually pleasantly surprised very impressed all right and then we’re going to click on update to save our work and so that’s it we’re going to preview our changes

And let’s take one final look and walk through of the website we’ve got this preloader and it looks absolutely incredible I love how it’s just very simplistic it’s got my logo there with that loading bar it just looks great love the video background as well I

Thought that was a really nice touch and then obviously the text is nice and big saying what we do and who we are uh we’ve got some mission statements here and they’ve got a button which we’ve never hooked up but you can hook it up to something whatever you want we’ll

Scroll on down a little bit further we’ve got this really cool about section with all the motion effects and I’m assuming that you guys pause the video and added motion effects to the whole site wherever you wanted them and you guys can experiment around with that but

We’ll scroll on down a little bit more and they’ve got these really cool services that they can look at here scrolling down more and we’ve got the project section and then a place of course for them to make consultations with you to schedule appointments which I think this is the

Coolest widget online right now being able to schedule appointments directly on your website that interfaces with your Gmail I think that’s just incredible but we’ll scrolling down a little bit more to the contact Section which looks really good with an interactable map that they can play around with right

Scroll on down a little bit more and we’ve got a live Instagram feed on your website where they can click on whatever they want and it takes them straight to Instagram I think that’s so cool and then we’ve got our footer as well which we made changes to overall I’m

Really happy with how the site turned out if you haven’t already click on the link in the top left corner to claim your free domain name and massive savings on your premium hosting plan for your website and if you liked this tutorial I think you’ll really enjoy the

Video in the top right corner I’ll see you guys there
Get 78% OFF Hostinger Premium Hosting: 👉 https://createaprowebsite.com/hostinger Use coupon code: createaprowebsite for an additional 10% off on all annual hosting plans. Try Elementor PRO to get full access to the most powerful page builder for WordPress: 👉 https://createaprowebsite.com/elementorpro (Note – I receive a small commission and you will receive a discount when you use these links): Learn In this step-by-step guide, how to create an amazing WordPress website with the Elementor page builder plugin! TIMESTAMPS ————————– 00:00- Introduction 00:48 – Step 1: Get a custom domain and hosting Plan 👉 https://createaprowebsite.com/hostinger 06:12 – Step 2: Access the WordPress dashboard 07:52 – Step 3: Download starter templates 13:31 – Step 4: Install plugins 14: 59 – Step 5: Customize your site 16:23 – Elementor editor basics 17:37 – Changing the section background image 19:53 – Editing widgets 25:39 – Adding an icon list widget 29:17 – Adding a video background 30 :37- Editing the About section 32:51- Adding custom services section 39:23- Calendly setup 42:27- Adding the Calendly widget to the homepage 44:24- Contact section 44:59- Editing the cards -Widgets 46:24- Contact Times & Social Icons 48:03 – Adding an Instagram feed to the website 51:24 – Adding motion effects 54:56 – Editing the global colors of the website 57:48 – Editing other pages 58:36 – Step 6: Edit your header, footer, logos and preloader 58:48 – Edit your navigation menu 01:00:46 – Edit the button in your menu 01:01:26 – Link the navigation menu to homepage sections 01: 04:49 – Create a FREE logo 👉 https://logomakr. com 01:07:17 – Add logo to transparent header 01:07:51 – Add site icon (favicon) 01:08:40 – Edit footer 01:11:14 – Add preloader 01:12:52 – Step 7: Mobile Responsiveness 01:16:09 – Final Site Review RELATED BLOG POST ———————————- – —— https://createaprowebsite.com/how-to-use-wordpress-tutorial MORE HELPFUL VIDEOS ———————– – —————– How to secure your website in 5 minutes: https://youtu.be/bmx39y_8tOs How to create a business email for free https://youtu .be /pjjQivSaMmY How to create a free logo for your website: https://youtu.be/f-jopUTj5_Y? How to protect your website from hackers: https://youtu.be/FE-PUFY8CiA How to create a website in 10 minutes: https://www.youtube.com/watch?v=QpAhFf4qGis& FOLLOW US AND CONNECT WITH US – ———————————————– – My website : https://createaprowebsite.com Create a pro website for Instagram: https://www.instagram.com/createaprowebsite/ Create a pro website for Facebook: https://www.facebook.com /createaprowebsite/ And don't forget to SUBSCRIBE to Create a Pro Website for more great website tutorials: http://youtube.com/createaprowebsite?sub_confirmation=1
#Create #WordPress #Website #Elementor #Elementor #Tutorial


https://i.ytimg.com/vi/7TYew5cDEIU/hqdefault.jpg