Making a website these days is easy and in
this video, I will show you step by step how you can create a beautiful and professional
website using the best free tools out there. My name is Ferdy and in the next minutes,
I will show you what we will cover in this tutorial. I will show you how to get a domain, how to
install WordPress, install the free Astra theme and a free page builder called Elementor
and then I will teach you how to create a website from scratch, or if you prefer, how
to choose from dozens of pre-made templates that you can import with a few clicks. You can even import all the pages for your
website in the same style. Those pages are made by professional designers
and we can import them for free. Then, we will adjust those pages to our wishes. I will show you how to change the text, add
free images, adjust colors, use background videos, and how to adjust your website in
a way that people want to make use of your services. If you want to, you can learn how to create
blog posts, a blog page, and a portfolio. I will talk about footer elements, free WordPress
plugins to add more functionality to your website, and of course how to optimize your
website for the search results, and how to make your website responsive for all devices. In the description of this video, I have time
stamps. So if you want to follow a certain part of
the tutorial, you can click on the time stamp and you will go directly to the part. If I go too quick for you, you can slow down
the speed of the video like this. I have been making tutorials for over five
years now and people seem to love my tutorials. I do my best to become better and better in
explaining how you can become a pro in making websites. If you have a comment or feedback, feel free
to leave a comment below the video. After watching this video, you will be able
to create a beautiful website, but not only that, you can do this for a living. I've heard from a ton of people that they
make websites for a living because of my videos and that makes me really thankful. So if that's something you would like to do
you can do that and you can make good money with it. So feel free to learn all those beautiful
things I teach you, help other people to boost their business by creating a website for them. Having said that, please like this video if
you like it. Subscribe for more upcoming WordPress related
videos and now let's get started. So, for who is this tutorial? This tutorial is for anyone who doesn't want
to spend a lot of money on the website. Anyone who doesn't have much time; anyone
who has never made a website -- so for complete beginners; anyone who wants to adjust and
edit their website themselves without waiting for someone to do it for them, and anyone
who wants to learn more about Astra theme and the Elementor page builder. The first step is to get a domain and web
hosting and I can give you a discount of 70%. Then, we're going to install WordPress, after
that I will show you how to install the Astra theme and the Elementor page builder, and
then we will create our amazing website. The first things we need are a domain name
and web hosting. If you have that already that is great then
you can skip this part. If you don't have it, let's go to webhosting124.com. Then you can click over here to go to siteground. Siteground is, in my opinion, the best web
hosting provider there is. I tried a lot of web hosting companies and
I found out that siteground is the best one, and it's not only my opinion that they are
the best, there's a Facebook group all about web hosting and every year there's a poll
with who is the best web hosting provider and Siteground is number one every year. The web sites here are super fast, you can
call them 24/7 or you can open a chat session with them. I had a few times that I had no idea how to
figure something out and then I went to the chat session and within a few minutes, they
were able to help me. At the chat, they can say you should do this
and this and this, but they often say let me do it for you if you want to. So the support is amazing. Because Siteground believes in their product
and their service, they offer you a 30-day money-back guarantee. So if you somehow do not like it, you can
get your money back. So there's no risk for you. I don't think you will cancel within 30 days. It's amazing to get a domain name or web hosting
through siteground. I host all my websites here and I will walk
you through the plans. There are three plans. There's the StartUp Plan, the GrowBig Plan
and the GoGeek plan. The startup package is $3.95 per month. In euros, it's the same €3.95. You can have one website, that means one domain,
then there's 10 gigabyte of web space which is more than enough and 10,000 visits per
month which is also more than enough when you start. You can install WordPress for free --- there's
free SSL. What is SSL? With that, your website becomes secure. With other web hosting companies, you need
to pay money for that. There's even one where you need to pay $120
per year to get SSL. With Siteground it is free. You can have free email addresses like info@yourdomain
or ferdy@yourdomain or your own name and your domain, and daily backups. So if you mess up somehow, you can go to the
backup of the day before and you're good to go. Then there's the GrowBig plan -- $5.95/month
or €6.45 per month. With this plan you can have unlimited websites. What does it mean? Here we can have one website, so one domain. Here we can have unlimited domains, so when
you get the web hosting package of $5.95 per month, you can buy ten domain names and then
create different websites. So that's the great thing about the GrowBig
plan. You can have more space, you can have more
visitors and if you scroll down a bit, you see, you can have on-demand backups. So you push the button and you get a new backup. If you already have a website, you can have
a free site transfer to Siteground. You can have staging so you can change things
in your website and then push one button and then it goes to the live website. If you want to know more about all these options,
you hover over here and you can see them. So what I love the most about the GrowBig
plan is that you can have unlimited websites, and then there's the GoGeek plan -- 11.95
dollars or euros and you have more webspace, you can have more visitors and there are all
those extra options. I personally use this plan because I have
a lot of websites and a lot of visitors. But when you're creating your first website,
you can choose between the Startup plan and the GrowBig plan. So if you have a domain name with a short
URL, you can have one website, so you can use the Startup package. If you want to have a second domain with a
shorter link, in my case, FerdyKorp, instead of FerdyKorpershoek, then I suggest you go
for GrowBig because then you can create a second domain and you can host all the websites
you buy, all the domains and you can host them in your grow big account. So it's up to you. I go with the GrowBig account. I will go for the GrowBig plan. So I click over here on "Get Plan", and now
we can register a new domain name. If you have a domain name already, you can
click over here, you can fill in yourdomainname.com and then proceed. I want to register a new domain name and I
can choose it over here. So I can say ferdykorpwp (WordPress) and then
there's extensions. You can say ".com", ".net" but there are also
country-specific extensions like .nl, like .pl, the .co.uk, .es. If you want to go international, I prefer
.com, not .net or those other ones, just .com. So be creative, make sure it is available,
if it's not available you click on proceed, you will see it is not available. The domain costs $15.95 per month or €14.95
per month and I click on proceed. Now it says "Congratulations! Domain ferdykorpwp is available for registration
with your hosting account." That is amazing! So now, I want to fill in some details over
here. I want to leave my best email address over
here which is ferdykorp@gmail.com; I need to create a password and I need to confirm
my password. Then we scroll down a bit and we go to client
information. So first you need to select your country,
then your first name, and your last name. If you have a company, you can fill in the
details of your company. If you're from the United States, you need
to select your state or province, your city, your street address, your zip code and your
phone number. Then I scroll down and I go to payment information. So I will fill in my details over here and
the great thing is, depending on the country where you live in, there are local payment
options. So if you're from the Netherlands, you have
Ideal, if you're from another country, you can pay with your local payment provider which
is what I love about Siteground. My billing address is the same as given in
the contact information. I scroll down. We've chosen the GrowBig plan; you can choose
your data center --- I choose the USA. If you want to focus on people from Europe
or the United Kingdom, you can choose something else. I'll choose the USA. This is important. Here it says period: 12 months. REMEMBER, you get 70% discount here at Siteground
but it's only for the first payment period. So if you pay for 12 months, you get a 70%
discount for 12 months. If you choose 24 months you get 70% of 24
months. If you choose 36, you get 70% discount on
36 months. The thing is when you say 36 months you need
to pay now. So you pay $214.20 and then you have three
years of web hosting with the GrowBig plan where you can have unlimited domain names. If you will go for 12 months, then after 12
months, you will start to pay $19.95. I want to be upfront about that. So if you're really sure you want to go for
a long time with this domain, then I would suggest you go for the 36 months. If you want to try it out, do a shorter period;
then I would say go with 12 months, and after a year, you start paying $19.95 per month
depending on the plan you have. It's not entirely true, because after your
first period, you can decide to go for three years with Siteground web hosting and then
you get 30% of discount. So then you would pay around $14 per month
with GrowBig, and $7 per month with the startup plan. If I take a look at what a website means for
a business, I know it is worth every penny. So it's up to you, if you want to go for 12
months, 24 months or 36 months. I go with 12 months and then we go to the
next step. We register a domain name and then I also
suggest you get domain privacy. Why is that? If you don't do this, people will see all
this information you have filled in on this page and they will call you, they will email
you like hey I can make your website, you can have a business loan if you want to; people
start spamming you. You don't want that. For $12 per year, you can get rid of that. You don't need the Siteground scanner, so
there's a total of $99.35 and you have a domain name and website for a year. I think this is an amazing deal. What you can do now? You confirm that you've read and agree to
the Siteground Terms of Service and Privacy Policy and you can check this if you want
to receive Siteground news and special offers by email. When you get there through webhosting124.com,
you don't pay more, but you get the 70 percent discount and I get credit for it. So it's a win-win situation and it helps me
to make these tutorials. So thank you for that. I click on 'Pay Now' and now ladies and gentlemen,
you have a domain name and web hosting --- congratulations. The next step is to install WordPress. Click on this button with the text 'Proceed
to the Customer Area'. And then we see this: Create or Migrate Your
Website and then you see your domain name. We click on this orange button to set up our
site and here we can start a new WordPress website. So I click on the button below: Start a New
Website. Then I choose WordPress even when you want
to start a WooCommerce website, still choose WordPress and now we need to set up a login. Here you need to fill in your best email address
and create a password. So I will use ferdykorp@gmail.com and my password. Awesome! Then I click on continue. I don't need the site scanner; I have that
already. I click on: Finish, and now our website is
being created. It will take less than 2 minutes. It says now that your domain has been created
and WordPress is installed. So what I want to do now, I want to go to
a website. Here's my website and I click on: Site Tools. I want to do one more thing before we go to
our WordPress website. I want to make it secure. So here we are at your domain and then there
are a lot of options over here. What we can do now, we can click on security
and then we click on SSL manager. Our request is being processed. So here you can select your domain, if you
have one it's probably already selected. Select SSL and what it says, it's already
encrypted. So I need to scroll down, here it is: Manage
SSL. My domain already has an encryption certificate. I click on Actions > Enforce HTTPS. I click over here and I need to turn this
on and now it's turned on; that's it. So now; what I want to do? I want to go to WordPress > Install and manage. I scroll down. Here we have our domain name, WordPress is
installed and I want to take an action by clicking here: Login to the Admin Panel, and
we are already logged in. What we need to do now, we need to skip the
WordPress starter. So I scroll down and I click on exit, and
ladies and gentlemen here we are in the backend of our website. Look at this FerdyKorpWP.com. I bought it five minutes ago and I am already
live with it. Everybody in the world that goes to FerdyKorpWP.com
goes to my website. So I can close this now, I don't need it and
if I click over here, I go to the frontend of our website. This is our website and it is really ugly. It is, I don't know, ugh!I don't like it,
but we're going to make it beautiful. So in the next video we're not going to create
a website -- no, in the next video I will show you how to get an email address and use
it on any device. So let me tell you the difference between
the frontend and the backend. The front end is the website that is what
people will see when they enter your website, when they go to your domain, they see the
front end. When you want to edit things and configure
things, you can go to the backend. You can only go to the backend when you can
login into your website. Since we are logged in, we have this beautiful
bar over here which says we are logged in. If I go to FerdyKorp.com, I go to my website. I'm not logged in so I cannot go to the backend. If I would log in
then I see this bar and then I can go to the dashboard -- to the backend. So I hover over here and I go to the dashboard
and here we can configure a lot of things. But before we do that I want to remove a few
things. I go to plugins and I click here, so I select
all the plugins, then I click on bulk actions, deactivate. I click on apply, so we deactivate all the
plugins and when we have deactivated them, we can remove them. So I click here again, so we select all the
plugins > bulk actions > delete. Then I click on apply and okay. Then I go to the dashboard, I want to dismiss
this message. I want to close this. There's one page so we can go over here or
we go to pages, I want to remove both pages, I select this area, so I select all the pages,
move to the trash apply. I go to the trash and there I want to empty
the trash. I go back to the dashboard. I close this. I close this. I close this and I close this. Now, I want to change my username, because
over here, it says howdy, FerdyKorp@gmail.com and when I write a blog post on my website,
it will say written by FerdyKorp@gmail.com. I want to make it personal. So I click over here on Edit my profile I
want to add an image of course. So here you can do a few things -- you can
change the look and feel of the backend. I like the default one. I want to fill in my first name and my last
name over here and then here at display name publicity I want to select Ferdy Korpershoek,
and now over here it says, "Howdy, Ferdy Korpershoek." Then I can scroll down, I can create a profile
picture and generate a new password. First, I want to click on update profile and
if you want to get your image on the website which is highly recommended, then, you need
to scroll down over here to profile picture, you can change your profile picture on Gravatar. So I click on it, if you want to know how
you need to do this thing, click over here I go back now to my website and I want to
change my email address because this email address is linked with my Gravatar account. So I click on update profile, and now I have
my image over here which is much better. What else? I go to settings > general and if I scroll
down, I can change the date format April 13, 2020. I can customize it, change it to something
else and the time format, right now it's 1:55 p.m. You can change it and you can take a look
at the time zone, at this moment at +2 and if I save the changes, the time is correct
now. If I prefer the time formula with 24 hours,
I can check this one. I save the changes. Now I go to the permalinks, here at settings,
permalinks, this is really important. We want to optimize our website so we can
be found on Google. Sometimes the common setting is plain and
then when you have a page or a post, it will look something like this. Well, that looks ugly. I want to change it to post name, it's the
case already. I leave it at that and I click on save the
changes. And now we have a blog post, for instance,
my awesome journey. It will say: yourdomain.com/my-awesome-journey,
instead of something like this because this looks really weird. This is something you don't want. So postname, save it, perfect! So I go to the dashboard and now we're going
to do something amazing. If you go to FerdyKorp.com/Astra. Hit enter. This is a free theme. Over here, you have paid versions. I have tutorials about all the paid versions
but in this tutorial, I will talk about the free stuff and then here below --- below,
below, below it says, "Can't decide which plan is right for you? Download the free a theme." You can click over here then you can leave
your first name and your email address or you say, no thanks, I just want to download
Astra. I want to close this. There's also a different way to get the Astra
theme I want to show you in a minute. What I want to show you now is how you can
make use of their amazing starter templates. We're going to save a ton of time. If I scroll down, we're going to make use
of the page builder Elementor I will talk about it in a minute. Over here, if I change the selection from
all to free, all those websites over here can be installed in a few clicks for free
in our website. Isn't that amazing? Look at those. Look at that. You can check them all out and that's really
important because we're going to install a template and from that point on, we're going
to configure everything, change the text, change images. So depending on the kind of website you want
to have, you can choose a template. So what you can do, hold command or CTRL on
a PC, click on all of the websites there are and CTRL + Tab so you can go to the next one,
and if you see something you like, you think hey this looks similar to something I have
in mind, then you can select that template. You can also have web shops for free, how
amazing is this. What we're going to do, we are going to choose
a template and then configure it and I will show you step-by-step how you can do that. Look at this -- it all looks beautiful. Wow! another web shop. Wow! another web shop -- video in the background,
or if you want to have a restaurant website, yoga, life coach -- this is all done for you. Look at this; it looks beautiful. So over here, you can take a look at all the
other ones and when I found your ideal template, you can install it and I will show you how. So what I will do now? I close them all. Before we're going to install it, I want to
show you something else. FerdyKorp.com/elementor -- hit Enter. This is the free page builder we are going
to use. This is the best free page builder in the
world. Here you see how it works, just drag and drop,
making things bigger. It is so easy. It's crazy and they keep on getting better. I've been to the office of Elementor, they
are doing amazing things. It's crazy. We're not going to work with a paid version,
although, that's a really great option, we're going to work with a free version. So what we can do, we can download it by clicking
here or I'll show you another way. Go to the dashboard of your WordPress website. I go to themes and I click on add new and
I search for Astra and there it is -- Astra, this one. I click on install or Install > Activate. Awesome! Now I don't need the other themes anymore. A theme is actually a layout of a website. So if I take a look at the website now, the
content stays the same, but the layout looks different. So if I would choose 2017 and I activate it,
now it's active. I refresh the page -- the same title, My Wordpress
-- but a different look and feel. So with the Astra theme, you have seen that
you can create so many beautiful websites. So I choose Astra theme and since we use Astra
theme, we don't need the other things anymore. I prefer to keep things clean in my website
and delete things I do not use. So this one, delete; and this one, delete. Ok. So, then I go to plugins > add new
and I search here for Elementor. Over 4 million installations, it's crazy. I click on Install Now, and I activate it. Awesome. Now, I go to the dashboard. I collapse this. What you see over here, thank you for installing
Astra. You can go to the starter templates, or if
you don't see this I remove it, you can go to appearance > Astra options and then over
here it says Install Importer Plugin. So I click over here, so now we import the
starter template -- importer has been activated right now. Awesome. Now we can select our page builder. I select Elementor. Ok, and what I want to do now, I select all
and I want to select the free ones and then we can navigate again, and if I take a look
over here, and I see something I like, take a deeper look into the website. What I will do now, I will grab my favorite
websites and walk through them with you. So here's the first one, it's a one-page website. So if I click on about me, you scroll down
and then you can tell us something about yourself. You can change the title, change the colors,
change the images -- you can add other stuff. I will talk about that. So I go to the gallery. So what you can do now, you can import this
website and then change everything and save a lot of time. So if you're like hey, I'm a one-man show,
or I want to have a portfolio website where I talk about myself - what I offer and stuff
- then, this can be a nice option for you. The next one, if you're a dentist this can
be a nice choice for you. A nice call to action, you can call them. Another nice one -- you can change the colors,
give it a total different look and feel. Some testimonials. I like this one. I like colors, the style, how it is set up. Again testimonials, who I work for or my clients,
request a quote -- looks really beautiful. Or something like this, all with free themes,
free plugins, free page builders -- everything is free and it looks amazing. Maybe you're a barber, you can import this
website, change the images, change the text. Here you can list your prices. I like this one very much. It just looks beautiful. You can go to a different page, to the portfolio
page -- navigate through the images. So if you see something you like, you can
import it. Here is a beautiful restaurant website with
the menu, beautiful images. I'm getting hungry all of a sudden. I like it. Next one, this is the one I love the most
personally and that's why I'm going to use this one. I will show you how you can change everything
from green to different color. Change the logo; change the background image;
change the look and fee,l but you have a beautiful template to start with and save a lot of time. Then there's this one -- instruction and makeup
studio template, and again you don't have to be a makeup artist. You can also change all the information so
it becomes a web design agency website. So as I told you, I will use this one. Green Gardner and it's called gardener. So I go to my website. I search for "gardener", this one. So what I can do now, I can click over here,
I can import one page -- this one has five pages or I can import the complete website. Import complete site. I click over here. You can delete previously imported site if
you have one. I want to import the customizer settings from
the Astra theme, all the widgets, required plugins and import the content and then we
can change the content. I click on import. Meanwhile, I want to close all these websites
and now it's importing the website. This can take a few minutes. It says, "Hurrah, the website imported successfully." Visit the site and this is our website. So look at this -- this is the website we
have and we can change a lot of things. So the question is, what kind of style do
you want to give your website? Well, what I prefer to do. I go to Google and I search for branding colors. Maybe you have branding colors already that's
perfect. I go to the first image and here you can get
an ID, optimism, yellowish, friendly orange, excitement, red, creative is purple, blue,
green and gray. You see examples, so you can choose colors
over here. You can also search for - let me go to google
- "random color generator." Refresh. It's one color I prefer more colors. I don't like this. Colors.co. That's what I'm talking about. Start the generator. Generate. So in that way, you can change things. You can also search for a random gradient
generator. Yeah, this is what I like. Next one; actually, I liked it, the first
one. So I like this. So you can grab this color, grab this color
and import it into your website. Well, I have my colors already. What you can do, if you want to you can follow
along in my tutorial with the images I use and with the colors I use. If you want to do that then go to FerdyKorp.com,
hit enter, then go to tutorials - how to make a website for free. Scroll down, download the images I use in
the tutorial. Click over here and they will be downloaded. When they are finished, I unzip them by clicking
on them, and I drag it to the desktop. I close this website and this one and this
one. I close this. Now, I want to give my website a title. So I go to settings over here, General and
I say "Photography | Film | Web design -- Ferdy Korp Media: We bring your company to the next
level. In a few words explain what this site is all
about. I decided to say this. You don't see this in the website but Google
sees it. So let me make this secure again. I don't know why it's not secure. I need to log in again and now the website
is secure. Also the front end, I don't know, it will
take a time before it is but everything is fine. So what I want to do now? I want to change the colors in the website. Right now it's greenish, I want to change
it to my colors. How can I do that? I click on customize, then I go to global
> colors > base colors and there are two green colors. I want to change those. So I go to my folder images tutorial which
we just downloaded. I go to Miscellaneous > FK Media and then
I go to colors. This is my first color, I grab it and I want
to paste it here and the second one also paste it over here. Now you see, this becomes a different color. I go back, I go back and then I go to the
buttons, to the color of the buttons. Right now, the background is green. I paste my color and I want to have a hover
color. So I go, again, over here. Let's go with the second color, copy, yes;
publish to save it. Now when we hover over the button, it becomes
that color. I have a logo in my images, over here. I have a few, I will upload them now. How can you do that? I go back. I go back to the main settings and then I
go to header > site identity > and then I can change the logo over here. I click on upload files > select files, then
I go to ImagesTutorial > Folder 6 > FKMedia; let me see, FK media logo. Click on open. If you want to create a logo yourself, go
to YouTube search for "Ferdy Korpershoek" or "Ferdy make logo" and then let me see,
here is the one - how to create a logo in 2020 in 5 minutes. I will grab this one, remove the dash, copy
the title and paste it in the alt text, that's good for the search results. Then I click on select > skip cropping and
I want to change the logo > upload files > select files; I want to go for the retina one. This is a white logo, this one is in color,
open and I prefer this one. CMD + C, CMD + V; select > skip the cropping. Perfect. It can be a bit bigger. I like it. Then I want to do something else. I want to go back. Go back. If I go to apple.com; ...apple.com [kid: Apple],
what I see is a beautiful website. And if I click on iPhone and I want to go
back to the home page, there's the home page over here, but you can click on the logo. So that's what I also want to do. I want to get rid of the home page in the
menu. So I can go over here to menus > primary and
then here at the home, I click on the arrow down. I scroll down and I click on remove, and now
it is gone. What I also like to do, I click on about. I open it and I change the navigation label
to about with capitals. I like to work with capitals in the header. Services, gallery and contact. Publish. Okay. That's it. I click on the X and now this is how our header
looks --- much better already. So now I want to change colors in the website. These are green, I want to make them purple. How can I do that? Let me show you. We are going to edit the website with Elementor. So here's the homepage and then over here,
I can click on edit with Elementor. Elementor is my favorite free page builder. If I scroll down all the way, I'll show you
from scratch what you can do with Elementor. Elementor has three parts when it comes to
building a website. So if I click on a plus over here, I can create
a new section. In that section, I can have multiple columns. So if I say two columns, I have one section,
then this is the blue area, then there's the gray area -- those are two columns. And in those columns, if I click over here,
I can have elements. So section.. let me show you over here, here's
one section then there are two columns and in those columns, there are elements. So I can drag a header here in the left column. I can adjust it, we'll talk about it. I go back. Now I can add a video below. I go back. I can drag an image here to the right. I can click on the image. I can show you the logo for instance and below
that, I can have more elements and every element has their own settings. So that's what you can do. Then you can give the section certain styles
-- all the columns and all the elements. So in that way, let me show you. I can say the background of the section should
be green. Okay. But then over here, at the column, I can click
and I can go to the style and I can say I want the background to be white. But now you don't see the green backgrounds. I want to still still see the background a
little bit. So I go to advanced and add margin, I say,
20 and add padding. I can also say 10. So now the section has a background style,
but the background of the column is overlapping the section style. Then over here, I can go to the heading. I can go to advanced > background > choose
a color and I can say green again, and then here at advanced I can increase the margin
and the padding. So with those three things combined and all
the settings you can configure, you have so much freedom to create beautiful websites. Well Astra has done it for us already, but
of course, I will talk about how to adjust things; how to create new things. We're going to create a beautiful website. So having said that, let's scroll up and I
want to change the color. So over here, this is an element. As you see it's a section with one column
this one, and then an element, element, element. I click over here, then every element has
three parts. The content like the text or with a button. The image, the phone number, then the second
tab is the style. Here we can configure the colors and stuff
and then advanced: the Advanced Settings -- motion effects, background border, positioning, responsive,
custom CSS. So I go to content and I leave the text as
it is, right now, I want to focus on the colors. So I click on style, I want to click on the
color and I want to show my color which is this one. Since I like this color, I can click on the
plus. So now I have added this new color. If I don't want to use these colors, I can
drag them down like that, and since I don't need those, I want to have black and white. This one -- I don't need it. I don't need it. I don't need it. So what I want to do, I want to grab my other
colors, second one, copy, paste, click on the plus and then the third color, copy, paste,
click on the plus. So those three colors are of my style. I click on this color and now it looks like
that. Then I can go to the button, click over here. Then I go to Advanced, background and I change
it to this one. But I can also make it a bit transparent like
that. Then I want to go to the style of the text. Let me see -- this is the image. I go down to content and then there's the
title. I change the color to white. Okay, perfect. Update. We'll talk about the background image in a
minute. Now I want to go to the rest of the website. I want to change this color, but what seems
to be the case, it is an image. So how can I change this? I need to save it; change it, no. With Elementor, you don't have to do that. You can go to the style, scroll down to the
CSS filter. Click on it and now and Hue. You can drag it around and the color changes. So let me see. I want it to be the color -- this color. I think it matches. Maybe a little bit darker. I can increase the saturation, decrease it,
bring it back to 100 and if I think I'll like it, I can say right mouse click - copy, right
mouse click - paste style. Paste style. Here, I should not do it because if I do this,
it looks the other way around. So CMD + Z. What I do, I click over here. I go to the CSS filter: 261. I copy the code and the number and here I
go to Style > CSS > Hue, and paste it again. Right mouse click - copy, paste style and
paste style. Maybe, you have eight services that you want
to show. Right now, there are six. If you want to duplicate it, you can say,
right mouse click - duplicate. But a better way (CMD + Z), if you hover over
here, you can duplicate it. How can you do that? You go over here, you go to the preferences
and there you can enable the editing handles. So right now, I hover over it and now there
are two more options. Also over here, you can duplicate it, so now
there are four columns. I can close it. I can create a new column -- an empty one,
and also here I can remove this. If I want to go back to the history, removed,
I click over here and it is back. So I can duplicate it and give it a new title,
change the text. So that's how you can play around. So over here, let me see. How can I fix this background -- this green
background. I click over here. I go to style and then I go to the background
overlay, here you see an image but over the image is an overlay which is the color green. I click on it, add the color, I want to make
it this color and I think it's perfect. I can make it less transparent or do things
with it -- opacity change it here. But I think it's perfect. So we can go through the website over here,
again style CSS filter 261, right mouse click - copy, paste style, paste style. Okay. If I want to have three options over here,
I can do this. Hover over here, close it, now there are three
and they automatically adjust, and that's how great it is to work with Elementor. Go to colors over here, style, grab this color,
copy, paste style, paste style and paste style. What our clients say? Beautiful. If I want to change an image, I can click
over here, I can go to upload files > select files, I go to my Dropbox, there's an image
of myself, this one. It's really big, maybe, let me see, let's
use this one. Open it Ferdy Korpershoek 2020, copy, paste. Insert the media and that's... wow! Beautiful. It's the most beautiful thing I've seen so
far in this website. Even though he's also really special of course
and this person... okay! let's continue. How I became a male model... international. Okay. You can also change the text here. So now we see the footer and I want to change
the footer but I cannot do this. So what do I need to do? I need to update everything I've changed. So now it's updated. What I prefer to do, I click on the eye over
here so I can preview the changes. The great thing is when you click on the eye
and decide to change something else, so Q&A, and a I click on update. Now I don't need to refresh this. It will automatically be refreshed. So now when I scroll down, it says Q&A -- that's
how great it is to work with Elementor. Now, I can hover over edit with Elementor
and then I can select the footer and that's where we can change the footer settings. So what I want to do over here? There's an image box. I change the logo. I want to use a white logo, so I click on
upload files, select files and then I go to the desktop > images > tutorials. Let's create a retina one. You don't see it because it's white. Open. Optimize it -- copy, paste, insert media. Looks beautiful! You can change the text over here. The color is already purple. We have a gallery over here. And here I want to go to style, to the icon
and change the color of everything to this one. Same goes over here. Of course, can enter your links. So let me do that. First style, purple then over here Facebook,
https://facebook.com/ferdykorpershoek. If you don't have twitter, close it, Google+
is not existing anymore. Instagram, https://instagram.com/ferdykorpershoek. I am trying to get a thousand followers without
having one post -- 555, so far so good. And then I go like crazy, posting a lot of
stuff. So now this is in style. I see this blue color over here, I can also
change it. Like that. It's really simple. The current year and the current site title. Then here, I want to get rid of this. I can also remove this one. Click over here and bring this to the center. Then there's this green bar. How can I fix that? Let me see. Style > border and then there's a border of
two pixels in this color. So I make it purple, and now if we take a
look at the results. I only see the footer, but if I remove all
this stuff and I hit enter, now the website is more in our style. So let me show you something else. I open the about page in the new tab and over
here, I click on Edit with Elementor. And over here, I click on Edit with Elementor. I go to this page. I scroll down. I say right mouse click, copy. I go to the About page -- a different page,
right mouse click, paste. So what you see right now, over here, it doesn't
have the lower border and stuff, paste and now it has, I can also say CMD+Z, CMD+Z, CMD+Z
and I scroll down even further, and this is already in style. So I say right mouse click, paste the style
and paste the style and paste the style. Now, so what I see over here... I forgot something, the lower border should
also be in our color. I think style should do it or, advanced > border,
change it like that; update, right mouse click - copy, paste, paste. Update and update. So you can go through your whole website,
change all the colors, here you go to CSS filter - hue 261, copy, paste and paste. So over here it is green and I want this to
be the same color as over here. How can I do that? I go over here to the section settings, style
and here I see the background, but I cannot change the style of the color. So what I can do? I can remove it over here, then I go to background
overlay and there I can use an image. I will search for the same image. I think it's this one or maybe it was that
one or that one. I think it was this one. Insert media and you see it's really bright,
why? Because it shows an opacity of 50% so I need
to bring this totally up and now I can change this style with CSS filters. So Hue: 261, well that's a little bit light. I go to brightness, make it darker, I want
to increase the saturation and since I cannot read the text that well I can blur it more. So in that way you can play around with those
settings and the images in the background overlay. So we maintain the same style. I will do it for the rest of the website and
then I will be back with you. So I go to the services page and there I will
change this background color and all this stuff, and I close all this and I will be
back with you when it all is done. While I'm editing the website, I see this
area over here, you can create a beautiful overlay and I will show you how. I click over here to go to the section settings,
I go to style and here you see this image over here. I can close this and now I can go to the background
overlay and I can choose a gradient, and I have a gradient over here. I choose the first color, this one and a second
color - the purple one. Now I can change the location, bring it up,
bring it down. I like to keep it in the center. I can change the type from linear to radial. I never use that and I like to change the
angle to 90. If I increase the opacity it looks like that. I can decrease it or I can leave it and then
go to the blend mode, and say multiply, screen, overlay, darken, lighten, color dodge, saturation,
color and luminosity. So I like to keep it at multiply and what
I also can do is change the opacity. So this is the normal image and this is with
our style. Well, maybe I prefer normal and then I decrease
the opacity. So we maintain the style of our website, those
colors and we still can see the background image. Over here, we can do the same thing, go to
style close it, go to background overlay, gradient or we choose one color. That looks weird and then I can change the
blend mode. See if something is fitting, you can also
combine the blend modes. So I can say overlay, I like the effect but
I don't like the color, then I go to CSS filters. I go to Hue, I don't see what I want to see. So it's not working. I bring it back and then I can change this
to normal, or I can just remove the background image. As long as the styling on your website is
consistent. You know what? Background overlay, gradient 90 and opacity
can be 1. Awesome. Update and I will continue with editing the
website. So here I am at the home page -- everything
now it's in the same style and I want to change the hero. The hero is the most important part of your
website. So what I want to do I want to edit it with
Elementor and by doing this I can show you more about how to work with Elementor, and
after that we're going to work with all the templates and adjust them. So in that way you can save a lot of time. So the first thing I want to do, I want to
change the background because I'm not talking about gardens. My website is about branding, about marketing,
and helping other people to be found better on the internet. So I'm based in Amsterdam, so I go to pixabay.com. Here you can get tons of free images and I
search for Amsterdam. Beautiful images. I think the first one is perfect. So I click over here and I click on free download
in this resolution; download; I'm not a robot and I click on download. There it goes. I click over here I want to rename it. I open it in a finder and I say Web Design
Amsterdam Film Photography. Okay, now I go to Elementor. I click over here, I go to the style and here
I see the background and I choose a different image. So I click over here, I click on upload files,
select files and I go to the downloads and there it is. I open it. It's a big file, we're going to make it smaller. Open. Now, what I want to do now. Instead of inserting it, I want to edit the
image. So I click over here on that image and now
I want to change it to 16x9 aspect ratio. So over here I say 16x9; tap. Then I drag over here and I drag it to the
full width of the image. Now I can select the part I want to crop. So I think this is a beautiful part, then
I click on crop and it will do. It will crop it to an aspect ratio of 16x9
and since the width of the image is 1920, the height will now be 1080. I like to have this resolution for all my
images on my website. Now I need to save it and right now it's almost
700 kilobytes and if I click on save, and I need to go back. So I go to the library, and I click on it. Now it's normal. What I need to do now? I need to close this, open it in a new tab,
close this and click on edit with Elementor. Again we need to load elementor again in order
to see the new image. I can get rid of this. I click over here and I go to the style, click
over here and I grab this image like that. Okay. I want to give it the style of our website. How can we do that? I've shown you before. Go to the background overlay. I choose a gradient, the first color is this
one, the second one is this one. I want to change the angle to 90, opacity
let's say like this. Then I can go to the blend modes and what
I prefer is just opacity 2.5. I want to make it darker, so I go to color. The first color, I drag it down -- the second
color, I also drag it down and then I can maybe increase the opacity so it becomes a
bit darker. Maybe this one, a little bit lighter add this
color, bring it down a bit, okay. Now I want to change this text. I want to get rid of this area; I don't need
it. Actually, I want to get rid of everything. So I hover over here; close it and close it. Then I go over here to all the elements and
I drag a heading in it. I would like to have a slogan that says let
us tell your story. I want to do a few things with it. I want to bring it to the center, go to the
style, change the text color to white, change the typography to uppercase and make it bigger. Something like that. Okay. Over here, I hover, I click over here and
here I want to say, "Branding," or I could say Photography | Film | Web design, but I
say "branding, marketing and web development." Okay. I go to style, click over here to make it
smaller and I want to align the text above. Arrow down, like that. Okay. What I like to do, go over here. Go to dividers, bring this in between, bring
it to the center, make it shorter like that. You can align it or you can bring it more
to the center like that. I like to align it, then I go to style > color,
make it white and then I go over here to the settings of the header. Advanced, uncheck this area and at the bottom
I want to decrease area, - 25. Then over here I do the same. Click over here. Go to advanced; uncheck the margin and at
the top I want to say, - 25. Then I click over here and I want to add a
button. So I drag it over here, below and now it's
on top so what I can do now I can go to the Navigator, I can drag it here below. I can give each section a name. So I can double click over here, I can call
this the "hero" and if I want to select something, I can do it over here. So if I cannot find it somewhere, somehow,
I can find it over here by clicking here. I can also stick it to the right and close
it. So over here, I click on the elements, I bring
it to the center and I can also make it full width and I would like to say, get in touch. Then I want to link it to the contact page. So over here, I search for contact. There it is and I can open it in the same
window. Okay, then I go to the style. When people hover over it, it becomes the
other color. I think it's perfect. I can also have an animation. When people hover over it, hover animation. Shrink. If are update it and I take a look, it looks
like that. I want to do one more thing over here and
then I will show you how we can make use of templates and save a lot of time. Over here, this element, I want to go to advanced
> motion effects > fade it in from the left like that. I can also make it slow or do it after one
second. Update > check this, there it goes. Let's tell your story, branding marketing
and web development. Get in touch and when I click there, I go
to the contact page. I go back. I want to show three more things before we
take it to the next level. The first one I go to the back end, I click
on the section, style, background. I can click over here. What you see I have free images from pixabay. This is a link that came with the Astra starter
site, so if I search here for Amsterdam, you can access the same images but then quicker. The second one -- you can also add a video
so over here, at the style, of the section I can change it to video and I can add a link. So if I would search for go pro hero 8, it
always have really nice videos from GoPro itself. Copy the link address, and paste it over here. If you don't want to see the logo, you can
say starting time 5 and start with this immediately. And there's still the background overlay as
you see. So I can increase it now like that. Then third one, I bring this back by the way,
remove this bringing back to A - an image. The third one is responsive mode. Right now, it looks good but if you go to
a tablet, does it still look good - yes. If you go to a mobile, does it still look
good? No. I click over here, I go to style, "let us
tell your story." And then over here, it looks weird. So what I can do, I can duplicate it and then
I click over here and go to advanced, scroll down and then the responsive, if I say you
can hire us on a tablet and on a mobile and on this one I say it the other way around. Advanced responsive, height is on a desktop. You know what? Also show it on a tablet or hiding on tablet
and then over here turn it off. So this area will be hidden from a mobile
and this one will only be shown on mobile. So over here, I can go to content and I can
say, just like this, after everything and then you have three lines. This will not be seen on a mobile well and
then at style, I can change the letter spacing. Update and now when I take a look at the results
and I make the site smaller, look what happens. It looks like this. So in that way you can optimize everything
in your website, and the great thing is when you make use of the pre-made templates, they're
already optimized for every device. And now I want to show you something that
is amazing. I will close all this and now ladies and gentlemen,
we are going to take things to the next level. Right now, we have this page over here which
is imported and we've adjusted a bit, change the colors, change the image over here, but
now I will show you a new and better way on how to create a website. So I cleaned up my homepage except for this
part and I will show you how I would create this homepage. I click over here then I go to all the free
pages and I start looking. I go over here to this area and I like this
area. So what can I do now? I also like this. I can import the template. I don't need this area; I want to have this
area and this one, and I do not want to have this one. So what I can say over here, "Hi, we are Ferdy
Korp." And then I want to change these images, what
I can do, I can remove them, and I click over here and I want to have an image in the background. Then I go to Pixabay pixabay.com and I search
for office. I like this image. I will keep it for later; free download; download;
I am not a robot. Where's the bus? Downloads. The first one, I go back to office, I like
this one, free download, download. I'm not done. Download. Okay, back to the office and this one. Free download. Motorcycles. Okay. The best thing is that you rename them. I will not do it for the sake of the tutorial. I click over here, go to style, I click over
here, I drag it here, the second one. I insert the media. Now I can cover it, or I can go to center,
center change the image or, I can go to custom. So I can drag it around until I think--- yes,
this is what I like. Okay. Then there's the second image. I want to get rid of it. Click over here. Style > Image, this one. Insert. I go to default or custom I mean. Somebody's working and I want to show that. Over here, I can say advanced border:2. Solid. 2 again. Okay. I just want a color like that. I'm not Lucy Anderson. I can copy this or duplicate it, and I can
drag it here below. Bring it to the left. Can I touch? Okay. The second area, I go to the background, under
the section, style, change the background to a gradient. You know how I like my gradients by now. Change it to linear and 90. I can change this text and all the adjustments. I can make them here. Under content, 89 or 98. Okay so far so good. Then I can click over here again and I want
to show something about my services. Or how I like to work. So when I see something I think I like, I
can click over here. I like something like this or this. So I click over here and I like this. So I click on imports, I don't need this. I like this. I don't like this. I like this. Okay. So now I can change this text. I can change the colors, I can go to the CSS
filters and then again, copy, paste. Then this one, we've worked with. You can configure the settings over here. What I want to do now, I click on the plus
and this time I do not want to create a new or import a new page, but I want to go to
blocks. I can filter them by color light or dark and
I want to have a dark one since this is a light one and this is a light one. I click over here, blocks, dark and I want
to have a quote. Well, there are quite a few. I like this one, single quote, import block. Background > style > gradient. And then over here, I want to, let me see,
background overlay, it's okay. But the background, I want it to be a little
bit transparent. So I click on make it black and then make
it transparent. Now it is the style of our website and now
I can say, when you help other people to get what they want, you can have anything you
want. It's not from Jane, but in this case, at this
moment, I want to leave it as it is. Okay. Like that. Like that. Like that. Okay. One more area click over here. Let me see. I want to have an image and a text, really
simple. Maybe like this or this. I click over here. It overlaps a bit, I like that. Yes let's do it. I click on the import template. Okay. I don't need this, but I like this one. Everything below it, I want to remove it. Okay, it's overlapping a bit. I like that and then the image, I want to
change it over here. I have this one like a group meeting, and
the background, of course. You can also drag this to the right. We love to take your business to the next
level. We are a young team with people that blah,
blah, blah... Read more or right-mouse-click copy, paste. So if I take a look at this website, we've
created it in a few minutes. Let us tell your story, animation. If I click here I go to the contact page. We are Ferdy Korp - a few images about our
office. You can have a text about your office. Get in touch. Call to action to the contact page. You can say things about your company, what
you've accomplished. How can we help you? You can show your benefits of working with
you. Create a design, development and all that
stuff. A beautiful quote. People we've worked for and then we can talk
a bit more about ourselves, or maybe what I like to do. Over here, create some more space. Advanced > increase the margin here and at
the bottom, and then here is our footer area. So that's what you can do with every page
and when you've done that then you can decide to do a few other things. If I go to the back end, you can go to pages
> add new. You can create a blog page, blog > publish
> publish. Okay. Then I click over here. I click on add new and I can create a portfolio
page if you want to create that for your website. If you want to implement it into your menu,
click over here, go to appearance > menus and right now, this is our menu. You can see the menu over here and then I
can add a portfolio and blog. Add it to the menu. Let's post it over here, or place it over
here. I click over here. Call this blog and here portfolio, save it
and now if you take a look over here, here's the blog page and portfolio page. If you want to know how to create a blog post,
all that stuff -- you can go to YouTube, "how to create a blog" and then "ferdy." Because then I know that probably mine will
be shown over here. So a video on how to create a blog into your
WordPress website and I will show you, step by step, how you can do that with free tools. Then a portfolio, "how to create a portfolio"
and then there's this page, tutorial where I'll show you how to create a beautiful portfolio
with Elementor which you are already using. In that way, you can create a beautiful website. There are so much more tutorials. If you want to know SEO, "rank math ferdy". If you want to optimize your website, I have
a tutorial that's less than an hour and you can watch it for free on how to optimize your
website with rank math. It's better than YoastSEO in my opinion. A lot of likes, so people seem to like it. If you'll to take it to the next level you
can go with Astra agency. So if you search for, or you go to Ferdy Korp.com/tutorials
and then you go to, let's see, all Astra tutorials,
you see all Astra Pro tutorials over here, and I can show you everything there is about
it. If you miss something, let me know. We will talk about ultimate add-ons, and if
you click on it, I'll talk about all these things and if you want to get rid of this,
go to customize, header, primary menu and a last item in menu, you can say none. Publish, and in that way you can create a
beautiful website. If you have to know how to work with Elementor
from scratch then you can go to YouTube and search for Elementor tutorial Ferdy and it
will pop-up there. So that's it. Thank you so much for watching this video,
I hope you learned a ton of stuff you're able now to create a beautiful website. Good luck with creating your website or maybe
you finished it already when you're watching this; good luck with your business or what
you're going to do with your website. Have a great day, feel free to like this video
if you like it. Feel free to subscribe for more upcoming videos
and feel free to leave a comment or give me feedback on how to improve, or maybe you like
it the way it is, and then I hope to see you in the next video. Bye bye.
