How To Make A Website In One Hour | Elementor 2019
Hi guys, my name is Ferdy and in this video
I’ll show you how to create a wordpress website in 1 hour. I’ve created a lot of three-hour
videos where I show people step by step how to create a website, but since the latest
developments of wordpress and pagebuilders, it has become quite easy to make your own
wordpress website really fast. So if you want a website and you don’t to
spend a lot of money on the web developer and don’t want to watch hours and hours and
hours of three-hour videos where I show you step by step how it’s done, you just want
to get the job done and get an amazing end result, then this video is for you.
Let me show you what we’re going to cover in this tutorial. We’re going to create a
website using a free theme a free tool, and free templates. Instead of designing everything
yourself, we’ll use free templates that you can download for free, so that you can create
your website really fast, you can import complete pages and you can import certain sections
you like. I will provide you with my templates and the page builder we use, called elementor,
also free and pro templates that you can import with a few clicks.
Then I’ll show you how to adjust all the templates to get the website you have in mind, and if
you want to know more about certain elements within the page builder, I will provide you
with all the tutorials about these elements. So everything is created to help you save
time and money. Making your website these days is easy, and
if you take a look at the comments, people seem to use those tutorials, so if you watch
this video and apply the things that I’ll show you, you’ll become a pro designer and
you can even start doing this for a living if you want to.
In the description of the video you can see time stamps, so if you want to go to certain
parts of the tutorial, you only have to click on the time stamps.
If I go too fast on the tutorial you can click on the icon here, and load the speed of the
tutorial. If you like what you’ve seen so far please
consider click on like on this video and if you want to learn more about wordpress and
building your own business then please subscribe. Hit the button notification and you will get
an update when I upload a new video. Having said that, let’s get started.
The first thing we’re going to do is to get a domain name and webhosting, and I can provide
it with my link with 60% off website hosting, after that, we’re going to install wordpress,
after that we’re going to install the free Astra Theme and a free page code called Elementor,
and when we´ve done that we will create an amazing website.
So without further due, let’s get started. If you have web hosting already, that’s a
great thing then skip the next part, if not, you can follow along.
So what are domain name and web hosting and why do we need them? If I go to facebook.com,
you see a nice address over here facebook.com that’s the domain, and what you see over here
is the web hosting. So how does it work? What they’re using is a very big computer that
are turned on 24/7. Those computers store all the text and all of the images, the whole
structure of the website, all the plugins, wordpress, everything.
So if facebook would have webhosting without a domain name, it would look like this: you
see the website but you need to fill in this address in order to go to facebook, and we
wouldn’t want to remember all of the numbers of all of the websites we want to visit. So
the domain name is actually a simple address that will link to the web hosting.
So if we want to go to ferdykorp.com it will link to the information of my webhosting,
so that’s why you need a domain name and web hosting.
So if you want to get webhosting you can go to webhosting128.com and you can click here
to go to siteground, this is in my opinion the best webhosting platform there is. And
it is not only my opinion, there’s a big web hosting related group on facebook, and every
year there’s a poll that people can vote for the best web hosting company, siteground is
always the number 1, every year. If we scroll down we see three packages, the
startup package, the growbig package, and the gogeek package. If you start with only
one website, then the startup package is for you, you can have 1 website, 10 GB of webspace,
which is more than enough and around 10,000 visits per month.
If you want to have more website then you can get the growbig package and pay a bit
more per month and then you can have unlimited website, 20 GB of web space, and 25,000 visits
per month. So if you go for grow big, you can get 5 different domains and you still
only pay this amount per month. And besides that you need to pay for the individual domains,
but it can save you a lot of money if you have a lot of websites.
And if things are going really well and you’re getting a lot of visitors then you can always
upgrade to gogeek. And I hope that happens too because then it will bean that you’re
getting a lot of visitors and a lot of business. So let’s start with only 1 website, you can
always upgrade later, so I click on startup and get plan. Now we can introduce our domain
name. If you already have a domain name, then you can click over here and fill in the domain
name, and if you don’t have a domain name then you can click on Register a new domain
name, so I can fill in over here, and over here I can choose the extension, this is dutch,
but I can have .com, as you can see, there are a lot of options.
I choose .com and let’s say that I want to do facebook.com and I click on proceed, then
it says error, you have chosen an invalid domain name. That’s because facebook.com is
already in use, so you need to have a domain name that’s still available. Now let’s say
that for sake of the tutorial I will say elementorastra, or maybe I can do elementoire which is French,
now let me see if it exists…proceed and elemontoire.com is available for registration
with your hosting account, so choose a domain name that is still available.
And you need to fill in some information, account information like email address, [email protected],
and now I need to create a password, and of course you need to remember it.
Where are you from? I’m from the Netherlands, my first name, my last name, my company is
Ferdy & Anna Media. And since I’m from outside of the USA, I don’t
have the VAT registration number. If you do have it you can fill it in, and if you have
a company then the VAT amount will be subtracted from the total amount so you pay less.
So I place mine here, then my city is Masslus, then my street address in the Netherlands,
and then my zip code. There can be no space over here. And my phone number.
Then I scroll down, and I can pay with my credit card or with IDEAL, so depending on
the country where you’re from there are multiple payment options or global payment options,
and I like using credit card, so I fill in my details over here, and then I scroll down
to the purchase information. Here’s our plan, we chose the startup plan. You can change
it there but I still want to use startup. The data center is in Amsterdam because I’m
from the Netherlands, but my audience is the USA, so I can choose the USA.
And actually, it doesn’t matter that much but I rather have something in the USA if
I want my visitors to come from the USA. So if you’re from Europe you can say Amsterdam,
if you’re from Asia you can say Singapore, but it does not matter that much. The period,
12 months, 24, or 36. The longer the period the more discount you get but I’ve think that
12 months is fine. I scroll down and I don’t want to have a site
scanner but what I do want is domain privacy, and realize that if you don’t check this,
the whole world can see the email that you’ve used to sign up for this account, and then
a lot of companies will spam you with “hey do you want me to make your website, so I
don’t want that so I just check this, and that will save me a lot of spam email.
So I scroll down and the total amount is 73 Euros and 5 cents. If you’re from somewhere
else you could see dollars but there’s not much difference in the price. Then I need
and you can choose to get special offers and news by email.
I want to say that if you buy this through my affiliate link, then you don’t pay more
but I get a commission, so thank you for that. I click on pay now, and it says your order
was succesfully submitted. And a great thing about siteground is that your website is live
immediately. With other website hosting companies I haven’t seen that and you have to wait for
2 hours and sometimes for 48 hours. Right now on siteground we’re live, now that we
have our domain name and web hosting, let’s start wordpress.
So I click on proceed to the customer area, and then we see this over here. We can setup
our website, so I click on start a new website. We want it to be made with wordpress, and
then we need to fill in some information over here and some wordpress login details.
What is your admin email? I also would like to say [email protected]
Your user name you need to remeber it because you need it to login into your wordpress website.
I like to say ferdykorp and my password, I scroll down and click on confirm.
I don’t want to add the siteground scanner, I click on confirm, and I confirm one more
time everything and I click on complete setup. And then it says it is processing your setup.
So right now our wordpress website is being installed, and this can take a few seconds.
And now it says that your hosting account is ready to use, so I click on proceed to
the customer area. Now I need to go to my accounts over here, and then over here we
see our website and then on the right there’s a green button and here we click on go to
the admin panel. And there it is, now we can log in into elementoire.com. So I bought this
a few minutes ago and now we´re live and that is really amazing. We’ve installed wordpress,
now let’s configure our website. So my login name is ferdykorp, and I’ve chosen
my own password, and I click on remember me for the next time and I click on the icon
Login. I can save my password and there’s a wordpress ad, and I don’t need that so I
scroll down and I click on Exit. So, this is the backend of your website. What
does it mean? This area of your website and the backend is only visible for you because
you’re the owner of the website, but if I click over here on my blog, then we go to
my website. Everybody at this moment that goes through elementoire.com will see this
and let me tell you, in my opinion this is really ugly. I don’t know why wordpress does
it but this does not look anything like a beautiful website. So we want to do that but
first we’re going to go to the backend and show you a few things.
We can go there by clicking here or clicking on the dash bar. By the way, this bar over
there is only visible when you log in, so visitors will not see this upper bar over
here. So we have the dashboard and here to the left
a lot of information. We can go to the blog posts, we can add images, we can create pages,
we can change the look of our website using themes, we can add plugins, add users, and
add so much more. And through this tutorial I will tell you more and more about this.
But what I want to do first, I want to keep things clean, right now, I think it is a little
bit of a mess, what’s this? I don’t want that, I want to clean up the first a bit. So first,
I will remove this area by clicking here, don’t show this again, then I want to go to
plugins, and I want to remove everything. So I select this area over here, and if I
do that I select all the plugins or I can select them individually like this, and I
want to deactivate that, so I click on bulk actions, deactivate, and I want to deactivate
all the selected plugins. I click on apply, and then I check this again, bulk actions,
delete, and I click on apply. And now I delete those 2 plugins, then I go
to dashboard, and I click on this dismiss message, I dismiss this area, I collapse this
and this, and then this one and this one, and now this looks clean in my opinion.
What I see here is Howdy, Ferdykorp. I want to change this, this is m login name, I want
to change this to my real name. So I click on edit my profile, and then you can change
a few things. You can change the look of a few of the backend that only you will see,
but I like the default one. I scroll down, here’s our username, I cannot change that
but I can add my first name which is Ferdy, and my last name which is Korpershoek, and
my nickname which is still this one, but I don’t want to be displayed as Ferdy Korp like
this blog is written by Ferdy Korp, but I want to display my full name to the audience,
so I select Ferdy Korpershoek, and I will see here Howdy, Ferdy Korpershoek.
So again, I can change my email if I want to. I can scroll down and say something about
myself. I can change my profile picture by creating a Gravatar account, I have a […..] about
that, you can find it over here but it’s really easy to do.
I can generate a new password, and I can update my profile over here.
What do I want to do now, over here you can see my blog, this is the title of our website,
I want to change that, so I go to settings/general, and then the site title is My Blog, and I
want to change it. I want to create a website about photography, videography, and web design,
that’s what I want to offer to the visitors of my website as a service, so I can create
a site title with my name, my company name is Ferdy Korp Media, and after that I could
say Photography, Film, and Webdesign, but Google takes a look at everything that’s at
the very left. So if people don’t know me and they search
for a photographer they will not search for photogaphy, so what I like to do is to put
some keywords on the left and after that, the name of my business, like this. So place
here on the left where you want to be found on: photography, film, or web design, and
after that you can have your own name. Also here at Ferdykorp.com, the first thing
is learn how to create a website. If people search for that, then the chances are bigger
that they’re going to find me. But they won’t find me if they don’t know me and search for
learn to create a website and I’m Ferdy Korp over here.
So then there’s a tagline and it says in a few words explain what this site is about:
We offer a 3 in 1 solution to help you to be found on the internet. Maybe it is a bit
long but you can do what you want to do over here, say something about your business.
Our website is saved already, and using siteground there’s a free option so you can have a secure
layer over here and that is amazing. So I scroll down and in Europe, you don’t say March
the fifth, 2019, but you say the 5th of March, 2019. So if I want to change that, I can do
it like this: the 5th of the third month, or I can do a custom one and I copy this,
and then I do the day first, then the F, and then it says, 5 of march, 2019, and I remove
the comma, J F Y, and then says 5 march, 2019, and if I’m English I should stick with this
but if you’re from somewhere else and you use a different type you can change it over
here. And the time I like to use 24 hours in a day,
so I like to use this one, and the week starts on Monday. I save the changes, then I go to
permalinks, and if you have a blog post that says “Hi, how are you”
At this moment it will say elementoire.com/and then the date 2019 slash 03 slash 05 hi how
are you, now I want to remove this area, I don’t need it, Google doesn’t like it, this
is also really bad, so what I want I like to do is post name, so it says elementoire.com
slash how are you . So that keeps everything clean and Google really likes it. Save the
changes. OK, so if you take a look at the website,
it still looks really weird, so we’re going to change that, how can we do that? I go to
the dashboard, and then I want to add a few pages. So go to pages, and I click on add
new, you can also do it by hovering over here, new and then page. It’s both the same.
I will move this, and I will create a title. What kind of page do I want to have on my
website, of course, the homepage. What I need to do is I need to publish it by clicking
on this blue button and then I need to click on publish, again.
So I click over here, and now we’ve created our first page, we can view it over here,
then we can also create a second page, so I over overnew, page, and what else do I want
to show on our website? I want to say something about myself or, about
my company, so I can say About, or About Me, or Us, I rather say About. I click on publish,
I edit nothing, I only want to publish it, and again. What else? the home page, the about
page, I want to talk about my services, so I hover over new, page, and I say services,
publish, and publish, and I have 3 services that I want to offer, so I want to create
a page for each service. I hover over new, page, the first one is photography, publish.
The second one is film, or videography, I write film, publish, and publish. And the
third one is web design, publish, and publish. Then, I want to create a portfolio page, Portfolio,
publish, publish, new, page, blog page, publish and publish, new page, and then the Contact
page, and I publish, and publish it again. So if I go to the homepage, I don’t see those
pages, so how can I get them to the website? I need to go to the backend, I hover over
here, then I can go to menus, or I go to the dashboard, appearance, menus. And now I can
create a menu, I use the pages that we’ve just created.
So the menu name, it can be anything you like, so it can be Uncle Jim, and as long as you
know Uncle Jim is the main menu, it is ok. I rather go main, underscore, menu, and I
create the menu. So this is the menu over here. What can we
do now? We can add menu items here at the left, we can add pages, post, custom links,
and categories. So over here at the pages we’ve created we can view them all, and we
can select all the pages. I add them to the menu, and there they are.
You see, everything is called page, except over here, here is called home, but we also
have our homepage over here, so I don’t need this one. So click over here, I remove it,
and I save the menu. So if I take a look at the website holding command on the Mac or
control on the pc and clicking over here. Still nothing. We need to assign this menu
to a certain place in the website, and every theme has a different place and at this theme,
display location is below, I like to have primary area. Save the menu, refresh the page,
and now it’s over here. I don’t like the order, we can change that, how can we do that? I
can just click here and hold my mouse clicked and I drag it here, about, home, services,
and the services, photography, film, and web design, then we have the portfolio, blog,
and contact, if I go to apple.com, they spend millions in optimizing their website, so over
here you see the logo and the menu, and if you click on iphone, you want to go back to
the home page, then, there’s no home text, you need to click on
the logo. So I will do the same, I don’t need the home area on the menu, so I remove it,
so we have about, services, photography, film, web design, etc. But what I would like to
do is how to create a sub menu. So below services, I want to have photography, film, or web design.
Right now, you see them all next to each other, how can we do that? simply click over here,
and drag it to the right, until you see this step over here. Now if I release it, it is
a sub item of services, the same I can do for film, drag it to the right. I can even
take it a step further, and I can also create a sub item of a sub-item, so if I go to the
right even more, now web design is a sub-item of film, so if I save the menu, and I refresh
the page, you see services, photography, film, and over here another tab, that means this
is a sub-item, of film, so if I drag it to the left again,
not too much, save it, we have a sub-menu over here, so I like that, and if we click
on the text or the logo, we see nothing found, ready to publish your first post? why is that?
because by default, wordpress has set that by default the web page you set the blog post.
We don’t have any blog post, that’s why you see nothing found. How can we change this?
go to the back end, to settings, reading, and here it says your homepage displays, your
latest posts. I rather have a static page so I select this one over here, and the homepage
is, home, the post page is blog, I scroll down, I save the changes, and now if I click
over here, we see home and we can edit it, you see all the stuff over here.
So at this moment it looks very ugly, how can we change that? As you can see over here
we have the title, subtitle, we have our menu, title of the homepage, and some widgets, well,
this information can stay the same, or we can change the look of the view, that’s the
power of wordpress: we can use different themes. So if I go to the backend, I go to appearance,
themes. You can see that right now the theme is twenty nineteen. But we also have different
themes we can choose, so here we have twenty seventeen, we can activate it, it means all
the information on the website will stay the same, but the look of view will change. So
right now this one is active, so if I refresh the page, we see the title, we see the subtitle,
we see the menu, we see the home page title, but the look is totally different. So this
is our submenu. Again, I can activate the twenty sixteen, refresh, and now the same
information but different look and view. I really don’t
like those themes but there’s a theme I really like. So we’re going to get this Astra theme,
it’s free, and if you want to get it you can go to Ferdykorp.com, go to tutorials, free
theme tutorials, make a website within one hour, scroll down, and here are the important
links, get free Astra theme, I click over here, we click on download now, and we scroll
down and we see a few pro versions, but we’re going for the free version, if you can’t find
it over here, you can scroll down, and over here: can’t decide which plan is right for
you? download free Astra theme. What you can do is you can leave your name: Ferdy, my email:
[email protected] and you can subscribe & download or you can say no thanks,
I just want to download Astra, and if you do this, you get updates about
sales and all that stuff but with the pro version there are a lot of tutorials about
it, go to youtube, and you search for Ferdy Astra, complete astra tutorial for free theme,
and in Astra Theme Tutorials is a full playlist with all the pro functionalities, but with
the free version there’s also a lot possible. So I close this, and if you don’t to do all
that, they can go to the backend, and themes, so if you’re here at the dashboard, appearance,
themes, and close this. Add new, and you can also search for Astra. I click on install,
and I activate it, and now if I refresh the page, it is starting to look a little bit
better. And since we’re downloading stuff let’s download Elementor, we can go to Ferdykorp.com,
and again go to tutorials Make a website within one hour, scroll down,
and click on get Elementor, and also we can get a free download. My email address [email protected],
but also here I can say no thanks I just want to download it, or here you can go to the
backend, dashboard, plugins, add new, and search for elementor, and there it is. More
than 2 million installs, it’s crazy what it’s been going on with this page, it’s only over
2 years old and it’s taking the wordpress world, it’s amazing. Install now, and activate
it. So now that we’ve installed the astra theme
and elementor, let’s create an amazing website. So I see this message over here and you can
watch this video, but I want to close this, now I want to colapse this,
and I take a look over here, I can remove that, I can close this. And this is how our
website looks, and this is how our backend looks. So what we want to do now is to go
to the website, and I want to configure the Astra theme. I can do that through customize
options, so we can click over here and now we can configure the Astra theme, I can do
that through the customize options, so I click over here and now we can configure this, it
looks a little bit weird but we can make it look better. If you want to use the same images
that I use in the tutorial, we can go to ferdykorp.com, tutorials, make a website within one hour,
and over here, download the image I use in the tutorial, and they will be downloaded.
And I direct them to the desktop, so here they are, OK. Now I close this, and I’m here
at the customize option, and the first thing I want to do is I want to get rid of this
big text and replace it with my logo, so I go to layout, header, site identity, and here
I can upload a logo, so I select my logo, and here I can select
files. And then I go to my computer, imagesTutorial, number six, and here’s my logo ferdykorplogo,
so I open it and I can optimize it, I can change the title, create a space over here
and move logo, copy the title and paste it here, it’s all text, and then I can select
it, I can crop the image but I don’t want that, so I can click on the image, skip cropping,
and there it is, so now we have the logo here and the text over here, I’m gonna get rid
of this here in a minute, but I can also upload a different logo for the retina device.
So I check that, select an image, upload files, select files, and then I can go for this logo
and it’s twice as big, you see this higher quality, I open it, and it will look much
better in the retina screen. Again, remove this, copy, copy, and paste,
like that. Now it looks really great. You can also have
a different logo for a mobile device but you don’t want that, so I scroll down and before
I change the logo I want to get rid of this side title text, so I uncheck this, and this
looks much better. I think it’s a little bit too big so how can I fix that? I can change
the logo width over here, and let’s see, maybe 160, that looks great in my opinion, so I
scroll down here and I can have a site icon. At this moment you see this Astra icon, if
I go to Apple.com, you see apple over here. I want to have the initials of my logo over
here, so I go over here to the side icon and click on select image, upload files, select
files, and here it is: favicon. It needs to be a square image, 300 x 300,
and it should be at least 16 x 16 pixels. If you open it, and your image is not square,
you can crop it, like that—I don’t have to optimize this, so I click on select, and
if your image is not square you can make it square over here. I skip the cropping, and
now we see over here which looks amazing. Okay. I publish it and I’m happy.
What I want to do—this is in capitals, I want this also to be in capitals. If you go
back, you see that you can have more options with Astra Pro and you can make this capitals,
but you can also do it a different way. I go to the dashboards. So, Appearance, Menus,
and over here I can click on this arrow down and I can change the navigation label. So,
here I could say “About Me.” And if I save it and I go to the website: it says “About
Me”, but when I click on it—here’s the “About” and here’s the “About”.
So, what it says if I go back to Menus, and I open it—you can change the navigation
label and it will only be changed in that menu.
So, you can put whatever you want over here. Well, I like it to be in capitals. So I say
“About” in capitals and I will do that with everything—and I will fast forward.
OK, like this. I save it, and if I take a look at the website: now everything is in
capitals, and I like it very much. I go back to the customize options, and I
close it. And I click on customize again. So, it will be with the new menu with all
the capitals. And we can go to Layout again, Header, Primary Header. We can do a lot of
things with it, but I just want to do the same thing as Apple does. Logo at the left,
menu at the right. So we can have the logo on top if you want to, or here at the right—but
I see no reason you should have it on the right while every other website has it on
the left. So I keep it like this. You can disable the menu.
You can have a “Last Item” so if I were to say “Button” you can get extra attention
over here for instance. Donate, or something else. And you can have the button link. You
can change the style. You can have a Search icon. I want to have nothing.
The border size of the button… You can change it, and you can change the color. You can
now go through all the different options, but then we cannot make this website within
one hour. So if you want to know more about that, I have a tutorial with the same website,
but then we will make it from scratch—at more than 3 hours long is that tutorial. So,
if you want to learn from scratch how to use Elementor or how to use Astra, you can click
over here and there I will show you everything step by step. In this tutorial, we just want
to get the job done—save some time and a lot of money, so I will not go through all
the options, I just want to achieve a nice result.
So, one more thing over here, you’ll see Mobile Header / Alignment. If you want to
see how our website looks on the mobile… … You can click over here, and here you
can click for Tablet View. I click on the Mobile then I see the menu over here. I want
to change that I think because if you watch this on the phone, this area is a little bit
small—so how can you make this bigger? Simply go to Menu over there. And then you can change
the Toggle Button style. I like Fill. So, I go back to the big screen, I can scroll
up again, and I click on Publish, and the Header is fine with me. We have our logo,
and we have our menu that’s loud and clear. So, I like it to be like that. And sidebar…
I don’t want to have it right now, so I say “no” to the sidebar so it will b gone,
but at the “Blog Posts” I want to have a Right Sidebar.
I go back to the Footer. We can have Footer widgets. I’ll take a look at the Footer
bar that is this area over here. And, we can change the text over here. So we can say Copyright…or…
Copyright 2019. And so, I like to have a (pipe?) like this. Our “site title” and “powered
by”… We can remove that. You can have this Disclaimer and if you want to make this
a Link, I copy this and I go to the back-hand… New, Page, and I call this “Disclaimer.”
Publish. And Publish. And here, I press it, I select it, and I link it to the page: forward
slash Disclaimer, forward slash. OK. And then I click over here, and I want to
see everything in HTML. And I copy this code—without the “P” area so I can remove that, and
then I select this whole area, copy it, and I can paste it over here. And if I click over
here, we go to the Disclaimer page. We can also have a second section…
…But I don’t want that. I think this all looks fine. I go back, and
I go back, and I can go to the Container. Right now you see an area over here, a wrapper,
and it is because the default container is boxed. So if I make the screen smaller, you
see this area is a background color. So if I make a website, all the information will
be in this area. I don’t want that. CMD or CTRL + 0 to go
back to 100%. I want the default container to be full width and contained. What does
it mean? This wide area is [solely?] from the left to the right, even if we zoom out—but
the content of the website is contained. It’s within this area from the logo to the latest
menu item. If you want everything totally to be from
the left to the right, you can select Full Width – Stretched. Now, if I make the screen
smaller—you see Home still stays on the left, I don’t want that. So I say…
Full Width / Contained, and for the blog posts I would like it to be Content / Boxed. Publish.
We can change the size of the website. So, if I zoom out, I can make it wider, like that.
I can zoom out even more, make it even more wide. But I don’t like that, I just want
it to be 11 x 40. That’s what I like. I go back, I go back, I publish it. I go to
the back end, I click on update, and I close it. I want to close this area. So this is
the website we see, it looks so much better already, the logo at the left, the menu at
the right, and here we are at t he homepage. So what I want to do now, I want to start
using Elementor. And I can do that by clicking on the Edit page, and then over here it says
“Edit With Elementor.” I click on it and now Elementor starts.
If Elementor does not start, let me show you how we can fix that. Copy the link, paste
it. I go to the back end, to Elementor, Settings, I go to Advanced, and if it’s not loading
I can switch the Elementor loading method to Enable. While mine is working so I don’t
need to do that. The second thing I want to do: I go back over
here, and Editing Handles…I want to Show them.
Save the changes. Let me show you what the difference will be
if I click on the plus, and this area. Right now I see three icons, and if I hover over
here, nothing happens. And now if I close it, and I click on Edit With Elementor again,
because I enabled the handles right now, if I were to do the same thing, we have four
areas—and if I hover over here, I can duplicate things, I can create new columns, and I can
remove columns, so that’s much better. I close this. And, let me talk about Elementor.
I am a huge fan of Elementor. Elementor is the best free page builder in the world and
you can create an amazing website with it. In this video we will work with templates,
but if you want to learn more about creating a webpage with Elementor, you can search for
Ferdy / Elementor and I have a ton of tutorials: how to work with Elementor Pro as there’s
a Pro version. I have a Dutch tutorial, and I’m also making a complete tutorial for
2019 where I show you everything in 3 ½ hours about how to make a website from scratch using
Elementor—and I talk about all the Elementor pop-ups; I have a lot of tutorials about Elementor,
so if you want to learn more about—just search for Elementor. You will find some great
tutorials. Well, what you can do, if we were to make
a website from scratch using Elementor, I would do this: I can click on the plus, and
I can select how many columns I want to have. If I want to have ne column, I click over
here. Now you see this blue area. This is the section. When I click over here,
I can edit the section. First, the Layout tab. So I can change the height. Then we have
Style. In Style we can change colors, we can add a background, so I can add a background
over here. So we have a section, and in the section we
have the columns. Right now we have one column, but I can also duplicate it or get a new one.
And now we have two columns. And in those columns, I click over here. I can add elements.
So a heading, I can just drag it. And I have also Content, so here I can change the text,
or the alignment. Here at Style I can change the color, The size—make it bigger. Do all
kinds of stuff with it, then I go back over here to all the elements, and I can add all
these elements over here—so I can box… I drag it here below. I go back, I scroll
down to Testimonial Carousal, here at the right. And then I think okay, I don’t see
the text. So I can go to the settings of the column. I can go to Style, Background Type,
Color, Color, White. So now I can see everything. So that’s how we can create a website from
scratch. But, we are going to make use of templates, so I close this.
If you want to save time while making a website, then you can use Elementor, and there are
a few ways to import premade templates and to adjust them, and if you want to take a
look at the first way, you can click on this folder over here. And then we go to the Library
with Elementor. What you see over here is a lot of premade
templates. And some are for the Pro version, and a lot are for the Free version, and so
I can insert this one if I want to, or I can preview it.
And if I think “Hey, I like this, I want to use this, I can insert it. And here’s
the video in the background, and all these elements we see over here are all made with
free Elementor elements. So I click on Insert, and there they are.
If I want to save this page, I can click on Update, and if I want to view the result,
I can click on this eye and preview the changes. So this is how it looks. This is what we have
just made in a few minutes. And if I want to change some things, I can do it really
easily. So, I can go to YouTube.com and search for GoPro Hero 7. And I see this video. I
click on it, and I grab the link. And what I can do now: I can change the video background.
How can I do that? I click over here. By doing that, I select the section, and then I can
go to the… Style, and the background type is the video,
and I can paste it. And now you see how this is changed. If I want to change the text,
I can click over here. I can select it, and I can say “Amsterdam.” So what I should
do actually is get a video background of Amsterdam if I want to, and right now I’m doing a
lot of things together; I’m recording my screen so that’s why it’s stuttering a
little bit. What I also can do is I can go and click over
here, I go to the column section settings, I go to Style and at this moment the background
color is a little bit white and a little bit transparent. I can also make it black and
a little bit transparent, and I can click over here, I can go to Style, I can change
the text color to white; and the same I can do over here. Style, make it white, and here,
Style, And make it white. So that’s how we can
change the style really quickly, so we can import a complete template and then we can
change everything, so over here I could say I want to change the background style color
to this blue color and then the text to this one—and I can change text: “Hi guys, how
are you today?” and the great thing is I can show—and I’m sorry, I show you so
much in a short time, I try to slow down a bit, but I click over here, I go to Style,
and I want to change the color of the icon and make it blue. Or this color blue. And
I copy this color. And I go to the text and I also change the color.
Now, I can do that at all those places, but I can also, say, right mouse click “copy”,
and here right mouse-click, “paste” the style. You see.
Here again. Paste it and paste it. So in that way, you can import pages, change the information,
and change the style. So that’s how it works. Really easy, really
efficient. That’s one way, there are a lot of different ways. Let me show a few.
If I want to get rid of everything, I can hover over the blue area. Click on this “X”.
And now we are back at the normal page. I can click over here, and I can go to Blocks.
And here I can create a website with premade templates, but only with sections—so only
with certain parts. So I want to start with the Hero, and so I
can select a lot of Heros. Some are for the pro version and a lot are for the free version.
So I can say I want to have this one. I click on insert. OK, I like it. Another one, so
I go to Blocks again. And this time I want to say…
…something about ourselves or about our services, so I search for Services, and I
want to have a light area this time, and I want to have this one. I insert it, OK. And
then I want to have another area with “About Our Team”. Let me see, “Team”, And I
want to have the dark area again. This one. OK, and now I can change all this. I can change
the video. And, if I want to see the result immediately, I can click over here. And then
I see how the page will look in real time. I click over here. So there is a second way.
I remove it, remove it, remove it, and remove it. And then there’s another way. I go to
Ferdykorp.com and I go to Templates, and I can get a lot of Elementor templates for free.
And I recently changed this library, I want to make it better and better. I’m also adding
more templates, so if you’re like “I want to make a website about a certain subject,
but I don’t see templates” please let me know in the comments what kind of template
you would like to have, and I will try to make those for you. So my first name is Ferdy,
and my e-mail address is [email protected] and I click on Give Me The Package. I will
give you an update when I upload new Templates. I will give you an update when I upload new
templates or and when I have news about my channel or if there’s a discount coupon
code for Elementor. So I check this, and I check this. I subscribe, and now I need to
check my e-mail. So here it says “get your elementor template pack from Ferdykorpershoek.
I open it and I click on Get the Elementor Template Pack.
OK, I download the Template Pack and I will show you how it works. I click over here so
I can open them. and I want to direct them to the desktop. So what I can do over here:
I have images and JSON files. I can click on one, press the space bar, and then I go
two down, two down, two down. And if I see something I like,
or I can use, for instance this one, then I think “Hey, I want to use this.” It
is the Media Business Homepage Version 3. So, I go back to Elementor, I click on this
folder icon, and then I click over here so I can import a template to my library. It
can be a JSON or a Zip file. I use JSON files. They work better. I select the file. I go
to the desktop, Complete Elementor Template Pack 2019, and I search for Media Business
Page Version 3. I open it, and now I can insert it. “Yes I’m sure.” It will override
all the other things in your page. And now we have this: isn’t that amazing? You may
think this looks a little bit weird, but on the website itself you don’t see two, but
this is to optimize everything for every device. I can add my own images over here. “The
Clients We Work For”—you don’t see those images.
So if I update it, and I want to take a look, this is what we have so far. For free, and
we save a lot of time. The only thing is: we need to add some images ourselves. Where
can we get free images? Well, you can get them at Pixabay.com. I also use Pexels.com.
And you can use Unsplash.com. You often see the same images, but look at
the quality. You can use this for free. You don’t have to give credit to someone. So
if I would like to have this one, I can click here, so I can download it for free—and
there it is. Really high quality. So what I can do now: I can import it into
the website. So, let me see. Over here I don’t want to use a background, but I do want to
use a background over here. I can click over here. Go to Style.
Image. Upload files. Select files. And if I go to Downloads, it’s over here. But I
don’t like the title, so I can change that. I’d rather call this Ferdy-Korp-Media-Photography,
or something like that. So, I select it, and I open it, and if you want to optimize things
for your website, and be found better on Google, then you need to remove the dashes here, copy
the title and paste it into Alt Text. That’s all you need to do.
Insert it, and you see the image is quite big, so if I want to change that… I can
update it, and I go over here. I go to the background, to Media, I click on it, and it’s
3 MB which is really big. So I want to make this smaller, how can I do that? I click on
Edit Image. And I can say the new dimensions should be 90 x 20.
I scale it so it’s smaller now. And I can also change the aspect ratio, so I can drag
something here. I say make it 16×9. And then I drag this to the left, and then I can select
something I would like to see, the rest will be cropped off, so maybe I only like this
area here below. And then I can click over here, and now it is cropped.
So it is made smaller, and it’s cropped, I can save it and now it’s so much smaller
So I go back, I go to the dashboard and I edit it with Elementor again. I scroll down,
I click over here. Style, delete, and I grab this one. Insert, and that’s that.
So that’s how you can change a lot of things. Another example, I click over here, I choose
my image and I can select this guy. And over here,
I can select this lady. So that’s how easy you can change things. So, what else? If I
go to About, and close this, I can go to Ferdykorp again, Templates, and you can also watch all
templates. Just click on forward slash “All” and I search for Complete Pages, and if I
like this I can click on the image, it’s called About Us Version 1, and you see the
Templates. And the great thing is you can also watch it on the tablet, how it will look
on the tablet, and how it will look on the smart phone.
If you like it, you can “Download This Template” individually, and then I go to the website
“About”, I Edit the page, I Edit it with Elementor, I click on the folder. Upload.
I need to unpack it first. So I click over here, and I unzip the file.
There it is, the JSON file, I select it again. I open it. And there it is: About Us version
1. I insert it. Yes. And there it is. You can change the text, you can change the images.
You need to have a plug in for this one. Contact Form 7. So if I update it, and I open it in
a new tab, I can go to the back end, plug ins, “Add New”, and I search for the plug
in Contact Form 7. More than 5 million installations. I click
on Install Now. And I activate it. And then, I click on the Eye again, and now:
We have our form over here. I also have a tutorial on Contact Form, you can find it
over here. But that’s how you can create a website really fast.
I go to the Contact Page, I do exactly the same. I search for the complete pages and
here’s the Contact Page. I click on it. And if you don’t like it, don’t click
on this X, but close it over here, and then go to the overview again, and if you like
it you can download it. I go to Contact, Edit Page, Edit With Elementor, I unpack this by
clicking here. There it is. I click on the folder icon. Upload. Select the file. Contact
Page version 1 dot JSON. Open, and I can insert it / yes. And that’s how it goes, you can
change the address. You can change the information over here. And that’s how easy it is.
If you want to know more about Elementor, you can go to Facebook.com. Go to Elementor
Community and you can sign up for this one. You can sign up for this one, you can sign
up for this one, this one, and there you can ask all your questions. And Elementor is growing
like crazy. There are more than 2 million installs. There are a lot of people who “Like”
it, and over here you can ask all your questions, so that is amazing. So, sign up for that.
So that’s it. I close this and I go to Elementor Contact, Update, take a look. And of course
I can do the same for the Services page, Photography, Film, Web Design. If you want to make use
of Blog Pages or Blog Posts or Portfolio you can click on the links in the description
and there I’ll go deeper into the subject, I will not talk about it in this tutorial,
because most webpages do not make use of a portfolio on the blog page. But, if you want
to learn how to work with that, click on the link in the description. So what else do I
want to do? I scroll down and I have this area over here. I want to add a few Footer
widgets, so I click on Customize, I close this and I close this, I scroll down and this
area we’ve seen on every page. So, I go to Layout, Footer, Footer Widgets, and I turn
this “On.” You have four areas, that’s the only option. If you get the Pro version
of Astra you can change the amount. And if you upgrade to Astra Pro, I have a lot of
tutorials about it, but in this video we’ll focus on the free version.
So, four Footer area widgets. So, I go back, I go back, and I go back to Widgets. Widget
Area 1 and I can add a widget. Maybe I also want a side map so I search for Menu, and
here it says Navigation Menu. I call this Menu. And, I select the Main Menu. And it
looks like this. And then I go back. I go to Area 2. And I
want to have text, so I add a Widget and I search for Text. I click on it. I can say
“About” and I can add a text. So, now we have a menu and a text. Here, I want to
have a Facebook widget, so I click on Publish. I go to a new page: Elementoire.com. I go
to the back end, Plugins, Add New, and I search for Easy Facebook Like Box.
I click on “Install Now”, I activate it. I don’t like this, but it’s a lot with
free versions of plugins. So, I close this. I click on Customize again.
And I go to Widgets, I scroll down. The third one, Add a Widget, Facebook, there it is.
Easy Facebook Like Box. Then, I go to my Facebook business page. Here it is I copy the link,
and I paste it here and I can say “Like Us on Facebook.”
Right now we see nothing, but when we save it, publish, and close it, you will see it.
So now, I want to search for one more plugin. Plugins, Add New, Instagram Feed from Smash
Balloon. I click on Install Now. Activate. And then I go to the Settings and I click
Connect An Instagram Account. To be honest, I don’t use Instagram… So, you need to
fill in your phone number, username, and email and then your password.
And then you need to login. Verify everything. And then you can show your Instagram account
over here, and you can use it with a short code which you can see over here. Instagram
Feed. And then you can copy and paste this as a text widget.
I want to thank you for watching this video. I hope you have a great result, you’re really
happy. What are the next steps you can take? You can go to YouTube.com or you can search
for Ferdy Elementor. You’ll see a lot of tutorials.
If you want to know more about search engine optimisation, you can search for Ferdy SEO.
It is from 2017 but it is still relevant. And also this one, the same principles can
be applied. And if you want to know more about my channel
you can search for Ferdy Korpershoek. And I teach a lot of things about starting a business
from scratch, about all the new Elemento features. About Divi, A Dutch tutorial about making
a website. About ultimate addons from Astra. About Pop Ups. I teach a lot of things, so
if you want to know more you can search for Ferdy Korp. You can subscribe and then that’s
it. Thank you for watching this tutorial. Like the video if you like it, subscribe for
more upcoming videos, feel free to ask a question in the comments and I’ll do my best to answer
it. Thank you for watching and have a great day, bye bye.