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 minute 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 backgrounds
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 the sidebar, 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 timestamps
so if you want to follow a certain part of the tutorial, you can click on a timestamp
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 5 years
now and people seem to love my tutorials. I do our 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 whom 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 an edit
their website themselves without waiting for someone to do it for them and anyone who wants
to learn more about the 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 element or page builder. 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 webhosting129.com. Click on the link over here and it will redirect
you to Siteground; I love Siteground. Siteground is in my opinion the best web hosting
provider there is and it's not only my opinion, there's a real big Facebook group all about
web hosting and people can vote for the best web hosting company there is and every year
siteground is number one. They're the fastest web hosting company there
is and there's 24/7 support, so if you have a question you can call them, you can open
the chat session with them and they will be happy to help you or to do things for you
if you don't know how to do them. And on top of that, if you really don't like
the service somehow then there's an option to cancel your subscription within 30 days
and then you will get your money back. So I scroll down over here and there are three
plans: the startup plan, the grow big plan, Go Geek plan. The startup plan is great if you're really
sure you only want to have one website. I choose to grow big plan because you can
have unlimited websites. So there's one web hosting package and you
can add unlimited domains if you want to and still pay the same amount per month. Right now you see euros but these are prices
in dollars. Besides that you get more web space and you
can have more visitors per month. I personally use Go Geek because I have a
lot of visitors per month. Keep in mind that you can always upgrade later. For now I choose the grow big plan so I click
here on get plan. What we can do now, we can choose a domain
name and the great thing about siteground is that you can have a lot of extensions even
from my own country, the Netherlands, but I rather choose dot com and the great thing
about siteground is when you get your domain name, it is live immediately. With other web hosting companies, I had to
wait and here it is live. So I can say facebook.com, but Facebook.com
is already in use, so you need to choose domain name that's still available. For instance elementorcity and this will be
a website I make about all the great things about Elementor. So if I click on proceed, I can see if it's
still available and it is. Domain name elementorcity is available for
registration with your hosting account; that is awesome. So now I need to fill in some details over
here, so here you need to fill in your email address, mine is hello@ferdykorpershoek.com,
then you need to create a password to login into your siteground account and then you
can scroll down. I'm from the Netherlands, so I leave Netherlands
over here and then I need to fill in my first name, last name, if I have a company, I can
fill that in over here and since I'm from outside of the United States, I can fill in
my FED tax ID and if I feel that in, the taxes will be subtracted from the total amount I
have to pay. So I will fill that in over here, I'm from
Maassluis, my street address, my zip code - it needs all to be next to each other and
no spaces; my phone number. I scroll down and the great thing is with
siteground, you can pay with your local payment provider. In my country, that's ideal; but you can also
use global payment methods like credit card. So I will fill in my credit card details and
when I have done that, I scroll down to the purchase information. We have the Grow Big plan, the data center
is in Europe because I'm from Europe. If you're from somewhere else you will automatically
get something else that's closer to where you live and the period is 12 months. You can also say 24 months and 36 months and
keep in mind that the longer you have the period, the more discount you get. You can also use one month as a trial but
I don't do that because within one month, you can cancel your subscription. I will choose 12 months because my domain
name is also for 12 months and I scroll down, we have a domain registration and I suggest
you use domain privacy because if you do not do that, all those details you filled in will
be open to the public and there are a lot of companies that will misuse that send you
spam emails like hey I can make a logo for you or I can make a website for you, or do
SEO. Check the main privacy, so nobody knows my
email address and they will not send me any spam. The total amount I have to pay is 103 euros
and five cents and if you have dollars it will be probably something less than 100 dollars. Then you need to confirm that you have read
and agree to the Siteground Terms of Service and Privacy Policy and if you want to you
can get updates from siteground. If you get this through webhosting129.com,
you don't pay more but I get credit for it, so thank you for that that helps me to make
those tutorials and then you click on pay now. So now we have our domain name and web hosting. Let's install WordPress. I click here on proceed to the customer area
and then we see this over here, create or migrate your website elementorcity.com. I click on setup side and then we can migrate
the website or start a new website while we start from scratch. So I click on select and then we select WordPress
- we want to make the website with WordPress. We need to fill in our login details and these
details here are the details you need to login into your WordPress website. So we need to remember them of course. I use my email address and I use my password
and I click on continue. They ask us to add siteground scanner, I don't
need that so I click on finish and now our website is being created. Now it says you're all set and I scroll down
and I click on manage site and now we can go to WordPress > install and manage; scroll
down and here's our domain name and here we can click on login to the admin panel. So here at ElementorCity.com, we can log in
so we see we are live already. Then we have here the WordPress Starter plug-in
that comes with WordPress; I don't use this so I scroll down, I click on exit and ladies
and gentlemen, welcome at your website. You need to do one small thing and then we
will continue with the tutorial. Go to appearance > themes and you need to
select the 2019 theme. Click on activate, you just got to trust me
on this one, go back to the dashboard, later I will talk more about themes but for the
sake of the tutorial in order to illustrate everything in the best way possible, we need
to use this theme. So the website contains two parts the front
end and the back end. The front end, you can find it if you click
over here; this is your website and I don't know why WordPress does it, it looks really
ugly. But we're going to make it beautiful but this
is what people will see when they enter your website, in my case elementorcity.com, then
we have this bar over here, only people that are logged in will see this. So a visitor will not see this. So if I go to Safari, I say elementorcity.com
- I don't see the bar, from that bar you can go to the back end, you can customize your
website, you can create a new post, media page or a user. So this is the front end, here we can display
our website and then over here when we click on dashboard or on my website, we go to the
backend and here we can customize our website. So here at the left we can update our website,
if there's a new update we can add blog posts, add media like images, PDFs, we can create
new pages manage our comments, we can change the appearance of our website, add plugins
and users. There are more tools, settings; so here we
can adjust and configure our website. Well, I like to keep things clean. I think this looks a little bit messy a little
bit overwhelming, so how can we clean it up. First I want to go to plugins; I want to start
with a clean website and now there are already plugins and stuff I don't want that. So I want to remove those, so I check this
area over here and then build actions > deactivate both plugins, click on apply. Now they are deactivated and now if I check
this again, I can do a bulk action and I say delete > apply > yes I'm sure. So now they are removed. Then I go to the pages - there are two pages
already. I check them both by clicking here, bulk actions
> move to trash apply. Then I go to the trash over here and I click
on empty trash. Then I go to the blog posts and there's none,
only in the trash and I want to empty this trash also. Awesome. Then we go to the settings to permalinks,
because over here if we would have a new blog post for instance hello world, that page could
be found at elementorcity.com/index.php/2019 and the month and the day and then it would
say hello world. Well I don't want that. I want it to look like this, that looks clean,
Google likes it so I check the post name. So now our links over here look beautiful. That's how easy this is. I scroll down and I click on save the changes
and now over here at the right, it says howdy! info@ferdykorpershoek.com; I want to change
that. I click on edit my profile or I go to users
> your profile and here we can change a few things. We can change the look and view of our backend,
I like default. I scroll down here I can add my first name
which is Ferdy, I can add my last name, I can change my nickname and then here at the
display name publicity, I can say I want to be called Ferdy Korpershoek and when you do
that it's how I will be called in the website. So if I have a new blog post it will be said,
it is written by Ferdy Korpershoek instead of it is written by info@ferdykorpershoek
as it was before over here. Then we can do something else, over here you
see my image how can you get that: well you scroll down and then here at profile picture,
you can change your profile picture on Gravatar. If you open this in the new tab, you can create
a Gravatar account if you don't know how to do that I have a tutorial about it over here
and you can upload an image and when you upload that image, that image will be linked to the
email address you sign up with and since I use info@ferdykorpershoek, that image is linked
to my WordPress website. Here we can create a new password if you want
to, but I'm happy with my password so I say cancel and I click on update profile. So now my profile is updated. I go to the dashboard, I dismiss this message
and I collapse everything so there's a nice clean overview and now we can adjust everything
over here without seeing all that stuff we don't need. Two more things, the first one go to general
here at settings right now our website is called my WordPress, so over here you see
my WordPress, just another WordPress website. If I go to FerdyKorp.com that is my website,
you see over here learn how to create a website. So I want to change the title of our website
here at the general settings. The title of our website, so what is your
website all about? If it's about web design you can say web design
company awesomeness, and what I prefer to do if your company name is Ferdy Korp Media
then you can say web design, but what I prefer to do is have the keyword where you want to
be found on at the left. So say Web design | Photography | Film and
then Ferdy Korp media. So I put web design a little bit later because
people that don't know you and they need the photography service do not search for Ferdy
Korp media, because they don't know you but if they search for photography, you can be
in the search results. So I put my keywords in the beginning of the
title. Then we have a tag line - in a few words explain
what this site is about. We offer a three-in-one solution to help you
to be found on the internet using photography, film and web design. So that's how I use it and what we see over
here is that our website is not secure. So at this moment I want to show you how to
make your website secure. We go back to the site tools and then we go
to security, I click on it and then we see SSL manager. I click on it and then here you can install
a new SSL and probably it says let's encrypt is already in use. So here below we see elementorcity and they
say it's already active. So what can we do? We can go to actions and say and enforce HTTPS. So we do that, turn it on and it says https://elementorcity
is enforced. So what I can do now, with boldness, is go
over here and put an s after the p - https right now we are not secure. Save the changes, now we need to log in again
and now our website is secure. So also over here. awesome. I close this site tools and if I go to the
dashboard, this is our dashboard looks like and if I go to the website this is how our
website looks like. So what we can do now; we can create a few
pages for our website. So if I hover over new, I can go to page or
I go to the dashboard, I go to pages > add new or I click on pages, they all lead to
the same thing. So I click on add new and I want to add my
first page and of course that is the home page. I click on publish and publish. The home page is the page that will be seen
when people enter your website. So what do you want to display on your website
is really important. If you do not want to have a portfolio on
your website, you don't need to create a portfolio page, if you don't use a blog on your website
you don't need to have a blog page. So I'm going to create a few pages which I
think I need for my website and now I'll tell you why I would do that. Well people enter your website and you want
to offer them something and a lot of people offer a lot of things out on the internet,
so probably you have some competition. So the visitor wants to know who you are? So I hover over new, I click on page and I
want to create a page about us or about me or about whatever. I call this about. So or you say who we are? So that people can see who you are, you can
build some trust so that people are more likely to make use of your services. I say About > Publish and I publish it. So now you have two pages, the home page and
the about page. Well there are probably services you want
to offer to the people that visit your website. So I hover over new page and I say services
> publish and publish. Well for this tutorial I will make a website
with three services, so I can show you more about WordPress about submenus, about creating
pages. So I will create a new page. Hover over new page, my first service I want
to offer is Photography. I hit publish and publish. The second service I want to offer is film,
publish and publish. And the third service is web design, three
in one about people to take advantage of the whole package so they will get a boost in
their publicity through their website, through beautiful videos I make for them, through
beautiful images I make for them. In my case since I want to show people what
I'm capable of, I want to have a portfolio page. So people can see wow he makes beautiful videos
or websites, all that stuff. So I hover over new and I create a new page
and I call this portfolio and I have a bonus area where I will show you step by step how
to create a beautiful portfolio for free. Well, it's maybe not the case for you but
because I want to show you everything I know about making websites, I create a new page
and I call this the blog page, Blog and publish and publish and if I take a look now at all
the pages, here let me see based on when they are created. People arrive at our home page, we'll create
a beautiful home page then people can know more about me, what I offer that is photography
film and web design, then people can see what I have to offer and they can read blog post
about beautiful experiences with clients and all that stuff. And then I hope by now I have convinced a
lot of people that they should get in contact with me so I need one more page over here
and that is the contact page. Publish and publish. So now I have all those beautiful pages, if
I go to my website there are not on my website. So how can I get them over here. Well I can hover over here and go to menus
or I go to the dashboard > appearance > menus. Now we need to create a menu. So you need to come up with a menu name, it
doesn't matter what it is you can call this uncle Jim as long as you know that uncle Jim
means whatever you want. I call this main menu and I'm the only one
that sees this. I click on create menu it's just for reference
purpose and then over here we see our most recent pages. So I can say view all the pages, select them
all and then I can add them to the menu and there they are. Well I see a home page as a page and I see
one other kind of page, it is a custom link. I click over here on the arrow down and I
click on remove. I don't want that. What else can we do? We can add posts so if I have a blog post,
I can edit it over here and if you're a really big fan of me, you could say in your website
http://ferdykorp.com 30 and say Hero Ferdy. So here the link and here the text and if
I add this to the menu, you see Hero Ferdy over here. There's also category so if you have a blog
post category, you can add a category, when people click on this they see all the blog
posts that have that category. So in that way you can add more link to your
menu. I don't need this of course you don't need
that either, so I click on remove. What I can do now I can change the order - I
can drag home up then about, then my services, below that I want to have my portfolio then
the block and then contact. Well I have three pages over here about my
services, so I want them to be a sub menu of services. So I go to photography, I hold it and I drag
it over here below services and then I go to the right a bit until you see this and
I release it and now the photography page is a sub-item of services. The same goes for film, here below you can
and you can even take it a step further, drag it here below and drag it to the right and
now web design is a sub-item of film. Now we need to assign this menu to our website. So here at the display location, I say I want
to display it at the primary menu area, I save the menu, I click over here and now we
have our menu with the home page about services and then we see photography, film and web
design is a sub-item of film. Then portfolio, blog and contact. If I click on contact you see a beautiful
permalink over here, elementorcity.com/contact and our website is secure. It's all getting better and better but now
we need to fix this area because this looks really weird. I will go back to the menus and I bring this
back to the left and I want to show you something, if I go to apple.com, you can be assured that
these guys know what they are doing. They pay a lot of money to get an optimized
website so they can get more sales and stuff. So if I take a look at their website, we can
learn from it. It's really simplistic. It has a one big goal to sell their new iPhone. If I would go to iPhone in the menu and I
want to go back to the home page, how can I go back, there's no home page, but there's
a logo. If I click on it, I go to the home page. So we can learn from them that we don't need
to have the home page in the menu. I click over here and I click on remove. I scroll down, I save the menu, and now we
have the about page, services. So if I click on about and I click on the
logo or the text over here, then I go back to the home page. People know that so we don't need a home page. So right now, at the home page it says nothing
found. Well what should be found? Well a lot of years ago, WordPress was only
blog related software, so the home page was showing all the new blog post. Well, since we don't have them and we don't
want them here at the home page, I can go to the back end, to settings > reading and
I don't want to display our latest blog post on the home page, but I want to show a static
page. Here we can select a home page which is of
course home and here's the post page, which should be the blog page. I scroll down and I click on save the changes. So now if I go to the home page, I see the
home page that is better but now we need to talk about the theme because this looks really
ugly, how can we fix this? Well WordPress works with themes, a theme
decides how your website will look at what your website is capable of, everything has
their own functions, their own possibilities, their own configurations and there are free
themes and there are paid themes and they're also amazingly beautifully awesome incredible
free themes and we're going to use one. But before I want to show you, I click over
here on themes, what happens, I open the website in a new tab, the content of the website will
stay the same but the look a feel will change when you change to another theme. So right now we have the theme 2019 active. If I will change it to 2016, I click on activate
now this theme is activated so the title and the menu and the home page will still be the
same but the look and feel will be different. So right now, this looks different then the
twenty nineteen theme. So in that way you can change the look and
feel by changing your theme. Well I know there's an amazing theme and it
is free. So let's get it. We can get it here at ferdykorp.com/astra,
I hit enter and there we go. I scroll down and here are a few Pro versions,
I have tutorials about all these Pro versions but in this video I want to focus on everything
you can do with a free theme. So I click on download the free Astra theme. You can leave your first name and your email
address and if you do that, you will get an update when there's discount for the pro version
or when there's new update. So I click on subscribe and download or if
you don't want to, you say no thanks, I just want to download Astra. Well I subscribe and download. So what will happen, we will download the
theme to our computer. So now I go back to the website, here at appearance,
themes I click on add new, upload theme or I can drag this over here or I can choose
a file on your computer and can select over here. So I do it again. I drag it here and I click on Install Now
and then our theme will be installed. I click on activate, so now Astra is our active
theme. If I refresh this page, it looks like this. Still not that beautiful but we will make
it beautiful. I close this. I close this. And since we are downloading things, we will
also make use of the free version of Elementor so if you want to get it, go to FerdyKorp.com/elementor
hit enter and here we can do the same. We can go for the free download, you can leave
your email address if you want to, then click on subscribe and download and then it will
be downloaded. Also here you get beautiful news and if you
don't want that news, then can unsubscribe. Now I go to the website again. I go to plugins > add new and I click on upload
plug-in, drag this over here and click on Install Now and then I close it here. I activate the plug-in. So now we've installed the Astra theme that
we will use and a free page builder called Elementor. I collapse this so I keep everything clean
and organized and now I go to appearance, themes and since I do not use those themes
anymore I want to remove them. So I click on theme details, delete it, theme
details > delete and theme details > delete. Yes. So look at this. We have this website over here, the home page,
we have a sidebar we have a footer and now we can configure this. So what we will do, I will close this and
I will close this. We just click on customize and what I want
to do first, I want to replace this text with a logo. So I click over here on this icon, I scroll
up and now I can change my site logo. Well I went to photoshop a few minutes ago
and just created something like this. So really quickly, what I did I opened the
text editor, FKMedia, grab the font Raleway, make this bold, let me see over here, bold
and then you can give this a color. So if you want to know more about how to create
a logo yourself using Photoshop, there's a 7-day free trial of Photoshop as far as I
know. You can watch a tutorial over here, so that's
what I created and that's what I want to use. So select the logo, I click on select logo,
I click on select files and here at the desktop, FK Media, I search for the FK Media logo retina. I open it and then I click on upload files
again and I want to select the normal logo, not the retina one, this one - open. I select a smaller logo but before I remove
that, copy the title and paste it in alt text. I do this with all my images because they
will be found better on images in your website through Google. So there it is, but I still see this text,
how can I change that? I scroll down and you see site title, display
site title - No. Okay, then I want to use different logo for
the retina devices. Select one let me see, it's the bigger one. Choose an image, so now that is sharper on
my screen but it's a bit big don't you think. So over here below you can just drag it for
some themes this is not even possible and with the Astra theme, you can do it like this
really easy. Let's say 150, awesome. So I want to add a site icon that will be
seen over here so I click on the site icon to select it, upload files and over here the
favicon, need to be square I have a 200 by 200 pixels it can be at least 16 by 16 pixels
but I would say 200 by 200 it's better, skip the cropping and there it is FK. If you want to follow along with the same
images I use in this tutorial you can go to FerdyKorp.com, go to tutorials. How to make a website for free? Scroll down and click on download the images
I use in the tutorial, then you can unzip them and then here at number 6 you can find
all the logos and colors I used in this tutorial. Yes awesome, I go back to the customizer I
close this awesome I publish it so what I want to do now since I use this I want to
make this capitalized and a bit bigger. How can I do that? You can go to FerdyKorp.com, then you go to
tutorials. How to make a website for free? We scroll down and here's the menu size and
upper case. I grab this code, I go back to the customizer
I go back and back and I scroll down to additional CSS and here I paste it and now you see it
looks like this. Maybe it's a bit too big then over here I
can see font size 16 perfect, that is what I like. I click on publish, what I want to do I want
to take a look at how it looks on a smartphone by clicking on this icon and it took like
this. Now we can configure this so I go over here,
click on this icon and then over here it says different logo for mobile devices well that
is possible I check this and then I select an image, upload files and then here let me
see I grab the blue logo open, optimize it, choose the image, so for the mobile it's blue
for different devices it is the purple one. So that's what you can do if you want to you
can have a different logo over here and then we can change the size of the logo and you
can also put it back to default then that's okay and I go back then I go to the header
the primary header, I go back to the normal view and I can say I want the logo at the
right menu at the left but trust me this is the best way to do it. Logo at left, menu at right everybody has
that. We can have a border below our menu if I change
the color you will see it better over there I don't use it so I say 0 and for a mobile
again we can change the menu to something like this or this. I prefer this one then I go back I go to the
primary menu. Go back to the normal view we can disable
the menu if you want to. We can have a last item for instance a button
that says donate and you can say PayPal.me/fkmedia so people can donate, you can change the button
style. For the submenu over here should it fade when
you hover over it or slide up and then if you want have a container border over here
if I would say 10 pixels you will see it better you can also say 2 2 2 & 2, then there's a
border color I like to color so I leave it as this. We can have a submenu divider change to red
just to show you how it looks then it will have a divider over here. So there are a lot of options, I turn this
off I bring this back to 2000 like that and then we go back to the smartphone version
and I want to say menu over here because some people have big thumbs and this is too small
to click on, so if you say menu over here then you have a bigger area to push and the
logo will just automatically that's also what I really like. I click on publish. If you want to know more about all these settings
I'm not going through all these settings but if you want to know everything about all the
settings you can go to youtube or click over here or search for astra 2.0 and there this
tutorial I will show you everything about the Astra 2.0 customizer, but we're not finished
I go back, I go back to global, to the container right now it looks like this. This is the homepage title and here's a sidebar
I don't want to have a sidebar, so I will remove the sidebar in a few minutes but now
I want to take a look at the layout. Right now it's content boxed I don't want
that I wanted to be full width and contained. Let me make the website smaller, right now
the width of the website is 1200 if I would say 800 it will be smaller I like to say 1140
then the layout is content boxed that means that this content is in the box with a white
background. I can also say everything should be in boxes
also the sidebar widgets. I prefer this for the blog page and the blog
posts but not for the main layout. What I like is the full width contained that
means that the website is stretched from the left to the right but the content is still
within those 1140 pixels which I have decided over here and then there's a different version
and it's that the content is also stretched so the homepage starts here and the side bar
ends here. Well, I like full width stretched. I bring it back by command 0 and then the
page layout should be the default one this one and the block layout I would like to say
boxes or boxed and the archive also, go back, publish then I go back and I go to the sidebar
and I say I don't want to have a sidebar, no but for the blog posts I would like to
have a right sidebar, for the archives I would also like to have a right sidebar. So publish, so that's what I like then we
have this area over here I can change the copyright text I prefer to remove this. I like this that means that when it's a new
year it will automatically update right now its 2019, then I like to put something like
this between it and a site title and then I remove this area and if I want to I can
also say 2020 or over here I can say FK media. You also can have a second area with a footer
menu but there's no menu assign so I can assign it over here but I will leave it as it is. So what we have is the header now that looks
great I want to remove this. Let me see I need to go back to header, primary
menu, I say none we have a nice header, a nice footer and then here the homepage. So later in the tutorial we'll take a look
at other options. If you want to know all the options you can
watch the tutorial over here but for now I want to leave it at this and I want to focus
now on Elementor. So how can we do that? I close this and I click on edit the homepage
and what we can do now? We can click on edit with Elementor. So let me introduce you to Elementor. It is a free page builder with a pro version
and in this video we will focus on the free version that will enable you to create beautiful
websites without having any knowledge about coding. You can create a website from scratch with
it but you can also import complete website and complete pages and adjust them. I will show you a bit of both worlds but in
this tutorial we will mainly focus on importing pre-made templates by professionals and adjusting
them so we can save a lot of time. If you want to know everything about creating
a website using Elementor I have a tutorial about it that's totally focus on that area
you can find it over here, but let me show you the basics. So here is an area and here we can start to
create content. If I click on the plus you see I can decide
what I want to place here? So if I would place this over here that means
the blue area is a section in that section we have columns that those are the gray areas,
this one, this one and this one and in those columns if I click over here we can add elements,
so if I drag this over here I can go back over here. I can add a video, I can drag it over here
or here below or above and it's all really easy to see where you place things. When you have an element, a text element or
for instance or a heading element there is a content area here you can change the content
header, you can add a link to it change the size. Then we have this style element here you can
change the color, change the height, change the size of the text, change the blend mode
and then we have advanced. We can increase the margin or the padding,
add motion effects so I can make an entrance fading make it a slow fading or say I wanted
to be from the left like that. I can also say I want to show that after a
half second and then if I click on a different element we also have content here we can change
the source to YouTube or to Vimeo or hosted ourselves. The link of the video that should be displayed
you can change the start time, so every element has their own settings. If I add a button I drag it here, I can change
the type I can change the text and there is so much possible I can duplicate things. I can change the place, bring it to the right
so I close it let me show you again. There are sections so there is a section with
one column, a section with two columns, section with three columns, so if I would say two
and there's a left column and a right column. In those columns we can place elements. There are a lot of elements as you see there
even more also for free you can download them I will show you later in the tutorial so for
instance in text editor here at the left and all those elements have a content area where
you can change the content or you can style the content and advanced settings but if I
take a look at the section the section also has settings and the columns also so let me
show you I can stretch the section. If I go to style I can change the background
type to a certain color for instance blue, dark blue and layout I can say I want the
minimum height of fit to screen or a minimum height of a certain amount of pixels or the
vertical height in percentage so if I would say 50% it will be 50% of the height of the
page depending on how big your screen is, so we have done that. Then I have my text element over here and
the text is dark so what I can do now I can go to the settings of the column and there
I can go to style and I can change the background to a white background or to a gradient, so
I can say white and then below it should be bluish lighter like this maybe Oh interesting
and now at advanced I can say I want to give it some more space by using some margin and
space from within padding like that. So again these sections have layout settings
and styles, the columns have layout settings and styles and advanced and the elements have
an area where you can change the content, change the style and advanced settings. So using sections, columns and elements and
change the style and content and advance settings will give you so much power to create an awesome
website and that's at all. If I take a look over here we can take a look
at the responsive mode for tablets or for a mobile and then we can also adjust things
over here, so for a big screen we know it looks like this, but if I play something here
at the right an image for instance I click over here, let me grab this one for instance
or the bigger one. Here I can say bring it to the center over
here at the settings I can say horizontal align, Center vertical-align:middle like that,
I can say I want to have another background and now if I go to the tablet mode or the
mobile I can say you know what I want the text to be a bit bigger at the mobile, so
I go to style, typography and then here for the mobile I can make it bigger. Well, on a computer screen I want it to be
smaller so here I want to be really small and on a smart phone I want it to be big and
on the tablet I want to be bigger. So that's how you can change things for every
device, so Elementor enables you to create awesome websites and let me go back to the
normal screen. I can duplicate this area by saying right
mouse click, duplicate it but I prefer something else and in order to do that I need to go
to the settings and before I want to do that I want to show you that you can update what
you have done so far and if you click on the eye left from update, you can preview the
changes but that's not all. Right now, if I go to the text to style, typography
and I make it bigger and I click on update then I don't need to refresh this page it
will be shown automatically like that, so it helps you to work more efficient and what
you also can do you can click on this arrow and then you can see what the result will
be on your website and I know this looks ugly but I just want to illustrate how things work. So what I will do now? I will click here then I click on exit to
the dashboard, then I want to go to Elementor, settings and then add advanced, editing handles
I want to show them so I scroll down and I click on save the changes and now if I go
to the home page and I click on edit with Elementor I don't have to do a right mouse-click
anymore but I just can say duplicate it over here and when I hover over here you see few
options I can duplicate this, I can create a new column, I can remove this column so
that makes it even more efficient to work in Elementor so that's what I like. I close this and I close this and again if
you want to know everything on how to create a beautiful website from scratch and with
all the beautiful things from Elemental you can watch this tutorial and in this video
I will save you a lot of time by taking a look at pre-made websites, so you can make
a beautiful website in a short time. I click on update, but I still do want to
show you one section how to create one certain section which is the most important section
of your website, it is the first thing people see when you build a homepage. So I want to build it with you from scratch
so let's do that. You need to ask yourself the question what
do you want show in your website? What do you want people that visit your website
to do? If you take a look at Apple, what do they
want to do here? What do you think? Iphone 11pro with a lot of features or this
price they want to sell this phone, that's obvious and people are willing to buy it but
not everybody is convinced so there's a second button learn more. So when you click on learn more there's a
beautiful video and more features about what you can do with this and then there's a button
over here to buy. So Apple wants you to buy this phone when
you visit their website. So what is your goal for your website? Do you want to show information? Do you want your visitor to buy the service
you offer? Well, then need to create a website that leads
people to making use of your service or buying the thing you promote, so I click on the plus
over here. I want to create a header and I want to start
with a text so I click over here, I drag the header over here and I want to attract customers
that want a rebranding of their company maybe there's a beautiful company with beautiful
services but they're just not killing it yet and then they come to my website and what
do I say then. Let us tell your story like, I want the visitor
to think like hey I need this I need a rebranding I need other people to show me how to tell
my story or to help me to tell my story, so that's what I do. I bring this to the center and what I want
to do, right mouse click, duplicate and then over here I want to say I mean let us and
then over here we do branding or we do rebranding, marketing, photography, web development and
film. It's a lot so I can also say you know what
photography falls under rebranding, so I can say this one web development and since they're
only three, I remove the commas and I create something like this. Well, this does not look appealing so I click
over here and go to the style, I go to the typography and I say transform it to uppercase
and I want to make it a really big like this and I want to make it bold, like that then
this one I want to align it in the width like that and then it advanced I uncheck this in
the margin at the top I say -, so I can bring it closer to each other. What I want to do I want to go to the section
settings and then I stretch the section minimum height, the height I changed it to minimum
of 400 that's okay and then I go to style, I go to the gradient and then here at images
tutorial, I go to the colors that I want to use ingredients and the first color is this
one and the second color is this one, it are the same colors of my logo, then I can change
it from linear to radio but I prefer linear and then I say 90 degrees from left to right,
so I like that and then here I click on it and I go to style and of course I will change
the text to white, also here style, white. It looks better I click on update and if want
to take a look how it looks, I click on this preview changes button, icon and that's how
it looks okay. I want to make it more appealing. How can I do that? Well I have a video it is not mine but I want
to use it for illustration purposes, I click over here on the section and I want to change
the background to a video then I paste the video and then the video will start in the
background, that looks nice but what happens sometimes there's a light background like
this and then it is harder to read the text, so I want to use a background overlay and
then I want to use a gradient and again I want to use those colors, the second one over
here and the first color over here like that and then the angle 90 and then I can change
the opacity, one is there's no video in the background and zero is there's a fully visible
video, so maybe point eight yes so you see videos but it's not point or comma seven. I think that's better, update perfect. If we want to over here we can make use of
a divider, here and if you want to search you can search over here and I can type it
you'll find. I bring it here between I want it to be a
solid one you can also have a lot of other ones, go to style, change the color to white,
go back to content and I want to bring it to a solid one and width I change it to pixels. I bring it to the center, let me see something
like that, then I go over here to this text, advance and I bring back the - I bring it
to zero because now I can let the divider change the size, so I go to advanced at the
top I say - - 20 and then at the bottom I also say - 20, it's not working all right
always so maybe first go down with the arrows and then put a zero behind it. It's not working like this, so I still want
to make use over here after - margin like that and if I want to I can click on the divider,
if I cannot select it somehow then I've over here the Navigator or you say right mouse
click, navigator. I like to attach it here at the right and
then I can open this section and I see one column and in that column there are three
elements, the heading, the divider and the heading. So I click on the divider and there are settings
so if you cannot select it somehow maybe because you use - margins you can select it using
the divider. I close it and I think this looks perfect
and I go to advanced, motion effects and I can say fade in from left like that I can
also say it should be slow and after one second oh 1 - 1 0 like that, update. Let's take a look, I like it. So we have our style, our branding just as
the logo, people in the background see that we can make beautiful videos and then I want
to have a call to action just as Apple does. So I click over here I search for the button
and I drag it over here below. It says click here well I want to learn from
the best again, learn more, learn more or I search for about and then I can select the
about page. I can bring this to the center. I can go to style and I want to remove the
background, so I bring the transparency, down or up maybe a small one like that and then
I want to have a border solid of three pixels with a border radius of zero, let me say two
and then I go to typography make it a bit bigger, eighteen, seventeen and then I can
say five hundred a bit thicker. Awesome, I can duplicate it but before I do
I go to the advanced area to custom positioning and the width is in line. Now I say right mouse click, duplicate and
I have another one. I click on it, I go to the text contact, call-to-action
and then here I say contact and then I can select the contact page so when people click
here they go to the contact page. I go to advanced and then here at margin I
say left 10 pixels. Then I need to go to the settings of the column
and over here I can say that everything in this column should be aligned to the center,
so vertical alignment it can be the middle the horizontal alignment can be the center
and then it will be brought to the center, update let's take a look, let us tell your
story rebranding, marketing, web development, learn more, contacts. Well, I see no hover I like to see a hover. So how can I do that? Over here I click on it I go to the style
and maybe I think you know what I don't want to have a background at all. I copy this, bring it over here to nothing
then I go to hover and there I want to edit, so when people hover over it you see a small
color appearing that's a bit darker, maybe I can increase it a bit like that. What I also can do when I'm here at hover? You see there can be a border you can change
the color and we can add an animation, I like it to grow like that but here nothing happens
so what I can do now right mouse click, copy right mouse click paste the style so now the
hovers but now I lost the distance, so I go to advanced and then here and check and at
the left I say 10 pixels or 20 update, awesome any animation over here so that's what you
can do. You don't need to have a background video
but you can have that there's so much possible. What I want to show you there are blending
modes, so if I go to the section we have the background which is the video and then we
have the overlay but there are more options with overlay. If I scroll down there are blending modes
so I can say multiply this gradient with the video and you see it changes the color, you
can say screen, overlay, you need two colors that the video will be displayed in the colors
of our logo that's a possibility but now you don't see the text anymore that well, so I
like to say normal but you see there's a lot possible. I update it and I close this. So this is how it looks what we have made
so far. We'll take a look at the mobile version later
right now we leave it as this and what I want to want to show you now is how to import per
made templates so you can save yourself a lot of time. Pre-made templates so you can save yourself
a lot of time. If you want to do that, go to ferdyKorp.com,
then I go to templates and here you find my elementor templates for free. There are a lot of them so maybe when you
watch this they're more than at this moment, what you need to do is fill in your first
name and your email address and then I click on give me the package, then I need to consent
because I'm from Europe, subscribe. Now I need to check my mail and get the template
pack, so here's my email I click on get the template pack and what I can do I can download
the complete pack and import everything one by one or I can download a zip file that will
import everything at once. What I also can do I can go to all elements
and there I can filter elements so for instance I search for complete pages. If you find something you like and in the
future by the way I will complete template kits that means that we have a complete website
in one file but for now let's see what I like and maybe I like this one, so I click over
here. I can see how it looks and if I like it I
can download this template, I can also take a look out looks on a smartphone and other
devices. They're all optimized for all devices. Then I need to unpack it or unzip it there
this JSON file and then I go to our website to Elementor and I click on this icon and
I click on this icon to import a template. What you see over here are free templates
from Elementor itself, you can also use those and I also made a few. I click on import, select the file I go to
my downloads, there it is, open and then I click on insert and there it is well this
one I don't need because I have this area already so I can close this. What you see now this area overlaps the upper
area so if I take a look I close this and I close this. This overlaps each other and I don't like
that at all. How can I fix that? Let me show you, I click over here then I
go to the layout and I change this to 600 pixels maybe 550 update, let's take a look
how does it look. It looks better I think 500 will also do update. Let's take a look yes and what I can do now
I can bring this area all up, so I go to the column settings. This whole column should go up like this
until I think it's okay update, yes and I have to say I'm recording this, I'm also showing
a video in the background I'm also having animations everything together can make your
computer a bit slow but you're probably not recording at this moment so for you it should
be fine. So how can I bring this to our style? Well let me show you, first I scroll down
all the way I click over here so you see all the icons then I scroll up and what I want
to do, I want to use the colors of my logo, so I click over here on this icon and then
I go to the color picker and let me grab the colors. The first one color one, I grab this one,
I paste it then there's the second one, I paste it over here and then there's the third
one. Those three colors are the style I use, I
paste it, apply, update just in case and now I click over here. I go to style, I click on a primary color
and I select this color then I close this I go to the content and also over here I change
it to this color. What I can do now? Right mouse click, copy right mouse click
paste the style, right mouse click paste this style. Personally I think the title is a little bit
big, so I can go to the style again let me see typography and make it a bit smaller. Right mouse click, copy, paste, paste style
so here we can change the text. Here I can change images if I want to and
here I can change the link maybe I think you know what I want the color of the button to
be a different color so I go to the style, I change this to this and then the hover color. I make it the other purple color so when I
hover over it it becomes a different color, right mouse click copy, paste the style, paste
the style and here I can add a Vimeo video, so if I go to Vimeo.com maybe if a beautiful
video of your company and you want to paste it, well this is a video of me. I remove this or I copy this link, let me
see open in new tab, close this. I copy this and then over here I paste it. Why do I have two? They're both optimized for every device so
this one, if I go to advanced I scroll down I go to responsive it will not be shown on
a desktop but this video advanced, responsive this one will not be shown on desktop but
it will be shown on a tablet and on a mobile on this one it's the other way around. So in that way you can optimize everything
perfectly we'll talk about it later optimizing because it's an important part of getting
a website. We go down style, color change it. This color, style change the color, right
mouse click, copy, right mouse click, paste the style, click over here see the icon and
then over here. You know what I want to have different colors
so I say your right mouse click, copy, right mouse click paste the style, but I don't want
to have the video in the background so I click over here. I go to the style and here I say no I don't
want that. I want have a transparent image and then I
go to the background overlay and I make it 100% invisible, like that. This color here below, click on it and here
we can change the content it's not only changing the style but of course you need to change
the content and if you think you know what I only want to have two testimonials, hover
over here, close this and there are only two left. Then I click on this one, advance maybe, border
and then here below, right mouse click, copy right mouse click paste the style, copy it. Click over here, style change the color so
in that way you can save so much time in adjusting your website and here at this section if I
cannot find it I click on the Navigator section. Let me see where is it I close this, close
this, close this. I click over here, I know that this this section
right mouse click, copy and then here, ladies section right mouse click paste the style,
only thing I want to change about the style is the height, so I change it to default or
maybe a bit or not and I go to advance and I say 20 and there's the same results. So now if I take a look, we have adjusted
our website we have imported the template and adjusted the colors and the limit of information
awesome. I can change those colors and style and that's
the way the cookie crumbles. So what I can do now? I can go to the about page and I can import
a about page template from my template library, but I want to show you something else. If we go to our website I click over here,
I exit to the dashboard. We can download a new plug-in it's free. Add new and it's called envato. There are a lot of installations people like
it and I click on Install Now and I want to activate it and what you also see it's an
it's up to date five days ago, the are latest update and now over here we see elements. I click on it I need to leave my email address
and I need to agree to the envato element terms. I continue what you see now is a library with
a lot of pre-made templates that we can import, but they're also premium ones they cost money
and I want to make use of all the free elements and I also want to make use of pages that
do not use elementor Pro which is the pro version of Elementor. So I click on filter, I turn this off and
I turn this off and now we see all those templates that we can use and the great thing is over
here you see eight pages. What does it mean? When you click on this page you see it's seven
pages in the same style. So if I click over here all the same style,
one is for the home page car sales services and other things so you can go back and take
a look at all these amazing elements you can go to the second page. If you see something you like you can implement
it into your website. So maybe you like this personal trainer and
what it says it has 16 pages, so if I click on it you see 16 pages all in the same style. So how would it work? Well, I already have my home page, but if
I would like to I can go to the services page or maybe there's an about page and if I like
it I can click over here. Let me see do I like this? Yeah I like this and then I can import the
template, so if I click on import template I can open the template in the library of
Elementor and there I can adjust it, so I can scroll down and if I see this area over
here I can click here go to the style, change this to the style. I have of my website also over here, style,
background, change it to this one. Also here I click on it, style change to this
one, right mouse click, copy, paste the style, paste the style and paste the style. Also over here on the button, I can change
the colors probably over here at the style, maybe I can use the other one over here or
this one what you want. Again right mouse click on the column copy,
paste the style, paste the style and paste the style. The same goes for the button copy, paste,
paste, paste and in that way you can change the look a few after website in a few clicks
and of course you need to change the information so maybe you can say, my name is Freddy. I can be your next personal trainer. Change the padding a bit so I can read it. I like it, I'll leave it as this and then
if I think its ok I can click here, exit to the dashboard. Then I can go to the website, to the about
page and I could say edit page, edit with Elementor
and then I can click over here go to my templates and there this personal trainer about me 1
insert, yes and there it is. I click on update and now if I click on the
home page you see this page and if I click on the about page, you see this page. What you don't see is the header and the footer. How can we fix that? How can we bring that back? Click here on the edit page and if you're
in Elementor you can click over here and then exit to the dashboard the blue button and
then over here at page attributes you can change the template to Elementor full width,
update, view the page and now there it is. So what you can do now, you can go to the
back end, to the dashboard to elements, scroll down, right mouse click open in a new tab
and then do that with all the pages. I know this can take a while what you also
can do, just scroll and see if there's something you like. So I go to the second page, maybe you like
this style okay let's take a look and maybe you can use this for your website. Look at this it look beautiful, only thing
is you need Elementor Pro for this so what you can do over here, no I go back to elements. Let's filter and uncheck those too, so now
there are only the free template kits and that's better. So if you see something over here you know
you can use it in a free version of elementor. Discover the city, now you don't see the pro
ones but there are enough there are looking great. So I can click on this one, let me show you
one more time or you can import the template or you can say I create a new page I called
it one city and I click on create the page and then you click over here, you go to the
page in the elementor, you can adjust it to your wishes and what I like to I'd like to
publish it, but then I go back to the dashboard. Then I go to the page attributes, I change
this to elementor full width, update and then if you want to you can go to appearance, menus
in your city you can edit to your menu. There it is save the menu. Let's take a look at your website, click on
city and there you have it a beautiful layout, how great is that. What I like to do because you see this background
is not totally from the left to the right, you can click on edit with Elementor and then
you can say over here make it stretch. So also over here or grab this over here second
section, stretch third section stretch all these sections stretch it, update. Let's take a look wow guys I don't know about
you but I like this so much. It makes making websites so easy and it will
save you a lot of time. I go back to the menus and I remove it again
but that's how you can make a website. If I take a look at my website the homepage,
it looks beautiful in my opinion. Is exactly what I want with the colors, but
if I do but if I take a look at me about page it looks different it's a different style
because of the template I use from elements. So what I prefer is that I go to FerdyKorp.com
again to templates and if you want to go to all the individual templates /all and then
you can go to the complete pages and I want to grab this about page. Let me see if there is one, it's this one,
loading you can check if you like it. I can download it that goes I unzip it. I go to the about page click on edit with
Elementor and then I close it all one by one like that. I close this then I click on this icon, I
go to upload templates, select the file and then I go for the about page, open it, insert,
awesome. Then I go to elementor city my website the
home page I click on edit with Elementor. I drag it to the left and now meanwhile this
is imported so what I will do now, let me see. I go over here right mouse click, copy, right
mouse click paste the style like that. If I want to I click over here and I bring
back the background, insert and then I go to the overlay and I make it as transparent
and then let me see, background right now the background looks a bit weird I see this
but I want to see her and whole, so here at size I say cover and I want it to be fixed
so attachment fixed, so if I scroll down it keeps like that say it like that. I will increase the transparency or decrease
it depends on how you see it, let me see I increase the opacity. So you can see the text better and I make
the text bigger because I want to, because we can do that really easily and the line
height, let me see increase it a bit like that. Then I go to the height of the whole area
here at the section, layout and make it 400, update awesome. I scroll down let me see I want to change
this contact style so let me see if I have a button here right mouse click copy, paste
the style and then bring it back to the left and over here right mouse click copy, right
mouse click. Here's a contact form, I will talk about it
later and here I need to click again to see everything and of course I need to remove
this and also here let me see I can also copy the colors, so I go to the overlay, copy this
color, scroll down go to this overlay, style there's a video in the background and then
I want to have a background overlay, ingredient paste the first color and then the second
one, copy scroll down paste it and that's fine with me perfect. So since I'm here at ferdykorp I need to go
back. I am not there yet, templates all how to keep
the same style so if there may be a complete contact page. Yes there is, so I click over here. I download this template. I unzip it and I click over here to see the
results. So right now this is in the same style as
the home page of course I need to change these images, if I want to and I go to the contact
page, edit with Elementor click over here, upload select the file and downloads go for
the contact page version one that Jason, open it, insert it, perfect. What we see over here is a short code of a
form but it's not working because we don't have that plug-in, so if you want to install
a plug-in in WordPress you can do that really easily I click over here I go to the dashboard
and I go to plugins add new and then I say contact form 7 and so now you see a lot of
installations it's an amazing plugin really easy to use activate and then over here at
the left, you see contact. So over here we have a contact form I can
grab this code over here, copy it, go to the website to the contact page click on edit
with Elementor and now there it is already. Let's make sure it's the same, update. So if we take a look, it is over here if you
want to know more about creating a beautiful contact form with the contact form 7 which
is a free plugin, you can watch this tutorial over here or your search on youtube for contact
form 7 tutorial 2019 or 2020 nothing there it is. It's a beautiful tutorial. I make it myself that's why I know it's a
beautiful tutorial and I will explain so much about this amazing plugin, so you can create
a beautiful form with multiple choice. You can let people upload images and stuff,
so right now I will leave it at this people can contact you and if they sent you an email
there's one more important thing. Let me see over here click on contact form,
here at Mail you need to have an email address and the best thing is to have info at and
then your domain name dot com because otherwise there can be a slight chance that your email
will not arrive. I like this one so I'll leave it as it is
and if I fill in this contact form lotty blah blah blah send it it'll say thank you for
your message it has been sent. If you want to change this to a different
language or a different sentence you can it here over here a message, so here you can
change all the settings. Now if I take a look at my mail account there
it is from photography, film, web design, ferdy korp media. The name subject message party etc. So I think the idea is clear now you can get
templates and you can adjust the colors just a lot of things I want to show you one more
thing of course there's so much more I want to show you not only one thing, but if you
want to import a certain image if I go to the about page if you want to have your own
image over here and don't want to get problems with copyright and stuff you can go to pixabay.com. Here you can find beautiful images for free
so you can grab this one. You can do free download in this resolution
which is amazing, you have to say I am not a robot, you click on download its Rio de
Janiero, and then you can rename it if you want to. So I say Rio de Janeiro, then you go to your
website let me see edit with Elementor I close this, this and this and over here you can
go to style, change the image, upload files, select files we grab this one. You can edit the image, you can click over
here and change a lot of things, and you can say I want to have an aspect ratio of 16 by
9 that keeps a certain aspect ratio. I prefer that I bring it like this and then
I click over here now it will be cut like that. Now the aspect ratio is 16 by 9. I click on safe and when you save it it will
also make the file a lot smaller. So I close this, I close this and I click
here over again. I click on insert media and there it is and
then I can go to the background overlay, decrease it a bit opacity. You can change the angle do a lot of things,
let's say multiply screen you know what normal, update it, close it, so I close this. So that's how we can create and import pages
using Elementor. Now I want to take a look at the blog page
and blog posts but not everybody wants it in their website, so I made a special video
about it where I will dive deep into the subject of creating a blog page and blog post and
configure them and all that stuff. If you want to watch the tutorial you can
click over here, then we can create a portfolio. I also made it tutorial about this subject
because not everybody wants to have a portfolio in their website. If you want to follow that's tutorial you
can click over here or click on the link in the description and I will show you how to
create a beautiful portfolio using a free plugin. So what I want to do I want to go to the home
page and show you more about Elementor. I want to make use of a few free extra elements
from element that comes from a third party, so I go to the backend to plugins, add new
and I search for essential elementor elements or essential elements should also be fine
I think. So I click on essential elements for Elementor. A lot of installations already, so updated
two days ago, I click on activate and since I see something else, I saw something about
happy elements, excuse me I should go to add new for plugins, then search for it and I
will add those two, those are new and I want to see how it looks. I click on activate and those are all free. Of course, they have Pro versions but in this
video I will focus on the free ones and we are downloading them right now. I dismiss this over here. I say no thanks, no thanks, I close this. So now I want to go to the website again and
then I edit this page with Elementor. What you will see now over here are the basic
elements, they come with Elementor - the general elements also called Elementor but here below
we see essential addons. It's a free plugin we just installed, and
you can see that you can do so much more with it. Advanced accordion, advance tabs, Betterdocs
category box, then call to action, better integration with contact form 7 which we use
in our website, a countdown. So that's amazing and that's not all. Look at this and then we also have the happy
add-ons, there are also free cards, icon box, review, justify grid so using free plugins
we can add extra functionalities to our elementor page builder. So let me show you how it works, I scroll
down and I can open a new section with a few columns, let's say this. One at left - at the right and then over here
I can collapse this, collapse this and we see the essential add-ons. So I can go for a creative button. When I drag it over here, it has probably
more options, of course the link where should it go to about or to a blog page. You can have an icon, the spacing should be
before or after. I explain everything; I can explain how you
should do this but we've explained it already so what I want you to do or if you want that,
you can take a look at the additional add-ons and see which one you would like to implement
in your WordPress website. Maybe you want to have a review or a team
member, you can change that, then the image, say Anna Korpershoek, boss, female top model
or Gucci and Porsche. Okay, weird. So social profiles, you can add that. So you can see there are more functionalities
and that's amazing. What I've done in the other tutorial about
blog post, I have created let me show you, I close this, I go to update, I open a website
and I go to the blog page, what I've done here I have used the free add-ons from essential
elements to create this and to create this. What I want to show now is how you can copy
and paste those elements. You can copy and paste any element from a
page to a different page using Elementor. So I go to the home page and if you want to
follow the whole tutorial about making a blog, making portfolios as I said before, you can
take a look in the description or take a look over here. But now I will continue with talking about
Elementor. Now I click on edit with Elementor and if
you want to, you can duplicate this and then here I want to click on the plus, what I want
to do? I want to update it, I want to open it, clicking
on eye, then I go to the blog page which i've created in a different tutorial, I click on
edit with Elementor. If you have not created this, I just want
to show you this to illustrate how easy it is to copy and paste things. So over here right mouse click, copy, over
here right mouse click paste. So that's how easy it is, you copy it from
here and paste it somewhere else in the website and now we can configure it and in that way
we save ourselves a lot of time because we don't have to make this from scratch again. So what I want to show is the three blog posts,
so I want to show three posts, by date and that's it. No load more button, so let me see, layout
settings > load more? No. What I personally do not like is that this
title is too long because now it's in two lines and here's one on one, so it's not aligned
perfectly. But you know what? I'm fine with it. Then I click on the plus over here and I want
to go for a header and I say most recent blog post. I bring this to the center, I change the style
to capitals, I change the color to this one, and give it a bit more space, 20 like that
- update. Then here below I remove this area, I copy
this one, copy/paste, I change the color to white and here I say most recent work, now
I copy this because we're going to use the same elements and I paste it and you see I
cannot paste it here, maybe inside - yes. So I change the source to portfolio for Elementor,
and I want to adjust a few things. So I want to show three posts ordered by date
but at the layout settings, I want to change a few things. I want to show the image I do not want to
show the title or the excerpt or the meta information like that. So I suggest you use the same aspect ratio
for all the images, otherwise it look like that. Or I can load a title or show the title and
go to the style, color, typography and I make the title really small or not too big. Let me see maybe at the post grid, I can change
something - no, and with the hover I can change the icon, or I can remove the icon maybe that's
better. Also here I don't see why I should use something
like this, hover cards style, remove, better - update. So let's take a look. This is our homepage and then here we see
the most recent blog posts and most recent work. If I click over here I go to the blog post
with the sidebar and the widgets. Talking about widgets, let's go to the home
page or any page actually. Scroll down all the way and we do not see
widgets over here, we can have footer widgets, so let's create those. I go to customize; then I scroll down; I go
to the footer and I can have footer widgets. Right now we see nothing, I can select 4 widgets,
with the free version of Astra, you can only have 4 widgets but that's fine. We will use four widgets. We can have a top border bar, maybe 3 pixels
and then the other color, and you see this one. If you want to grab a color, you can do it
over here using the color picker - copy. I have to tutorial about it you can find it
over here and then here I paste the color and I see this purple line. I like it. Then the background, I like to make it a bit
darker, or no maybe this color. But then darker, and copy the color, then
I go up or back to the footer bar and that color I want it to be even darker. So we all maintain the same style within the
website. Then I go back to the footer widgets, the
content, colors can be changed over here, also when you hover over it, well let's take
a look at that later, if it's necessary. I go back. Now I go to the widgets, footer area one so
let's start with some text about ourselves. I click on add a widget, text, about us. We love to see how companies boost their business
by rebranding. I can do a text over here. If you want to find dummy text, you can search
for dummy text generator, click on the first link. Why use dummy text? Well if you copy and paste text from a different
website, than you can get problems with copyright. So this text can be used everywhere. Maybe it's a bit much. What we can do? Below a widget, we can add another widget;
for instance an image. I can find the image over here, I need to
find my white logo which I cannot find so I click on upload files, select them and here
at downloads I go to miscellaneous, FK Media, FK Media logo white, open > add. What you also can do, you can change the order
and if I click on publish and I close this, I can also adjust widget somewhere else over
here, widgets and now I can even drag it to a different footer area. So maybe I want to show the widget over here
and now if I take a look at the website, we have our logo over here and a text over here. So what I also can do is this and then remove
the title like that. So what I can do also at footer widget area
too, I can add the Facebook widget. Let me see where is it. I can't find it, how can it be? Facebook like box, maybe you can only use
it once. So maybe I want to use it in my footer instead
of in the blog post and then the third one, recent posts, recent posts number 5 and then
another one navigation menu if we want to. Sitemap; I select the menu; the main menu. I click on save and save. Now, I refresh the page and I don't know about
you, but I really don't like this. So what can I do? I can go to the back end, to plugins, I add
a new one and that one is recent posts with thumbnails and it is from Martin. A lot of installations, a lot of likes, so
this one is great. I click on Install Now, activate; there it
is. Now I go to appearance, widgets, widget area
3, I remove the recent posts and then let me see over here recent posts with thumbnails. I go for footer area 3, add the widget area. So there are a lot of options, the title can
be recent posts, number of posts to show, how about 3. Open links in the new window-no, show them
in random order - no, do not show the current post so if you are on a certain blog post
that post will not be shown in this widget, which is really nice. You can take a look at how you want to configure
this, I think it's all perfect. All categories show a thumbnail of course. If I save this and I refresh the page, it
looks like this and that's a lot better. So with an image, some text about ourselves
like us on Facebook, the recent posts and a site map, awesome. So this is our website and it looks amazing
in my opinion but there's one really important thing we have not done yet and that's to make
the website responsive for all devices - for mobiles, for iPads and all that stuff. So let's do that. First I want to update a few things. If I want to update something, I go to updates
or to this icon and if there are more I can select them all and I click on update plugins. Okay. So let's talk about optimizing your website
for all devices. If you take a look over here we have a video
in the background, but not all the devices can handle that. So how can we fix that? I click on edit with Elementor and over here
we see this icon of a screen and we can change it to tablet. Now we see how it will look on the tablet
so first I want to change the size of this logo. So I go to the dashboard, (sorry I mean to
the website) to the customizer, and then over here I can click on the screen. It's really big so I go to the header, site
identity and here we have a different logo for different devices. I want to remove that so it's a purple one
and now it's also shown correct. You can change it over here, but I bring it
back then take a look at this area, perfect. I want to change the color over here so how
can I do that? Not here and go back to the primary, go back
to the global colors, base colors; theme color should be this one; copy it, paste it and
paste it. Now you see the menu is in the same color. You see this looks really weird so let's fix
that. I close this. So the menu looks great now on all devices. I click on edit with Elementor. So if I go to the tablet style, this looks
all great; this looks fine. Maybe I want to click here and what you see,
if I go to the style and I click on typography, I see those three icons and everywhere where
you see those three icons, you can change the settings based on the device. So if I make this - this big, and I go back
to the big screen, it has a different size. So for every device you can change it, which
is amazing. So over here also, style > typography, make
it smaller. Great. So I go to the section, style, right now this
displayed as a video. I click on update what I want to do now? Maybe it looks a bit complicated, but I just
want to show you I think on a tablet and on mobile you cannot show the background. So what I want to do now, I want to duplicate
this whole section like this, so if I would save it and I take a look at the website,
we have twice the same area, that's not what I want, but I want to do something else. This area is the main one. I go to advanced, I scroll down and I go to
responsive and I want to say hide it on a tablet and hide it on a mobile. So the one with the video in the background
should be hidden on the tablet and on a mobile. Now I go to the second section, in this one
I want to remove the background. So no video in the background, gone. I can even say, I want to have nothing as
a background, in the background overlay I can make it fully visible. So it looks like this. Now I want to go to the Advanced Settings
to responsive and I want to say hide this on a desktop but show it on a tablet and on
a mobile. So what will happen now, if I refresh the
page, here we see the video, but if I make the screen smaller, there's no video in the
background and in that way we can make our website responsive. So how does it look right now? We see them both because we're in the editor,
but if I make this smaller I go to mobile, I don't like this; it's too big. I don't like it. So what I can do now? I can click over here, go to the style > typography;
I can make this smaller. Also just a line and if I cannot find it,
I can click over here go to the upper set or the second section, column, divider there
it is then I say make it smaller like that. Or again, since we are here at the mobile,
I can go to the heading, go to the content, let me see if it works. I use this code to create a new line and then
I can go to style, typography, change the line height a bit, use uppercase, make it
a bit bigger. So you can show it like that if you want to. I think there is not much space over here
between the buttons and this area. So I click on this section, I uncheck this
and at the top I say zero then I go to this column and here
I say zero. So it's been shown in the center, so if I
go to the website, I refresh it, this is how it looks on the desktop, on a tablet and on
a smartphone. I really like it. So let me show you something else. If I go to the about page, what I see over
here, here at the left is some text about me and here at the right is an image. But here is the other way around. So what I do not want to have is a text to
images and then the other text. So how can we fix that? I click on edit with Elementor, I close this
so here it looks fine, then I go to the tablet view, it also looks fine and then I go to
the mobile and then everything is below each other. So I want to have the text first and then
the image, how can I do that? I click on this section, I go to advanced,
to responsive and then it says reverse columns on a tablet - no or reverse columns on a mobile
and it says yes. If I turn this off you'll first see my name
and then image. Same I want to do over here, I click on the
section and then I go to advanced, responsive and here I say reverse columns on a mobile,
yes. So as long as everything is in the same section,
as you see over here, one section two columns, you can reverse the columns on certain devices. So here you see the image at the right, here
the image at the left but on the mobile because of the settings over here, you see the name
first, the text and then the image. The name and then the image. Well I would like to place our images over
here, so I bring him back to the desktop, this is about Ferdy, choose an image, this
one not too big. So I can also drag this to the right. I can drag this to the left; here I change
the image upload files, that's my beautiful wife. And now it looks like that and now if we go
to the mobile version, first the name then the image, first text name and then the image. So those are a few things you can do with
responsiveness. So let's take a look at over here, how does
it look on the tablet, maybe a bit too big. I go to style, see I'm adjusting the size
of the tablet, like that. I go to the mobile or you go over here, click
on the mobile and then make it smaller. I can also say over here at the height, it
should be like this and on a tablet like that. Awesome; so that's what you can do and in
that way you can make your whole website responsive. So if I take a look at our website, we have
a beautiful website with a call to action, let us tell your story, rebranding, marketing,
web development. People can get in contact or they can learn
more when they are not convinced yet of our service. We imported a template and we changed the
colors and I showed you how easy it is to change the information. I showed you how to add the most recent blocks
using free add-ons for Elementor and it looks beautiful. I've shown you how to add something like this,
adding your most recent work. We talked about the footer area with the widgets
and then the about page, I showed you how to optimize this for all devices, how to add
a contact form so people can reach you. By the way if I see this, I think I want to
have more space I click on edit with Elementor, I scroll down click on the section > advanced,
uncheck this and at the bottom I just increase it a bit. Update. Let's have a look and now there's more space. I would increase it a bit more, 35, update. It refreshes automatically and now it looks
like that. That's how easy this is. Then the portfolio, film, photography, web
design so you can showcase your work. We have the blog page. I've shown you how to do it using WordPress
itself or how to use Elementor and free elements. I showed you two ways, how you can do this. If you click on the blog post, you see the
blog post here at the left. I showed you how to build this with the guttenberg
editor, people can leave a comment and here at the right we can have sidebar widgets. The recent post, categories, tags then we
have the contact page so that people can reach us. So what's next? What should you do now? Well you can optimize your website for the
search results. I've shown you a bit how it's done but if
you want to know more about that you can go to YouTube and search for Ferdy SEO 2020,
here you will find my 2019 tutorial which is still relevant. If you want to, you can create a WooCommerce
website. You can sell stuff on the Internet, complete
WooCommerce tutorial. I will make a new one so you can find it over
here or you go to FerdyKorp.com > tutorials > WooCommerce tutorial and here you will find
the most recent one. If you want to know how to get more clients,
you can go to youtube and search for Ferdy 'get more clients: 7 proven ways to get more
clients.' I talked to you about my own life, how I did
it and how it brought me much more clients and then I have tutorials about mail chimp
which is a free email provider that will help you to send emails to your email list. I prefer convertkit; convertkit tutorial. If you do not find mine you can find it over
here but if you search for Ferdy, a new one is in the making, so also here you can go
to FerdyKorp.com, to tutorials and I'll make sure it is over here. Thank you so much for watching this video. I hope you learned a ton of stuff and 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 how to improve or maybe you like
it the way it is, and then I hope you - see you in the next video. Bye bye.
