How to Create a WordPress Website with Elementor (For Beginners 2023)
Tutorial Hosting
Elementor is a powerful website builder that allows you to easily create professional looking websites without any coding experience with its drag and drop interface you can design your website exactly how you want it adding text images and other elements with just a few clicks now not only does Elementor
Make building a website super easy it also offers a wide selection of full website templates and sections so you can choose the one that best fits your needs and then customize it to your liking whether you’re a small business owner a freelancer or you just want to create a personal website Elementor
Makes it easy to get online and start sharing your ideas with the world let’s get started so step number one is to get your own domain name your web hosting and to install WordPress now in order to make your website actually function you have to have two things you have to have
A domain name and you have to get web hosting it’s the same thing as getting a phone number and then signing up for service with Verizon for instance you have to sign up for that service so that your site is actually online and then you also have to have a place that
People can go to find your site which is your domain name and a domain name is just the address to your website so it’s what people will enter into the search bar to find your site it’ll look something like yourwebsite.com 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 site if you
Want to own your own website and have a custom domain name for it then you have to purchase your own web hosting which I’m going to show you guys how to do in this tutorial and I’m also going to give you a massive discount code for it so in
Order to get your domain and hosting just click on the very first link in the description or you can go to creativepro website.com hostinger and it’ll take you to a page that looks like this now my affiliate link is going to give you a massive discount on your web hosting I’m
Talking more than a hundred dollars off so be sure to check it out alright so you should be seeing this co-branded landing page that we have with hostinger.com so from here we’re going to scroll on down and you’ll see that we have three different hosting plans in
Front of us we’ve got the single the premium and the business plan now I always recommend that people use the pre premium web hosting plan so you’re going to get 75 off so it’s only going to be about 279 per month which is pretty cheap for a website and the things that
You get with it are pretty nice you get a hundred websites that you can have under the same account down here you also get a free unlimited SSL certificate which the SSL certificate is the encryption for your website it’s like the security for your website without it you wouldn’t have this little
Lock icon right here that’s saying that your connection is secure instead it would say not secure in Big Red Letters and so uh that usually makes people want to navigate away from your site other hosting companies out there will try and charge you extra like an extra 10 bucks
For that or something like that same with the domain name but you’re gonna get it for free and the free domain name is pretty sweet because again usually people charge extra for the domain but it’s going to be included in the plan that you’re purchasing right here for
All those reasons I always recommend everyone use the premium web hosting plan when it comes to hostinger so I’m going to go ahead and click select right here all right and now this is the part where you get to choose the period of which that you’re going to pay your hosting
Plan and so you can choose one month 12 months 24 or 48 months now I always recommend that people use the 12 months right here it does say that you’re going to save 98.40 obviously the bigger the plan the more you save I recommend the 12 months because your domain
Registration down here is per year and so you might as well have your hosting go every 12 months as well just so that those two payments kind of line up that’s just my personal recommendation you guys can do what you would like so I’m going to stick to the 12 months and
Scroll on down and this is the part we have to select your payment method and we’ve got credit card PayPal Google pay so they’ve got pretty much everything you might need um but I do want to point out a couple things before you guys put in your payment information over here on
The right hand side you can see that you’re taking a hundred and thirty one dollars and we’re taking it all the way down to 33 dollars for your first website that’s that huge discount that I was talking about just a few minutes ago in the intro when I was talking about
The affiliate link here and so make sure that create a pro website is the coupon code that’s applied right here so if you clicked on the link in the description it should automatically apply this coupon code but this is what’s going to take off a hundred dollars off of your
Web hosting so you can see right here it takes off a hundred and one dollars and so after everything it looks like it’s only going to be thirty dollars and Thirteen Cents for your first website which is pretty cheap so I’m gonna go ahead and put in my credit card
Information and I’ll see you guys on the next screen all right so you should be seeing this page after you put in your payment information for your hosting and your domain and it’s gonna say hello follow the guided setup for your website in just a few minutes we’re gonna click on
Start now and then from here it’s going to ask if you want to create a new website or migrate your website from a different hosting provider now what we’re going to do for this tutorial is create a website from scratch but if you’re still watching this video and you
Already have a website but you want to move it over to hostinger you definitely can do that by clicking on this button right here but for today we’re going to create a new website then it’s going to ask which platform you would like to use and so we’ve got WordPress right here
And then hosting our website builder we’re going to be using WordPress so we’re going to click on select all right now we get to create our WordPress account and so we’ve got our administrator email and then we’ve got our password and this is really important to remember because the
Passwords what you’re going to use to log into your website every single time you want to edit it so just make sure you remember this password and also make sure that this is the correct email and so from here I’ll go ahead and put in my own
And now it’s going to ask if we want to add any plugins before we even get to the website but we’re going to say skip because I’m going to manage those later and I’ll show you guys how to download them in the tutorial don’t worry and
Then it’s also going to ask if you want to download any themes before you even see the website and I’m going to say again skip I don’t need a template or a theme all right and then from here you’re going to get to name your website and
Naming your website is by putting in the domain name so hostinger has hostinger.com and so that’s what we’re creating right now which is our domain name and you’ll notice that right here if you chose the Premium plan we get to claim our free domain name because it’s
Included with the hosting plan so we’re going to say select and now we can try out as many different options as we want right here and then you can click on the drop down here make sure it’s a.com I personally recommended.com because first of all the most common when people are
Looking for a website and then also it just looks more professional rather than doing something else you know dot fun.net.uno.xyz all of those things so I personally recommend trying to see if the domain name you want is available in a.com all right we’re going to go with
Pet care capw for create a pro website for.com and we’re going to click on search and you’ll see that the domain name is available so we’re good to go we can either change it if we want to pick something else or click on continue and then I’m going to click on finish setup
And finally finish registration all right and then after waiting for your website to load you’ll see that it says right here well done you are ready to go so from here we’re going to click on edit your website and it should immediately take you to your WordPress
Dashboard and if it takes you to a page that looks like this it basically is just editing a post and so to get to your WordPress dashboard we’re going to click on the little W up here in the top left corner and then you can click on dashboard right here and now we’re
Inside of our WordPress dashboard and we can start making changes to the website so step number two is to install Starter templates and this is going to be a plugin that we download onto your website and then from there we can look through a library of tons and tons of
Complete website templates so what we’re going to be doing is download a complete website template and then we’re going to edit it inside of Elementor and don’t worry I’m going to show you guys how to use Elementor to its fullest potential but it’s going to save us a lot of time
Right now if we start with a pre-made template and this is the part of the tutorial where I tell you guys that you can literally create any type of website that you guys want using this plugin they have templates for plumbing websites they’ve got Consulting websites portfolio websites and so much more you
Can either follow along with this tutorial and pick the same template that I choose or you can pick a different one and then just learn how to use Elementor and make that template your own let’s go ahead and do that right now so in order to download starter templates we’re
Going to go over here to the left hand side under the plugins tab we’re going to hover our Mouse over it and then we’re going to click on add new but I’m going to open it up on a new tab just like this because I always like having a
Dashboard that I can jump back to while I’m making changes to my website we also don’t need this hosting or page anymore so we can close out of it and so now I’ve got my WordPress dashboard right here and I’ve got my plugins tab open
Now what we’re going to do is go over here to the right hand side under the search bar and look for something called starter templates and as soon as you do you’ll see that starter templates is the first option in the top left corner so I’m going to click on install now right
Here and then I’m going to click on activate now once you click on activate it’s going to take you to the installed plugins page so you’ll notice that we’re still under the plugins tab but now instead of add new we’re on installed plugins and so this is basically just a
List of all of the plugins that are on your website right now and you’ll notice that starter templates is now one of them you don’t really need to worry about all the others they usually just come by default with hostinger when they create this website for you so you don’t
Really have to touch any of them but what we’re going to do is go down to starter templates right here and then click on C library now if you don’t see starter templates see library right here or you’re not on this plugins tab you can always go to the appearance Tab and
You’ll see starter templates has now appeared or you can always go to plugins and then find C library right here so now what we’re going to do is click on C library and from here we’re going to click on build your website now and we get to choose which page builder we’re
Using and of course this is an Elementor tutorial so we’re going to select Elementor alright friends now we are inside of Astra starter templates and you’ll notice that we have a ton of different websites down below and these are all complete website templates that you can choose from you’ll notice that
Some of them say premium in the top right corner and that’s because you would have to pay for the premium version of starter templates to download but you still have a lot of free versions like this one and we have we have this one over here and a whole
Bunch of them that we can look through so I’m going to scroll up to the top and show you guys another feature you’ve got these different categories up here that you can click on you can either click on the actual category like personal sites like this and it’ll put it in the search
Bar for you and you’ll notice that now we have a bunch of sites for a personal use or you can always click on one of the drop downs so maybe you’re an author or a photographer and you can look through all of the photography websites
Just like this or maybe you can go over to business and you want a restaurant website and you have a bunch of restaurant websites like this or maybe you have a hotel that you want to build a website for the options are endless they literally have templates for almost
Any type of website that you could possibly want to build so I just wanted to show you guys that you can literally choose whatever you want and then up here at the top in the search bar I’m going to look for nature all right and this is the website that
I’m going to be using right here so you can click on it and you’ll get a full website preview on the right hand side we can scroll through it if we want to we can click on the different pages up here in the navigation menu so I can
Click on the about page and take a look at everything so you have a full preview of the website and then over here on the left hand side is where we can make changes to the website before we even download this template now if you already have a logo you can choose to
Upload it now and it will replace this default template logo right here but I’m going to show you guys later on in the video how to build your own logo for free without having to download any software so I’m going to skip this step because we’re going to build it later in
The video but if you have one you can upload it here so I’m going to click on Skip and continue the next thing that we can do is choose the default colors for the website and so as I choose these different color palettes right here you’ll notice that the entire color of
The website is changing and so if I click on the blue you’ll notice that now this button’s blue the dash is blue come down here and this button is also blue and if I choose red you’ll notice that they all change and I can click on different parts of the website and
You’ll notice that it’s also red down here so we’re changing the global colors for the entire website but I personally like this blue right here and this is the one that I’m going to choose and then down below we have the changing of fonts and so we can pick different font
Categories as well so you’ll notice that the font is going to change when I start selecting all of these different categories down below or combos if you will but I’m going to stick to the default one that’s up here in the top all right so from here we can click on
Continue and this is the last step before your template is downloaded and so you guys can put in your information here if you want to but I’m going to skip all of that because I don’t feel like it just make sure that all of these boxes are checked except for the last
One personally I don’t feel the need to share any non-sensitive data but of course you can if you want to but you want to make sure that everything else is checked you want to install and activate the Astra theme you want the customizer settings the widgets the required plugins the content everything
When I say that this template is all inclusive I truly mean it this template is going to automatically install your theme install Elementor it’s going to install your customizer settings it’s going to download all of this starter template the images and everything it’s incredible what starter templates can do
For you it saves you so much time all these different steps of installing plugins and all of that stuff it does it all for you with one click and so let’s go ahead and do that click right now by clicking on submit and build my website watch this
Boom just like that your website is complete and you’ll notice that it says congratulations up here and you get the confetti that’s kind of cool let’s go ahead and click on view your website right here it’s going to open up a new tab and you’ll see your domain name
Right here pet care capw.com so Pet Care creativepro website.com and you’ll notice that our template has been downloaded and so we have a fully functioning website at our fingertips within just the first few minutes of the video the first 10 20 minutes of the video if someone goes to the domain name
That you purchased they’re gonna see this web page so that’s pretty cool and you’ll notice that we can go to the about page we can go to the services page and the contact page it’s all here and so now we can close out of this tab we can close out of the starter
Templates and go back to the dashboard and uh let’s go ahead and refresh the page just to make sure because you know this page has been sitting here for a while all right so now that we have a template that we like it’s time to move
On to step number three which is the Elementor tutorial in this step I’m going to go over a bunch of the basics that you need to know when using Elementor and then in the next step we’re going to customize this website together using Elementor let’s Jump
Right In okay so anytime you want to make changes to your website in Elementor there’s two ways of doing it the first is to open up your website first and we’ll go over here to the top left corner and click on pet care capw.com I’m going to open it on a new
Tab so I’m going to right click and say new tab just like this but anytime you click on it it’s going to open your website up just like this and you’ll notice you have this admin bar up here the ribbon up on the top of your website
That’s how you know that you’re logged into the admin of your website up here in the top left you’ll see edit with Elementor and so this is what we’re going to click on right here and then when you do that it’s going to log you into your website I’m going to go ahead
And close out of these things right here and so now you are editing your website inside of Elementor so that’s the first way let me close out of this tab the second way is to go over here to the pages tab right here from your WordPress dashboard
And again I open it on a new tab on purpose and then you can choose whichever page you want to make changes to so we’re going to choose the home page right here we’re going to click on edit with Elementor right here and that’s just two ways of taking you to
The same place which is editing your website inside of Elementor so without any further Ado let’s actually get into the Elementor tutorial part of the video so Elementor is really easy to use trust me and we’re going to go over every part of it so the first part is going to be
All of this whatever is going on out here whenever I hover my mouse over all this stuff the second part is going to be over here on the left hand side which is kind of this menu that they have and then the third part is going to be this
Bottom ribbon right here and so we’ll go one by one and just show you guys everything that you need so first let’s talk about what’s going on over here all of this stuff when you edit a website inside of Elementor there’s three parts to a website you’ve got this section
Which is this back here you’ll notice that every time I hover my mouse over this background area this blue box appears all the way around the back side of the website or the background of the website that is the section and you can think of a section as like that
Background portion right so this is a section over here and if I scroll down this is the next section right here as you can see the blue box appears and it’s all the way down and then down here is another section another section right so these are sections of the website and
We can only edit one section at a time right but you can think of it as the background like if I wanted to change the background image then I need to edit the section which is the background so you’ve got this blue square that’s the section inside of a section you can have
A column which is this gray dotted box right here and so you can have multiple columns and they’re going to go horizontal side by side right so if I add a new column like this you’ll see that now there’s two columns this one over here and this one over here and so
I’m going to remove this one so you can have multiple columns inside of a section and you can also have these blue squares inside of a column which are widgets and so these widgets are basically everything that’s over here on the left hand side that you can see
You’ve got dividers videos buttons text images intersections headings all of these things right and so these widgets go inside of a column and columns go inside of a section and so when we’re making changes to these widgets we can always click on whatever we want and
You’ll notice that over here on the left hand side it’s going to open up all the settings for it and so this is a heading widget right here and you can tell by right clicking and you’ll see that it says edit this heading this is another heading widget right here edit heading
This is a button obviously and so if I right click on it it’s going to say do you want to edit the button and when I do you’ll see that it says up here in the top left corner edit the button right here right so these are the
Settings for the button so that’s what’s going on over here when I’m hovering my mouse over everything you’re going to see that everything starts piling up and all these different boxes are you know appearing and disappearing and so now you guys understand again the background
Is a section all of this stuff and then inside of a section you’ve got these columns and so notice down here we’ve got columns right here that go horizontal and then if you want to go vertical so stack things on top of each other it’s got to be the widgets which
Go inside of these columns so this is an image widget if I right click you’ll see it says edit widget or edit image and then this right here is just going to be a it says an image box right but an image box without a picture right here
Is just going to be a title and a description and so that’s all that’s appearing right here right same thing here we’ve got the section background and then inside of it we’ve got this extra columns on the sides we’ve got two of them which are basically just acting as spacers it
Looks like and then inside of the center column we’ve got these three Widgets or it looks like four widgets as you can see so one’s a picture text text and an icon so now you guys understand what all these things are when they start popping up like this okay so that’s this part
Over here and this is the live website preview right over here on the left hand side we’ve got all of the settings for the website and so we always have three different tabs we’ve got the content or the layout tab we’ve got the style Tab and the advanced Tab and when I say
Content or layout if I edit the section right here you’ll see that it says layout but if I edit this text right here it’s going to say content right so it flips back and forth between content and layout and that’s perfectly fine depending on what you’re editing but I
Just wanted to show you guys that it’s always going to be these three tabs it’s either layout and content style and advanced okay so under the layout tab you guessed it it’s going to be a bunch of layout out stuff so I’m editing this section as you can see right here right
So I clicked over here in the corner I right click and I say edit section another way of doing that is you can click on the six dots right here and you’ll see it says edit section right there right so when I’m editing the section under the layout tab it does layout things
It’s pretty self-explanatory I can choose the width I can choose the minimum height right so I can move this around and that’s the height of this of this section right let’s go back to 605 which is what it was set at from here I can change the column Gap the column position vertical
Align all of this stuff which we’re not going to get too much into any of this stuff but you guys can play around with it as you want column position is basically right now you can see that it’s set in the middle if I set it to top
It’s going to move the column to the top and then I can change the position to the bottom and you guys get the idea it’s in the bottom of this section so all of these you can play around with I’m just going to go back to Middle
Because it looks better that way you’ve got different things like content with if I say boxed you’ll see that the column right here stops right here on these sides but if I go full width like this you’ll see that now the column goes all the way to the side of the website
So you can make different changes if you want to but for editing this section we’re really going to leave the layout the same and we’re actually going to be touching the style Tab and so let’s go over the style tab the style tab is all the stylization for whatever you’re
Editing so if I’m editing the section the style would be editing the background picture it would be the background overlay which as you can see there’s multiple categories here so the background overlay is the the black overlay of how dark that background is right and you can choose different
Colors of course but it’s set to Black right now you can change things like the Border shape dividers typography we’re not really going to touch much of this stuff because the template already has it all ready to go but I just want to show you guys what it is that’s the
Style Tab and you can also change it from you know a classic image background you can change it to a gradient you know like this uh so this is from you know let’s go from red to Pink I guess or let’s do yellow here just to show you
Guys you can do gradients like this if you want to or you can do a video background and you would have to put in the video link from YouTube right here and it’ll just automatically play the video in the background and then you can also do a slideshow which is multiple
Images we’ll go back to Classic so that’s the style tab you’re basically changing the style of everything let’s do the style tab for the text right here if I were to click on this text right here and go to the style tab you’ll see that it’s things like the text color so
I can change the color of it I can change the typography which if you click on the pencil it’s things like the font and so I can click on this drop down and you’ll see I have all the different fonts down here right Times New Roman
Ariel all that stuff I can change the size just by dragging the slider I can change the weight which is how thick the text is I can transform it to uppercase if I want to or lowercase I can change the style so if I want it to be italic I
Can I could underline it if I want to all of the these things are basically just the style of the text and then I can do the text stroke which adds like this weird border around it which I’m not going to do um here just to show you guys you can
Add a text stroke like this if you want something like that and then here’s the reset button and then you can also add a text Shadow if you want to and then you can you know add the blur or remove the blur you can see that shadow back there
That I’m kind of moving around you can pick where you want it so it looks like it’s popping off the page so that’s the style Tab and then we finally have the advanced Tab and so let me show you guys the advanced tab by let’s let’s do this
Picture right here so we’re going to click on the picture and then we’re going to go over here to the advanced tab the advanced tab has a lot of advanced settings like the name implies like the margins and padding and that’s usually the only thing we’re going to be
Changing inside of the layout tab unless you’re trying to get really complex with your website building um but you’ve got you know motion effects transform settings background settings responsive settings which get really complicated these are more advanced features under the advanced tab but for more expert user of Elementor
But for a basic under standing usually the only thing a beginner is going to use in the advanced tab is the margins and padding and so the padding adds padding inside of this little blue widget square right so you’ll notice that when I add padding like this and I
Go up like this it’s going to add space inside of that right so if I wanted to add space to this image and make it kind of look like this I could and the same applies when I go negative so if I go zero and I start going negative you’ll
See that it starts to grow or at least you would think but with padding it’s not going to do that because padding is just extra space between the the border and the actual object so it’s not going to work with padding but if we go to the negative inside of the margins you’ll
See that it starts to grow and then same thing with margin if I actually go back down and I go positive you’ll see that it starts to shrink on the inside so margins and padding tend to overlap sometimes but it’s important to understand that padding is going to
Be space in between the border of this and the actual object rather when you edit the margin you can actually go into negatives and kind of increase the size of something if you want to so if you want all these to be touching you could
Kind of go negative 20 like on this one and then I can edit this one and go negative 20. you guys get the idea if I wanted them to overlap and do all this crazy stuff right to kind of look like more of a montage or like a collage or
Something but I’m going to undo these changes just like this you can also unlink the values together so if I only want padding on the right hand side or on the bottom I can do that I can unlink the values and now if I go up on the
Bottom it’s not going to go up on all the others as you can see it just adds space on the bottom so now it’s just pushing the text down okay so you guys get the idea but that’s pretty much the only thing we’re ever going to change inside of the advanced tab
Um you might change some motion effects or a little bit of Border action but other than that we’re going to stick to the content and the style tab for the most part okay and then also what’s important is when you click on a widget where you’re actually editing content
Instead of you know for instance a layout tab now it’s not going to be actual layout settings you can edit the text and it’s going to be content settings so it’s what the actual text is so you see how it says nature if I click here and type something else now you’ll
See that over here on the website it says animals but this is really a useless area because if I go back to Nature I can literally type on the screen so I can put my cursor on screen just like this and I can type whatever I want
Just like that so that’s the content tab right here you can type in the actual content you can also change things like alignment so right now it’s centered but if I change it to the left alignment you’ll see you know I can play around with those kinds of things and then you
Can also add a link which is a little bit more complex but basically if they were to click on this word it’ll take them to a URL and you know you would put in www.youtube.com and it would anytime they click on this take them to YouTube so that’s a little understanding of this
Left hand side menu we’ve again got those three tabs it’s layout and content the style Tab and the advanced tab so now let’s go over this bottom little section right here and so on the right we’ve got the most important button right here and that’s update and that’s
Basically the same thing as saying save my work every time you click on update like this you’ll see that green progress bar go across the top and it just published whatever changes you made live to your website and so essentially saving your work and so you’ll notice
That basically after every time I edit a section of any kind I always click on update just to save my work just in case I accidentally get logged out or something happens my work is always saved so that’s your save button right right here over here we’ve got preview
Changes and if you click on this button it’s going to open up a new tab and let you preview all of the changes that you made inside of Elementor but on a regular web page so now you’re obviously as you can see in the domain right here
It says preview ID you’re looking at a preview of your website right and then over here we’ve got responsive mode and again we’re actually going to go over this at the very end of the tutorial but if you click on this it’ll open up a ribbon over here and you can see your
Website what it looks like on a desktop view a tablet View and a cell phone mobile view just like this right because they’re different orientations and so as you can see the website is compressing to be different sizes and so it’s important to make those changes later on in the video
Don’t worry we’re going to get to it and then to close out of this you can just click on this little x button right here and it removes that ribbon I think the last step of this video tutorial is going to be responsive mode and I’ll go
More in depth on that later in the video I just wanted to show you guys that that’s where you do it next is your history and when you click on this you can see a history of all of the changes that you’ve made and so as you can see
I’ve been playing around with this heading widget for a while well it’s going to track all of those individual edits and so all I would have to do is click on this right here so I can say let’s try this one so this is when I
Centered it this is when I choose or when I chose the right side alignment and you can basically go back in history and then from here I can click on update to save my work and now this is the live version so it’s important to know that
You can go back in history and you can choose you know if you made a bunch of changes and then changed your mind and you want to go back to what you had before you can do it here lastly you have your Navigator which was this tab
Over here on the right hand side and you know you can click on different portions of this if I want to go to this column over here now I’m editing the column down here this one or I can edit if I want to edit this heading instead of
Clicking on it I could click on heading right here and now I’m editing this heading right here our services I don’t ever use the Navigator personally I always just close it and I just edit the website as I’m touching it right here just like this and I’ll click on update
To save my work but that’s how you can open the Navigator and then you have your settings as well which we’re not really going to go into the settings the Elementor settings uh because you guys don’t really need to make any changes there but this is how you can actually
Make changes inside of here the last thing I want to show you guys is these two buttons right here on the top right corner is the Rubik’s Cube icon kind of looking thing and this opens up all of your widgets so if I’m editing this
Heading and I want to add a new widget now I can go over here and click on this little icon right here and now I can drag in a new heading widget right here and I can start typing right or if I want to add a button I can click on it
Again and I can drag in a button and as you can see I’ve added a button and also just a heads up when you add a widget it let’s add an image you’ll notice that that blue line appears that’s where the widget is about to go so if I want to
Put it above right here let go and now there’s the image and you can always right click on a widget and you can duplicate it if you want to and so now there’s two of them as you can see and then you can also delete by right clicking and saying delete just like
This and there you go and then lastly we’ve got the hamburger icon which again you can go into your site settings theme Builder all of these which we’re not going to go into in a beginner tutorial but if you want to exit out of Elementor you can click on this so for instance
This is actually why I like having a dashboard to go back to Let’s click on update to save our work just to make sure everything’s good before we exit if you didn’t open up a dashboard like this to go back to on a new tab and this was
Your only tab for instance let me close out of the dashboard you can basically click on this hamburger icon and then click on exit and it’s going to ask you where do you want to go back to and I’m going to say back to my WordPress dashboard
So let’s say leave and that’s how you can get back to your WordPress dashboard if you didn’t have an extra tab but I think that’s a whole Hassle and that’s why I just like opening everything up on a new tab alright friends now that you have a general overview of Elementor and
All of its functions it’s time to give it a real test run let’s jump in and customize the website template that we just downloaded together so the first thing I’m going to do is change out the images and the text and that’s going to practically make this website look
Completely different all on its own and then after that we can make any other changes that we need to to the website like linking up buttons and things like that but images and text are usually what make up most of the website so what I’m going to do is first edit the
Section this hero section here and before I even make any changes to the picture I actually want the height to be a little bit larger so under the layout tab which you guys now know what it does we’re going to go to that minimum height and increase the height a little bit I
Think it looks good right about here now that we’ve done that let’s go to the style tab because I want to change the background image so instead of a single image I actually want to have three different images and so what I’m going to do is go over to slideshow just like
This and then I’m going to click on the plus button right here and now I can upload the files so I’m going to click on select files and I will find them on my computer wherever I saved them which they should be on my desktop so I’m
Actually just going to go ahead and highlight all of them except for this one because that’s an old picture I should have deleted okay so now we’re going to click on open all right and by doing so you’ll notice that I checked off every single one of these automatically because I added them
To the gallery by accident but I just wanted them to be uploaded automatically into my media library so I can use these pictures later so now that all of my images are uploaded I’m going to dis-select the rest of them and only select the three that I actually want in
My hero section and to do that you just hover over the check box and you just unselect all of the images that you don’t want in your gallery just like that so now I should only have these three right here and I’m going to say create new Gallery in the bottom
Right corner from here if you want you can rearrange the images by dragging and dropping them but I think that this is a good order just like this I’m going to go over here and say insert the gallery and just like that you’ll see that our three images are now in the background
As a slideshow and every five seconds it’s gonna switch to the next image I think it looks pretty cool so from here what we can do is go over here to the left hand side and we can play around with some of the settings of the background slideshow we can change the
Duration which is in milliseconds as you can see so 1000 milliseconds is a second so this is equivalently just saying that this is five seconds so if I want to go down to four seconds I would put four thousand and if I want to go down to
Three seconds I would put three thousand you guys get the idea so you guys can change the duration to more or less than the stock five second value but personally I’m going to leave it the way it is you can also decide if it’s an infinite Loop or not which I think is
Necessary so it constantly will keep switching between the three images or however many you put and then you also have the transition duration which is that blur transition between images and you’ll see it right here in just a second just like that you can change that from being half of a second because
Remember one second is one thousand milliseconds you might want that to last more like a second or less than even half a second it’s completely up to you guys you can also change the background size of the images I always just to be safe select cover which it looks like it
Didn’t make a change but cover is basically going to stretch the image to perfectly fit the section that you put it into and so that’s what I always do and then you can also do the Ken Burns effect which I think is sometimes really cool where when you select it it’s going
To do this slow Zoom effect just like this you can also change the direction of the Ken Burns effect and so right now it’s zooming in but you can also have it zoom out if you want to so now that the background looks good let’s go ahead and
Change the text that we have right here but before we do I’m going to click on update just to save our work so far and now you guys know how to edit text in Elementor but I’m going to go ahead and change just one thing from nature to
Animals and again you can literally just click on screen and directly type on your website just like this so we all love animals and you might even change this text down here to say something instead of look deep into nature and will everything or understand everything better uh we can change that to
Something about animals if we want to so something like this so now that we have something right here we’ve got our little subtext and our full-on title we can edit the button if we want to and so I personally don’t recommend changing the color inside of Elementor because remember inside of a
Different area we’re able to change all of the colors on the website just like we did before we can still do that now and uh before we actually go ahead any further let me go ahead and show you guys where you would do that let’s click
On update to save our work and again I have a tab open for the dashboard so that I can always jump back to it but if you don’t remember you can click on the hamburger icon and click on the exit button right here so back on the WordPress dashboard we’re going to go
Over to the appearance Tab and then click on customize right here which again I’m going to open on a new tab now on the customizing page we can go over here to Global because we want to edit the global colors of the website the first change I want to do is change this
Black text on the button to be white text because personally it’s just bothering me and I want it to be white just like the rest of the text over here so I can go over to the buttons right here and I can change the global button
Color text which is right here and let’s just change it to the white color that’s right here just like that so now it’s white text back here once you’re done making changes you can click on publish in the top right corner right here and that’s the equivalent as hitting the
Update button inside of Elementor so back to showing you guys the colors that I mentioned just a second ago we’re actually going to go from Global into colors right here and you’ll see that we have the global color palette and this is the exact same color palette that we
Chose at the beginning of the video when we downloaded this template and so the reason I say the only thing you shouldn’t edit in Elementor is the color is because all of these are linked to the exact same color throughout all of the pages on the website so on the about
Page it’s also using the blue which doesn’t look like it’s used anywhere here let’s check the services page all right so then it’s only the contact page it looks like but what I’m trying to get at is here we go this blue right here and so when I change these two
Colors right here it will change any part of the website that’s using this blue to match the same color throughout the entire website which in my opinion is a big deal so going back to the home page if you wanted to change this blue color to anything else all you would
Have to do is Click right here on color number one which as you can see when I hover it gets darker right and when I’m not hovering it gets lighter so we’re changing the main color which is the lighter one and then there’s the darker one which is that hovering blue right so
When I change this first color let me go ahead and copy the code just so I don’t lose it if I were to change it to Red for instance you’ll see that now it’s red but if I still hover it goes to this secondary blue right here so if we
Change to both of these colors we’re essentially changing all of the colors on the website so there’s the red again there’s the red over there and if I go to the contact page you’ll see that the red is also changed right here so I recommend if you ever want to change the
Colors to make it a little bit more personalized to your business that you do it here inside of the global colors but again I want to go back to that same blue so I’m going to go ahead and paste that color code that I just copied just
So I would save the exact color that we had before so that being said again you can customize everything in Elementor but if I were you I’d use the global color palette to change these colors because it’s so easy to do we’re going to click on publish and we can literally
Just close out of this tab we don’t need it anymore but like I was saying if you want to make any changes inside of Elementor that’s fine I would just stick to those global colors if you want to change the color but we can still change other things like where this button
Takes your client or what the text actually says so we can right click on it and say edit Button as long as we’re inside of this widget square right and then over here on the left we’ve got the text and it’s pretty self-explanatory whatever I type right here is going to
Be typed inside of the button so maybe instead of get started we want to type learn more something like this and then instead of going to the contact page maybe I actually want this to go to the services page right because if they want to learn
More about what we do they would go to the services page and to do that we can go ahead and remove that placeholder the little uh number sign right there and as long as we put in an active URL this button will take them to that URL but
The cool thing is Elementor will literally search the pages on your website and so all I would have to do is type in services and you’ll see that I do have a service page and you know that it’s a page because it says that it is
Right here and so if I click on it it’s going to automatically insert your link that goes to the services page right so now when someone clicks on this button it’s going to go to the service page so let’s click on update to save our work
And then if you actually want to give it a test run you can open up the preview of your website remember the preview button down here in the corner and so now we’ve got the preview open if I click on this button it’s going to instantly take them to the services page
So that’s pretty cool and then they can learn more about what you do right so I’m going to close out of this tab right here all right so that’s how you can make changes to the button we’ve got the text right here and the link and that’s
All you’re going to need if you want to change that color again you go over to the global color palette so that’s our hero section I think it looks pretty good from here we can scroll on down and move to the services section and so again these are just three pictures that
You can change to be whatever you want so I’m going to click on it and instantly under the content tab I can change the picture and so I’m going to choose this is my first one this is going to be my second one right here and let’s do this third one right here
So you just click on it and you can choose your image and here it is all right and then I’ll click on insert media and now you can see that I’ve got all three of my different Services images right here and so if I want to
Change the text all I got to do is Click right here and I can literally type on screen so I’m going to change this to let’s just say dog wash and then I can change this one to dog walking services and then I can change this one to uh
Feeding services or something like that okay and so if it wasn’t clear already I’m basically doing like a animal care while you’re away business all right so now we’ve got our services images right here and then we’ve also got the text down below and if you guys want to
Change the paragraph all you got to do is Click down here and you guys can type out whatever you guys want I’m not going to get that in depth and put in a bunch of descriptions but you guys get the idea you can literally type out whatever
You want right here so now that you’ve got all three of your services done we can move on down to this little testimonial section and so it’s really easy again all you have to do is Click right here and you can literally type on screen whatever you want so if I wanted
To continue the text I can so make sure you obviously type out what a real client has said about you maybe copy paste from their email and then you can put it up here as a testimonial if you want to change this icon right here you
Can click on it and all it is is just a picture just like this and so you can delete it if you want to or you can change it to a different icon if you want but it’s obviously a testimonial and it’s a quote and so I would just
Personally leave it there if you want to completely remove move this section you can actually hit on this little x button right here and it will delete the section entirely and so just like that now it’s completely gone I’m going to hit controller command Z to undo that
But that’s how you would do it if you don’t want this section here lastly you can change the image and the name again you can literally just type their name here it’s that simple and then if you want to change the image you just click on it and then you would upload a
Different picture of them so if I want to change it to this lady for example I could say insert media and now I’ve got her picture down there instead alright so that’s the testimonial section right here let’s go ahead and move on down to the about a section and again all of
This is just text which you already know how to change and so if you want to type something here you just click and type you can even do the same thing right here for this about a section right there you guys also know how to edit a
Button you can just click on this right here and you can change out the text right here from find out more to something else if you want to change it to learn more you can so something like this and then we can change the link as well which if this
Isn’t about a section I think this button is going to take them to the about page so let’s go ahead and clear that and search for the about page and you’ll see that the about page actually pops up and it’s going to instantly put
In our URL link so we are good to go there and now all we got to do is change this picture and so we can click on it and just change the image to a picture of your team so I just chose this one and we’ll click on insert media and so
Now that we’re done with the about section and again you guys can type out whatever you want here I’m just going to skip over typing something just for the sake of time we’ll click on update to save our work and now let’s scroll on down to the bottom which is this
Questions section and so this is probably a prompt to actually get them to go to the contact page because as you can see it says let’s talk now so if you have any questions or you want to start business with me talk to me now and so
If they click this button let’s go ahead and make that change now we’re going to click on it we want it to take them to the contact page and so we’ll search for it there it is and we’re good to go and so now when they click on it it’s going
To go to the contact page so they can get in contact with us and then lastly I can change the background by just right clicking out here in the the section box right and I can say edit section or I can click on the six dots right here and
Then from here I can go to the style Tab and I can choose whatever image I want which I’m going to choose this one the last thing I’m going to do is change the image size which actually is fine so it says cover uh but I actually want to
Change it from bottom center to focus on the center of the image so Center Center you’ll notice that you’ve got top Center bottom center top left top right you can focus on what part of the image you want to focus on I’m going to choose the
Center and so now I’m going to click on update to save my work and then one more thing I’m actually going to do well two more things so the first is I’m actually going to change the background overlay to be a little bit darker for this picture so you just click on background
Overlay you can select classic and then I want the color to be black so that it darkens it right because I could choose any color if I want it to be a red overlay and then I add overlay you can see that I can add you know you can do
Whatever color you want but I just want it to be black so it’s a little bit darker something like this and then all I’m going to do is change the text color and you guys remember you can click on the text and of course you can type
Wherever you want but if we go to the style tab we can change the color and so I’m going to select from my Global colors because remember I told you guys if you want to change the color of something you can set it up to use the
Global color palette well right now it’s using the global color palette so I’m going to go down here and use my theme color of white and then I’m going to do the same thing for this text right here so go to the style Tab and we’ll use the
Theme color white right here and what I just did was instead of setting a local color I’m using the linked Global color from that other tab if you guys remember so let’s click on update to save my work just to show you guys here if I were to
Change that white color to a different color now this is going to change as well and so that’s why I think it’s really important to use those global colors it’s hooked up to where if I make any changes on that other tab even these will respond okay and so that’s how
We’re going to customize your full website so if you guys were following along now your website should look a lot more personalized to your business right so we’ve got this really cool hero section we’ve got the Ken Burns effect happening in the background with that zoom and it’s a slideshow obviously and
Then this button will take them here let me actually open it up on a new tab so I can click the buttons here and so if they click on this button it’s going to take them to the services page right and if we scroll on down we’ve got the
Services that we actually provide and then we have the testimonial section the about section and again if they open this button up it’s going to take them to the about page which as it should and then finally at the bottom we’ve got this contact Section which will take
Them to the contact page as you can see and then this is where they can get in touch you know they put in their name their email and a message right here and they can send an email to you speaking of the contact form let me actually show
You guys how to make sure that this actually goes to your correct email just really quickly from this page actually from the preview if you want you can literally go up here to WP forms in this little tab right here and then you can open up all forms just like this on a
New tab and if you guys don’t see this ribbon for some reason you can go back to your WordPress dashboard go down to WP forms right here and then click on all forms either way you’re going to get taken to the same place we’re going to edit this contact form right here so
We’ll click on edit just like this and so guys if you remember on our website let me go to the contact page it says your name your email and message and you can see it’s the exact same contact form your name your email your message right we’re going to go over to
The settings tab on the left and then you’re going to click on notifications and from here you’ll be able to set the address that it sends to and so right now it’s using shortcode to pull your admin email address that you signed up with WordPress for so remember at the
Very beginning of the email it asks to create a WordPress account and you used your admin email and a password well I told you guys that was a really important thing to remember so when you guys create that account it’s going to automatically pull the email that you
Used so it should be fine right off the bat but if it doesn’t you can always come in here and actually put in your real email something like this and so now every time someone hits that submit button on their contact form right here the send message it’s going to send that
Message to your email just like that and then you can also change some things like the email subject line so this is what it’ll look like in your inbox if you want to change the title new entry contact form and you could put you know care capw so that you know it’s coming
From your business website and then when you guys are done making those changes you can go to the top right corner and click on Save and then it’s live it’s good to go so let’s close back out of that Tab and go back to our website so
From here now anytime someone enters in their information right here and clicks send it’s going to instantly go to your inbox so that’s pretty cool so we can close out of the preview and go back to Elementor now you guys have only edited one page out of the four or five pages I
Think that are on this website and let me show you guys what I mean close out of this tab we’re going to go back to the dashboard and from here we can go over to the pages tab remember I showed you guys that you guys can edit with
Elementor by going to the page you want to edit well now you’ve got to edit all of these Pages if you want your entire website to be customized to your business right so we just did the home page and it’s it’s so easy I’ll do the
About page for you guys real quick and you’ll see how fast you can make these changes let’s go to the about page and click on edit with Elementor all you would have to do is change your image in the background here so again I just right clicked out there instead of edit
The section I go to the style Tab and I can pick which image I want and so I’m going to choose this one right here and then I’m going to say insert media just like this and now you can’t see the the little hamster or whatever it is because
It’s focused on the bottom center so let’s choose the center and now about us and there’s a little animal right there you guys can change this picture as well by editing it choose your image and you guys can put in whatever you guys want for a lack of additional images I’m just
Going to pick this dog picture right here and as you can see that’s it all I did was change two pictures and it’s already customized to my website and now all I would have to do is change this text right here to say something about
Us or my team and then I can change you know this text right here to say my mission and maybe you have values for your company so it could be whatever is personal to you and then you can either choose to change this testimonial or you can just completely remove it just like
That and then click on update to save my work all right and then we’ll close out of this tab and so now if I wanted to change say the contact form I could click on edit with Elementor right here and all I have to do is change one
Picture up top and then these four pictures down below and if you didn’t even want to change these four pictures down below like let’s say there’s not a full team and it’s just you you can choose to completely remove this section again you can just delete it just like
That and so now all I got to do is change one picture so we’ll edit the section here go to the style tab we’ll pick one of the images and so let’s just choose a random one I guess we’ll pick this one again and we can focus on the
Center and so there’s the dog again and so contact us and here’s our contact form update to save my work and of course you’re going to want to change all of this information right here because this is just fake filler information and the way that you would
Do that is really simple you just click on it right here and you can again literally just type on screen it’s that easy right and then if you want to change your phone number again type on screen and the location type on screen the final thing on the contact page you
Might want to learn how to change is these little icons right here which you can click on and when you click on them you got three of them and if you see it’s Twitter Instagram YouTube and you got Twitter Instagram and YouTube if you want to duplicate one you just click
Right here and if you want to delete it you click on the x button it’s really simple and from here you can change the link to go to your actual Twitter account and then if you have an Instagram account you would put in your Instagram URL right here and your
YouTube you would put in your YouTube and that’s it and then when people click on these it’ll go to your social media it’s really simple so let’s click on update to save and I’ll close out of this tab right here and you guys can do that for every single page on your
Website right and then by the time you’re done which wouldn’t be another 20 minutes now every time you go to a different page on your website it’s completely customized to your business right and you go to the contact page same thing we didn’t touch the services
Page obviously but again all you do is just put in some pictures put in a picture put in a picture and then you can just change the text right here that’s all you would do you guys can type out whatever you guys want just to
Show you guys let me go ahead and open it real fast and again all you would have to do is type whatever you want and this is a button right here again you can click on it and you can put in the link and so if it says start a project
What I would entail or what I would think that would mean is putting a link to the contact form because that’s where they would want to go if they want to start doing business with you right so literally you can just change this to contact
Just like that and you would do the same thing for those three buttons change your pictures and then down here you can change your text and over here these are just icons and so if you click on one you’ll see that the icon is right here
And the text is right here it’s really simple so if I want to change the text from eight years of experience I could say this is an icon and now you can see it says this is an icon and then I can change the icon by clicking on it and I
Can choose from all of the icons that they have let’s just pick a feather for some reason actually let’s pick the airplane that looks cool to fighter jet and we’ll say insert and so as you can see these are super easy to change so I’m gonna go over here to the top and
Close out of my Elementor and the pages Tab and go back to my dashboard and I’m just going to refresh the page to be safe for those of you who just came to this video to learn how to use Elementor we’re actually going to put that on
Pause just for this one step this is the part of the video where we’re gonna jump out of Elementor and jump into the customizer to edit the header the footer and the logos as well Elementor edits all of the content on your website except for the header and the footer
Which is at the very top of the website and the bottom think of it like a sandwich Elementor lets you design the middle of the sandwich while the customizer edits the bread on the top and on the bottom now for those of you who are actually following along with
This tutorial to build a complete website this stuff is just as important as the rest so let’s get right into it so from here again we’re gonna go to the appearance Tab and then click on customize just like we did earlier to change the global colors of the website
And you guys remember we went over here to Global colors well now what we’re gonna do is edit the logo the header and the footer of the website which is down below right and so to edit the header it’s really easy we can just go to the
Header Builder and you’ll see that we’ve got the site title and Logo which is basically the logo and that’s this we’ve got the button which is this over here and then we’ve got the primary menu which is this right here so if you guys want to change the logo you would go
Over here to site title and Logo just like this and now I can remove or change the logo and so this is actually the part where we’re going to go and build a logo completely for free without having to download any software I’m going to
Show you guys how to build your own logo so we’re going to open up a new tab and from here we’re going to go to a website called logo maker but without the e logomaker.com just like that and you’ll see that they can create any kind of
Logo you want if you want you can go up here to templates and pick one of their templates to start from or you can just say start the new design just like this and so over here on the left hand side we’ve got basic stuff like text right so
I can click here and it’s going to add text and I’ve got shapes so I can add a basic shape if I want to like a circle just like that up here in the top we’ve got the search bar where we can search from you know the three million Graphics
That they have and you’ve got these categories here as well that you can pick from and I could search for like camera if I wanted to and then I’ll get a bunch of cameras you guys get the idea and then over here on the right side
We’ve got the color circle so I can pick my color my saturation which is in the square and then I’ve got my opacity right here to make something more transparent or opaque and so that’s how you can make multiple changes you can select multiple things by clicking and
Dragging like this and then I can hit my delete button and it’ll delete everything just like that let’s go ahead and search for a dog because this is obviously going to be a pet care logo and so you guys can see that they have a ton of different logos that you can
Choose from right I’m actually going to pick this one right here because I think it looks pretty good and you guys can click on it and drag it wherever you want it to be you guys can also resize it by dragging the corner right and then
I’m going to add some text down below and I can drag it underneath and Center it just like this and then I can type something like this and then I’m going to go over here to the right and make the text black and then I can go over here to the top
And choose my category and the actual font so under category I could do something fun and funky I got handwriting pixel monospace scary and dark I’m going to go with simple modern and then I’ll go over here and I can choose archivo black or however you
Would say that and then I might increase the size of this just a little bit so something like this and then I can still Center it if I want to by dragging like this and then lastly what I’ll do is add a little bit of text underneath
So I can click on text again and I might be able to type something like let us love your pets so something like this we’ll drag it down below here I’m going to change it from archivo black to some Let’s uh let’s pick maybe alerta or
Maybe Allen I think Alan looks good and we’re going to change it to Black and I’m going to go to the Styles button right here and just increase the letter spacing a little bit something like this and then I’m just going to reduce the size perfect
All right I’m going to try and Center this under the text here you can use your arrow keys if you want to to move it around just uh with small Precision a little detail right there we go okay so Pet Care let us love your pet and then I
Can have the image on top and so right after that what you can do is click on something and you can change the color over here right and so I’m actually going to take the same color blue that we have for our entire website so to do
That I’m going to go back to the customizer I’m going to go back over to the global colors and I can select the actual color that we have so if I click on this I can copy this code right here and I can literally paste the exact same shade of blue onto
My icon by pasting it right here just like that and then the last thing I’m going to do is actually make the text white so that it pops off of my dark background on my website because right now you see how this logo is white so
That it will pop off the background if that was a black logo it’d be a little bit harder to see on this dark background what I’m going to do from here is just highlight the text and I’ll make it white the reason I chose to do
That at the very end is because it makes it kind of invisible on this screen as you can see but you know it’s there whenever you’re done with your logo you go to the top corner and click on Save logo and you’ll notice it’s going to ask
Uh it’s processing right now almost done and says download your files don’t click on this one because it’s going to ask you to pay for it if you guys want to do it for free you’re going to download the low resolution PNG file right here except the terms and conditions and say
Download the low resolution file for free perfect and now it’s been downloaded to my computer as you can see and we can close out of this tab now because we don’t need it anymore all right and so now what we can do is is from here we can actually insert our
Logo so we’ll go back and we’ll go over to the header Builder and then we’re going to click on site title and logo and we can change the logo right here to be our own and here it is click on select and then you might have
To skip the cropping and now my logo is available and so you can also go over here to the bottom left corner and say logo width is basically the same thing as logo size because as you can see as I drag it it just makes it bigger I think
That’s a pretty good size right there and so that’s how you can put in your own personal logo onto your website One Last Thing Before we start editing the navigation and the button over here if you scroll to the bottom you’ll see site icon and so the site icon is this little
Guy right up here on the tab you can even customize this and the way that you would do that is you can click on site icon just like this and then you can literally select it from your computer and so I actually don’t have one made
We’re gonna have to go back to logo maker so that’s my bad we’ll go back to logo maker and it should save your work by the way so if I click on start my new design you’ll see this pop up right here resume previously saved work and you
Should have your logo right here and if not you can just search for the Dog logo again and I’m going to go ahead and remove the text which you can’t see but I’m going to remove it because I just want this as my icon because I want the
Dog to appear right up here so now I’m going to click on Save download the low resolution file accept the terms and download I’m going to close out of both of these tabs and now I can finally upload the image to my website so we’ll go over to the downloads folder
And I’ve got my icon I’m going to click on select and skip the cropping and now you guys can see the little dog icon is popping up on the tab I think that’s super cool so now I can click on publish to save my work then I’m also going to
Close out of this little downloads notification okay so now we have our logo and our icon up on the website so we’re branded it looks good let’s go over here to the navigation menu right click on the back button if you guys want to change the navigation menu it’s
Really simple we’ll go over to the header Builder again and then from the header Builder we’re going to actually click on transparent header because you can’t tell but this is a transparent header because if the transparent header was turned off you would just have this
Big white bar up here with your text and logo on it I think transparent headers just look so clean so I always use them and so does pretty much everybody else who builds websites anymore but I just want to give you guys a heads up that it
Is a transparent header so if we want to edit the primary menu we wouldn’t actually go here we have to go to the transparent header and so we can go to the design Tab and from here we can change the colors so right now you’ve got the menu color you’ve got text link
And so right now the normal color is white and then the hover color or the active color is white as well we can change that to our blue color actually let’s choose the lighter one so it matches this blue and that blue and so now you’ll notice that whatever website
Page I’m on if I was on the about page this one would be lit up blue and so we’ve got this cover color so that’s how you can change the color of this as well and then if you guys actually want to change the titles you wouldn’t do it under the transparent header
You would have to go down here to menus and then you guys can actually change these if you wanted to rearrange them you can and so if I wanted to drag about underneath services like this I can and so now you’ll see that Services is ahead
Uh but instead of doing that you can also click on it and you can say remove and so that’s how you would delete one and then if you wanted to add one you can click on ADD items and add different menu items but I wouldn’t really make
Any changes to your custom links up here because they’re already set up for the home about services and contact which is pretty standard for any website but I just wanted to show you guys that this is where you would do it if you wanted to make those changes so we’ll click on
Publish to save our work so now the final thing that we want to change which is this button over here we can click on the back button go back to the main area go to the header Builder and we can change the button by clicking on this
Right here so you can change the text and the link the same way you do an Elementor you’ve got the text right here and we’ve got the link right here so if for instance you want to change instead of it having a contact button like this
You want the button to say contact and we’ll remove this let me show you guys how which I do this pretty often I think it looks good to have a button up here for the contact we’ll change this to say contact something like this contact us let’s
Maybe not do it in all caps I forgot that my caps lock was on and then we can change the link as well and so we can close out of this and we’re actually going to have to go and grab the link because unlike Elementor this one will not search the pages and
So in order to do that just go back to your dashboard really quickly open up your website on a new tab go to the contact page and literally just copy this link and we can paste it right here okay so we’ve got our contact page right
Here so now this button takes you to the contact page and we’ll say publish to save now all we have to do is just remove this from the menu and good thing I just showed you guys how to do that close out of this tab so in order to do
That we’re going to go back to the menus tab right here click on the main menu because that’s what we’re editing and we will literally remove the contact one so we will actually click on remove and then click on publish to save and so when we do that you’ll see that it says
Home about services and contact and so now when they click on the button it still takes them to the contact page it’s just now it’s a button and so that’s how you can customize that button so now that we have the header logo and site icon all ready to go we can finally
Go down to the bottom and edit section down here which is the footer so let’s go ahead and make changes to the footer right now we can go over to the main menu and instead of clicking on the header Builder we’re going to go down to the footer Builder right here and then
It’ll normally automatically drag you to the bottom so you can see where you’re editing and there’s only three things down here we’ve got the menu over here the logo and the text and so over here on the left hand side we’ve got the menu and you can see the menu is right here
Right here in the middle we’ve got the logo which is the HTML and then over here on the right we’ve got the copyright which is love nature by Tyler Moore and so these are the three things that we can change we can change the copyright just by clicking on it just
Like this and then maybe love nature by Tyler Moore let’s change that to something like something like this so pet care capw2023 whatever you guys want to put down here and then we can change this icon right here or the logo so we’ll click on the HTML widget and then we’re actually
Going to remove this one so click on remove and we’ll say add media and then I’m going to choose my icon right here and we’ll say insert into post and so now I’ve got my logo down here we can actually click on it and drag it and
Kind of resize it so it’s not as big so let’s make it kind of this big as instead and so now we have our logo down here we’ll make it a little smaller and then if you want to change the footer menu over here you can just click on the
Footer menu now you really don’t need to make any changes to this except for the fact that it does not say contact over here because this is pulling automatically from this setting up here so you could honestly create a secondary menu and try and insert the contact
Button at the end because this is the exact same menu as this one it’s pulling from the exact same setting or you can just leave it the way it is it’s completely up to you uh if you wanted to create a secondary menu so that one is
Up here and one is down here it’s a bit of a hassle but you can literally configure the menu and you’re going to have to create a new one so create a new menu just like this we’ll call it the footer menu and you want to say that it’s going
To be in the footer so check this box and then you’ve got to create it from scratch so add the items and you want to add the home page the about page services and contact and then say publish so not that much of a hassle but
I just didn’t have to do it you know us web designers can be lazy and so now you’ve got two different menus you’ve got the one that’s up here where the contact button is in place of an actual text right here and then the other one down below actually has all four right
So that’s how you would do that really simple so now we can close out of this tab and this tab and we’ll go back to our WordPress dashboard alright friends we’re going to be jumping back into Elementor one last time for the final step which is responsiveness now the
Template that we just downloaded is already responsive for the mobile tablet and desktop views but just in case you made an extra section from scratch or made some big changes that affected the other versions it’s important to check the responsive mode to make sure that everything looks correct and just a
Heads up for anyone who’s new to this mobile responsiveness is just making sure that your website looks good on the desktop view the tablet View and also the mobile view because if you think about it someone can look at your website from their phone tablet or computer and all of those screens look
Different especially the desktop which is more of a horizontal rectangle versus the mobile view which is more of a vertical rectangle again the template we downloaded already accounted for all of this but just in case we made any big changes we just want to double check our work luckily Elementor makes this super
Easy to do let’s get started so in order to do that we’re going to go over here and open our website up one last time and we’re going to edit it inside of Elementor from here you guys remember at the beginning when I told you guys how
To use this navigation at the bottom we’re going to click on responsive mode and if you guys remember again the ribbon’s gonna pop up right here so the desktop view tablet and mobile view are right here so let’s go ahead and double check the tablet view we’ll click on it
And all we have to do is scroll through the website and just make sure everything looks right if anything looks out of the ordinary or isn’t fitting correctly we can make the changes as we need so we’re just going to scroll through the website those three look
Fine so does this the about looks great and then it looks like the contact is not actually showing the picture let’s double check that this isn’t just a glitch and it looks like the image is different let’s go back to the desktop view and so it looks like the image is still
Here on the desktop view so this is an example of just double checking your work to make sure that everything looks right on different versions as we can see on the tablet version for some reason and I’m not even sure why the picture isn’t showing here so all we got
To do is edit the section and actually add the image under the tablet version of the website and so we’ll go back and insert this image and I get the feeling we’re going to have to do the same thing for the mobile view as well sometimes
Errors like this happen one thing I do want to make clear though is over here right next to the image setting you’ll see this little tablet icon and if you click on it you’ll see that it shows three different versions and so I want to make it clear that anytime you see
This little icon right next to it which is like the responsiveness icon it means that whatever changes you make here are only going to affect this one version of your website the tablet version of your website so you can tell that when we went to desktop again it’s there but if
I go to mobile I bet it’s not going to be there and it’s not and so it looks like this is just a setting where we had to individually set it three different ways so let’s just add the image one last time for the mobile view just like that and
We’ll click on update to save our work so that being said as you can see it’s very important to make sure you go back and double check that everything looks good on all three versions so we already did the scroll through for the tablet right we got all the way to the bottom
So let’s just double check the mobile view so from the top here everything looks good it looks like all the text compresses correctly and then we’ve got the three services they just stacked on top of each other so that’s pretty cool testimonial looks good website looks
Good and it looks like this is not going to show up on the mobile view and then down below we have our questions section as well so it looks like the home page and only the home page looks good on all three Renditions of the website right now if we want to
Double check the whole website we have to go Page by Page and double check the responsiveness so that means we have to close out of Elementor go to our Pages tab and then one by one we check the about page and we make sure that it looks good on
The mobile view and then we go back and we do the contact page make sure it looks good and then the services page and make sure it looks good you guys get the idea you would just open it up in Elementor open the responsive mode go to
Different modes and you guys will just double check that it looks right which it looks like this page is going to look fine so we’re good we can double check the contact page and we’ll open up the tablet which looks fantastic and the mobile and it looks really good
And then we can double check the services page as well all right the tablet looks good and so does the mobile so like I said the template is going to be optimized for all three versions of your website so you shouldn’t have to make any changes unless you built
Something from scratch or made some kind of a major change so that’s really good to know other than that we can just go back and look at our website and we’re done I’ve got to say I’m really happy with how the website turned out especially the homepage I think it looks
Great with all three of these pictures up here alright friends if you followed along with the video and created your own website you now have your own personal fully functioning website and congratulations for that I recommend checking out this video right here where I talk about the golden rule of web
Design which spoiler alert is purpose I talk about it in depth in this video but I think it’s important for you to know how to keep your website from becoming too cluttered so if you’re interested in learning much more about making your website that much better I’ll see you guys in that video
Get a discounted domain name and hosting for your website: Use coupon code: createaprowebsite for an additional 10% discount on all annual hosting plans. 👉 https://createaprowebsite.com/hostinger (Note: I receive a small commission at no additional cost to you if you use this link) TIMESTAMPS —————– — ———————- 00:00 – Introduction 00:35 – STEP 1: Domain name/web hosting/Wordpress installation 👉 https://createaprowebsite .com/ hostinger 06:43 – STEP 2: Install starter templates 12:53 – STEP 3: Elementor tutorial 28:20 – STEP 4: Customize your website 32:38 – Changing global website colors 48:54 – STEP 5 : Header/Footer/Logo 👉 https://logomakr.com 01:01:20 – STEP 6: Mobile Responsiveness 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 #Beginners
https://i.ytimg.com/vi/cFdx1lgvy1k/hqdefault.jpg
