How To Make A WordPress Website Within One
Hour
Hi guys, my name is Ferdy and in this video
I will show you how you can make a WordPress
website within one hour.
I have a lot of three hour videos where I
teach people how to build a website step by
step but since the latest developments within
WordPress and page builders, it has become
quite easy to build your own website really
fast so if you want to make your own website
but you don't want to spend much money on
the web developer and don't want to spend
hours and hours and hours watching 3-hour
videos where I show you how to make a website
step by step, you just want to get the job
done, save a lot of time and have a great
end result then this video is for you
So let me show you what we are going to do,
we are going to make a website using a free
theme, free page builder and free templates.
Instead of designing everything yourself,
we will use pre-made templates that you can
download for free through which 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 will use called Elementor
also has free and pro templates that you can
import with a few clicks, then I will 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 provide you with tutorials
about all these elements within the page builder
Elementor so everything is created to help
you to save time and money.
Making a website these days is easy, if you
like what you're seeing then please like this
video and subscribe for more upcoming videos,
now let's get started.
The first thing we are going to do is get
a domain name and web hosting and I can provide
you through my link with a 60% discount of
your hosting.
After that we will install WordPress, after
that we are going to install a free theme
and a free page builder called Elementor and
when we have done that we will create our
amazing website so let's get started.
If you have web hosting already that's great
then you can skip this part, if not then follow
along.
So if we want to get a domain name and web
hosting, we go to webhosting125.com and then
we click on the link and it will redirect
us to SiteGround.
SiteGround is in my opinion the best web hosting
provider there is, their support is amazing
and if you take a look at popular Facebook
groups you see SiteGround is number one so
I advise everyone to use SiteGround.
We have three plans and you need only one
so which one do you need, if you want to make
your first website then you can start with
a startup area.
This is $3.95 per month euros or dollars and
it holds one website, 10 gigabyte of space,
it's suitable for 10,000 visits per month
and if you get more than that that is great
then you can upgrade to GrowBig.
With grow back you can have a lot of websites
under one name and you only pay $6.45 per
month, what does it mean?
You get web hosting for $6.45 per month and
besides that you can have extra domain names
and add them to your web hosting and in that
way you can have multiple websites with a
few domains for just $6.45 and if you get
more visitors and you need more space then
can upgrade another time to GoGeek but we
start with one website, only $3.95 per month.
I did some tests and SiteGround is the fastest
web hosting company I've found and they have
great customer support, they have a live chat
so in order to get a domain name and web hosting
here let's click on get started.
We can choose a domain name, if you have one
already, click over here you can fill in over
here and it will do a website transfer for
free.
I want to register a domain name, if you choose
Facebook and select dot-com and say proceed,
it says error you have chosen an invalid domain
name, why is that?
Because facebook.com already exists but if
I would say elementor2018.com and I say proceed,
it says congratulations domain elementor2018
is available for registration with your web
hosting account.
I need to fill in some details, my email address
elementor@ferdykorpershoek.com and I need
to create a password and here's some client
information.
My country, the Netherlands, first name, last
name, my company, my city and all other stuff
and your VAT number, if you have a company
you can fill in your VAT number and then the
taxes will be subtracted from the total amount
you have to pay.
I scroll down, I want to pay with credit cards,
my card number my billing address is the same
as given in the contact information and I
want to have the startup plan, I can change
this from Amsterdam to Chicago because I want
to create a website that's for English people,
the period is 12 months I like it and I have
a domain registration, I don't want domain
privacy, if you do that then nobody can see
who the domain owner is so they don't can
email you with questions.
I want to be transparent I leave it as this
and I don't need a site scanner so I also
leave that as it is so total 59.35 I confirm
that I've read and agreed to the SiteGround
Terms of Service and if you get web hosting
here at SiteGround through my link I get a
commission so thank you for that, it supports
my channel and helps me to create more tutorials
and what you can do now is pay now, your order
was successfully submitted so that's great,
please hold it takes less than 2 minutes to
complete your account creation and it takes
less than 10 seconds.
So we completed step 1 we have a domain name
and web hosting.
I click over here proceed to customer area,
now SiteGround wants to help you but we don't
need the help of SiteGround because I will
show you everything so when this pops up say
thanks but I don't need help and click on
proceed.
I click on my accounts over here and I go
to the cPanel, we are going to install WordPress.
I go to the cPanel by clicking this red button,
I remember my selection, I click on proceed
and here is our cPanel.
What I want to do out, I want to install WordPress,
over here is the auto installers, you can
click on WordPress or you can go to WordPress
tools, install the WordPress.
I click on this one, I scroll down and here
it says install now.
I click on it and I want to choose HTTP, if
you have only one website this is the only
option, here it says the directory I can install
it at elementor2018.com/test or something
like that, I keep this empty and here are
the site settings.
The site name is Ferdy Korpershoek Productions
the site description, you deserve to be seen,
this is not necessary and my username FerdyKorp
and my password, I like it, my admin email
elementor@ferdykorpershoek.com the language
English and everything here is fine.
What you see over here, I need to verify my
account otherwise my website will be offline
within two days so I go to my email, I click
over here and I need to verify it so in order
to ensure your domain remains active you must
now click on the following link, click over
here, scroll down, verify information, thank
you the following contact data has been verified,
really important to do, if you don't do that
your website can be offline after a few days.
I click on install and it says it can take
up to between 3 or 4 minutes but it only takes
15 seconds and now we have installed the WordPress.
I can go to the front-end on my website or
to the backend.
If I click on the front-end, it opens in a
new tab this is the front-end.
Everybody in the world that goes to elementor2018
right now will see this and if you go to the
backend, it is the place only we can access
and we can change everything on our website
then we see the backend and the great thing
about SiteGround is that our website is online
immediately.
With other web hosting companies I have worked
with, it took 20 minutes sometimes it took
2 hours and sometimes even 48 hours and now
we are online immediately.
What I want to do now, I want to clean my
website up, when you install WordPress through
SiteGround, SiteGround brings some plugins
with it and I don't need them.
I want to start really clean so the first
thing I will do, I will dismiss this over
here, I will close this and what I want to
want to do, now I go over here to FerdyKorp
and I edit my profile.
You can choose a color scheme, you can have
it light or like sunrise, midnight.
I like to use it as default.
I scroll down, my username is this one, my
first name is Ferdy, my last name my nickname
and then my display name publicity.
If I click over here and I hold command or
control on the PC, I go to my website and
here's a blog post.
If I click on it you see it's by Ferdy Corp.
I want to change that so I change my name
publicity to Ferdy Korpershoek and see right
now, it's Howdy Ferdy Korpershoek.
I scroll down and if you want to you can generate
a new password, I can do that over here, update
profile and that's done.
Now if I refresh this page, it's by Ferdy
Korpershoek, what I also see when I'm here
at this blog post, I see Elementor2018.com/the
year and the date and then the title.
If you want to change that go to the backend,
go to settings > permalinks.
I like to keep things clean and here it is
displayed, the common settings of the permalinks,
day and name so it will look like this I don't
want that I want it to look like this, elementor.com
forward slash then the post or the page name,
so I click on posting, I scroll down and I
say save the changes.
Now if I go to the home page, I click on this
link and I go to Elementor2018.com then I
go to the blog post and I click on it, it
looks like this, it’s better, way better.
I close this for now and I go to the dashboard,
here is a post and I want to delete it so
I click on the post, I click on trash, now
I need to go to the trash over here and I
can delete it permanently by clicking this
link or I can empty the trash.
I click on empty the trash and now if you
go to the dashboard, it is gone.
I go to plugins and jetpack came with SiteGround,
what I can do, I can deactivate it and I can
also select all the plugins and do a bulk
action which is delete, I click on apply > yes
I'm sure and now if you go to the dashboard
and I close this and this and this and this,
it looks way better in my opinion, it looks
really clean.
I like to work in a clean environment and
when you don't have unnecessary stuff on your
WordPress website, your website will be quicker
so what I can do, I want to create a few pages
so I can go to pages > add new but if I'm
at the front end, I can hover over new and
create a new page.
This bar is only visible when you are logged
in so all the visitors of your website will
not see this only when you are logged in,
so I hover over new, I click on page and of
course I want to create a home page and then
I click on publish, we will edit this later,
for now I'll just create a few pages and what
else do you want to show on your website.
I add a new page over here, I want to tell
a little bit about myself or about my company
so I say about, I click on publish, I click
on add new, I want to let the visitors know
what kind of services I offer so I say services
or service something like that, I click on
publish.
If you have more than one service that you
can create a page of all the services, so
I add a new one and for the service photography,
I create a page for the service film, I create
a page and for the service, web design and
then a contact page so I click on new contact
and if you want to use a portfolio page then
click over here.
Now I'll show you how you can make a portfolio
page and if you want to use blog post, I can
show you how you can create blog posts so
if I go to the pages page, you see all the
pages we have.
Now we need to assign those in a menu so if
I take a look at the website, you don't see
the pages.
I want them to be seen so I'll hover over
here and I go to menus or I go to the dashboard
which is the back end to appearance > menus,
here I can create a menu so I need to have
a menu name and the only one that sees this,
I always say main underscore menu, I create
the menu then I view all the pages, I select
them all and I add them to the menu like that.
If I take a look at Apple.com, you don't see
a homepage you see only the logo, that's what
we want to do so I remove the homepage by
clicking over here removing it and also here
remove so we have About, Services then we
have, here are three services and we have
contact, what I want to do I want those three
pages below the page services in the menu,
how can I do that?
I can drag it so I click on it, I hope my
mouse and I drag it a little bit to the right
below services and you see, it is a tab over
here, I release it and now it is a sub item
of services, the same I want to do for film
below photography and web design, you can
also have a sub menu in a sub menu so if I
drag this to the right this now is a sub menu
item of film, if I save it I close this and
I take a look at a new tab holding command
when I click over here, you see nothing because
we need to assign the menu.
In this case every theme is different and
this theme I can assign it to the top menu.
I save it, refresh and now I have here About,
Services, Contact and when I hover over services,
I see the sub items and when I hover over
film, I see the sub item web design.
I bring it back like that, save it so this
is set.
I want to change the look of view of this
website I don't like this, what do we need
to do for that?
We go to FerdyKorp.com, go to tutorials, free
theme tutorials, make a website within one
hour, scroll down and click on get the free
Astra theme, we're going to work with the
Estra theme, an amazing theme that I will
show you step-by-step how you can configure
this theme, click on download now, scroll
down and we want to free download so I click
over here, my first name my email address
so you get a notification when there are new
updates.
I click on subscribe and download, if you
don't want to subscribe, you can say no you
can even go to the website to the backend
to appearance themes, add new and search for
Astra and click on install then we can activate
it and then I want to remove all those themes
because I want to keep it clean, the last
one theme details, delete so that's that.
Here at my website, let's get Elementor.
I click over here, I will show you how to
get a free version, if you go for the pro
version then I get a commission for that so
thank you but in this video we will work with
a free version of Elementor.
In my opinion the best free page builder there
is, click on free download and again your
email address so you get updates or just no
thanks I just want to download Elementor and
also here you can go to the website, to plugins,
add new and search for Elementor, Elementor
page builder 600,000 installs, 5 stars, 2
days ago, they updated it, it's perfect.
Elementor is changing the way we make websites
and we are going to use it in this tutorial.
I click on Install now, activate, I close
all this and I go to the website and this
is how our website looks right now and we're
going to make it look much better, we have
now installed the Astra theme and the Elementor
page builder.
Now let's create an amazing website so let's
click on customize so here I will walk you
through all the steps that are necessary to
adjust and configure your website.
First we go to site identity, we can upload
a logo.
If you want to learn how to make a logo click
over here and I will show you how it is done,
I select the logo, I upload files, I select
the files, there are on my desktop so here's
my logo FerdyKorpLogo.PNG, I open it I click
on select, skip cropping and there it is.
I also have a retina logo which is twice the
size so I select the image, upload files FerdyKorpLogoRetina
and it's bigger than this one, I open it,
I choose the image like that.
Here I can change the logo width like that
really easily and here I have my Site title,
if you don't have a logo, you can choose a
text over here.
For instance Ferdy Korp, as it will be shown
over here and I don't want to display the
title but if you don't have a logo it's a
nice alternative and the tagline you can show
it over here and I don't want that, like that
then we have the site icon, somehow I have
it already over here, I can change it upload
files > select files and keep in mind that
this file needs to be square, it can be 16
by 16 pixels but I rather have it a bit bigger
so it needs to be square, select it, you can
crop it to make it square.
I should keep the cropping, all right now
you see it over here, so that's great, if
I were to save it, I click on publish and
I go back.
What else, we have the layout of our website,
we have the container, container width, I
can make it smaller if I zoom out a bit command
minus, you see better.
I can make it wider and smaller, if I click
over here it goes to default so I like it
1200 then we can change the default container,
right now we see a wide area over here and
a white area over here.
I can change it, I can make it boxed so everything
is in boxes also the widgets over here.
I can change it to fool width, contained so
it's now full width but everything is in one
big white container with the white backgrounds
so if I make it smaller, you still see everything
here, full width, also here full width and
you can say full width, stretched everything
goes over here to the left and over here to
the right.
I don't like that so I say full width contained
but you can also change it for pages, for
blog posts and the blog archive, we're not
going to use this in this tutorial.
If you want to know how to work with blog
posts then click over here, I go back, primary
header then right now this one is selected,
the logo at the left I can have the logo in
the center and at the right but almost everybody
has it at the left so why should you confuse
your visitor and do it different so I would
say this version or this one.
I like this one, you can also disable the
menu but I don't see why, you can add a custom
menu item, a search icon over here or a button,
text HTML, contact us.
For now I leave it because I want to show
you something with it, you can have the button
border size and I can make it the color of
the logo so it will we blue like that, you
can change the size, make it bigger and I
just leave it at default, one pixel like that.
The header width command minus, let me show
you one more time, I can say full width and
then it will be totally at the left here and
totally at the right over here, I like it
to be contained within the container.
Menu label on a small device, if I click over
here on this icon I see how the website will
look on the mobile and I want to say something
over here.
I say menu and why do I like to do that, when
people use their thumb to click over here,
if it's small it's harder to click over here
for them so I say menu and now it's easier
to click over here and then get the menu,
sub menu like that, you can also change it
to stack and then it will be below the logo
in the middle, it's up to you, I like them
both but I rather use inline.
I click on publish then you also can see how
it will look on a tablet and it looks like
that.
I'll bring it back to a desktop, I go back
to the sidebar, I rather do not use a sidebar
unless I want to so as default I want to say,
no sidebar and here everything is default
so there's no sidebar in the website but at
individual pages or individual posts I can
put it there if I want to so no sidebar width
is okay, then I go to the footer which is
this area over here.
The footer widgets, we can have footer widgets
which we will have but right now we don't
have them yet so I disable them for now, I
will bring them back later and we have the
footer bar, we can disable it put it in the
middle or put it at the left and we can have
a menu here at the right, if we want to.
I like to keep it in the middle, a custom
text, copyright, current year, over here I
would like to say Ferdy Korp Media 2018 and
then I rather remove this.
What you can do, you can go to new > post
say disclaimer, select it, make a link and
say /disclaimer, apply, they need to go to
text which gives you a code.
I copy that code, I go to the customization
options, create a pipe and place it over here
so now we have a link to a disclaimer but
then you need to also create a page called
disclaimer.
I do that disclaimer, publish so I publish
it, I click over here and I go to the disclaimer
page so that's how it works.
If you use section two here at the right then
you can change a few things over here, we
have the footer bar, top border color, I think
it can be a bit darker that's what you will
see over here, really small and then you also
can make it bigger like that and actually
I like this color, blue over here, I like
it.
Footer bar, the text color is white, the link
color, we can give the color for instance
this color.
I have a tool for that, it's called color
pick eyedropper from Google Chrome, I can
hover over this color, copy the color and
use the color over here.
The link hover color, it could be this green
color, copy it and paste it really nice color
pick eye dropper and if I hover over it, it
becomes green like that so people see this
is a link, then we have the background color
and that is a darker color of the blue in
the logo, like that maybe it can be a little
bit darker, something like that.
I go back, I go to the base colors, the theme
color will be coming back on all kinds of
places in a website so this is blue this is
blue, if I would make this like that, then
you see the base color will become this color,
so I think I like this color so I go back
to the footer bar, copy the color and bring
it here back at the theme color and then the
link color actually is the same as in the
footer bar so also over here, I copy it.
The text color is okay, the link hover color
again, this green color and the background
color I leave it at nothing like that, if
you change that everything in the website
changes so I like it to be white.
I publish it, and you see it is starting to
look real nice then we go to typography, base
typography, the font family, I like it to
be open sans, that's the text everywhere on
the website and if I go to headings for instance,
I can change the font, I can make it capitals
so I like that.
I bring it back, if I go to the header that's
for pro but we don't need that, content, I
go back and this I'll leave because we don't
use that and then we've buttons, we have menus
which is we'll take a look at later and then
we have the home page settings and those are
quite important.
Right now our website shows our latest posts,
it says ready to publish your first post?
No I want to use a static page which is called
home and we don't have a post page so I leave
that as it is, click on publish, I close this
I close this and now this is our website,
what I don't like is the menu, I wanted to
be in capitals so I go to the menu, I click
over here and then I rewrite it in capitals,
About Us, services and contact, save it, I
go to the website, I go to customize to remove
this so I go to layout primary header, in
here at custom menu item I say none, publish,
I close it and that's it, let's go and edit
the homepage.
I click on edit page and I scroll down and
I say disable the title, I update it, I view
the page and this is how it looks, I really
like this.
Now we're going to use a free version of Elementor
so I click on edit page and edit with Elementor
so here we will save a lot of time, what we
could do, we could add a new section, choose
a few columns for instance 3 and then use
the elements for instance an image or a video
or Google Maps or a lot of different elements,
we can use those to make a website step by
step but these days web designing goes to
a new level and that is that we use templates
to create our website so if you want to see
how you can do that then go to FerdyKorp.com,
click over here on templates and what we can
do, we can get all those templates for free
in one big template pack and those templates
complete pages and sections, we can import
in our website with a few clicks and that
will save us a lot of time so if I fill in
my details over here and I say give me the
package I need to go to my Gmail account and
here it is from Ferdy Korpershoek, get your
Elementor template pack.
I click on get the template back, I go to
the Thank You page and this video gives more
instructions but I will show you how it is
done, I click on download the template pack
and it is downloading over here.
I click on it so I open it and here you see
it, you see an image and a zip file so if
I go down, down I can see all the elements,
all those sections and all complete pages
and I can implement them in my website so
right now I can search for media business
page, maybe I like this one or this version
or this one, this one fits the most in my
website so I will use this one so let me see,
media business home page version 3, I go to
Elementor, I click on add template, I click
on this icon, import a template, I select
a file, I go to the complete template pack
for the media business page version3.zip,
I open it and I insert it into the website
and what you will see, we have a website over
here.
With just a few clicks, it looks amazing and
if I update the page and I click on this eye,
I can preview the changes, this is how our
website looks right now, Ferdy Korp photography
film, web design, two call to actions, my
3 services I offer with a few images, a video
and button, some information about us with
a nice animation over here to the left about
who we are and what we do, what people say
about us, the clients we work for and a few
social media icons and that's how easy it
is these days to make websites so if we go
back over here we can change a lot of stuff
so for instance if I want to change the color
of the background, let me explain it briefly
to you, you have a section, you can click
on section settings by clicking on this icon
and this is the section and those three areas
are a section and when you hover over it,
you see this blue area and the left one are
the section settings.
In the sections we have columns, over here
we have only one column, here we have 3 columns
and those are the grey icons over here.
In the left upper corner and if you click
on that then you can edit the column settings
and within those columns we have elements,
this is an icon box, icon box over here we
have the image carousel and here we have the
button so we have a section, within that section
we can have one or more columns and in those
columns we can have elements so if I want
to edit this element, here at the right I
see a blue icon, I click on that and here's
a title.
I could say Astra WP and then I think it's
not aligned really well so we have the content,
we can add a link for instance the size, the
alignment then we have style, there we can
change the color, the typography, text shadows
so I can create it like this and then we have
advanced.
Well if I go to style, to typography, I can
change a lot of things as you see the size,
I can make it bigger and you see it immediately
so what you can do, you can import templates
into your website and then you can adjust
them so maybe your company is totally not
about Ferdy Korp and photography film and
web design then you can click over here and
you can change it, turn your passion into
profit, something like that, I don't know.
Maybe I think over here, I don't have a portfolio
page so you click over here, you change portfolio
to About Us so I change the link to About
Us and here at still I can change the color
and here at the contact button, I also can
change the color here at style so let me go
to the section, we have layout and also at
the section we have style and there we can
change the background, we can change the overlay
so if I go to background overlay, I can change
the colors and the great thing is you see
it immediately and we say update, you see
it like that so that's how you can change
things within the website really quickly so
the new way of making websites is importing
templates from within Elementor or outside
of Elementor and then adjust it and then that
way you can make a website really quickly.
If I don't like this, I go back, I click over
here history, I scroll down and I say let
me see, if I click here what happens, here
yes I like it the way it is over here so I
say update it again when I update it, it automatically
refreshes over here so I like it the way it
is.
Only for this I want to change that portfolio,
I change it to services, services update.
Of all the elements, the free elements and
the paid elements I have tutorials so you
can click over here to see playlist of all
those tutorials and there I discussed all
the elements so over here the icon element
I will talk about it how we can make this
bigger, make this smaller and all that stuff
so if you want to learn more how to adjust
it, how to make it then you can click over
here but I will show you how to adjust it
really quickly like over here you click on
it then we have content, you can change photography
to something else, you see it immediately,
you can change the colors, primary color like
that you can change the spacing, the size,
the padding, it's all really easy to change,
I go back let me see, like that, that's how
easy it is to work with Elementor and so far
we've only made use of the free elements and
maybe you think over here this looks a little
bit weird that is because over here I have
a video and that plays automatically but when
you watch it on a smartphone it does not play
automatically so I said on a smartphone at
advanced I go to response, if I want to hide
this on a desktop and this I only want to
show on a desktop so when I watch this on
a big screen this video appears and when I
watch it on a smartphone this video appears
so that's the great thing about Elementor
you have a lot of possibilities to change
the website for all devices.
So if I make the screen smaller let's see
what happens, here you see the menu make it
even smaller and now it goes like that on
top of each other and you scroll down and
everything still looks fine and if you don't
like it you can change it so if I make this
bigger, this aligns at the right and if I
make it smaller, I decided that I want it
to look like this so that's the power of Elementor,
you can import templates and you can adjust
them really easily and you can optimize everything
for all devices so let's go to the About Us
page, I click on edit page and I need to do
a few things, I scroll down and I want to
disable the title that's it, I click on update
and now I edit this with Elementor, I close
this, there's a different way of creating
website and saving time; you can click on
add a template and then you can go to the
new function, 'Blocks' and it's all black
and white and in that way you can easily create
a website and adjust it to the colors you
want to.
So let's start with a Hero over here you see
all kinds of categories, if you see something
you like you can click on the heart, then
when you go to my favorites it comes back
over here.
I go to a hero then I can search for one,
some are pro so you need pro for that and
some are for free so let me see, I like this
one so I click on insert or I can watch it
before I insert it, I insert it and there
it is, what else?
I click on add a template, blocks and now
I want to have a light one maybe something
with About, maybe something about company
and a picture.
I click on insert and you have light versions
and dark versions and I like to use a dark
one and after that a light one and after that
a dark one, add a template maybe something
about the team, team and there are few different
options, I like this one insert and then something
about Contact so I add a template, I go to
blocks and I search for contact.
A lot of pro things, maybe this one, insert,
so I remove this for now, I click over here
and then you see the website as it should
look like when it is live, dark area, light
one, dark one and then light one and now we
can adjust it so I click over here, I can
change the text, we are creative then I go
to the style to typography, now I want it
to be in uppercase so like that I can make
it bigger, I can change the font then I can
take a look how it looks.
If I click on update and I click on this eye,
I can preview the changes, we are creative,
you have text over here and what I like to
do, I like to change the colors so I go to
this section over here, I go to style, the
background but now I go to a gradient and
you see it changes immediately, the first
color is this one and I paste it like that,
update.
Now this page shows the update, this text
is not that visible so I click over here,
I go to style and I make it white and if we
take a look at this button you can play around
with it, read more organic contacts, get in
contact and I click on style, now over here
you see typography for normal and you see
the text color is black.
I can change it to white but I don't see anything
because the background color is also white,
what I also can do, I can make it transparent
like that.
Now when I hover over it, it looks like that,
I can use a border type, for instance, solid
and then here I can say a border of 5 pixels
everywhere, I can un-link this so for the
top I say 0, right 0, below 3 and left 0,
now it looks like that and if you hover over
it, it becomes green and how can we change
that, if you go to hover the text color stays
white the background color, this color it's
when I hover over it, it becomes dark and
I don't want to have an animation so I close
it like that so it looks like that, update.
We are creative, the text is white and there's
a nice hover over here, where does it go to?
I click over here again, I go to content and
I can say forward slash 'Contact' and it means
when you say forward slash it goes to this
website forward slash and then 'Contact' in
this case and you can change the typography,
you can make it bigger, smaller then change
the weight to something else, make it normal
or uppercase, line height as if you say command
Z, it goes back or control Z, you can do the
letter spacing, you can do so many things,
you can have a shadow so if I scroll down,
I see a box shadow, I can have a small shadow,
increase the blur or the spread, update like
that, now we need to change the image.
I can say, you know what, I don't want to
use this so I click on this cross and I go
for an image gallery, I drag it over here
medium, I can add a few images so let me see
those four, for instance, create a new gallery,
insert the gallery and we can play around,
two columns, link to media file, use a light-box
like that then we have this area, about the
company or 'About Us', you can have text over
here, I like to make this darker, the text
so I go to style, click on the color and say
four, four, four that's it and here again
I can say duplicate, drag it over here, close
it, I want to bring back some colors so I
go to normal and I paste this color like that
and as I said before, of all the elements
you see over here, I have tutorials so if
you want to learn in depth how the button
works you can watch those tutorials.
I update it, change this color and as you
see on my website if I go to the home page,
I like to keep it in one style so blue green
and on the dark blue which you see over here,
I want to keep it consistent and I suggest
you to do the same so your brand comes out
better, you can change this picture and also
here you can change the colors so let me do
that, you go to the background overlay, first
color and the second color like that, you
can change the angle, from left to right or
right to left and of course over here I can
change the colors so I go to style, I can
change the image size, make it 50 then I go
to the content, to the description and I make
it white.
Also over here, style 50, content and if you
think I like this, I like editing things and
get to know everything.
I also have a complete tutorial about how
to make a WordPress website using Elementor
and there I discuss a lot of elements more
in depth you can follow that over here so
now I change this really quickly so this is
the web page, you can change this information
over here and maybe think I would like to
have one more thing over here.
Well if you go to elementor.ferdykorpershoek.com
to all templates and you see something you
like that then you can implement it in the
website, so for instance if you want to have
this, click on it and download it, it's now
downloading, I go over here edit template,
upload, select a file, go to the downloads,
for images with hover, I insert it and there
it is, update, let's take a look and that's
how easy it is to create your website, you
can use templates complete pages, you can
use blocks, you can use sections from templates,
there's also a different way.
If we go to contact, editing the page, disable
the title, update, edit with Elementor, add
a template then we also have templates from
within Elementor itself so I can search for
contact and you see pro pages and free pages
so let's see, you can take a look, you can
insert it so I did and now it looks like that,
everything is orange so what can we do, I
can grab this color, this one and I can change
the color everywhere, let me go through it
quickly, update.
Let's take a look, 'Contact Us', 'Visit us'
and of course you need to change the information
but now it is in the style of the website
and if you want to change this over here,
you can click on the elements, here at the
right or you click on the element itself and
you could say Camps Bay, Cape Town, South
Africa and there it is.
In my opinion one of the most beautiful places
in the world, I've been there on honeymoon,
it is so beautiful over here, if you live
here or nearby, you can be really grateful
so that's what you can do with the templates
within Elementor, now let me upgrade so what
I can do, I close this, I close this, I close
this, you can also go click here and then
go to all the individual templates then you
can get Elementor pro, go to pro, you can
buy it for one site, for three sites or unlimited
sites.
I have an account already so now I'm also
able to use pro plugins so if I go to FerdyKorp.com,
I click on templates, click here and I go
to the category Pro templates, I can choose
one, for instance the countdown, I click on
it download the countdown, there it goes,
I go to the contact page, edit with Elementor,
I can click on the '+' (plus), add a template,
upload, select the file, down version 1, there
it is, I insert it and there it is.
Again I can change the colors so maybe I want
something with orange, to do something lighter,
I can change the angle then I go to the element
itself, I change the date to my birthday 28th,
oh 90 days, I can select how many days or
only the hours, I can change the colors, I
can change of the border, I can remove the
border, I can make the border like this, change
the radius to three, there's a lot of what
you can do, maybe you can even make it transparent
like that, look at that and with a few seconds
I changed the whole style, I know it does
not fit over here but I just want to illustrate
to you how you can change the look and feel
of things in your website, I can drag it down
and that's how you can edit your website.
So my responsibility is to work hard on this
website because I think the future of making
websites is using templates so right now I
have to say it's a little bit limited and
with a lot of the same colors because those
are the colors of Elementor, there will be
a lot of new additions and that's why I asked
you to sign up with your email over here so
you can get notified when I have new updates.
So my focus will be creating tutorials and
creating templates and I will also hire some
designers to do that for me so I can focus
more on creating tutorials so that's how you
can make a website really quick, we go to
the services page, Illustrate it one more
time, edit page, remove the title, update.
I go to FerdyKorp.com, templates, click here,
complete pages and now I go for the services
page, a really nice page with photography,
videography and web design.
Get in contact and contact form, download
services page version 1, there it goes, edit
with element, add a template, upload, select
a file, services page, version 1 and can take
a minute to upload but here it is services
page version 1, I insert it and here you can
change the text, change the colors, change
everything and that's how it works.
I see I don't have the contact form so I click
on update, I go over here to the dashboards
to plugins, add new and there's a free plug-in
called contact form 7, I also have a tutorial
about it, install now but it comes with a
normal form, we'd have to configure it so
I go to website, Ferdy Korp, services page,
web design, get in contact and here it is,
beautiful with a nice backgrounds and that's
how it works, that's how we can create a website
really quick.
Let me show you one more thing, we can have
footer widgets here below so if I click on
customize and I scroll down and I go to the
layout, footer, footer widgets, I can enable
it and I have four areas where I can put information.
If I want to have more options, I can go for
Estra pro but for now we work with a free
version, I have tutorials about Estra pro,
you can watch them over here, that will be
my primary theme I will be using so I will
work a lot with Estra and with Elementor because
I think it's a perfect combination for creating
amazing websites.
I go back now and I go back, I go to widgets,
footer widget 1 and we can add a widget, for
instance, a sitemap or a menu navigation menu,
I can give it a title and I call this site
map, it's a fancy word for overview of the
website, menus, like that, publish then I
can go to the second one and I can add a text
for reference and something like this, I click
over here 'About Us' and I play something
like this and then third one we don't have,
we need a plug-in for that so I go back, I
close this and now we have two already, I
go to the backend, plugins, add new and I
search for Facebook by WebLizard, here it
is, install now activate, now I need to go
to Facebook.com and then forward slash developers,
like that my apps, add a new app, for instance
Astra 2018, my contact email, create app ID,
fill in this code and you'll see the key over
here, you can click to copy, go to the plugins
now go to the front end of the website, go
to customize, go to widgets, the third area,
add a widget, search for face, Facebook like
box, you can say like us, fill in your own
website, show faces yes, show livestream no,
let me show you what is happening, it looks
like that now and I need to have the ID, I
have it over here okay, publish, I close it
again, I go to the backend, plugins, add new
and I search for Instagram widget, I like
this one by wpzoom, install now, activate
it, I go to the settings page, connect with
Instagram, make sure you are logged in so
I go to Instagram like that, then I say connect
with Instagram, now I'm connected, I save
the changes and now again go to the front-end,
I click on customize, I scroll down, I go
to widgets > footer widget 4, add a widget
and I search for 'Inst', there it is, well
it says to 'Follow us', I don't use Instagram
that much, 'Follow us', I scroll down so now
it looks like this so if I close this, our
footer area looks like this site map, About
us, like us and follow us and that's how you
can make a website using a free theme Elementor
and templates.
So I've shown you how to create a website,
how to configure it, how to implement templates
and edit them, how to implement blocks and
then adjust the website add different sections,
how to implement websites from within Elementor
using the Elementor templates, how to add
pro templates and adjust them and how to add
complete pages so if you want to learn more
about Elementor, please check my channel I
have a lot of videos about Elementor, as I
said before I want to focus more on Estra
theme and Elementor and Elemental pro, I have
tutorials about all the Elementor pro elements
so what is the next step for you?
I have a few tutorials for you that will help
you to continue to build your website, I have
two tutorials about search engine optimization,
I will show them in the description, I have
a tutorial about MailChimp where I show you
step by step how to create an account, create
an opt-in form and grow your email list, I
have a tutorial about WooCommerce how to create
a web shop within your website so feel free
to take a look at those tutorials and grow
your business even more, this was it for now,
thank you so much for watching this tutorial.
Please like the video, subscribe for more
upcoming videos and then you will see me next
time, bye bye.
