How to Make a WordPress Website (Step By Step In 2022)
This is a complete guide for how to make a WordPress website in 2022.
In this in-depth guide you'll learn:
- How to get your website name.
- How to get your website online.
- How to make an amazing design.
- How to add a Blog, a Shop, and more.
If you want to make an amazing website step by step with no step skipped...
Then this guide is for you.
You can also watch this guide on YouTube.
Step 1: Get Your Website Online
You'll need two things to build your website.
- Hosting – this is a computer with very fast Internet that stays on 24/7 to host your website's visitors at all times.
It stores and serves all of your website's content, like your images and text. - A domain name – this is your website name, like google.com or yourwebsite.com.
You can get both for around $30-40 per year, which is an amazing deal to have your website online.
1.1. How to Get Hosting
All you have to do is go to Hostgator using this link (click here to open it).
This affiliate link gives you a 63% discount off Hostgator's regular price, which is the best deal possible.
Even better than their best Black Friday deals that they only do once a year.
I will also get a commission (at no additional cost to you) that allows me to make these in-depth tutorials for free, so thank you!
And Hostgator's prices are simply amazing for getting started.
Once on Hostgator.com, scroll down to their plans.
The cheapest Hatchling plan is the best for most people to start with.
I'd only consider Baby if you want to build more than 1 website on this same hosting account, but you can always upgrade later.
So just go with the Hatchling plan and click Buy Now.
1.2. Choose Website Name
Next we have 2 different options.
We can register a new domain, or you already own a domain.
You'd choose you already own a domain if you already have a website name registered with another company – for example with someone like GoDaddy.
In this case you'll also have to change your existing domain's settings to point to HostGator. You can see exactly how to do this here and here.
But for us we'll register a new domain for a new website.
So just type in your domain name, like yourwebsite.com, and then pick an extension like .com which is the most popular.
Or pick a different extension if the .com is taken, like .net or .org.
1.3. Hosting Options
Next we will choose our hosting options.
Scroll down to domain privacy protection.
This protects your personal information so that no one can look up who owns your website.
If you don't care about someone looking up your information and you want to save $15 a year, you can uncheck it.
But you may get some spam calls or spam e-mails from people finding your information and trying to sell you website services.
Next for the billing cycle, we want to get the best value for money option.
Keep in mind that the 63% discount is applied only for your first payment (first year if you go with the 12-month, first month if you go with the 1-month).
Plus the 12-month or longer plans give you your domain name for free which saves you an extra $15 dollars.
So I recommend you go with the 12-month plan.
Next, just put in your e-mail and password, and choose a security PIN.
Then enter your billing information and choose to pay by card or PayPal.
Next, skip the additional services section, as we won't need any of them. There are free plugins that we can install on our website for all of these things.
Then make sure your coupon code – unlock – is entered, which will ensure you get the biggest discount.
Review your order, and your total should be about $30-35 – or $15 more if you got domain privacy – which is a great deal to have your website online.
Agree to Hostgator's terms of service, and click Checkout Now!
And congratulations! 🎉
You've actually done the hardest part, which is just deciding that you want a website and doing something about it.
The next thing that we'll do is install and setup WordPress.
It's super easy, let's do it!
Step 2: Install & Setup WordPress
You have your hosting and website name sorted. Next we will...
- 1. Install WordPress
- 2. Plugins, Posts & Pages
- 3. Change Your Theme
- 4. Choose Your Design
- 5. Change Site Settings
By the end of this step your site will already look amazing. Let's start.
2.1. Install WordPress
You can find the Install WordPress text after you check out with Hostgator, and click it.
Then scroll down and click Install Now.
Next, make sure your correct website name is chosen.
And leave the rest as default, including whatever number you have for the "version."
Scroll down and skip the Site Settings for now, we will set those later.
Just choose your Admin Username and Admin Password, and also put in your main e-mail address for Admin Email.
From now on you will use this login information to manage your website.
And that's it, we don't need anything else. We'll change all of this later.
So scroll down and skip the rest of the settings, and just click Install.
It will take a couple of minutes, and WordPress will be installed.
After that, it tells us that WordPress was installed successfully.
But if you click your website name, it comes up blank.
And that's because it can take anywhere from 10 minutes to 1 hour for your website to spread across the Internet and come online.
Sometimes it can take up to 24 hours, but it's very rare.
We'll just have to wait a little while and try again until it works.
And bam, congratulations! Your WordPress website is now online!
Let's begin building it.
First, you need to Log In.
To get to your Admin login page, type yourwebsite.com/wp-admin in your browser. Replace yourwebsite.com for your website name that you chose at Step 1.
Type in your username and password that you chose when installing WordPress. And press Log In.
This will take you to the Dashboard (also known as the back-end) of your website.
This is an exclusive area of your website that only you can access, where you can manage everything about your website.
You can always visit your website's front-end – the public part that your visitors see – by going to yourwebsite.com.
And you can always visit your website's back-end – the private administration side – by going to yourwebsite.com/wp-admin.
You can also quickly switch between the two by clicking your website's name in the tool-bar up top.
And that's how you log into your Dashboard, where you wll manage your website.
Next let's make sure we start on the same page, with a clean WordPress install.
2.2. Plugins, Posts & Pages
But first, what are plugins?
Plugins are like the apps on your phone, but for your website.
Just like with your phone, plugins – essentially website apps – add additional capabilities that your website wouldn't have by default.
For example, a plugin will allow you to insert a contact form on your website. It lets visitors put in a message and click "Send" to send it to you.
That functionality doesn't come with WordPress by default, but we can add it to our website by installing a plugin.
Our WordPress installed together with a bunch of such plugins that we won't use, and they clutter up our website with things we don't need.
Which is why the first thing we want to do is to delete all of them.
We will also delete the sample Blog Posts and other sample Pages that WordPress installed with, because we will make our own.
First let's delete our existing plugins.
In your Dashboard, from the left-hand menu go to Plugins.
Then select all of them, and from bulk actions click Deactivate, and Apply.
Then select all again, go to Delete, then Apply.
Now, all your plugins are deleted.
Next, if we go to our Dashboard, we can see it's cleaned up - we don't have all of those messages we had before, and it looks much better.
Next let's delete all of your existing blog posts.
From the left-hand menu click on Posts, and hover over the Hello World! post and click Trash.
Then we can go to our Trash on top, hover over it, and Delete Permanently.
Next we can click on Pages, select the existing pages, and from Bulk Actions click Move to Trash and Apply.
Then go to our Trash, select them all again, select Delete Permanently, and Apply.
Now we can all start on the same page, from a 100% clean WordPress install.
2.3. Change Your Theme
The next thing that we're going to do is switch our theme.
What is a theme?
The theme is the design of your website.
If you go to your website, you can see your current (default) theme.
We will replace it with something much better.
All we have to do is go to your website's back-end (by going to yourwebsite.com/wp-admin).
And then we need a new plugin.
So from your left-hand menu go to Plugins > Add New.
And in the search bar on the right type in Starter Templates and press Enter.
The plugin will show up, and we can click Install Now and then Activate to install it.
Now, if you hover over Appearance in your admin menu, you can see a Starter Templates option that wasn't there before.
It was added by our newly installed plugin.
Click it, and then scroll down and click on Build Your Website Now.
Next we get a choice of 3 visual page builders, but Elementor is by far the best and most popular page builder.
So just click on Elementor.
Now we're ready to choose our site's starting design.
2.4. Choose Your Design
Once here we can choose and install any of these websites with just 1 click.
There are thousands of designs to pick from, and you can make a website for any type of business.
We can do a search for something like law, or church, or real estate, or anything that you may need. And many of the best ones are absolutely free.
For this tutorial, we're installing the one called Love Nature because it's super professional and it's one of the best ones to start off with.
We made it ourselves from scratch, specifically to showcase it to you in this guide and to make it as easy as possible to get started.
We recommend you choose Love Nature too, just because it will make it much easier to follow this guide and learn easily.
Then you can always replace it later for any design that you want.
So search for Love Nature and click it.
Then it will ask you to put in your logo but we'll do this later, so Skip it and Continue.
Then go with the default Colors & default Font (you can change them later) by clicking Continue.
Then skip the rest of the settings and just click Submit & Build My Website.
And that's going to import the entire template into your website, saving you hundreds of hours of work.
It will take a minute or two, and then your website will be imported.
You can now click View Your Website, and you can see what it looks like.
You can also browse through it, and as you can see it's already looking beautiful.
It imported all of the design's images, the entire homepage, and all of the pages in the menu.
And it also got our Contact page and Contact Form working.
It also added 2 new plugins automatically to be able to get all of this working.
If you go back to your back-end and go to Plugins, you can see that we have installed the Starter Templates one ourselves – it allowed us to import this template.
Then by importing the template it automatically added two more plugins:
- Elementor – this is our visual page builder.
- WPForms Lite – this allows you to have a Contact Form on your site.
We will use these plugins later.
Next let's see how you can edit your site's general settings.
2.5. Change Site Settings
In your back-end menu go to Settings > General.
Here you can change your Site Title and your Tagline, which is a short description.
These both show up in your browser tab on your website, and also in search engines.
If we go to your website and we hover over it, you can see that it says Make a Website - Learn How To Make a Website.
This corresponds with the Site Title and Tagline that you set in your settings.
You can always change this whenever you'd like.
Caution – Never change the two (URL) fields here, it will break your website.
Then if you scroll further down, you can change the Language of your website.
But we recommend you keep it in English while following this guide, and you can always change it later.
You can also change the Date & Time Format, and if you scroll down you can click Save Changes to save any change that you made.
And now we're ready to move on to the exciting part – designing your website!
Step 3: Design Your Homepage
By the end of this step you'll know how to edit everything on your Homepage.
- 1. How to Edit a Page
- 2. How to Change Text
- 3. How to Change Buttons
- 4. How to Undo & Redo Changes
- 5. How to Change Sections
- 6. How to Change Images
- 7. How to Change Backgrounds
- 8. How to Change Spacing
Let's jump right in.
3.1. How to Edit a Page
Go to the back-end of your website, then go to Pages, and when you hover over your pages you can see Edit with Elementor.
Click on Edit with Elementor for the Homepage, it is right under it.
Now we can visually edit everything on our page, except for the top of our website – called the Header, and the very bottom of our website – called the Footer.
Later we'll be able to edit that too, but right now it's just the inner page that we're designing using Elementor.
The main concept here is anything that you click on the right side, you can edit on the left side.
For example you can click on a button on the right side, and you can edit it on the left side.
You can do this with any element on your website.
It will make way more sense once we start editing things, so let's just jump in.
And we'll learn everything just by doing it together, step by step.
3.2. How to Change Text
First let's see how to edit your text.
Once you learn this, you'll be able to edit any text anywhere on your website.
Let's say that we want to make our text on the top of our website, look more like the text on Pixar's website.
It's super easy to do this, first we can delete any text on our website by simply going over it, right clicking the blue pencil icon, and then click Delete.
Then we can select the "nature" text below, and in the left panel we can adjust its settings.
If you look at the top of our left side panel, you can see that we have 3 different types of settings: Content, Style and Advanced.
We only need to edit our Content and Style settings for now, and we'll worry about Advanced later.
Under Content settings, we can change what the text says, and also how it's aligned.
For example we can change the text to EXPLORE and we could align it to the left, right or center.
And we can see a preview of those changes live on our website.
If you're happy with the result and want to save the changes, click the green UPDATE button on the bottom-left.
Then we can move on to Style settings, which is where we control how our text looks.
Like its color and its size.
First we can change its color by clicking on it, and then dragging around to make it any color we want.
Next under Typography, we can change the Font.
We'll choose the Josefin Sans font because it's very similar to the Pixar website.
Then we can change the text's Size by dragging it, or we can input 70 pixels.
Next we can adjust the Weight – how bold the text is – and we can just set it to Bold.
Finally, for Letter Spacing we can drag the slider, or we can type in a value like 15.
And now we can see that the text is looking exactly how we want it, very similar to the Pixar website.
You can do the same to change any text on your entire website, like the Our Services text below, the testimonial, and anything else.
Just click any text, then use Content and Style settings to make it look like anything you want.
You can also add any new text to your website by simply clicking on the Widgets button like in the video below.
Then we can drag in a Heading element – if you want to insert title text – or a Text Editor element – if you want to insert a paragraph text.
And you can drop it anywhere you want on your website.
Then you can use Content and Style settings like we just learned, to make your text look like any text you want.
We will delete the extra text because we don't want it, but that's how to add new text.
Next let's see how to add and edit buttons on your website.
3.3. How to Change Buttons
To add a button we again click on the widget icon, and we can simply drag a Button anywhere we want.
Then we can use the Content settings to align it.
And we can also remove it by simply hovering over it, right clicking the blue pencil icon, and pressing Delete.
But now let's say we want our main header button to look like this LEGO.com button.
We can see that their button has a white background, and when you hover over it the button turns black, and it also has a little icon to the right.
Let's go back to our website, and let's see how to re-create that button.
First let's click on our Get Started button, and again we can see the Content and Style settings on the left.
For Content we can change the button Text, we'll can make it say Start Now.
We can also change the Link of the button, or the page URL that it will take you to when you click it.
We will leave it as it is (it links to our Services page), but you can type in any page URL you want in here and you can link the button to it.
Further down we can also give it an icon just like the LEGO button.
We can use any of the existing icons, for an icon similar to LEGO we can search for greater and we can find an identical icon.
But we don't like that too much so let's type in long arrow, select it and click INSERT.
Then we can change its position to After, and it looks great.
Next, under Style settings, if we open up Typography we can change the Size of the text inside the button. I'll make it 18 pixels (px).
Further down we can change the Text Color and the Background Color, and we'll change the latter to white just like the LEGO button.
And if we click on HOVER, we can adjust the same settings again, but these will apply only when we hover our mouse over the button.
And we'll want the same colors, but in reverse - white text on a black background.
Now if we hover over it, we can see that change.
Next we could give our button a Border, for example we could do a Solid border that's 7 pixels wide and we can change its color below.
But we'll go back to no border because LEGO didn't have one, but this is where you could add it if you wanted.
Next for the Border Radius, this is how rounded the button's 4 corners are.
For example if we put in 40 pixels for all of the corners, they will be much more round.
And if we put in 0, it will be very sharp, like a square.
But we'll leave them at 4px because that looks a lot like the LEGO button.
Finally for Padding, this is how much space there is inside the button.
For example if we make it something like 18px 20px 18px 24px, it will make it look like the same spacing as the LEGO button.
Now we can compare our button against the one we wanted, and you can see that it looks very similar.
And that's how you can create any style of button that you want, and you can change any button on your website.
As well as add new ones and remove existing ones!
But let's say we changed our mind about the most recent changes we made.
How can we quickly travel through time and undo or redo them?
3.4. How to Undo & Redo Changes
But let's say that we actually don't like any of that and we want to go in reverse and undo everything that we just did.
It's super easy to do that.
All you have to do is click anywhere on the right side of the page, and then press CTRL+Z – if you're on a PC, or CMD+Z – if you're on a Mac.
That will un-do all of your changes once change at a time.
So we'll press it as many times as we need in order to go back to how it was.
And if we go back a little too far, we can always press CTRL+SHIFT+Z – on PC, or CMD+SHIFT+Z – on Mac.
And that will re-do our changes. Super easy and helpful.
And this is exactly how we want to leave our button – our old colors and size, with our added Icon and "Start Now" text.
Next let's talk about Sections and how to control them!
3.5. How to Change Sections
Your entire website is made out of sections, which are like big boxes that hold all of your content like text and buttons and images.
You can see where a Section is by observing its blue border when you hover your mouse over it.
For example all of these big blue rectangles are separate Sections.
All of our text, and images, and buttons are contained within these Sections.
If we open up the Navigator by going to the bottom-left and clicking its icon, we can visualize all of our sections in it.
And we can click on any Section within our page, and it will jump to it.
If we go to the second to last Section, we can see that this Section has two different columns.
And we can open the drop-down arrow and see that is has a Column on the left side, and a Column on the right side.
This allows content to be on the left or right side of our Section.
We can tell visually that it's a Column because when we hover over it we can see a gray Column icon, and the Column content is outlined by a gray border.
Inside our Columns we can drop different widgets like we did before.
You can click on Widgets, and drag & drop anything within your columns.
And we can see all of the existing widgets inside the column by clicking on the arrow dropdown inside the Navigator.
For example we can see that this Column has a Text Editor, Heading, another Text Editor, and a Button. And they correspond with what is on our website.
The Navigator makes it super easy to select any of these elements, and that way you can change any of their different settings.
But we can exit out of the Navigator, and we can actually click hold & drag any Section in order to re-arrange it.
Just click, hold & drag the 6 dots icon on top of our Section.
Then drop it wherever you want.
We can also drag and rearrange columns the same way – click, drag and drop.
We can also adjust the size of our columns by going in between 2 columns and clicking, holding and dragging to adjust.
And we can add a new Section by clicking on this + sign down to the bottom, and we can add a new Section with one or more Columns.
Once you add a new Section, you can add different widgets to it, in order to add new things to your website.
But we'll go over that in more detail a bit later.
And that is how you can control all of the different Sections and Columns on your website.
But for now let's undo all of our Section changes.
Next let's see how you can add, edit or delete any images on your website.
3.6. How to Change Images
Your images play a huge role in the design of your website, so let's see how to control them.
Let's say we want to change the leaf image on our Homepage.
But first, what if you don't have a great image to replace it with?
You can find amazing copyright-free images at one of my 3 sources.
Or if you'd like, you can download all of the images I use in this guide, here.
For example let's go to Pixabay and you can simply search what you want.
Let's say we want a guitar-related image, for example I'll search country road guitar.
We find that image and then you can simply download it.
Make sure to not download the highest resolution one, because it's way bigger than you need.
And the file size will be big which will slow down your website.
The second to last resolution is perfect, so just click download and save that file.
Now that you have the perfect replacement image ready, just click on the leaf image on our Homepage.
And then go over to Choose Image on the left panel, click it.
Now we can select and upload our guitar image that we just downloaded.
Then just Insert Media, and we have that image right in your website.
You can then go to Style options in your left side control panel, and you can change the width of the image to make it smaller or bigger.
I will make it take up 85% of the space inside our column.
Next you can also change its Opacity – how see-through it is.
You can give it a Border if you want.
Or in CSS Filters you can change things like its brightness and contrast.
Finally I'll want to change the image's Border Radius to make its corners round.
I'll just put in 20 pixels for each corner.
You can also add any new image wherever you want on your website.
To do this just go to Widgets, then drag the Image element wherever you want.
Then you can simply select the image and press Insert Media.
And if you change your mind, just hover over the pencil icon, right-click and Delete to remove any image from your website.
Now you know how to add, delete, change any image on your website.
You also know where to find awesome free to use images online.
Now is a great time to talk Backgrounds, which can also be images.
Let me show you why.
3.7. How to Change Backgrounds
Let's look at the very first big image on our Homepage, right at the top.
This one seems different, and it is. It's a background image.
It acts as a background for the whole top Section of our website.
Backgrounds are a super important part of our design, and you'll often want to change a background to achieve a desired look for your website.
For example if we take a look at Airbnb's website, we can see they have a huge background image, with text and a button on top of the background.
And that's just like our website - we have our text and button on top of the background image.
But how do we change this image?
All you have to do is click the 6 horizontal dots on top of your Section, and now you're controlling the settings for this entire Section.
We can change our background image under Style settings on the left, and all you have to do is click on Choose Image.
Then we can upload our own file by clicking on Upload Files.
Then you can click Select Files, find the image, and upload it then Insert Media.
And that will change the background image for this Section.
Again, you can feel free to download and use the same image I use, here.
Or of course, you can upload any image that you want.
On the left you can change things like its positioning and size, but the default settings are perfect.
Next we can notice that our image is a little dark, and that's because it has something called a Background Overlay.
If we scroll down on the left panel, we can open the Background Overlay settings.
And we can see that it has a Black Color overlay of 0.2 Opacity.
If we adjusted it to 1 Opacity, our Overlay would be 100% opaque or solid, or if we adjusted it to 0, it would be completely see-through.
You can also change the Color from Black to anything else.
But we want to get rid of the Background Overlay for this Section, so just set it to 0.
And it's looking great.
Next we can move on to our Testimonials section, and we can see that it also has a background but it's a color and not an image.
So we can select the Section, go to Style, and we can change the color to any color that you want.
You can play with it then you can undo by pressing the Clear icon to go back to the original color.
Another cool thing that we can do is create a Slideshow background.
We can select the Slideshow option in the left panel for the last Section.
And then choose 3 images and Create a new gallery and Insert gallery.
That will make our background into a slideshow.
And we can change its duration to something like 2000ms (2 seconds) to make our slideshow play faster.
You can also play with the other settings on the left, and you could enable the Ken Burns Effect which gives us a cool zoom for each image.
If you don't like all of those changes, you can just click on Classic Background, and that will return it to normal.
Now you know how to manage the backgrounds and how to make them into an image, a color, or a slideshow!
Next let's move on to Spacing.
3.8. How to Change Spacing
Everything on your website has spacing around it.
Without spacing, everything would be smashed together and it would look terrible.
For example if we select this Find Out More button, say we want to move it down and to the right.
We can simply click Advanced on the left panel, and for Padding we can unlink the values first so that we can set different values for each field.
Then we can give it a Padding like 100px Top and that will add 100 pixels of space to the top.
For the Left Padding we can put in 50px for example, which will add 50 pixels of space to the left.
And that's how we can position this button exactly how we want to by using Spacing.
And just like this button, everything else has spacing around it.
You can click any element, then go to Advanced, and you will see that most elements have spacing around them.
For example this Text has 20px Top and 20px Bottom spacing.
And this Image has 16px of space all around it.
We can also click on an entire Column, and under Advanced we can see that is has 250px Padding on the Right side.
This Padding is the reason why the text doesn't go all the way to the right side.
If we put in 0, it will go all the way across, but it doesn't look as good.
But that Padding is what makes the text stay on the left side.
We can also click an entire Section, and go to Advanced, and we can see that it has 50px of space on top, and 50px of space on the bottom.
So even entire Sections can have spacing themselves.
But looking at our settings, we can see that aside from Padding we also have Margin.
But what is Margin, and how is it different from Padding?
The easiest way to show you is down in the Testimonials section.
We can click it and if we put in 150px top Margin and 150px top Padding, what happens?
As you can see, the Padding adds space inside the blue section's border.
But when you add 150px Margin, it adds the space outside of the border.
And so Margin adds space outside your element, while Padding adds space inside.
This is the key difference and it plays an important role especially when you have a section with a Background, or one with a Border.
But most of the time Padding and Margin act the same, so you can usually just use Padding and not worry about it too much.
Next I'll just undo those changes that I've made to demonstrate Margin vs. Padding.
The last thing you need to know is that aside from Padding and Margin, entire Sections can also have a specific set height.
If we click on our top Section, under Height we can see it's set as Min Height (minimum height).
And you can set the slider to more or less, which will make your section bigger or smaller, or you can put in a height in Pixels.
And that's everything you need to know to control the spacing on your entire website!
Save Your Changes
Now that we're done with the Homepage, you'll want to click on the green UPDATE button to save your changes.
And now all of our Homepage edits have been saved.
Next we'll move on to designing the other pages on your website.
I will also show you a super cool effect that Apple uses on their own website!
Step 4: Design Other Pages
By the end of this step you'll know how to edit everything on your About, Services and Contact pages.
Plus you'll know how to make your website mobile friendly.
- 1. How to Use Videos
- 2. Video Backgrounds Like Apple.com
- 3. How to Change Icons
- 4. Mobile Friendly Pages
- 5. How to Add a Google Map
- 6. How to Edit Contact Form
Let's get started.
4.1. How to Use Videos
The new element that you'll encounter on the About page is the Video widget.
And I'll start by showing you how to use Videos on your website.
Let's start by editing our About page.
Just go back to your Dashboard, then under Pages, for the About page click Edit with Elementor.
From here we can edit everything just like we learned to do on our Homepage – you can change your text, buttons, images, spacing, etc.
But let's say we want to replace our image here with a video.
We can delete our Image and then we can easily add a video by just dragging the Video widget in its place.
This video could be something about you, a testimonial, or some info about your product or service(s).
Pro tip: If you do have a video for your own website, the best way to add it to your site is to first go to YouTube and upload it there.
You can take the YouTube link of your video, for example I will copy the link of my WordPress 2022 video tutorial.
And you can copy and paste it into your website just like so.
And that will make the video show up on your website, and you can play it directly there by clicking on play/pause and skipping around just like a normal video.
You also have a bunch of video options on the left that you can play with, but the default settings work great.
If we want our image back, we can just undo our changes and bring it back.
Next I want to show you something even cooler that we can do with Video.
4.2. Video Backgrounds Like Apple.com
Let's scroll all the way down, and click on the Testimonial section.
Then we can go to Style and change the color to a lighter green.
We will also make both text elements white to see it better on our green background, and we'll remove the quotes image too.
Then we can drag in a Divider widget to replace our quotes that we had.
And under Content settings for the Divider I gave it 22% width and centered it, then gave it a quote style icon in the middle like so.
Under Style, I changed the Color to White and Weight to 3 to make the line thicker.
Then for the Icon I gave it a White color too, changed its Size to 25 and set the Spacing to 20.
Now for the magic part, let's change its whole background by clicking the entire Section, and under Style we can select the Video Background option.
Then we can paste in a YouTube video that you have or that you like, I chose this one because I think it's super cool.
Then I set the Start Time to 67 seconds, and End Time to 94 seconds.
This will make it keep re-playing the part of the video between seconds 67 and 94.
Finally we can see that the text is a bit hard to read, and to fix it we'll add a Background Overlay.
Scroll down and open it, then click on Classic, change the Color to Black, and give it an Opacity of 0.2.
That will make our background video darker, and our white text will look much better against our bright video background.
The next thing we want to do is select a fallback image.
This will make it so that if for whatever technical reason the visitor's browser cannot play our background video, it will show our selected fallback image instead.
It's like a backup plan.
The last thing we want to do is edit how big the Section is.
To do that let's go to Layout options on top, and for Height set it as Min Height, and give it a value of 420px.
And now that's looking perfect!
You've just learned how to make a very similar video background effect as the one that Apple uses on their own website.
We made the same style: a background video, with elements like text and buttons that we can put on top of our playing video.
Super cool.
Let's move on to designing our Services page next!
4.3. How to Change Icons
Start by going to your Dashboard > Pages, then for Services click Edit with Elementor.
We can again change everything here like our text, buttons, and everything else just like we learned on the other pages.
And we've put in some helpful text in this Love Nature template to try and give you some ideas of what to write for your own Services here.
But of course you can change this page however you want, because you already know how to change everything on it.
There is one thing that is unique about this page, and that is down at the bottom where we can see these icons.
You can easily change them by just clicking on any of them, then going on the left and changing the settings.
You can click the Icon Library and then search for something like hands or clock or graduation cap, and it will update the icon when you insert it.
You can also change the text by just clicking on it and changing the text field.
And that's looking even better than when we started!
But I wonder, how does this page look like on a Tablet or a Phone?
It's super important for your websites to work on phones and tablets.
And that's because believe it or not, anywhere from 70% to 90% of your traffic will be coming from mobile devices.
Luckily Elementor makes it super easy to make your website mobile friendly.
Let's see how to do it.
4.4. Mobile Friendly Pages
All we have to do is click on the responsiveness icon on the bottom-left, and a top bar will open up with 3 icons – Desktop, Tablet and Mobile.
For example we can click on Tablet and preview what our website looks like on tablet devices.
And right now it's looking really good.
If we click on the our services text, we can see on the left that some of these values have a small icon beside them.
If we go to Style > Typography, we can again see the icon for some of the values here, for example beside the text's Size setting.
This icon allows you to change this specific setting on Tablet, independently of the other two variants of your design (Desktop and Mobile).
For example we can make the our services text bigger or smaller just for Tablet.
Let's make it 45px.
Then if we go to our Mobile view, under Typography, we can see that this size 54px, different from Tablet (45px) and Desktop (76px).
Some of these settings, like the Weight and the Font Family, don't have that icon.
So you can't set them independently of each other for your mobile friendly modes.
This means that the Font Family and the Weight of the text is always going to be the same no matter which device you're on.
But we can have a unique Size, Line Height, and Letter Spacing for example.
We can do this with all sorts of values, from Size and Typography like we just did, to Spacing and Section Height.
While in Tablet mode, select our second Section, then go to Advanced.
We can see that our Margin and Padding also have the responsiveness icon, which means they can be unique and independent of each other.
For example for Tablet we have 90px Top and 50px Bottom Margin, but if we go to Mobile they are 60px and 60px.
And we can see that if we make them 30px and 30px – that will change the spacing, but just on the selected (Mobile) version of our website.
Again we can do this for all Sections, Columns and Elements of our page, only if the setting in the left panel has the Responsiveness icon beside it.
And lastly, if we click on Desktop mode and we scroll down, we can see that our Icons at the bottom show up on the Desktop version of our site.
But if we switch to Tablet or Mobile, they become grayed out.
This is because they are hidden on the Tablet and Mobile versions.
You can hide or show any element on any device by simply clicking on it, like our Icons section.
Then if we go to Advanced, under Responsive, we can see that our Section shows on Desktop and it's hidden on Tablet and Mobile.
We could toggle to show them and then they would become visible on Tablet.
This lets you control every single element's responsiveness exactly how you want.
And that's how we get our website to look and work perfect on every device!
Let's go ahead and hit UPDATE to save our changes.
And let's move on to our last main page – the Contact page.
4.5. How to Add a Google Map
Again start by going to your Dashboard > Pages, then for the Contact page click Edit with Elementor.
We can again change everything here like our text, buttons, and everything else just like we learned on the other pages.
You can and you should put in your own e-mail, phone, location and social media accounts.
But what if we wanted to add a cool map?
We can click on our Widgets, then we can scroll down to Google Maps, and drag it into our website.
Then we can put in a Location – any area in the world that is findable on Google Maps works.
And we can adjust the Zoom and the Height of the map.
Then if we go to Advanced settings we can fix the spacing, so let's unlink our Padding and set it as 70px 50px 0px 50px.
Now we can click the small arrow and preview our map, and it's looking great.
Next let's move on to editing our Contact Form on the right-hand side.
4.6. How to Edit Contact Form
The one thing that we can't directly edit directly in Elementor is the Contact Form.
If we click on it, we can see that it says [wpforms id="10"] – this is called a shortcode.
It is what inserts this contact form into our page. Note that your ID might and probably will be different, that's normal.
But how do we edit the contact form?
Open up a new tab and go to your Dashboard.
On the left panel, you can see WPForms – click it and you'll see your contact form.
It will say [wpforms id="10"] on its right side – the same shortcode and ID that was inserted into your Elementor page.
You can click on the WPForm to edit it. And then you can see your contact form.
You can change any of the fields, or you can add a new one, like a Multiple Choice question for example.
Just like with Elementor, you simply click hold and drag it into your form.
Then you can change the possible multiple choice answers if you want, and you can Save your changes.
Then if you go back to your Contact page and refresh it, you can see your changes.
Now let's try to send an e-mail by filling out all of the information and pressing Send.
And we can see a message that says thanks for contacting us.
That's the same message as in the WPForm under Settings > Confirmation.
If you change the confirmation message there, it will change the thank you message so you can customize it however you want.
But I want to go back to how it was, so I will return to the previous settings, delete our multiple choice question, and click Save.
Then I want to check my e-mail to show you how the message looks.
This is the e-mail that you'll receive when someone tries to get in touch with you using your website's contact form.
You can then reply to this e-mail that you received, and your site visitor will receive your reply inside their e-mail inbox.
And that's how you edit your contact form.
Next let's move on to Step 5, how to add a completely New Page to your website.
Step 5: Add New Pages
By the end of this step you'll know how to add any new page that you want on your website.
For example you can add an Our Projects page, a Restaurant Menu page, a Courses page.
Or any other page that you can think of.
- 1. Create a New Page
- 2. Import Readily Made Designs (#1)
- 3. Copy Existing Design (#2)
- 4. Design From Scratch (#3)
- 5. Add New Page to Menu
Let's get started.
5.1. Create a New Page
Go to your Dashboard > Pages, then click on Add New at the top.
Then you can add a title to your page – I'll name mine Projects.
Then click on Publish and then Publish again.
Then we can click on Edit with Elementor.
And now there are 3 different ways to make a new page design quickly and easily.
Next I will show you the 3 ways, one by one.
5.2. Import Readily Made Designs (#1)
The first way is to add completely new readily made designs to your website.
They can be readily made full page designs, or readily made blocks (sections).
How to Import a Full New Page Design
Start by clicking on this S icon, and on top-right look for Free templates.
You can import any of these page designs in just one click.
You can also go on the top-right and search for something, like projects.
Then we can pick a page template you like, and you can import it.
This technique will save you tons of time.
Now we can edit this new design however we want to make it fit our needs.
I will delete most of the Sections because I won't use most of them.
And that will leave you with just the elements that you want on your new page.
Next let's see how to add new readily made block (section) designs.
How to Import Only a Section (Block)
Again start by clicking on the S button, then select Blocks instead of Pages.
Now we can insert any of these new section designs.
For example on the top-left I will search for Statistics.
And I will choose a Statistics block that I like then import it with 1 click.
Of course you can import any of the other blocks, there are hundreds and hundreds of options to choose from.
I will also customize my new block by clicking on the entire Section, going to Style, and giving it a very light gray background.
Then I want to select the Divider element and I want to change its color under Style.
I will make it our yellow theme color by clicking on the globe icon and choosing my theme color that I want.
Obviously you can change it however you want – you could put in your number of clients, how many hours you've worked, how many projects you've completed, etc.
And this new pre-made design was already made to be mobile friendly, which saves us a ton of time.
It looks amazing, and we've built it in just 2 minutes!
Next let's UPDATE to save our changes, and you can preview your new page by clicking on the eye icon on the bottom-left.
And our page is looking great, except our Header is White and looks weird.
Fixing Transparent Header
To change our Header to be transparent, first locate the page that has the issue in your Dashboard > Pages.
Then click on Edit Page – the normal Edit, not Edit with Elementor.
Then on the top-right, click on the small Astra Settings icon, scroll down, and under Transparent Header make sure you change it to Enabled.
Then press Update, and you can click on Preview on top to view your page.
And we can see that the Header is now transparent and it looks perfect.
And that was the first way to make a beautiful new page fast and easy, by simply importing a pre-made design and then customizing it to your liking.
Next let's look at the second way to make a beautiful new page.
5.3. Copy Existing Design (#2)
The second way is to simply Copy a Section from another page that we already have on our website, and Paste it into our new page.
For example let's say we want to copy something from the About page.
To do that, let's go to the About page, and then click on Edit with Elementor.
And let's say we want to copy our Header section.
All we have to do is hover over the 6 dots on top of the Section, right click, and Copy.
Then in another tab go back to our new Projects page, scroll down, and within Elementor's gray-border area, right click and Paste.
Then you can click, hold and drag it all the way up, and you can Delete the old Header by just pressing the X when you hover over it.
Finally we will edit the header text and change it to our projects.
Then we can select our Section and under Style we can change our image by Choosing Image and uploading our new file, then Insert Media.
And now that's looking great.
Next let's say we also want to copy our bottom Section from the About page.
Just go to the About page tab, and again Copy it and Paste inside the Projects page.
And that way we have easily copied and adapted our Top and Bottom sections from our existing About page, to our new Projects page.
So now we know how to insert pre-made designs, and how to copy a design from an existing page on our website.
Let's move on to the third and final way to add a new page design.
5.4. Design From Scratch (#3)
The third way that we can put in a new design is by making it from scratch ourselves. And then making it mobile friendly.
Starting completely from scratch like this is rarely worth it, but it may be useful if you want to make something really specific.
To do this, you'd scroll down and click on the + Plus button at the bottom.
And then you can select if you want 1, 2, 3 or more columns in your new Section.
I'll just add a new 1-column new Section.
Then you can go to your Widgets, and I'm going to drag in a Heading, a Text Editor element, and a Button, inside our new 1-column Section.
And of course you can select and edit the elements, like aligning them to the center.
Then you could select your Section, and you could add a background and spacing and everything you've learned.
And that's how you can make a completely new Section and Design from scratch.
And that's how you can make a completely new Section and Design from scratch.
But I'm just going to undo all of this and UPDATE the changes we've made so far to this page, and then I want to take a look at our final result.
And we can just click on Preview on the bottom-left, and now that page is looking really nice and professional!
And it's already mobile friendly and we've built it in only a couple of minutes, saving you hours and hours of time.
But there is actually one more thing that we need to do.
5.5. Add New Page to Menu
We need to add this new page to our menu, so that our users can actually click on it and go to the page that we just made.
So let's go back to our Dashboard, and then to Appearance > Menus on the left.
And we can edit everything about our menu right here.
We can click on every item's name and we can change it we want.
But I'm just gonna add a new Page by selecting the Projects page on the left, then clicking Add to Menu.
Once we do that, we can click hold and drag our Projects page to position it – I'll place it just above Contact.
Then we can click on Save Menu.
Next we will go to our site's front-end to see the menu changes that we just made.
And now we can see that our menu has the Projects page inserted, both in the Header at the top, as well as in the Footer at the bottom.
It added it in both places.
One more thing that you could do, is to click hold and drag the Projects page horizontally to indent it.
For example you could indent it under the Services page to make it a sub-menu.
Then we can Save Menu and go to our website and refresh, and now our new page will be a sub-menu under Services.
That looks great so I'll leave it as a sub-menu.
And that's it.
Now you know how to add a new page, how to quickly design it beautifully, and how to add it to the menu.
Next up is the last design step, editing the top and bottom parts of your website.
Step 6: Design Header & Footer
By the end of this step you'll have a beautiful professional logo made by yourself for free.
Plus, you will know how to edit everything in the Header & Footer - the top and bottom parts - of your website.
These are the last two sections of you website that you need to learn how to edit.
Let's get started.
6.1. Make Logo & Site Icon
Let's start editing our header by making a logo.
If you have a logo already you don't need to do this, but if you don't have a logo, you can easily make one right now.
Let's start by opening up a new tab and go to logomakr.com.
Then click on Start My Design, and Create a new design.
And on the top bar we can search among over 3 million graphics on this logo builder.
I'll just search for Mountain, I'll click on it, and it will insert.
To edit our logo, we can do things like click hold and drag items to move them.
We can also resize elements by holding on to its corners, and we can also add text to the logo by clicking on the T tool on the left.
Then we can type in our text, resize it, and move it just by clicking on it.
And that looks just like a regular icon with text logo.
But I want our logo to look more like the Apple logo, which is just the simple icon.
So I want to delete our text by right-clicking it and pressing delete.
Then I want to resize my icon and make it bigger.
Next I want a circle around it, so I'll go up to the search bar and search for Circle.
I'll choose my circle and resize it to make it bigger, then I will adjust the size of my icon, and center it perfectly inside my circle.
Pro tip: you can also select the icon, then use your keyboard's arrow keys to move it very precisely.
And now that the shape of my logo is done, I want to save 2 versions of it.
First I will highlight my logo (the circle and the icon inside), then on the right side I will change the color – you can change it to any color.
But I want to make it White first, and save it by clicking the Save icon on the top-right.
You won't be able to see it on logomakr, but you will be able to see the white on our website.
Then I will Download Low Resolution file – it's more than enough for our needs.
So that's our first (white) version saved, then I want to select everything again and create a second version that is dark green like our theme's color.
The dark green that I want has the hex code 536941 which is the color code for the color I want.
So I just insert that in the Color field.
And I want to save this version as well – this will be used in the Footer of our website.
The last thing that I want to do is save it for the favicon, which is the small little icon that shows in the browser's tabs and helps the user identify your website.
And for this one, it needs to be a perfect square.
So first I will remove my circle by clicking it to select it, then I will press Delete.
I will select my mountain icon, and on the bottom-right I will click on the Crop icon.
Next I will adjust it to make it a perfect square, say 300px by 300px.
Then let it go and click the Apply Crop icon.
I will position my icon perfectly in the center, and as big as I can get it.
Finally I will save this as well by clicking on the top-right icon.
And that's how to easily create your own logo for your website if you don't have one!
Now that we've prepared all of the logo files we need, let's insert them on our website.
And we'll start with the Header.
6.2. Edit Header
Go back into your Dashboard, then on the left-side go to Appearance > Customize.
Then click on Header Builder.
Now because the Header we use is the Transparent variant, we'll want to click on Customize Transparent Header.
Then we can scroll down and insert our own logo by clicking on Change Image.
Next we can Upload Files, Select Files, and select our white version of our logo, Open and Choose Image.
And our logo will now be updated, so that's how you can insert your own logo.
Then you can adjust its size by scrolling down and changing the width of the Logo.
For Desktop, I want to put in 55px.
And just like with Elementor, down on the bottom-left we have 3 different responsive mode icons.
So we can click on the Tablet and change the logo size just for the Tablet, by putting in something like 50px.
And then we can select the Mobile and put in something like 45px.
Then we can hide our right-hand tab to preview it, and it looks perfect.
Then we can re-show it.
For the next part let's go back to Desktop mode.
And let's see how we can change our Header's menu colors, and the phone number.
To edit those elements, first on the left panel scroll up and go to DESIGN options.
And where it says Text / Link under Menu Color, we can change that to any color that we want and it will reflect in the menu.
But I'll just leave it as white.
To edit the phone number, we need to click on the Button element on the bottom-right, and we can change the button's Text and Link.
If you wanted to, you could put in a normal link and have it be a button – for example, one that leads to your Contact page.
Or you can simply edit the phone number to put in your own.
You can also change its appearance by clicking on DESIGN, and you can change the entire button and its colors, its border, and everything else about it, from here.
We can also re-arrange any of these menu items by simply clicking, holding and dragging them, and we can re-arrange them in any way we want.
If we didn't want some element here, like our button, you can simply hover over it and press X, and that would remove it.
And you can click Publish on the top-left to save all of your changes.
And that's how you edit your Header!
Let's move on to our Footer next.
6.3. Edit Footer
To edit your Footer, you can again go to your Dashboard, then to Appearance > Customize, and select the Footer Builder.
Scroll all the way down to the bottom of your website in the previewer, so that you're able to preview your footer area.
To control the Menu inside here, all you have to do is click on the Footer Menu element under your previewer.
And you can change all of the options on the left like the colors – under DESIGN.
Or under GENERAL you can change the alignment like to the center or to the right.
To replace the logo, we need to click on the HTML 1 element.
Then on the left click on the logo, then click on the pencil icon.
Then we can click Replace to insert our new logo.
After that we can Upload files, and select our Green version of our logo that we previously saved from Logomakr, and upload it.
And now it's too big, so I'll click the pencil icon to Edit it again.
Then Center it, give it a Custom Size, and give it the same size as in the header – 55px by 55px.
Next link it to a Custom URL, and just put in slash "/" because that will link it to your Homepage.
Then press Update, and that looks much better!
Pro tip: regardless of what your website name or domain is, the slash character always works to link to your Homepage.
Next we can click on Copyright, and let's make it your own.
On the left side just highlight everything, and put whatever you want in there.
I'll just put in – Copyright [copyright] 2022 Tyler.com.
And you can use the [copyright] tag too, all it does is it inserts the Copyright (©) symbol in there.
Next you can highlight your site's name – I will highlight Tyler.com – and we can again just put in slash "/" to always link it to your Homepage.
Lastly for our Footer's responsiveness, we can change it like in the Header.
Click and switch between the 3 responsiveness icons on the bottom-left.
But if we go through them one by one we can see that the website already looks great on all devices.
Now I'll just click Publish to save my changes, and that's how you control your Footer.
There's one last thing to do, and that's to insert our Site Icon.
6.4. Insert Site Icon
To change your Site Icon, go to your Dashboard again, then to Appearance > Customize, then find and click on Site Identity.
Then for our Site Icon (our Favicon), you can click on Select Site Icon and upload yours that you saved from Logomakr.
Press Select and Skip Cropping.
Then click on Publish on the top-left to save your changes.
And now you'll be able to see your new icon up in your website's tab! Beautiful.
This will help people identify your website when there are many tabs open.
And that's it for Step 6! If you got to this point, your website is mostly ready for visitors!
The last step is simple and short – we'll just preview your final design.
And then I'll show you how you can add more things to it in the future.
Let's have a look and wrap it up!
Step 7: Advanced Pages & Final Design
There is one last thing to do, and that's to log out.
Go to your website, hover over your username at the top, and click Log Out.
Then you can go back and view your website exactly how your user would view it.
Without that black administrator toolbar on top.
And your website is looking absolutely beautiful.
Well done! You've done everything yourself Step by Step with no step skipped!
Next you can add to your newly made site – a Blog, a Shop, and much more.
You can first take a well-deserved break, but here is a quick overview!
How to Make a Blog
You can easily expand the scope of your new website by adding a Blog page and blog posts to it.
It is super easy to do, and you can check out the video below to see us do it on a website similar to the one you just made.
You can also watch this Blog guide on YouTube.
If you want to add a blog to your site, our video above shows you everything you need to do, step by step!
How to Make an Online Store
You can also easily add Online Store options to your new website, like a Shopping Cart and more.
Again this is easy to add to the website you just made by using the WooCommerce plugin.
You can also watch this Store guide on YouTube.
You can effectively make an eCommerce site using these techniques.
We show you exactly how to do it step by step, in the video above!
That Is It, Congratulations! 🎉
Your website is now done and it is looking absolutely beautiful!
A ton of work has gone into making this detailed guide, and I really hope it helped and that you enjoyed it!
If you have any questions, we answer every single one in the YouTube comments of the WordPress video right here.
No question is a bad question. So if you run into any issue at all, head on over and leave a comment on the video. We will do our best to help!
We will also keep this guide up to date at all times and through all WordPress updates.
This means you can bookmark it in your browser and come back to it in the future if anything has changed.
Thank you again so much for joining us on this step by step website making journey, and see you in the next one!