hello people my name is ferdi and in
this video i will show you step by step
how you can create a professional
website using a free theme a free page
builder a free stock images even when
you've never created a website before
this tutorial is for you let me show you
what we will cover in this tutorial
so this is the website we're gonna
create we have a white logo with white
text in the call to action and when i
scroll down
we change the header colors and we see
another logo really nice nice menu and a
nice sub menu
if i want to i can adjust this header so
i can go to the customizer go to the
header
i can add some html i can add social
icons
over here then i can say that the top
row should have a background that is
dark blue
and then i go to html because i want to
change the link color from orange
to light blue
or white
and when i scroll down it sticks with us
and if i don't want that i can go back
to the headers
and decide that only this area should
stick with us
now we have this header over here and if
i scroll down only this area sticks with
us
we will create this page using the
elementor page builder and i will show
you how to create this step by step i
will also give you all the templates so
you can download them but i will show
step by step how you can create this
from scratch a good looking contact form
all using free tools here's our food air
can showcase our latest case studies
talk about our company show some quick
links
and our recent post and if i click here
i go up again and we're not just gonna
create something over here we're gonna
talk a lot about how you can give a
great first impression to your viewers
don't say
welcome on this website be really clear
this is what we will do for you
talk more about it and then have a call
to action over here or over here so
we're not just gonna create a website
we're gonna create a website that
converts that gives us new clients
and let me show you the power of
elementor if i edit this page with
elementor
we can do so many things i can click on
this image
we can go to advanced
close this i go to motion effects i say
you know what i want you to
fade in
from the right like that but a little
bit slower
and after a half second
[Music]
if i think hey there is not much space
over here i can go to this area
go to advanced
and create some space over here
pixel perfect
if i think this text is too big i can
click on it go to the style
change the typography
to 40
and if i want to i can make it
uppercase
i don't like this color so i go to style
and i change it to a blue one when i
hover over it it shrinks but i rather
let it grow maybe you're like what are
you doing where are you going you're
going all over the place in this
tutorial i will show you step by step
how you can learn how to create pages
like this and how to apply all these
things that i'm showing you right now
but that's not all what we will also do
is really important we will optimize our
website for all devices so if i click
over here i can see how it will look on
the tablet and if i don't like it
i can change it so maybe i want to have
a little bit more space from the sides i
go to advanced
i change this to 70.
now we have more space from the side
if i don't like it command z command z
ctrl z
and it goes back to the original state
and i can update it
so we will make sure everything looks
great
for every device
we go to the about page
i'll show you how to create this from
scratch but i'll also show you how you
can import pages like this so you can
save yourself a lot of time import a few
pages and adjust the information you can
showcase your services and have sub
items those are all pages if i go to the
case studies we can showcase what we've
done for clients in the past so visitors
can get excited about what you can do
for them you can create categories so
this was marketing
rebranding
web design when you click on it
we created a template that will showcase
all our portfolio items or case studies
like this
text a few images and then we see
related projects
click over here again
and we're gonna create a blog page with
blog posts and blog posts are a great
way to get organic visitors to your
website so they search on google for
something they go to your website
because of your content and then they
also can get excited and maybe you want
to make use of your services
i click on a blog post and i will show
you how to format it like this
i'll show you how to create a blog post
let's create a converting blog post and
thanks to the bloxy theme it all looks
really nice and below the blog post
people can share this people can read
about the author go to the social media
accounts of this author and go to the
related post and leave a reply if they
want to
i'll show you how to import a contact
page then you can change the information
saving yourself a lot of time and
talking about saving time if we go to
the home page look at this
we will set everything up in a way that
can save so much time when we want to
change the colors in our website so if i
go to the customizer
and i go to colors
i have my global color palette and if i
want to change one color
make it darker so let's let's make it
this color what i will see everywhere in
the website
style changes
then i have this orange button so i go
to the orange one
and change it to
something else
green
and now everywhere i use that orange
button or the orange color
it's green i can change the second color
and in a few clicks we can change the
complete look and feel of our website
and we can choose between different
color palettes
this one for instance
this can be handy when the clients of
your says you know i like it but i want
to change the colors
you just can do it in a few clicks
when you follow this tutorial you will
not only learn how to create an amazing
website but you will also be able to
start a web design agency and start
making websites for others make money
with that another thing you can do you
can write blog posts place
advertisements on it and then you can
also start to make money so when you
learn how to make websites a whole new
world opens with opportunities for you
to do things for a living and i will
talk about it in the tutorial a few more
practical things for you
when i go to fast for you you can go to
the settings of the youtube video
and change the playback speed to a
slower one or you can click on the left
arrow on your keyboard and go back five
seconds in the video in the description
of the video i have time sam so if you
want to go to a certain part of the
video you can click on one of the
timestamps and you go directly to that
part of the video
i hope this introduction made you
excited already if you are please like
this video feel free to subscribe for
more upcoming wordpress related
tutorials and now let me show you the
four steps we're gonna take in order to
create an amazing website
so there are four things we need to do
if you don't have it yet i will show you
how you can get your own domain name and
web hosting that can give you seventy
percent discount after that we will
install wordpress then we get the bloxy
theme and the elementor page builder
then we will create our amazing website
if you already have a domain name and
web hosting and you have already
installed wordpress i will show you on
the screen right now where i need to go
in order to continue with this tutorial
now it's really time to get started
the first things we need are a domain
name web hosting let me tell you what a
domain name is and what my posting is
a domain name is the address of your
website so if i would go to facebook.com
facebook.com is the domain and
everything you see on this website is
the web hosting web hosting is a really
fast computer that is turned on 24 7
with all the information on your website
you can rent it for a few dollars per
month it's like having a house if you
want people to visit you you need to
give them your address and your domain
name is the address of your website so
your domain name is the address of your
website and everything you see over here
is the web hosting if facebook would
have no domain name it would look
something like this and that can be
quite a challenge to remember by heart
and that's why we need a domain name and
when we have a domain name we want to
display things on our website and that's
why we need web hosting if you have that
already that's great then you can skip
this part if you don't have it go to
webhosting1515.com
[Music]
hit enter and then you can click on the
link go to siteground
i love siteground scigirl is in my
opinion the best web hosting provider
there is and i'm not the only one with
that opinion in the facebook web hosting
group with more than 5000 members
siteground is mentioned most when it
comes to the best web hosting provider
and i agree with them i scroll down a
bit and there are three plans you can
choose and the best value for your money
is to grow big plan what is the
difference between the grow big plan and
the startup plan here with the grow
brickplane you can have unlimited
websites look at this unlimited websites
with the startup plan you only have one
website and all the time people are
upgrading from startup to grow big
because they want to create more
websites so i suggest rubric and you can
always upgrade later if you want to over
here you can have unlimited websites 20
gigabytes of web space while most
websites are 200 megabytes so you can
have up to 100 websites with this plan
you can have up to 100 000 visits per
month and i hope you will get that
because that will mean a lot of business
for you and then if you have that you
can always upgrade to the go geek plan
and then you'll have 40 gigabyte of web
space and you can have up to 400 000
visits per month this is the plan i have
right now because i have a lot of
websites and a lot of visitors but keep
in mind you can always upgrade later so
i will start with the grow big plan and
more great things about is you can have
free ssl so your website will be secured
with some web hosting providers that
cost money here it is free you have
daily backups that's amazing if you
somehow mess things up sideground got
you covered you will have a backup of
the day before and of the day before
that free cdn that means that your
website will be fast throughout the
whole world no matter where the visitors
come from your website will be blazing
fast it can have unlimited free email
accounts and really important this is
great for e-commerce and if you somehow
really don't like it you have a 30 day
money back guarantee so there's no risk
for you so i will choose to grow big
plan by clicking here
now we need to choose a domain name if i
would say
facebook.com i want to buy facebook.com
i click on proceed of course it will say
you've chosen an invalid domain name
because it's already taken so you need
to choose a domain name that is still
available what i would advise everybody
in the world to do is get your own
domain name with your first name and
last name i hope it's still available
for you and otherwise you can use a
company name or a custom name
[Music]
and if you offer local services you can
place your hometown in domain for
instance web design
but slash
the great thing is that you can choose a
lot of different extensions dot
com.net.org i always suggest use.com or
the local one from your country
i go for ferdinand
david
so let's see if it's still available i
click on proceed
yes it says congratulations domain fury
and david.com is still available for
registration with your hosting account
let me make this a little bit bigger for
you
now i can leave some details over here
first my email address
jk24co
gmail.com
i need to create a password
and i need to confirm my password
and then over here i need to say from
which country i am i'm from the
netherlands
and i will fill in my details ferdi
or pursue 30 and anna media if you have
a company fill your name over here in
your vet
text id if you fill in your text id you
don't have to pay taxes for this order
it's okay great
siteground gives feedback at once which
is nice
i'm from this city
this street
and my zip code if i would say it wrong
it will correct me it will say hey you
need to remove the space
and then over here i need to fill in my
phone number and it's really important
that it's the correct number
so say plus
three one six and then your phone number
really important to have this over here
the country code
i scroll down and depending on where you
come from that can be local payment
providers so if i would enter this
website from the netherlands i would see
i do over here you will maybe see paypal
i will use credit cards so i will fill
in my details and then we go to the
purchase information we go for the grow
big plan and the data center we can
choose a few depending on where you want
to focus on if you want to focus on
people from the united states keep it in
the united states if you want to focus
on people from the netherlands or
somewhere near the netherlands choose
germany or the netherlands i want to go
for people worldwide so i choose
usa
and the period is 12 months we pay 6.69
per month and then we can have unlimited
websites on our grow big account which
is amazing and then if we scroll down i
highly urge you to get domain privacy it
will cost you 12 per year but it will
save you so much spam because if you
don't turn this on a lot of companies
can see that there's a new domain name
with your personal information with your
phone number your address your email
account your email address and then they
can send you spam emails like hey i can
make a logo for you i can do seo for you
you don't want that so for twelve
dollars you don't have that then i
scroll down and i will pay a total
amount of 110.27
cents it can be a little bit more or
less with you depending on where you
come from and with this amount you have
a domain name or web hosting for a
complete year and you can add more
domains to your account and create
multiple websites and they're all
blazing fast and there's a great support
if you get stuck somewhere i confirm
that i've read the terms service and i
agree with them and i would like to
receive news updates from siteground if
you got a true web hosting 15.com you
don't pay more but you get amazing
discount and i do get credit for it so
it's a win-win situation and then i
click on pay now
and then the great thing is that our
website will be live immediately we
don't have to wait for 24 hours it will
be live at once
if everything goes right you should see
this right now and that's amazing and
then i want to congratulate you with a
domain name and web hosting if you don't
see that it can be that you see
something like this
if that's the case fill in the
confirmation number you get in the text
message and then you should be able to
proceed and in some cases
siteground will put an amount on your
credit card account and you need to fill
in that number so they know for sure it
is your credit card account you can do
that by going to your account or your
credit card account or by calling your
credit card company i had to call them i
want to check everything so you know
exactly what to do in every situation i
hope both of those confirmations do not
appear for you but now you know what to
do
when you see those two screens so let's
continue
and my account was successfully created
how great is that i can proceed to the
customer area
and i login with
jk24co at gmail.com
i click on next
my password which i just created i click
on login
really nice this is awesome so we can
set up our site but what i prefer to do
we will verify it later i will go to
websites
then over here it says pending but if i
click on complete
we go to the next screen we use an
existing domain we already selected it
and i click on continue if you don't see
it you can select it over here i click
on continue
now to skip and create an empty site so
i click on that button and then i finish
it i don't need to have the psychon
scanner it will take a few minutes to
set us up
most of the time it's shorter a few
seconds
and there we are we can view our site so
if i go to my website it is live we are
live
right now which is amazing
we can also go to the site tools and
that's what i prefer so i go to the site
tools
because we want to make our website
secure just like this one
in order to do that we need to go to
security
ssl manager
then i select my domain
and i select let's encrypt if it's not
visible over here that means it's
already there i scroll down
and i click on actions
and force https
and i turn it on
there it goes
now i go to wordpress
install and manage because we are ready
to install wordpress
no matter what you install if you also
install woocommerce just select
wordpress
i scroll down i can select my domain the
language
the main folder so i can also install it
on my domain forward slash new so
subfolder
new
but i want to insert in my main folder
then i will have my username
my password and my email address
i don't need to install the wordpress
starter i uncheck it and then i click on
install
and this can take a minute
great we can do two things now we can
take a look at the back end of our
website this is where we will configure
our website
and then we have the front end of our
website
i close this this is what people will
see when they go to your website it's
called the front end and then this over
here is the back end is what you only
can see when you're locked in
and no matter where you are in the
backend or in the front end when you are
logged in you see this bar over here
this top bar this bar is only visible
when you're locked in so your visitors
will not see this
but if i would go to this website let's
say in an incognito window
clicking over here
when people go to ferdinand david at
this moment they will see
this website so we are live immediately
and that's what i really like
when you take a look at your website i
think we can all agree it doesn't look
that appealing yet we're gonna make it
look really appealing really
professional but first i want to do a
few things in our website i want to work
in a clean wordpress environment so we
need to
remove a few things we don't need and we
need to configure a few settings so
let's get to that
so let me talk you through the front end
and the back end starting with the
backhand this is the place where we
adjust our website we can change the
theme we can create blog posts we can
add pages we can monitor all the
comments we can add plugins
create new users go through the settings
of the website and step by step i will
show you how everything works
and then when we change things over here
at the back end you'll see the changes
here at the front end
so first things first i always like to
make my website a little bit cleaner
because this is a little bit
overwhelming so the first thing i do i
dismiss
this message
and all this stuff over here
i want to make it look cleaner so first
i go to my blog post
over here and i want to remove it right
now
on my website i see one blog post which
is this one if i click on it
you go to the blog post
and there's a comment and it looks
really ugly in my opinion we're gonna
make it look so much better but first i
want to get rid of this blog post i
don't need it so over here at the posts
i select all the blog posts there's only
one
build actions
move to the trash and i click on apply
then i go to the trash
and i empty the trash
the same goes with pages there are a few
pages
i don't need those i select them all by
clicking here i can also select them
individually
build actions move to the trash
apply
then i go to the trash over here and
again i can remove them permanently one
by one or empty the trash
now i go to the dashboard
i see all those steps over here i want
to collapse them or even better
get rid of them so i go to the screen
options
and i uncheck them all
so i don't see unnecessary stuff over
here later we're going gonna add a few
things over here but right now it's not
necessary then i go to the plugins okay
two plugins they're not
active so i can click on delete if you
want to delete a plugin you need to
deactivate it first so if i would
activate it i cannot delete it right now
i first need to deactivate it
and then i can delete them
okay
then i want to go to settings
permalinks
right now when we have a blog post over
here you see this my domain name and
then the
date i don't want that that's ugly i
just don't want that i want to have my
domain and then the title of the blog
post which is in this case hello world
how can i do that here at settings
permalinks i select post name that's the
best option in order to be found in
google and other search engines
so i save the changes i do it twice
just because i feel like so sometimes
it's good to follow your feelings and
now
if i would refresh this
this blog post doesn't exist anymore but
it would look like this and it looks
much better if i go to my website
ferdicorp.com
and i go to tutorials
how to make a wordpress website it will
say freddycorpsing.com how to make a
wordpress website for free so that's
what i like to use and not
this or this or this
i don't want that
okay
so far so good now i want to go over
here
to my profile
and then we can change the look and feel
of our backhand
i always use the default one i'm just
used to it so um i keep it with that
what i can do right now you see how
defer the corp and then when i write a
blog post it will say the author is
further corp i don't want to show my
username i want to show my real name so
my first name
is ferdi my last name is corpus hook and
then over here at display namplicity i
can choose the combination 30 or pursue
what you will see over here howdy for
the corp souk
if you want to have an image over here
you can scroll down
you can create a profile picture on
gravatar so if i open this in the new
tab
you can sign in and if you sign in with
the same email address you use
over here at contact info
then you can upload an image in this
account and then when you use the same
email address over here
as over here in your gravitor account
there will appear an image over here
a lot of overhears in one sentence so i
normally use this email
address for my websites and this email
address is also active here at gravatar
and when i have that so when i save this
and i confirm it my profile picture that
i have on gravitor will appear
i scroll down all the way i can create a
new password if i want to
i click on update profile
and now i need to confirm my email
and i have done that and now you see
this image over here
which is from gravatar so when i place a
blog post and people can see my my
profile picture this one will appear and
if they see my profile picture i can
also say something about myself over
here so here
so uh
i love to
teach people about wordpress
affiliate marketing and who
commerce
my style is being
honest
straight
to the point
and
optimistic i don't know
i'm not the best text writer but
then we have something over here and
then i use grammarly to fix all my
errors
because there are a lot
i'm from the netherlands my first
language is dutch
so grammarly is helping me thank you
emily
you're welcome
did he talk back no okay
whatever
so this is how it looks right now really
ugly but as i said we're gonna make it
look so much better so one more thing
go to the side settings in general
and here we can give our website a site
title really important for the search
results and the tagline we're going to
talk about this later really important
that you have http s over here that your
website is secured
also over here
your administration email address and
what we can do over here
we can change the language of our
website to a different language if you
want to and we can change the time zone
so if i'm from the netherlands and i
want to schedule a few blog posts
it's important that my time zone is
correct so i can
use one of those and google which one is
which one or i can scroll up and over
here i can select the place where i live
or close by so i can choose amsterdam
and then i can change the date format
depending on where you live it's it's
different you can choose one you can
create your own and you'll see how it
will look over here
i like this one and the time format i
use this one am and pm using capitals
over here and also here you can have
your custom time format
my week starts on monday and i save the
changes
one important thing you need to do you
need to confirm your website so if we
log in at siteground and we log in over
here jk24
what i see over here i need to verify my
domain card robbie24.com if i don't do
that
it can disappear
so i click on view domain
i need to go to my gmail account over
here
and confirm it so i go to my gmail
account
sideground verification required it's
already the the second email or the
third i don't know i click here
scroll down
and click on approve
and i'm okay with this information and i
verify the information
if i did not do that
let me see within seven days from this
day on my website would be offline and i
don't want it because i'm already
selling products so really important to
him to approve
your domain now when you come back in a
few days or maybe immediately
it is now 20 minutes later and this
message is gone so it means her domain
name is confirmed since i'm here at my
siteground i want to show you something
really important
let's go to websites
i go to the site tools i've got a robbie
24
then i want to go to speed
caching
side ground is all about speed so they
have an amazing super cache that will
make your website super fast but the
thing is when you're adjusting your
website it can be that those adjustments
will not be displayed at once while when
you make a website that's a big thing
because we want to see the results that
we adjusted so in order to see the
results of everything you configure in
your website you need to go to dynamic
cache
and over here
flush the cache
but it's not a fun process to flush the
cache all the time when you change
something in your website so for now i
want to go to this tab and i want to
turn the super cacher off over here and
now when we adjust things in our website
we see the results immediately and then
when you're finished with your website
go back to this place and turn it back
on
so if we take a look at our website
it looks ugly okay ladies and gentlemen
we're gonna install a wordpress theme
there are thousands of wordpress themes
and these they decide look a few of your
website and there are themes that gives
you extra functionalities well i've been
around quite a long time in wordpress
world i really like it here and i think
i know what the best theme is
there are a few but i want to choose the
best of the best and at this moment in
my opinion that is the bloxy theme it
will make your layout look so much
better and it can help you to create
beautiful headers footers and it has
those extra functionalities which are
really nice so are you ready to download
the bloxy theme i hope you are because
we're going to do that right now
wordpress theme decides the look and
feel of your page and it gives you
certain functionality so right now my
website looks like this when i would go
to the back end to appearance
themes
i see a few other themes and they look
different so what will happen i have
this title over here i have no content
yet but if i would have it the content
would me remain the same
but the style would change so if i would
choose this theme by clicking on active
over here
and i refresh the page
i still have the title and the subtitle
and now it all looks different the
footer looks different there's a new
functionality over here go to the top
i have a search icon over here i did not
have that with the other theme so themes
decide the cell of your website and
every theme has their own
functionalities
so if i would go for 2021
i refresh the page again the titles here
the subtitle the footer but there's no
go to the top button over here there's
no search icon over here so as i said
every theme has their own
functionalities and that's why we're
going for the best theme the best free
theme there is right now in order to get
it we go to 30 corp dot com forward
slash
block c
hit enter
it will be redirected to creative themes
and there we can download this theme
by clicking here free download
i can click on downloads
it is a popular theme it has a lot of
installations a lot of
wow five star reviews one four star how
dare he or she wow
and it's been downloaded every day
a few thousand times
and i know why because it's one of the
best themes out there in my opinion it's
the best thing right now but i hope the
competition will drive all the theme
makers to make better free themes so we
are the winner so i have the theme over
here as a zip file so i go to the back
end to themes i can click on add new
upload theme i can drag it over here and
click on install now or i go to
appearance themes
add new and i search in the database so
over here i can search for block
c
and there it is and i click on install
i don't need this one anymore
and then i click on active
activate
so
if i refresh this page
it looks different
but with this theme also comes a plugin
so i click over here on install block c
companion
that will give it a lot of extra
functionalities
which we of course want
okay you can decide if they uh can see
things you do on your website so they
can make their tool better i do that you
don't have to do that but you can and
then
i was talking about extra
functionalities
we have starter sites over here that's a
functionality that lets you import a
complete website with a few clicks it's
a great functionality within the free
bloxy theme and there are extensions
free extensions and pro extensions so
for instance cookie consent so if i
activate this
and somebody goes to your website for
the first time
they see this area and they need to
accept it
and normally you should download the
plugin for that now
it is included in this theme so i love
this theme
so i will show you step by step how you
can use this theme and the first thing i
want to do
i want to create a menu with the home
page the about page and all the pages
you want to create so in order to do
that we go over here in the front end to
the customizer
then i scroll down all the way
and i see menus i click on it
and now i can create a new menu we don't
have a menu yet so i click over here you
can give this a name it's just for
reference purpose only you're the only
one that will see this so you can call
this one uncle jim
or john
[Music]
as long as you know which menu it is
well i'll call this the main menu
and then i need to assign the menu to a
certain place in the website i can
assign it to the footer over here or to
the header one
or even to the header two that can be
header here above
and for the mobile
menu so i right now i choose header1 and
the mobile menu
i click on next
and now i need to add items so right now
i can add items that will appear over
here so i click on this plus
and i can add a new page and the first
page of course i want to add is the home
page so i just call this one home and i
click on add and when we do so
it will appear over here
come on minus
where are you it's a little bit shy
there it is
home
also if i would publish it
then i will see it but i want to add
more items so i click on add items
so what kind of pages do you want to
have on your website well it depends on
what kind of website you are creating
what i always suggest is that you have
an about page about me about us about i
call this one about
and i click on add
and what i suggest you do depending on
the the company you have search for
websites of competitors so if i would
have an uh marketing digital marketing
agency i search for digital
marketing agency
and then let's say sydney
and please don't copy things but you can
get inspired by other websites
so those people pay money for it and
when you pay money for your website you
know you have an optimized website you
want to spend less than you make so when
those people are advertising they
probably make money with that so they
probably have a really good website so i
open this in a new tab
this is how it looks so they have a text
over here
call to action really nice so they say
about then they have creative if a lot
of sub menus web design seo digital
marketing programmatic advertising work
and blog
so what i can learn from this is okay
show your services web design seo
digital marketing
okay
so what i will do i will add a new item
call this one services
okay i edit and then i want to have the
pages of my services so what do i offer
well i do offer
rebranding
marketing
[Music]
web design
and maybe you have other sources you can
add them over here but what happens they
are added to the menu and i want to add
them into a sub menu how can i do that
over here i have services i want
rebranding to be
here below
so i drag this to the right
this one also
this one also
and now
it's a sub item so i click on publish
then it closes
now we see it looks like this and we can
style this later but i think this looks
nice home about services so what else
what else can we learn what else can we
do
well
of course we want to showcase what we
have to offer if you offer a certain
service you want to show people what
you've got so i go to the back end sorry
the website and then to the customizer
again
scroll down all the way or
you can click over here
oh no no just kidding
no i'm not kidding yes i'm kidding but
now we're going to the cell i want to go
to the menu itself
so sorry i was misleading you
you know always when i was lead people
no i don't leave people that much much
as i know
i go to the main menu yes there we are
so i click on add items and i can say
portfolio
or cases and also here i can take a look
at what others do
if i go back or close this let me go to
one of the search results that is really
high because that should also be a
really great website and that's the same
one
yeah it's the same one they are doing a
great job so i go to the second organic
result
case studies okay
case studies
add
about us
resources block
our services
okay
what i like to do is add a blog post
because when you add blog posts to your
website you can be found through the
organic results so when people search on
a certain subject they can go to your
website find your blog and then if they
like the blog they can see hey these
guys know what they're talking about
maybe i can
outsource my product to them so it can
help you to earn extra money get more
clients and all that stuff
and a call to action we can take a look
at that later
so um the blog page
at and of course when people are super
excited about you they want to get in
touch with you so we will have a contact
page
so that's how we can work just search
for a competitor
see what they are doing
preferably the one of the best search
results because those websites are doing
a great job google thinks those websites
are amazing so probably the visitors
also think that way
and then you can learn from them about
services case studies blog we are doing
a great job we are having almost the
same things about services case studies
blog
and then also contact us and we can also
make a beautiful button like this
and maybe something like this so save
that i was talking about not copying but
you could get inspiration from
other
websites
if i refresh the page
nothing happens because i need to
publish it first and then it will be
saved and now if i refresh the page
this is how it looks
if i go to one of those websites
what i do not see is the homepage button
also with different websites you don't
see it so we should also not show it
over here people click on this link then
they go to the homepage so people go to
case studies
and looks beautifully like this when we
want to go to the homepage we don't
click here we click here
so in order to fix that i go over here
to the back end
and at home i click on the arrow down
and i remove it
then i publish it
i click on the x
i want to change one thing sorry go to
the customizer again
it says ready to publish your first post
so right now our home page is showing
the most recent posts so if i scroll
down i can change that by going to the
homepage settings
and change our homepage displays to a
static page and then we can select that
static page which is the home page
and the post page is of course the blog
page
publish
close it
so now we see the homepage over here
so i want to do a few things about the
header so it looks nice and then we're
going to focus on creating a beautiful
website using the elementor page builder
how can we do that we go back
to the customizer
and if you want to follow along with the
same images i use in the tutorial you
can go to 30 corp.com forward slash
images
hit enter and there it goes
then you can
open them
and there you have them you can drag
them to the desktop
i have them over here
and then you can go to how to make a
website 2020
i have a few logos over here in color
and in white a fave icon
so a few images you can use so you can
follow along in this tutorial and what
you also can do you can use your own
logo your own images create your own
websites i go to the customizer i hover
over here and i click on
those three dots
and then i go directly to the logo area
i select a logo
and here at upload files i click on
select files
i go to the desktop to images tutorial
how to make a website 2022
and then over here i select or i search
for the logo advantage logo in color
i open it
then i always optimize all my images
because then can be found through your
images through google
i remove the dashes copy the title
paste that alt text and paste it in the
description that's the way the cookie
crumbles then i click on select
and there the logo is but below there is
this text and i don't want that so over
here i have a few settings
so i want to uncheck the site title
and then over here i can change the logo
height to make it bigger i can make it
smaller
and i think
40
is perfect
so i don't want to show this
or the tagline
no just want to have a logo
and for me that's perfect i don't have
to go to design because
i'm happy with how it looks
and then
i can go back
go back
and here we can customize our theme and
one of the options is the header so i go
to the header
i want to
rem i want to make this a little bit
less high how can i do that i can click
over here
i can also hover over here and click
over here on main row
then i can change the minimum height of
this header while i think it's really
high the examples we just saw of other
websites were also not that high you can
increase it but
i rather use a lot of space to show my
homepage so i bring it back
to 70.
and then i think then the logos are
maybe a little bit big so i click over
here
and bring this back to
34.
okay then i can click over here
and i can select the menu i use the main
menu
and i can select how it is shown so
right now when i hover over this becomes
blue but i can also change it to type 2
then we have also a line here below
or the third one
or the fourth one
well i like to keep things clean
if you take a look at apple
it's clean when you hover over it it
changes a little bit
it's just clean not much other things
so i want to keep it clean like apple
i can also change the space over here
between the manual items
like that
but i think it's perfect and if i don't
want to change it or bring it back i
just click here and there we go it will
go back i can also stretch it
there's so much you can do look at this
look at this we're going to talk later
about the header and the menu but if i
want to i can drag this menu over here
to the center
and to take it to the next level i can
also drag it over here
to another area
and in this area i can click over here i
can go to design
give it a different background color
then i go to the menu can change the
colors to white so there's so much you
can do let me bring it back
let me bring this also back to the right
there's so much you can do we'll talk
about later right now i just want to
make it look okay
so i go to this menu
and i go to design so here we can change
a few settings and then at design we can
change the colors and other stuff
so i click over here on default family
and i want to change this
to
new nito
i just like that font
i can make it a little bit less
bold
like that
and then over here i can do other things
i can make it bigger
i can change the line i'd well for now
it doesn't matter because we only have
one line i can change the letter spacing
bring it back i can
bring it back to normal
cases or uppercases
underline it
and then change the colors well let me
talk about colors let me publish it
refresh it
it looks so much better already
let's take a look at colors because we
can use certain colors in our website if
i go back
and i go back to the colors
i can make use of global color palettes
and when i use those colors and i change
those colors everywhere in the website
the whole style will change by just
clicking once
clicking again so now if i hover this
becomes
red
so we can use this global color palette
to save you a lot of time so what i want
to do i use this tool over here it's
called the
color pick eyedropper you can download
it as an extension in chrome and i can
grab this color
so i copy it
i choose the first color
i paste it
and if it doesn't work hashtag before
then it works i copy this again
i paste it
and i want to make it a little bit
lighter
then the third color i want to use an
orange color to to yeah to for my
branding i use orange
you see it over here
and the fourth one for me is
black
then i want to have a gray
color that's the text
of my uh the color of my text
not completely black also not that light
too light
so that's okay color six i want it to be
white perfectly the
seventh one
the eighth one i also want it to be
white because i don't use those colors
so i want to make use of this color
these colors and please never use too
much colors in the website i like to use
three the blue one the live blue one and
the orange one
don't use yellow and green and then on a
different area on the website
blue
and
red
maintain your style
okay so now the base text
i wanted to be the dark one the links
links can be
dark blue or light blue and when i hover
over it they can become orange
when i select the text
sorry sorry sorry
let me go back
to colors
when i select the text the background
becomes dark blue i can also make that
orange
so when i select something
it's up to you what you want to do with
that
borders and give them a color
then all headings
well i like them to have this color
this one
aside background if you change this it
will look like that well i prefer white
so
publish
so you see it looks like this and when i
would change it to the green ones this
will all change if i would change it to
this one
so i like palette one
and for now that's enough we're gonna
take a look at the header and the footer
later
i close this
this is what we have so far
about services
for now it's perfect okay this looks
great
a few more things i want to do before we
get started with elementor i go to the
customizer because i want to change the
title of the website
where can we do that
if we scroll down we can go to site
identity and there we see the site title
and the site title is really important
and if you have a site title please
don't call it your business name
advantage
media group because
when people want to search for a certain
service and they don't know me they will
never search for this
if somebody wants to have a website they
search for web design probably their
city rotterdam
so if i would skip the ads
over here the title this is the title
you can create over here and will be
displayed over here like this web design
wrote to them
rather than website
website
web design rather than web design and
brought to them web design wrote to them
web design wrote to them web design web
direction wrought to them web design
rotted them
again again again so make sure that the
title you want to be found on the
keyword you want to be found on is in
the beginning of your site title so i
would call this one digital marketing
rotterdam or in my case
amsterdam
so people know hey when i see that page
i'm searching for a digital marketer in
amsterdam that's my title i will be
found on the title and then they can get
in touch with me and they know
immediately i'm from rotterdam and then
people see this name and they know hey
the advantage media group so they see
the name of the company but first
digital marketing amsterdam so what on
what term do you want to be found
what are people searching for when you
want your business to appear and that's
what you need to type over here as far
as to the left as possible digital
digital marketing amsterdam and then
advantage media group then there's the
tech line you can have more information
about your company and i say
we help companies small and big
to get more
business and serve
more people
okay i publish it and then it will be
displayed over here
so no more on my blog but digital
marketing amazon them and then i see
this wordpress icon or fav icon and if i
would go to apple.com
i see the apple icon
over here
so i want to select my site icon so i
click here upload files select files
and then i go to my fave icon it needs
to be square and i will make it at least
512 pixels by 512 pixels
i open it
i select it i do not crop it so i click
on skip cropping
and now it starts to look really nice in
my opinion
i close this
so we have our logo we have our menu
which is enough for this moment we're
going to focus on the homepage to build
it
we have the site title and we have this
beautiful
fave again amg
advantage media group
i want to say to you that i appreciate
yours that you're still hanging around
over here i hope you're excited i like
making websites and i've been going to a
lot of
errors in my life with making websites
and these days it seems to be quite easy
to make a website i hope you think the
same thing i hope to help you as good as
possible
and now we're going to create our first
page
the home page and we're going to use
elementor for that the free page builder
in my opinion the best free page builder
in the world
it is an amazing page builder i can't
wait to show you everything but first
we're going to download it so let me
show you how to download the elementor
page builder so in order to get
elementor we go to 30 corp dot com
forward slash elementor
hit enter and elementor is optimizing
their page continuously because they
want to
grow their business
so they change a lot of things every
time so if i want to find the free
version of elementor
the plugin
this is the pro version
get started for free get started
and then i need to log in i don't want
that so you can also go back and then go
to the website your own website go to
the back end
go to plugins add new
and search for
el mentor
and there it is more than 500
installations but there's somehow
there's a cap over here it does not go
above and beyond 5 million but meanwhile
there are 10 million installations
already of elementor it's crazy it's an
amazing page builder i click on install
now
and then i click on activate
now i need to
do a lot of things i don't want that so
i click on skip
skip
skip
skip
and skip
now it will create a page for us
actually i don't want that
so i click over here i go to the
dashboard
i close this then i go to this wordpress
icon
then i go to all the pages and i remove
this draft from elementor trash
go to the trash
and empty the trash
and now we go to the home page by
clicking here
and now we can edit the page
now over here it says we can edit this
with elementor
so we can do that click here
we're finally creating our homepage
using elementor but before we do that i
want to show you a little bit around let
me show you a little bit about what
everything is how you can do things so
you get a little bit of familiar
familiar you get your feet a little bit
wet
and then
we're gonna get started so what i will
show you right now in order to save that
i will just show you how to work with
elementor and through this tutorial
you'll get
more familiar with it and
i'm excited
i hope you are too so let's start
playing around with elementor
and this is how it looks here at the
left we have a lot of elements that's
why it's called elementor so all these
elements over here
i can drag them over here
and then i can create an image select an
image
i can adjust it make it bigger smaller i
can do a lot of things but before i do
that
i want to
go over a few basic configurations
so here at the left top corner
i go to the user preferences and i want
to make this user interface
dark
i want to add editing handles right now
i see three icons if i want to duplicate
this i cannot do that
but if i add editing handles
i can so it gives you a little bit more
options now i can remove that if i turn
this off
i cannot see those extra options i need
to do the right mouse click
so go over here use a preference turn
this on
and now it's easier to
do that
i close this
what else if you see intersection over
here that can be possible but i don't
want that that means that you need to
update if you want to know how to do
that click here on update
then
click here
click on exit to the dashboard
and click on this icon
then we go to elementor settings
experiments
scroll down
turn on the flexbox container by
selecting
active
save it
and now again we go to the homepage
edit with elementor
and now we see container over here when
you see that you're good to go
okay the first thing i want to do i want
to get rid of this area over here so i
go to the settings here left below
settings
and then i want to change the page
layout to a elementor full width
update
now the title is gone
now let me show you what is possible
with elementor over here at the left
when i click on this icon i see
all those elements
and i can drag them over here
and it's what you see is what you get
page builder so when i drag something
over here i see the result immediately
and then i can adjust over here here i
can adjust the content
here i can adjust the style of the
content and here i have advanced options
which appear at every element and also
every section column let me explain it
to you
let me close this
i go back to all the elements and i want
to start with the plus and now i can
have a container i can have a container
that's pointing downwards so when i add
new elements they'll be below each other
i can also create a container with
elements next to each other
and i can also have containers with
multiple columns that can be nice when
you have one some text over here at the
left and the image at the right maybe
you want to offer a few services
over here four or three so i click over
here
and then i
remove this one
this one
this one and i can offer my three
servers over here so i can have an image
with a button and a text and also over
here and also over here
so let's start really simple let me show
you the basics we're not going to save
this uh i just want to show you what's
possible with elementor so i choose for
a container with arrow down
that means
over here when i go to the elements if i
drag this header over here
now i can go back to all the elements
and i can add a button
over here and it will be below
or above and that's because we had that
arrow so let me show you really quick if
i have this arrow to the left
and i add a heading
and after that i add a
button
it will be next to each other so that's
the difference i actually always use the
arrow down or i use one of those
containers and don't use
this one but through the tutorial you
will learn everything you need to know
in order to create amazing websites
using elementor so what i have over here
let me show you i have this container
and in that container i have two
elements
the heading element and the button
element and if i would go over here to
the navigator icon
i can see that over here i have the
container
and in that i have the header and the
button so you can use the navigator to
select something and then you can edit
it over here i can also bring this to
the right so your website becomes a bit
smaller and then you have this overview
over here really nice when you have a
big computer screen and you want to
create a website
it's really nice to have here at the
right
i will
use it like that
sometimes i will remove it and then i
can bring it back over here
so
when i click on the container i have the
layout
the stell and advanced
so here at layout i can have a few
settings i can change the width
of this container i can change the
height so if i want to make this really
big
let's say 500 i can do that over
and then here at the items i can bring
this to the right next to each other
like that which we just had but i prefer
the other one or just nothing so it will
be below each other i can bring align
the items here to the center and i can
align them over here
vertically to the center so really easy
like that and when i add something now
so let's say
an icon
everything will stay in the center and
that's really nice
so let me remove the button
i go to the
container so here i have the settings i
can change but i can also change the
style the background a few colors so if
i would go to the style
i can change the background type to a
classic color so i can choose
a color like that
i can also use a gradient so the first
color
is this one and the second color is the
lighter one
and then i can adjust the background so
i can change the location so maybe i
want to have a really straight line like
that
then i can change the angle
i can change the type
and in that way i can do a few nice
things
what i prefer
is to make this 0
is 100
and then change the angle to 90. so it's
from the left to the right but now the
text is a little bit weird i cannot see
it that well well then i need to go
to this heading area
here i can say
digital marketing
and business growth
then i go to the style
and at the text color i can make that
white
over here i can change the typography so
i can make this
neato
i can make it bigger smaller i can make
it thin
or really thick
and it's also easy when i change it over
here i see it immediately and if i want
to see how it looks on a whole page i
can click over here and then i can see
the results
what else can i do i can make it
uppercases
so here at the transform
uppercase
and then if i want to have another text
below that i can hover over here
duplicate it
triple click over here and then i change
the text
advantage media group
i can go to the style
make it bigger
align it a little bit
and then if i wanted to be on top i can
drag it over there
sometimes if you see it's not working
you can always go to the navigator
change it like that
and i can call this container double
click hero
i can call this one
digital media
and the one below
advantage
so just like that
and now i have advanced so if i click
over here
advanced i can play around with margin
so i create some space
inside or some padding some space
like this that outside
or if i make everything zero
i can uncheck this and then at the
bottom i can make it a minus
margin so i can bring things closer to
each other
then i go to all the elements and i want
to add a button
over here
go to the style
change the background color
to orange
if i hover over it i want to make it
blue
maybe the light blue
like that and that's how you work with
elementor just dragging and dropping and
then through the content to the style
and advanced we can adjust areas in our
website so this is just an overview of
what you can do and now it's time to
create an amazing homepage using the
elementor page builder so i want to get
rid of this
now we're going to start from scratch
okay we've been playing around
by now you probably know the basics and
through this tutorial you will learn
more but right now
we're gonna start for you making our
homepage using the elementor page
builder
wow
good luck
so i want to start with the hero that's
the first thing people will see when
they enter my or your website so it's
really important that it's really clear
what people can expect
when they enter a website they need to
see immediately what you can do for them
if it's a weird hero like hey welcome on
this website
people can get confused and they think
okay i don't know what this kind of
website is so bye bye so we're gonna
start building and then meanwhile learn
a few things so i want to start with a
text over here a title a subtitle and a
call to action and then at the right i
want to have an image so i click on the
plus over here and i want to have two
areas left and right so i can choose
this one but what i want to have below i
want to have an area where i show a few
logos of companies i work with or for
so i can choose this one but i rather
choose this one
okay
and then i want to start the first thing
i want to do at the container
i want to change the height so i can
make it a little bit higher
let's say
500 pixels and that's what i also love
about elementor you can change things
pixel perfect you can say i want to have
exactly 500 pixels in height
then i go to the style
and i can use a background but i want to
use a gradient
with the first color
dark blue and the second color
light blue
then i want to change the angle
[Music]
to 90 degrees
so the dark color is at the left and the
light color is that the right
great
then i click here so i go to all the
elements and i want to start with a
heading
like that
before i change the heading i go to the
style
text color
click on this world so you can use a
global color and i want to use all the
colors
of the theme so i never use those colors
i always use the colors theme color
palette 1 etc so i choose the white
color
sorry palette
color 7
and then i go back now i can see the
text and i can change it
so i say grow your business with ease as
i said before i want to have a clear
description of what i want to do for my
clients i want my clients to grow their
business with ease not with easy with
ease
if i go to
apple.com what i do i go to the
famous websites in the worlds and then i
take a look at what they do how have
they done their marketing do you see
welcome on our website feel free to take
a look around if you have any question
hit me up with a contact form submission
no they're really clear iphone 13 with a
beautiful image
super pro
learn more or buy so you give the the
viewer the visitor an option or they're
convinced at once like i want to buy
this click here or they are not yet
convinced and then they can click on
learn more so give people options have
call to actions on your website and if
you use images use high quality images
so i say grow your business with ease
and then i want to elaborate on it but
before i do that
i want to take a look at the fonts in my
website because i want every header to
have the font called nunito
if you want to find fonts you can go to
fonts.google.com
you can type a text
grow your business
and then you see something you like
maybe you can also
[Music]
take a look at the categories
and if you see something you like
opens also really a nice one really
clean
oswalt
bangla
noto sans
ubuntu if you see something you like you
can use it in your website
i personally like nunito so i click on
those three
lines
then i go to the site settings
global fonts that's what i click on and
then at primary my primary font for the
for everything is open sounds
then my secondary is also
open sounds
the text of my website also open suns
and the accent color of color
and also this one
okay so far so good i update it
then i want to go back one step
and then i want to go to typography
and then the body text typography
again open sounds
but
over here
link color is the same uh typography so
i leave it empty but every h so header
one header two header three etc which we
use to create headers in our website i
want them all to be
nunito so i copy this now i select it
the second one you need to do this only
once
and did you see that it changed because
this is a having two and i just changed
heading two so if i change this one
changed over here
so it will save me a lot of time in the
wrong long run if i already predefined
all the heading fonts
if i pre-defined all the heading fonts
[Music]
so i continue over here
and the latest one
i normally only use h1 and h2
h1 can be used only once in your website
so grow your business with ease is a
heading and i like it to be a heading
one because i can have only one heading
one and this is my most important title
of the website so i choose heading one
and all the other ones needs to be h2
so for google heading one is really
important heading two is less important
but that's why it is important what i
can also do
i can have a text editor
and i can say grow your business
with ease
and then i can go to the style
make it white
make it bigger
and then it can look exactly the same as
this one but then it's not a heading so
it's important to use headings
now i want to go for a text editor i
drag it here below sorry
i drag it here below
go to the style change the text color to
white and then add content i would start
typing
get more clients okay then i go to the
style i want to make this text a bit
bigger
it's already open sense because we
predefined that
okay and over here i want this to be
bigger so i go to style
typography
50. perfect
over here
i want everything to be in the center
so i click over here this container
within the container if i want to see
how it looks
double click this is the hero
this is
container left
let me collapse this
that one is container
right
and i call this one container logos
so i select container left and i want to
say at the items here below
that they should be vertically in the
center
okay so far so good i go back to all the
items all the elements and i bring a
button
to the page builder
and i call this one
view work
so that's my call to action i want to
show people what i'm capable of i want
to show some case studies so i click on
i select the view work
and i can search over here for case
studies
and since i have a page already i select
it and automatically the link will be
created so when people click here they
go to the case studies page
so what i want to do i want to go to the
style of this button
and then i want to give the background a
color and that color is transparent
there's no background
then i want to create a border
solid
make it one pixel
the color is of course
white
and then when i hover over it
i can do two things i can make it
increase or shrink
like that and i can give the background
so the background color
can be the light blue one
like that but since it's uh transparent
i'm okay with having nothing here
grow your business with ease we help
companies from startups to enterprise to
get more clients view our work
great
then i go to all the elements
and i drag it here to the right an image
i click over here and then i select
this image
at our case study i can also call this
the company name
of the website over here in the banner
but for me this is okay
great so far so good
then i have this third area over here
and what i want to do
i want to add an image
so i drag it over here
i choose the image and i upload a few
files
i select the files and i go to logos
and
every colored logo has color
after the name so i search for
everything that has not color after it
so coca-cola
hold control or command
meta
sony spacex uber
so five white logos
and i start with the first one
and that's really big
what i can do i can duplicate this a few
times
then i click on uber the second one
and i click on space x
the third one
sony
fourth one
meda
the fifth one
coca-cola
so now i want those aligned next to each
other instead of below each other in
order to do that i go to the navigator i
go to the container logos
and then at items right now it has this
arrow down i want to change that to
row
and now they're all next to each other
really nice
i can go to the big hero which contains
three containers
and what i can say at layout i want it
to be bigger so i can increase it but
what happens now
the more
height i give it the more space there
will be between
those
elements so i don't want that i say
nothing i make it empty
and now i can go
to the complete container the hero
advanced and then i say at betting
at the top i want to have 70 pixels
and at the bottom i want to have 70
pixels so everything stays connected
here in the center
and i want to make it 100
again i can make this pixel perfect
so everything stays in the center grow
your business with ease we help
companies from startups enterprise to
get more clients
and they can view our work well i want
to add one more color so i go to this
button and i have a
color in my branding which is orange
and with those three colors i can make a
really nice website
and when i hover over it i don't need
i don't need the the
solid anymore so over here at style of
the button
i don't need any border anymore
and i do want to have uppercase text so
over here
transform it to uppercase
update
so when i click on the i what happens i
see a preview of what i've created and
the great thing about that i
is when i change something so let me
change this color
to a blue one if i update it it will be
changed automatically it's now blue if i
bring it back to orange
and i update it i don't have to refresh
the page it will automatically be
refreshed that will save you so much
time and if you have two screens i
highly advise
to have
this area on your first screen the back
end and the elementor page builder and
the right and on the right screen i
would have the result so as soon as you
click on update at the other screen
you'll see the update and that way you
can work faster
by the way there will be more moments
where i will talk about productivity
and making websites faster because in
the end of the day we want to create
great websites in the shortest amount of
time that will help you
how you can do that
so i think this looks nice there's more
we can do
we can click over here on the container
and let's tell
the background i can collapse that i can
have a background overlay that means
that i can mix an image
with this gradient
so here at normal background overlay i
can click on the classic one
i can select an image
so i go to upload files select files
if i go back to
this one i can go for mac marketing
agency amsterdam
if i select it and i
optimize it
copy paste
paste and i insert the media look at
this
it's now overlapping
with the gradient
so it's 50 percent if i would increase
it
i see 10 of the image if i decrease it
and that way i can play around with this
and i can also use blend modes i can
multiply those colors
overlay
and you can play around with that and
normally i would do this in photoshop
but right now you can do this with an
elementor you don't need photoshop for
this
i use the normal one opacity like that
i can change the size to cover so you
will see as much of the picture as
possible and then one important one if i
scroll now everything is
static but um
but i can change the attachment to fixed
this is what i like if i scroll
the background stays like that
what i don't want is that
the image will take too much distraction
so it becomes a little bit too crowded
if you want don't want that you can
always decrease this a little bit more
or just get totally rid of it
i want to get rid of it i just want to
show you it's possible what else is
possible
over here we can have a video in the
background well it's really it becomes
really crowded when you have that but if
you just want to show a video in the
background
don't have a lot of content over here
then it is possible how do you do that
you click over here you import the video
link
you can adjust the start time the end
time play once play on mobile
have a fallback image if it somehow
doesn't work
so that's what you can do and you can
have a slideshow with multiple slides so
it will change now and then
i want to keep it simple
and for me this looks fine i can also
make this links
so i can make it a custom url
right now i have a hashtag but i could
refer to my case studied called uber and
then i can show case what i've created
for uber and then this can be a link
and then when people click on that link
they can go to the case study of uber
okay
one more thing i go to the
hero
and then i collapse this and then i see
the shape divider
that means that i can have nice shapes
on top of the bottom of the container so
right now it looks like that a little
bit creepy i can increase it or decrease
it
we have quite a few different ones i can
have pyramids
curves
waves
you can change the height etc
and that's where you can give your
website a nice style you can also do
this at the bottom
i want to keep it simple i want to have
a tilt
i can flip it
i can change the height
i think 70 is perfect
and then at the top i can say i won't
have
none
so grow your business with ease
great okay
i click over here
i go to advanced and i want to slide
this in
so i collapse the layout area and i go
to motion effects and i say the
entrance animation is
fading from the left and what it does it
fades everything that's within this
container
from the left to the right i'll do the
same over here
advanced collapse motion effects
fade in from the
right and then over here this container
let me check the right one container
logos
advanced
collapse this go to the motion effects
and
fading up
like that
but we can also give everything
a delay
so this one can appear
slowly
after
half a second
the second one
can appear
slowly
after one second
and then the third one can appear
slowly
after one and a half second
now if i update it i can see the results
like that
when you do this in your whole website i
think it will be distracting and can
make your website slower so you should
not do it too much
but now and then i think it's it's a
nice way to do that i think there's too
much space over here so really simple i
go to the hero
advanced
i bring this one to
50.
better
okay grow your business we with ease we
help companies to start
we help companies to get more clients
view our work
and image
great i showed you how to work with the
interest animations what i also can do
i can click over here on this element i
can go to advanced
and then i can go to transform
normal
that means that without you hovering or
doing anything you can change this so i
can
make it look like this
so now without me doing anything it will
be tilted a little bit like that
or what i also can do when i hover over
it i can also do things
so when i hover over it
it tilts even further
there's so much more offset skill skew
so let's try something
so that's what you could do well never
overdo this this is too much
so but what i can do i can't do this
so now if i update it
it slides in when i hover
it deals even further
what we've created so far in elementor
it looks really nice in my opinion um
but how does it look on a different
device it looks great on a desktop
screen how does it look on a smartphone
or on a tablet well we're gonna optimize
it for all devices
right now
great but
really important how does this look
on a tablet and on a smartphone well in
order to find out i can click
over here
go to the tablet mode
what i see is that everything is really
close to the edge it's exactly against
the edge so in that case i should go
[Music]
to the container settings
and then the padding
i should increase it with
60 pixels at every site and now
now it looks like this
and then there are a few things i don't
like so let's make it 50.
what i can do i can click over here
go to the typography and then over here
for the tablet
i can make it smaller
let's make it two lines
then i go over here
to style typography
18.
okay if you work looks fine to me
over here
i go to the style of this image and in
pixels i want to say make it
a bit smaller
and then over here i click
layout
items
bring it to the center
only on the tablet
then
[Music]
i go to the
container logos
and then i uncheck this and i want to
increase the margin a little bit
so i have more space between the view
work and all the logos and at the bottom
i want to do the same because right now
coca-cola is beneath this white area or
in front of
so until i think pixel perfect that i
like it
so now it looks great and there's a
little bit of space over here
so i'm happy with that how does it look
on a smartphone
grow your business with each with ease
okay i click here
advanced
uncheck and at the top i want to
increase some
space
and then we have those images over here
and what i can say i click here
advanced responsive i can say hide this
on a mobile
so on a mobile i will only see this grow
your business with each ease sorry this
button this text this image but this
will be hidden and you see those lines
over here so when i go back to a tablet
you don't see those lines because it
will be visible but as soon as i go
to a smartphone view i see
this will not appear
that's the power of elementor you can
make it all look so great on any device
so this is how it looks
i can make it smaller this is how it
looks on a tablet
and this is how it looks on a smartphone
and i think there's not much space over
here
so over here let me see
i click and then bottom i can also say
30 pixels
update
let's take a look make it small again
and now i see there's enough space over
here
i think this all looks amazing
okay are you ready for the next area
over here
what i want to do i want to showcase
some portfolio items i don't have them
yet but i will show you how to display a
few images
make it all look really nice and i want
to show you a little bit more about
elementor we're gonna dive a little bit
deeper
so i want to get rid of this
thing over here by clicking this again
drag this over here
click on the plus
i want to start with this area over here
and then with a header or a heading
so i change the text to next level
digital marketing
and then i go to advanced
close this i go to the background and i
want to add a background
really simple just this dark color then
i go to the style of the heading
change the text color to a white one
great
then i go to typography
i make it a little bit smaller
and
[Music]
let's say 500
make it smaller
and then i go to advanced and i increase
the padding
so i create some space around the area
not too much
okay
but i want to get rid of this stroke
over here i only want to to be until
this point so i can
go to
layout
change the width to custom
then again pixel perfect i can increase
it or decrease it until i think
it's exactly
how i want this to be
and that's how it is then i uncheck this
and at the top i want to increase some
spacing
or add some spacing
20
and that's how i like it i go back to
all the elements and i drag a heading
below
first i change the content
our focus is your growth
and that can be a little bit smaller so
i go to the typography
yes
then i can have text area so i can grab
the text editor
place it here below
and now i can go to the dummy
text
generator
[Music]
i click over here
and i want to have
multiple paragraphs if i want to
i can have less words more words
you note one paragraph is okay and let's
go for
100 words or a little bit less
copy this
i paste it
what i can do here below i can add
columns so i can make it two columns
or three
and i can change the gap in between
and then i go to the
style
make it a bit smaller
be careful with too much text people
tend not to read it anymore
so um
okay
you know a little bit more
if you use this lorem ipsum text you can
never be
sued for copying someone else's text
because if you want to see how thing
some things looks and you go to a news
website you copy the whole text and
place it over here
you're violating some copyright stuff we
don't want that
okay what we can do now it's a little
bit next level but at the other hand
it's actually basic it's the way how we
work with elementor we have one
container i can call this one case
studies to keep the
overview
i can make close all these so case that
is heading heading
and this so what i want to do i want to
drag a container in a container
isn't that cool so let me drag it over
here below
there it is and then i can drag it below
in that container i want to have three
other containers so i drag them over
here
and then
duplicate it
and duplicate it
then i go to the container settings to
the items i want them to be next to each
other as a row so one two three
exactly what i want
now i search for an
image
i choose an image and you can i don't
have this
in my folder so you need to use your own
images what you can do you can just go
to the internet search for portfolio
digital agency or whatever
and then use those images or you go to
pixabay.com there you can find images
for free but since you are
creating a portfolio you can also use
images you have
from the case studies you already have
created so i select those images let me
see
let me see portfolio
i open this one
[Music]
i search for another one
[Music]
is one
and then third one
this one
okay i upload the first one
great i want to change the image size to
768 because then it still looks great
but we have a less
heavy website because if i would say
2000 then
it will load unnecessary
space because right now it looks great
look if you make it 300 by 300 you'll
start to see that the quality becomes
worse so take a look at the lowest
resolution
and when it still looks great then it's
perfect because you don't want to make
your website
heavier than necessary
okay i go to the elements
drag a heading below
i call this one the name of the company
carry lotion
later in the tutorial or and in a
different tutorial i will show you how
to create a portfolio like this so you
don't have to do this manually right now
i believe when i show you this you will
also learn a little bit more about
elementor that's my goal in this
tutorial not only to help you to create
an amazing website but also
to help you to work with elementor
so meanwhile i'm at typography
i make the text a little bit smaller
then i duplicate this area
and here i want to place my categories
for instance consulting
comma
identity
id and web
design and i go to the style
typography and make it
uppercase make it a bit smaller
and over here carry lotion
i want to make that
dark blue
and categories i want to make them
lighter blue
i go to advanced uncheck this and at
margin i bring it closer to each other
and at the left
padding
[Music]
let's say five also here at carry lotion
advanced
left five
okay but it still looks a little bit
boring in my opinion
so how can i fix that i can make it look
better by going to the container make
sure it is only this container and not
the complete container in order to find
it out
we go to the navigator and it is the
first container then i go to the style
of that container
to border and i don't use a border but i
want to use a box shadow if i turn it on
by default you have something over here
you can adjust it
blur it more
spread it even further
do the on the inside of the
or the container well
and you can bring it all back
bring it all back to you
don't stop never give up
[Music]
bring it all back to you
you know i got a phone call a few days
ago from an ex-member of s club 7 asking
me if i could do this to
remember them
let's see how they are doing i think
they created two video clips
s club seven
i think it was in the year 2000
really happy music
so that was all for free um if i go to
the container to the advanced area
i want to increase the space
the button why is nothing happening
sorry
i have to be honest i'm making websites
now for 23 years and still sometimes i
have to figure out what is betting and
what is
margin i'm sorry
i feel like i'm letting you down
i go to the border again
yes
bring it all back
okay now i'll do it manually
zero zero zero
zero and then
two or three
blur it a little bit
then we can also
increase or decrease the shadow
so let's make this five it can play
around and make it pixel perfect
then i can duplicate this area and
duplicate it and i remove
those two
over here i change the image to the
second one
and over here
to the third one and then i can change
the title
seeing believing
can be a different
categories and then the third one
blue lizard
it was all about
identity and
also web design
so what does my eye see over here it's
not aligning perfectly because
this image has a different aspect ratio
how can i fix that let me go to the back
end
by elementor overview go to media
and let's take a look at this image
i see that the dimensions are 16 by a
thousand
edit image so if i would say
16 by 10
and i choose crop i have the exact
aspect ratio so 16 by 10 then i go to a
different image
and let me see which one is having
problem the blue lizard one so over here
i can edit the image and i can say 16
by 10
then i go to crop
if i change the size look at this
so i select this area
and i click on crop
i save it
i close it
and now
if i would go
to the dashboard
if i would go back to the elementor
editor page builder
now they should be aligned yes and
that's what i like i like alignments
so our next area next level digital
marketing our focus is your growth text
and then
this area maybe i want to have more
space over here
in this that case i can go to
[Music]
container i can rename this
case or
three
case
studies and then when i'm over here i
can go to the items
i can increase the gap
pixel perfect so let's say 30 or
40.
update
that's the way the cookie crumbles one
more thing i don't like it that there is
not much space over there
so let me see what you can do
advanced at the left make it 10
and i say copy
and
paste the style and paste the style and
then over here
i want to have
then
at the bottom
five
so over here right mouse click copy
paste style and
paste the style update
click on the eye
great i want to do one more thing
i want to duplicate this area
and drag this one
let me see over here
and then
i drag it here below
as far as i can
drag this above it
three cases above it
okay and then this heading above the
text
and now i have this button i can bring
this to the center
and i can say
all
case
studies
and advanced
margin at the top
let's create some space let's give this
button
a bit of space
so what we've done before we have taken
a look at how it looks on a different
device
and again over here
advanced
say 50 at the betting
and then if i go to this container
let me see if i have the right one
three case studies
then i can say make this 20.
and then over here
the typography for the smartphone for
the tablet let's say 16
copy
pastel
base tail and then over here
typography
make it a bit smaller
12.
copy
paste the style
and paste the style
i like it it looks great
smartphone
for the smartphone i can say over here
your smartphone it should be only one
column
awesome
okay
i really like what we have so far what i
don't like is that
here is the start of our content
here's the end of our content
all really well lined up except for
with the header so if i want to line
this up with this area
i can go to the
let me go to the elementor page builder
which is over here and go back
then i click on those three lines and i
go to the
site settings
then i go to the layout and i see that
the width of our content is 1140
pixels
and i want it to be the case also over
here so i close this i've copied it 1140
i go to the website
to the customizer
if i go to
command or control minus click on that
you see the difference
if i want to align that i go to general
layout and then the width
the maximum size width i change it to
1140 so now it's aligning perfectly
it brings a smile on my face
i publish it and i close it
and now
it looks even better
very nice i don't want to have the
animations because right now if i open
it it's just empty and here you see
something it's
i just wanted to show you that it was
possible so i go to advanced over here
motion effects
i say nothing
over here
motion effect
nothing
and then
container logos advanced
motion effects
none
or
x
default
refresh
yes no more
animations
let's go to the next area
which looks a little bit like this area
so i want to show you how you can
duplicate an area and change the look of
view of it and that shows you the power
of elementor so i duplicate this area by
clicking here
there it is
then i go to the container settings
still
and again
[Music]
i choose for this gradient
i choose this gradient
over here
i change the text to
mindset
elevate
i go to the advanced area
[Music]
background i make it a lighter
background
and then at the layout
i decrease this
until i think that it fits perfectly
yes
then i go to our focus is your growth i
change that
the color
to
white
change the text
growth by re
by
changing
the way you think
and i click over here change the style
you can fill in your own text
and then i don't need this area so i
click over here i go to
three case studies right mouse click
delete bye bye
and this one
i bring it to the left
like i say
read more
and make the background
light blue
and the link hashtag
i can create a page about this and then
i can refer to that page
okay
this is great but what i want to have i
want to have an area with two columns
and this is one column so let me show
you how you can copy and paste things
first let me save it by clicking on
update
so i want to open a new container with
two columns let me show you how i do
this i click on the container settings
still
this is what i would do if i would not
make a tutorial about it with this speed
and then i just drag this
over here
and this one over here
this one
over here this button
over here then i click here go to the
content changes to one column
i remove this
and now i want to click over here search
for an image
drag it over here click on the image
upload files select files
and i search for
images tutorial how to make a website
this one
graphic design
remove the dashes copy paste it paste it
insert the media
go to all the
elements and i want to drag a container
over here
and in that container i want to have
another container
so i go back to all the elements i
search for an icon box okay let me slow
down again
like that
i want to change this icon to a heart so
i search over here for heart
this one
then i go for a title
love
for our clients
i think this text is perfect should not
change anything about it
i can link it to somewhere but i can
also change the position i want to bring
the icon to the left
like that
then i go to the style
change the color to orange
or it's a heart
make it red
i can change the spacing
i can decrease or increase the size of
the heart
i think this is fine i can rotate it and
then i go to the content and i want to
change the title to white
and the text
description also to
white
then i want to remove the space over
here
so at the icon
this is okay
so at content spacing
let's say zero
and i'm happy so what i can do i can
duplicate
this
and now it's below each other so i
scroll down i go to the
let me see
the icon box container
and the overlapping container so the
whole container and then i change the
items
from
left to right
i click over here i change the heart to
slack
and i say
support for our clients
how to make this text smaller
so i go to the content
typography
this is the title
18 and the text
12. i copy this copy right mouse click
paste style
and voila i want this to
arrive
in advance from the
right so i go to the motion effects
from the right after half second
yes
then i go to the whole container i
increase the padding
at 50.
uncheck at the right and the left i say
zero
so that's how we can copy and paste an
area and change the look of fuel quite
rapidly
but again how does it look on a
different device also here we're gonna
dive a little bit deeper i will show you
what your else what else you can do
okay what we know by now
50 everywhere
what i don't like is this area so let me
take a look at that in a minute you know
what
let's do it right now i want to
make the text a little bit smaller
okay what i want to do
i want to duplicate this whole area
like that
over here i want to get rid of this
of this
of this
of this
over here i want to get rid of this area
then i want to drag this over here to
the left
this one too i want to get rid of this
container stuff
when i've done that i want to drag
this to the left again
yes
then i go to the overlapping container
over here go to the items
change this to
[Music]
20
like that
so this is what i want to show
on a tablet
and on a smartphone so over here i go to
advanced this whole container
and then add responsiveness i want to
say
hide this on the tablet
but show it sorry hide it on the desktop
but show it on a tablet and show it on a
mobile
and then to those two
i want to say you know this whole
container
i want to say
exactly the opposite
height is on the tablet and height is on
the smartphone
so what happens
when i go to the normal screen
this area is what will be shown
on the normal screen
and this is not what will be shown on a
normal screen
but when i go to a tablet
those two will be hidden and this will
be shown then i go to the mobile
[Music]
this will not be shown this will be
shown
and this will also be shown
so let's see how that looks in real life
i scroll down
this is how it looks i love it i make it
smaller
this is how it looks on a tablet
okay i see that i think there's too much
space over here
so on the tablet
i click here
advanced at the top
i say
nothing wait wait wait uncheck this and
at the top
nothing
and then over here
at the
bottom nothing
so i update it
make it smaller
so it's a little bit too close maybe but
that's how it works and then i go to
smartphone
perfect maybe a little bit more space
over here
so
smartphone
image
advanced
margin top
30
update
looking good
i think this is really close to the edge
i don't really like it it's one of the
first rules and the website i make
should be space around
update
all right guys happy i hope you are if
you like what you're seeing so far then
please like this video to help me out a
lot you're already helping me out
because the longer you watch the better
i will be found on the internet and
that's my goal i want to be found a lot
not that i'm lost you know i actually
want to be found
so i feel free to subscribe for more
upcoming tutorials
okay
let's continue with the homepage
are you ready for the next
container well i am i hope you are too i
scroll down i can create a new one or
since the thing i want to create looks
like something we already have i can
scroll up
to this area i duplicate it
so now i have two of those areas i click
here i hold it
i drag it down
and i place it here below
double click or triple click
y
advantage question mark
i go to advanced
i bring this down
like that
double click over here
i call it i say a client first
approach
to service and support
i don't need this text so i hover over
here close it close this one
this one
and this one
i remove the button
then in this container i want to add two
new containers so i drag this one over
here
and i
duplicate it and i want to have them
side by side
then i go to all the elements i close
this and i search for accordion
there it is i drag it over here i want
to answer a few questions or tell
something about my company
so i click over here and i call this one
title one
over here
title two
i can duplicate it a few times so i have
three
and i have
four
okay so far so good i click on an area
and it opens and i can see the content
and of course you can fill in the
content yourself
i can change the icon over here to
something else but i like the plus
and when you open it it becomes a minus
it's also what i like so i don't change
it but hey you can do that
then i go to the style
let me open one so i can see what's
going on i can change the border width
so you see where the border is you can
change the color
let's say one and i can make it really
light
then we have the title this area
what i always do i like to just choose a
color to see which area is affected so
now i know okay when i change the
background
this will be affected
bring it back
with the color i can do the same
okay
the active color so maybe i want to have
the active color orange
for me that's a little bit too much so
what i prefer
let me go to the icon
the active color i want the active color
of the icon to be orange so when i click
on the plus only the plus or in this
case the minus will be orange
let me go back over here
to the title
typography i can change that
[Music]
stroke
why would you want to change the stroke
of the text
i don't know i don't want that
the text shadow you can have a shadow
and the padding
20.
then i go to the icon
what i like to do i like to bring the
icon to the right
i can change the color
of the icon
but um
i'm okay with the current color i can
change the spacing but that's only when
you have
this option available then
spacing is relevant
when you put this to the end it's not
then i go to the content
background
okay the content background
the color of the content
the typography
the texture and what i like to do is
change the padding
and uncheck this and i can increase the
top and bottom but
i don't need to do this it's already
perfectly fine
i want to know i want to
not zero okay let me
turn this on
then yes and then it will be by default
normal one so i like this title one
title to title three and four and i can
have my text
maybe
make the text a little bit smaller
and the title also
then at the right i want to show
something about the
the city where i operate
amsterdam
so i use this image
and then there's a space over here and i
want to get rid of the space so i need
to go to container settings
it's called three case studies i call
this one
faq
and then i go to the items and i bring
this one to zero so they stick to each
other that's what friends do that's what
okay accordions do with images from
amsterdam they stick together
so how does it look on a different
device
by default it looks nice and by default
not the better default but i just need
to bring this back to zero
and for the smartphone
i can click over here go to advanced and
get rid of that image by going to
responsive and say hi it is on a
mobile
update
and a little bit more space
to advanced
top
50
button 50.
perfect
so what is the next step well since
people should become excited about your
services they should have an option to
reach out to you
and you can make it easy for them by
creating a form contact form so that's
what we're gonna do i go to elementor
and then i say call command or control e
and i can search for the
dashboard and click over there and then
at once i go to the dashboard
then i go to plugins add new
and i want to search for wp forms and i
will create a complete tutorial about it
so i will not take too much time over
here but
we're going to make a great form so i
click on install now
it has a lot of installations and the
free version is amazing
i activate it
then i can watch this video but i will
show you what you can do so we're going
to create our first form by clicking
here or
go to wp forms add new
and then i want to select a simple
contact form the second one so i use
this template
okay great then i can click over here
i can change this name first last i go
to advanced
i want to have a placeholder placeholder
text will appear within this area
so i say first
no first
name
last no no no no last name so as you see
it appears over here and then i want to
get rid of this text and this text
like that then i go to email i do the
same thing i copy this i go to advanced
i place it and then i
check those two
and with the third
one copy advanced
paste the placeholder text and hide the
label
i save this form
then i close it
now i want to use it with an elementor
but in order to do that in order to
style it i need to have a plugin
and this is amazing this is amazing
about elementor if you go to plugins add
new
and you search for elementor
there are a lot of free editions so you
can have
extra elements within your free
elementor page builder by installing
essential add-ons for instance so we're
going to use this one more than a
million installations
what's the catch why do those people
create this for free well they all have
a pro version and they hope you get so
excited about the free version that
you'll buy the pro version
in this tutorial we'll make use of the
free version so i click on install now
and i activate it
great
you can go for advanced or custom or
basic i go for basic i click on next and
then over here i can turn on the
elements i want to use
for now i click on next i'm okay with
that
next
next
next
no thanks
congratulations and then i go to the
elements over here the second tab so
essential addons
and elements and here i can enable them
all or disable them all
in order to keep our website
fast i can disable everything except for
the things i want to
use
so you see not everything is active and
not everything is in the free version
but i'm searching for the forum stylers
and over here wp forms i turn it on so
we can see it in our elementor page
builder
i save the settings
then
i will go to
the website
edit with elementor
i scroll down
[Music]
i click on the plus
i want to have one area arrow down
and the style
gradient
dark blue
light blue with an angle of 90 percent
and at advanced i want to have a top
margin of
50 and a bottom margin of 50 then i go
to all the elements and i search for wp
forms and you need to see the ea because
that means it's from essential add-ons
i drag it over here
now i need to select the form we have
and there it is a simple contact form
first name last name
so here's the title if i want to i can
get rid of it and it will be gone
let me keep it
i want to turn off the description
the labels
and the placeholders
and then it looks like this so i will
turn back the placeholders
and then i go to the styling
the form max width
let's say
500
then i want to bring it to the center
and again i want to try this color to
see what it is okay there's the color
uh now i know um
which area will be
used
so there's more margin padding
you can play around with these settings
but i'm happy as it is
then i go to the
title and description i bring it to the
center this title over here
the text color is
white
and i can change the text
custom title reach out to us
go to the style
title
make sure it is nitto
it gets a bit smaller maybe
a bit thinner
okay and then it can be a bit bigger
yes
then i want to style the labels no no
not the labels that input text area
so the background color
i can make it orange so i can see
whichever it is applied applied and then
i want to make it black
and transparent
yes like that
the text color of course is white
then i want to have a border type that
is solid
and i uncheck this and the only area i
want to be at the
button
and then the color should be
white
we can have a border radius
as you'll see
i don't need it so i say zero
and we can change the text indent
input width
so there's a lot you can do
and i'm actually happy with it so um
i want to go to the placeholder
text color
white
then i want to go to the submit button
and i want the background to be
orange when i hover over it i want it to
be
i blue sorry something's not going right
the text color should be
white
yes and when i hover over it the
background color should be blue yeah
that's what i want
so i think it look this looks beautiful
submit if you want to change the text
over here submit
let's say command e
go to the dashboard
collapse this say no thanks
and i go to the screen options and i
remove the wp forms area
and then i can go to wp forms
select the form
[Music]
go to this button over here
and i can change the text submit
to send or something else and then if i
save it
it will change so i go to the homepage
this
is the page we have created
i scroll down
see if everything is okay
reach out to us
first name last name
corpus hook that's my last name in dutch
in english i don't know corporate
karpshuk just corporate
i wish i would uh start with a different
channel name
[Music]
trevor sampson something like that but
when i did i thought i've really thought
like doing that
calling myself drivers trevor sampson
but i was afraid that i would get a
identity crisis not knowing who i am
anymore
because my real name is ferdi so i'm
happy i just call myself 30 and uh
that's who i am 30
30
30.
30.
okay i'm really happy with this and um
yeah
let's go to the whole page again close
this
before we continue we need to check
everything looks great
on every device
yes and on the mobile
so far so good but here it doesn't look
that well so
okay and over here we're going to take a
look at
this area later
in a few minutes but first i added the
website with elementor
scroll down and go to the container
and by now i hope you know what you
should do
we go over here
to the mobile view and if
this area is at the edge what should you
do
what would you do
i go to advanced
should you choose margin or betting
margin creates a space
outside of this area so if i would
increase the margin
there will be in a
white area around it
so margin is for the space outside of
this area and padding is for the space
inside of this area
so if i make this 50
then everything will be brought 50
pixels
at the inside and that's what we want
update
let's take a look
and everything can be adjusted
pixel perfect
i'm happy
we have created the homepage using
elementor and i think it is time to take
a look at what we can do with the bloxy
theme we have the free bloxy theme with
the free page builder called elementor
and i think we've got already learned a
lot on how to create pages using
elementor but now i want to get
everything out of
the bloxy theme and it's a lot that you
can get out of it so
let's get to that right now
so what i want to do now i want to take
a look at the header right now we have a
simple logo a menu and a search area and
when we scroll down
nothing happens so let's take our header
to the next level by clicking on the
customizer i hold command so i open it
in a new tab
i bring this to the left so here i can
see the result of what i'm creating over
here so
before we do that let me show you what
we can do with the colors if i go to the
colors here we have this palette and if
i would change that to this one
look at that
whole style
[Music]
change
like that
i bring it back
because that's really nice and if we
want to go to the header we can go to
the header over here
then we see those nine areas i talked
about them before so here i have
elements if i drag this over here i can
drag to the left
to the center to the right
and our main menu or our main header
header and then the lower header so
there are nine places
so if i
would bring this over here
it will be there
i can bring the menu
to the center
i can remove the search area especially
when you have a small website in the
beginning
you probably don't need the search area
so i click on the button
i can make it bigger
i change the link url
i can change the text of course
get started
or reach out
whatever you want to do and then we can
open it in a new tab or set a link to
nofollow
i can go to design awesome
but i can also bring the button over
here
and then we have a new layer
so let's not do that what i want to do i
want to go back
and i want to add my social media
accounts at the top
and i want to have some html text over
there
if i click on it i can adjust the
content and the style so here the
content i can say
call us
call us
plus three one six one two three four
five six seven eight
i can make this a link
comment k
hashtag
and then i can stretch the container
then i can go to design
and for now it's okay but what i also
can do over here top row
i can go to design
change the background to dark color
then go to html
design
change the first color to
white
link is blue if i hover over it becomes
orange
you can do whatever you want to do with
that you can also make it orange when
people hover over it it becomes blue
so easy and then with this one i can
select it over here or i can click on
the three dots next to it
go to design
change the icons to white
and then when i hover over it to orange
and i think yeah the the header is a
little bit
high i want to decrease i click on the
top row
change the height
great
then there's another area
and that's the area
below
also there you can have more stuff so
you can be really creative with this
i have tutorial or i will have tutorial
on the bloxy theme and i will dive
deeper into this but for me this is
perfect
so i get rid of the search area
and then i can go to header so let me go
back publish it
refresh
this is our header
okay
before i continue go to header
html text
design
it a bit smaller
and then at the top row
also make a bit smaller and then i can
go to the socials
i can change the icon size
publish
refresh
so
i go back
and then i go to the header
to headers
and there i can click on the global
header and i can make the global header
sticky
so now if i scroll down this area will
stick with us
so if i click on publish
i refresh this
this stays sticky so
this area is only at the top
this will be sticky with us
what i also can do i can say that the
top and the main row should both be
sticky
so now everything scrolls with us
only the color changes i can change the
color when i scroll so
let me show you how
i go back to the top row
design
and at the sticky state i also want to
have
a dark color
this option appeared at the moment i
decided
here at heather's
this selection should be made
so i refresh it again
now everything will stick with us and
the colors will stay same
there are more options if you have all
rows also the third row you can all let
them
stick with you or only the main and
bottom row
or only the top row
that can also be the case
the sky's the limit as i said before
i only want to do the main row
click on publish i'm happy with that
and there are effects
it can be slide down
like that
or fade
i can mean offset
so after let me see after
111 pixels then
it will appear so not yet not yet not
yet
now
and then there will also be an offset
over here
which is
awesome well i think if you make this um
20
it can look nice
so i scroll down
there it appears
this is interesting so that's what you
can do
i bring it back to default
no offset and i enable it on
all devices
so that's the first thing you can do
what else can we do look at this we can
make our header
transparent so i click on transparent
now something changes
as you see
i want to add some conditions first
i close everything i only want to have
this option on the home page so i add a
display condition
and it says that i only want to show
this
on the front page
over here save the conditions
so if i click on publish and i refresh
this
right now it looks like this but when i
go to the about page it will have the
normal header
if i go to the home page
it will have the other header
yes
okay
i enabled everywhere only not not on the
smartphone
okay publish
what i need to do now i need to go to
this header the main row
and then i go to design
and it says that on a transparent state
it has no background which is exactly
what i want what i can do
i can make it dark
a little bit visible like that
that's what we can do we don't need to
do that but we can let me show you for a
second how that will look
and then i need to go to the logo and
the logo also has a few new options on a
transparent state so right now i want to
have a different logo of course
so i select the light logo now in order
to get it i go to upload files
select files you need to have a white
logo with
exactly the same
aspect ratio the same amount of
pixels
and it looks like that and when i scroll
it's still white so i need to go to the
sticky state logo and then i check
change it to the
darker one again
and then when i scroll down it changes
like that
and that is amazing
then i go to the menu
design and on a transparent state the
color should be white
when i hover over it orange
and on the sticky state
it should be
dark when you hover over it orange
also over here
let's make a dark blue
so on a sticky state it looks like this
i scroll down it starts to look like
this
it should also become orange i guess
so i click on the button
design
change the hover to orange
okay since i've done that i want to
bring back the
[Music]
main row design
to completely transparent not a black
area
and actually i don't want to use the
header
the the top header
so let me refresh this
yes but now this is interfering with
each other so i need to edit the page
with elementor
and i go to the navigator because
because maybe i cannot select it anymore
because the menu is in front of it then
i can select it over here i go to
advanced
and at the betting top i can say 100
and that
makes me happy
so now there's space if i scroll down
it appears like that
i'm happy with this but as i said i
don't want to use this header
so i go to customizer
at the top row i get rid of html
and socials
publish
close it
now it looks like this
exactly
what i want and that you can do this
with a free theme
amazes me and that you can do all this
with a free page builder
also
amazes me
but again how does it look on a
different device
okay
i would look like that
not in the branding of our website not
install
okay
how can we change that
we go to the customizer
and i go to the header look at this when
i go to the tablet view
i see the tablet slash mobile header so
here i can change the header
so i can have different items over here
i can have the mobile menu but i also
can have a button and then it will
appear over here
i can have socials
like that
i can have an html text with about
anything i want to see
and on a tablet i can still have the
logo over here and the trigger but i
also can have other menus so i can also
bring this to the center
it's up to us what do we want to do
if i click on the trigger i can make it
bigger
i can change the outline
make it solid change the colors of
course decide where i want to display
the label if i want to have a label
so i can say
you should have a
menu
on the tablet
so there are a lot of nice options over
here i can change the logo
or the icon
and then a design i can change the color
when i hover over it
it looks like that on any
state so sticky
transparent
etc
so how does it look on a mobile
like that i think this is perfect
so let's take a look at the menu
i go to the office off canvas area
i go to design and right now the
background is dark i want to make it
blue in the style of our website
then i want to go to
general i can also show it as modal so
it will be over the whole width i want
to be a side panel
left or right
i can change the width
how about
76
the alignment should be in the center
vertically
at the bottom at the top
horizontally
then when i go to the
mobile menu i can also go to design by
the way i can change the arrow
to a plus
arrow down like that
and then i can increase the spacing
i can change the border
design
so
let's go over here
and choose nunito because that's the
font for all my headers
less bold it's really bold right now
i can make it uppercases
and then maybe
a little bit less
big smaller
okay i publish it i refresh the page
if i make it smaller
it looks like that
i'm actually happy with how things look
the divider
change the color and stuff
so that's how you can optimize your
header for all
devices that is what we have done and i
think it looks fantastic except for this
area
so let's take a look at that
customize
we go
to the header then go to the menu
and i scroll down
and i see the drop down options
so when i hover over it the drop down
appears i can also say click
then i need to click and then it will
appear
but i want to go to hover
and let's go to design again to find out
what the colors are
let's change this to
[Music]
green to orange so i really know which
area is affected okay then i go to
general
and let me see if i hover over it
nothing happens to the background
okay the default state is white
when i hover over it let's make it blue
so it becomes blue
and then
the default state let's make it a dark
blue
dark blue and dark blue
like that
then i want to make the font uppercase
okay
when i hover over here i want the
background to change i want this to be
orange when i hover over it or a blue
light blue and then this area white so
let me go to general
change this to solid color
so when i hover over it you see
that the background color changes now we
can go to design
yes now we can go
make it orange
yes and then i want to make this
white yes
awesome
[Music]
you can use different colors of course
so
now everything looks great i think you
can be really proud of yourself what
you've created so far
if i go to a different page
it looks like that it all looks
fine
beautiful
have a great header we have a great
homepage we're going to create a new
page but i want to show you a few ways
on how to be more efficient in elementor
because the more efficient you are the
more time you will save and time is
money so we'll save money and with that
money you can do other things
whatever you want to do
and it's it's nice when you can make a
website faster so
let's go to the next page and show you i
will show you how to work really
progressive
so let's go to the second page the about
page and let me show you how you can
speed up your workflow
so the first thing i want to edit this
page
and when i've done that i want to edit
it with elementor
so the elemental page builder will start
great and now you know the first thing
we should do again here left at the
bottom settings and change the page
layout to elementor full width
okay
i'm talking about speeding up your
workflow what i can do now i can hit
ctrl e or command e
then i search for a home page
then i click over here
wait let me update first
command e
home or home even better home
and then i click here and then we go
directly to the elementor page builder
within the homepage and now
if i go to the navigator i can copy this
hero right mouse click
copy
then i say command e
and i go to the about page
there i go
[Music]
right mouse click paste and that's the
way the cookie crumbles
so now i can change this text i can
change the image
i don't need this area so i go to the
navigator again
[Music]
remove
and here i can change the text
so let's say we
are one big
happy family
and i can create a text over here
now over here i change the text
apply for a job and if you would have
jobs over here and then a 7 after that
like this
uh and it's really the case that you
have seven uh places for people
that can uh apply for a job
then
it looks like you're a really big
company and that can also give the
visitors some trust like hey those guys
know what they are doing
so we are one big happy family we like
what we're uh doing our passion and
skill for then people can apply for a
job and then over here i can change the
image and if i want to use make use of
three images i can search for pixar
b.com
and you can use all these images save
them and don't show any
credentials so i search for people
work
if i see something
i like
i can use that image
on my website
keep in mind those images are free and
that's why the quality is a little bit
worse than when you go to uh
something like i stock
so if we would go to 30
corp.com forward slash i stock photo hit
enter
photo
then we can find really high quality
images so if i would search for
people work
those images are way
better so you can download the image and
if you take a look
uh
or i have this one already
or i can get this for free since i'm new
it's all dutch over here i don't know
why
so i can
[Music]
sign in
and then this one would cost one
credential
one credit that's around nine dollars so
maybe think what nine dollars for a
picture yes but keep in mind
that that thousands of people can
potentially visit your website and when
the the quality of the website is great
it will pay back itself if you go to
apple.com
look at this image high quality image
high quality image
image image
image image image image if all those
images were lousy and stupid and ugly
the website would look ugly and
uh not professional
so high quality images are really
important so if i go to my photos
i download history
i like to use this image i can download
it
always rename it
digital marketing
amsterdam
then i go to elementor
click over here
and then
[Music]
i go to finder i drag it over here
copy paste
and then i click on insert media i can
also make the image smaller right now
it's 573
kilobytes
if i would change it to
1281
i go back
then it's only 200 kilobytes so um
it's lighter now
and over here
i can
create some space at the right
like that
okay so that's how you can copy and
paste things and then save yourself some
time let me show a few other things on
how you can make a nice website
and use elementor
let me
[Music]
have
two columns
and i can drag it a little bit
like that over here i want to have an
image
so i search for an image
and then again i go to eyestock
i can grab this image
let me show you what else we can do oh
oh sorry download again
rename
digital marketing
than because people are searching for a
roth them
and then eventually they can go to our
company in amsterdam or you have
multiple places where you have your own
company
and then they can go to digital media
route them to your company and rot them
so
click over here
upload files select files
downloads
most recent one
and it's 20 megabytes that's a lot but
it will be made smaller automatically by
wordpress so that's nice but we can make
it even smaller so i click on edit the
image is 374 which is quite okay
but now i want to crop it
i want domain is an aspect ratio of
three four by three
why is it not working like that
maybe because i already have a crop over
here so let me edit it again
no crop
four
by three and now it's working and now if
i click on crop
yes i have the four by three aspect
ratio so i cannot make it
a different aspect ratio
now i can select a certain area
and then i can click on crop
save
now it's uh
302 kilobytes i insert the media
and now i can do something nice
first i can make the
image smaller
and then if i'm here at the style i can
go to box shadow
i can give this a shadow but i can also
make the shadow really harsh
so i can make the okay
let me go to this button
i go to the style
to this color then i copy this color
command c or ctrl c then i go over here
to style
below i go to the box shadow at the
color i paste it
now i can say
minus five
minus five
get rid of the blur and then it looks
like that so if i would say -10
minus 10
you have a nice effect like that
and then over here
i can have a heading let me save it
i drag this heading over here
we are
[Music]
then
i can have a divider if i want to drag
it here below
make it um
214 pixels solid
if i go to the style i can remove the
gap to nothing
change the color to
blue change the thickness
two three
then i go to advanced
uncheck the margin and at the top i
bring it a little bit closer
then
and then i can have a text
i can type this text
something like that and then i can
duplicate this
drag it over here
change the text
get started
i can change the style
to
dark blue
when you hover over it it can become
orange
okay
then i click on the whole section i go
to advanced and at the top i would like
to say give me some space
also at the bottom
then i want to have a new area
like that i want to change the height to
500 pixels
and i go to
this area
i want to go for
a nice image
this one
download it
web design amsterdam
there i go again i go to the style
background type
image
upload
select files there it is
open
copy
paste
edit the image
change it to
[Music]
1920
scale
back
and that's 430 kilobytes
i insert it
i want to change the size to cover so as
much as possible will be fitted in this
picture i change the attachment to fixed
like that
and then i
update it
then i say command e
home
and then i want to copy this area
copy command e
about
over here i want to paste it
get rid of this
this
and this and then over here at the
container advanced uncheck this
i want to bring it closer
to the image above so you get a nice
effect
so this can be the portfolio who we are
and then this area
with this image we can also go to style
background overlay and then we can
choose a gradient
increase it
and then if we want to
we can have a heading over here
our focus is
your growth
or your
growth
is our
focus our
goal
and then i can go to this area layout
bring things to the center and the
center
i change the text color to
white
and then advanced i can also bring this
closer to the center
of this area in this area
like that
so
that's how we can create a page i want a
little bit faster
i hope you don't mind
let's take a look how does it look
oh click over here
advanced uncheck
50
50.
over here advanced
at the left
40.
and this looks great
okay
let's go to the hero
for mobile
increase this a little bit more
like that
over here
40
no no no only at the top
and then
[Music]
zero
over there
click over here
bring it to the center
let's see sorry content
over there
and this all looks fine
so now it's optimized for all devices
let's take a look and close all this
stuff
and then it looks like this
i think it's
amazing so what can we do now since you
know a little bit about elementor there
are tons of ways on how you can make
money using a website or knowing how to
make websites you can do that for a
living but you can also sell design so
if you become really good in making
websites
you can sell your designs so if you want
to
sell this
you can go to elementor
you know it's optimized for all devices
make sure you don't have
[Music]
any copyrighted images in it
and then you can click over here
and save this as a template
so i can now call this one
about or advantage
media
about page
with a nice
dish in between
save it and now i go to all my saved
templates and i can click over here and
i can export it
and there it is
i can rename this to add vantage
media
about page
only 15 kilobytes and i can import this
somewhere else so let me remove it right
now delete
and then i click on the i
great this is the homepage
this is our about page
if we go to the services page
i can edit the page
edit with elementor
if i want to import a template first i
can
make this a full width
page
update
then i can click on the folder in the
center over here
click on this icon
select the json file we just created 15
kilobytes
open it
i want to import without enabling
and then i want to insert it
and i don't apply these settings
so now i cannot import these images
because they're copyright protected
and that's how you can sell your designs
and people can insert it and then they
can change the information really quick
so i can click over here three times
what can we do for you
i can change the text here
make the text a bit smaller
advanced
at the right i make this
40.
get
started
we are
what
is our approach
question mark
and then i can change this text
i can change this image in the
background
and that's the way google crumbles so i
update it and then that way you can
speed up your workflow
if you want to download all the pages i
use in this tutorial i give them to you
for free
you can go to 30 corp.com
then to templates
then when you fill in your first name
and your email address
click on give me the package
from your option i need to consent with
this i click on subscribe
and now i need to go to my
email account okay then i click here on
my email
get the template black back
and then we can click on download the
template pack
there it goes and you can also go to all
templates
and there you can find
templates for elementor the free version
pages like these
or elementor pro
and you can import pages like this
in my opinion beautiful pages
even if you have a webshop i can show
you how to create import something like
this or uh headers so you can click on
headers
and then when you scroll
things change and you just have to
change the colors and stuff
so um
that's what you can do
i close this i close this
this and this
then i open this
and there they are the advantage website
so
let me click on the i
then i go to the contact page
i edit the page
then i go to edit with elementor
the first thing i want to do i want to
change the settings basically out to
elementor full width
update
then i click on this folder icon
i click on this icon to upload a json
file or a zip file
and then i go to downloads
this folder advantage and i go for the
contact page
three kilobytes
and i say import without enabling the
red one
keep in mind that you need to have wp
forms which we use on the home page
so i click on insert
don't apply the settings of the page
there it is and i see there's no form so
i click over here
i need to select this form
and now it works
update
so this for free but what i said before
you can learn how to create beautifully
designed pages and sell them on your
website and then i will also have
tutorials on i already have them on how
to
sell digital products on your website
using woocommerce
and that's the way to quickly crumbles i
really like making a website like this
using the bloxy theme and elementor if i
open this page
this is how it looks of course i can
change the information over here and i
can change the form
so we have the homepage and i also have
a template for that so you can import
this page completely
the about page
services page
contact page
so let's take a look at the case studies
party people in the house are you still
having fun
i hope you are i hope you are excited i
do my best to create the best tutorials
possible and what i also can do i can
also make the longest tutorials possible
like 10 hours
but i don't want to do that because that
will scare people off if they see learn
how to make a website and it's 10 hours
long
so what i do i take a look at all the
basic things people need to know i put
it in this tutorial but not everybody
wants to have case studies in their
website
it's just the way it is some people
don't want that so what i did i created
a separate tutorial for that otherwise
another 30 minutes will be added and
maybe not everybody wants to make use of
those 30 minutes
so if you want to learn how to create a
case study
case study portfolio area in your
website you can click on the link over
here yes i've been working out thank you
what time is it okay
or you can go to the link in the
description
let's continue
this is how it looks as an end result i
can go to marketing
rebranding web design
if i click on one of those i can see the
content
and then below i see related projects
great
let me go to the blog page
there i am again because the same thing
goes for the blog page and the blog post
creating a blog post and optimize it for
the search results and adding ranked
math and
you can do so much things with it and
that can be a tutorial that's two hours
long so what i will do i will create a
tutorial so if you want to learn how to
create a blog post you can click over
here
or go to the link in the description
and then um
when you follow that you can go back to
this tutorial and follow along again if
you don't want to have a blog post you
can just keep watching because i will
skip that part because not everybody
wants to have that i don't want my
tutorials to be too long
yes i hope you um are not mad at me
because when people are mad at me i
it's hard for me even when people are
mad at me for a reason that i not agree
with
and i still feel like oh no somebody's
not happy with me
actually i should have not become a
youtuber if i
am vulnerable for that but um
yeah i feel like i'm sharing my heart
with you and
feels good to open up you know even
though it's true youtube
okay i can imagine that you sometimes
think okay are you serious or are you
weird what's going on okay this is just
who i am i like what i'm doing and
sometimes
i just do something like that so um
we're gonna skip the block thing if you
want to learn how to do it follow the
tutorial and let's continue now
if you follow the tutorial and you
refresh the page it will look like this
beautiful overview with all the blog
posts i'll show you in the tutorial step
by step how you can create those if i
click over here i go to one of the blog
posts
and this is how i made it look
i'll teach you how to create a blog post
like this with images links
how to format
the text
how to write a converting blog post this
blog post makes me money through
advertisements and through
people that click on the link about
convertkit and then
[Music]
i make money and i help them
great way to make money affiliate
marketing i also have tutorials about
that then through this beautiful theme
bloxy we can display information about
ourselves
we have a related post and people can
leave a
reply
so
since you have case studies and blog
posts
maybe it's a great idea to put them on
your homepage
and in order to do that
and go to the backend we need to have
another plugin for that i also
downloaded that already
in that other tutorial but if you have
not followed that tutorial let me show
you i go to plugins add new
i search for
live mesh
and it's a live mesh elementor we need
to install it and activate it
then we go back to the home page
edit with elementor
and as i said in the other tutorial i
already did it
so i remove everything i have over here
and then i search for grid and i need to
have post
grid
i drag it over here
okay
then i go to the navigator i want to
drag it below the text editor
oh man
i love how simple everything is
then i click over here
and i change posts
i close that and i click on the plus
i choose portfolio so i choose my
portfolio items then i go to settings
and i remove this text
and i uncheck the filterable
question mark area then i go to content
again
and make this a little bit wider i
collapse this i go to the post content
and i only want to check the first one
and the fifth one
i go over it a little bit quick because
i have a tutorial where i show you that
so uh this area and then the title
this size size of the image can be
smaller as long as you see that the
quality is high because
uh right now with 300 or 150 you see it
becomes worse
so i think also with 300 it still looks
great and your website will load faster
because the images you load are smaller
so if i would say shift command
4 on a mac
okay it's 400 pixels wide this one is
300 so i choose 700 and then you have
really high quality images
then i go to the post query
and i choose to show just
three posts
update
so we've created this really fast
and if i click on them i go to that case
study then i scroll down
i want to add my recent blog post over
here but you know i want to
have dark areas and then light areas
dark areas
and i want to have a light area for my
blog post so i need to have another dark
area
so i go to elementor scroll down
over here i click on the plus
one area with the arrow down
i go to the style
you know by now
how i will have my background
90
and then i go to the elements and i drag
this heading over here
and it can be a nice blog post i have a
blog
it can be a nice quote
so um
your growth is our focus i have already
somewhere else in the website but i'm
totally fine with that
okay then i go to the cell make the text
white
i can make it a little bit bigger
then i go to this area
container layout i want to
make it higher
let's say 500
and then add items i bring it to the
center
and to the center
then i go to style
overlay
and then i choose an image
this one
i make it cover and
fixed
and i
decrease the opacity
okay and then i want to have a new area
arrow down
we're having
still
bring this back to
this one or
let's say
that one
okay i bring it to the center
and then i go for the grid again
i do the same thing
i go to settings
remove this
and uncheck this
content
three items
and then here at post content i only
check the first one
and a fifth one
and change this to 768
then i click over here and i say block
make the text a bit smaller
increase
the margin at the top
or
i go to this this area
and i increase the padding
then i go to the
[Music]
responsive mode
this is fine this is not
so here i say 50 everywhere
let me see click over here
okay what i want to do i i don't want to
show how to show three in a row
also over here so what i can do i can
duplicate this
and over here i go to advanced
and then
responsive
i say
i did on the desktop
not hide it on a tablet
and this one
i say hide it on a desktop
and add content
i say show only two blog posts
i do the same over here
duplicate it
this one is only
for
the desktop
this one is for the smartphone
so
[Music]
hide it let me see
yes
now over here again
[Music]
i say two so what i see
this area with three case studies is
only for the desktop and this area two
is only for the smartphone and tablet
so if i go to the smartphone
i see two below each other
also here to below each other
update
we see three
we see three
here we see two
and we see two
i like it
so that's how it works
let's go to the home page
okay people we're coming to an end of
this tutorial
and what we're going to create right now
is the footer the finishing touch and of
course we're going to take a look if
everything is optimized for all devices
and after that i will give you some
follow-up tutorials because there are so
much more
to do in wordpress world you can create
a webshop
you can sell a course
you can create a facebook page you can
optimize your website for the search
results so i have tutorials about all
those things for free on my youtube
channel so feel free to subscribe
and i always say that the best is yet to
come i do my best to create better and
better tutorials so feel free to do that
and now let's create our footer
in order to create a beautiful footer we
need to download or activate something
in order to do that i go to the back end
and then i go to bloxy
to extensions
and then here at the free extensions i
turn on trending posts
and also a few
nice
widgets
then i go to the website
i click on customize
and now we can create our footer
i scroll down all the way and this is
what we have
it looks a little bit weird but these
are trending posts
and this is hidden so let me configure
this i can click on edit
or
i just go over here to extensions
trending posts
and then first i want to go to design
let's change the back
ground
and then
[Music]
i want to change the font color
when i hover over it i want to make it
orange
i can increase or decrease the space
20 is okay with me
over here i make sure that it is nunito
and then i go to general again
i can say trending now i can change the
text
i can show the recent posts
or trending posts or portfolio items
let's do that portfolio items
um
[Music]
case studies
trending from all time so the ones that
are clicked on the most visited the most
those will appear over here
and it will not be visible on the phone
great
publish
then i want to edit this area so i click
on edit
there we go
so we have the bottom row settings
and i want to change the design first i
want to change the background color to
the darker one so this dark one then
even darker
like that
then i click on copyright in this area i
go to design and i change the font color
to
white
and then the links also to white and
when you hover over the link it is
orange
and then over here i say
open sounds
it's already the case and i make it a
little bit smaller
a general i bring it to the center
i can change the text i remove to
copyright
i like the year so when it's new here it
will automatically change
and i want to have a pipe over here
site title
pipe
and i remove all this
and then i can have a few links
i can say website
made by
freddie corpora zhuk
over here i can make it a link https
for the corpushook.com
open it in a new tab
okay
what else can i do over here i can say
disclaimer
and
privacy policy
i can create pages about that
i say command control k
and then i can say forward slash
disclaimer then then i need to create
that page
privacy policy
forward slash privacy dash policy
and um if you want to learn
how to work with that you can google you
can hire someone to do it for you or you
can search for
create disclaimer
pages or website
and there are tutorials for that
okay well then we have two more areas
and i want to make use
of this one
i have to say before this was a smoother
uh experience right now it's a little
bit clunky i don't know why wordpress
did that but hey
i think it will become better in the
future let me walk you through it
i go back and then i have a lot of areas
so let me go back one more time i go to
fooder
then we have all these areas and then we
have widget area one two three
before uh first i want to show you that
there are three areas right now and if i
would click over here i can change it to
four
five
six and when i do that you see them
change over here and in all those areas
i can drag these things footer menu
socials widget area
so i go to the middle row editing area
and i want to have three columns evenly
divided or divided like this
so a small one at the left at the right
and a big one in the middle but i want
to have this one two small ones 25 each
and then one of 50
i can change the column spacing widget
spacing
[Music]
um it's time to add some drag some areas
so the widget area 1 is over here i
release it
widget area 2 over here and then widget
area
3 over here
before we continue i go to the middle
row
to design
i want to change the background
to
dark blue but now we have dark blue and
dark blue so what i can do design i
scroll down
top row divider
beautiful line over here
which i want to be white
okay then i have widget area one and if
i click on it
i should see something over here and
this is what i mean with clunky yeah
there it goes
okay i got this
then i click on the plus and then i see
a mini gutenberg editor if i click on
browse all i installed cadence blocks
so now i can
make use of all these
blocks
so i can add a page break a calendar our
latest comments latest posts
so i just want to have a simple image so
i search for image
and i click over here
and now i can upload an image or i can
go to the media library i want to have
my logo
in white
so i go to advantage that logo i select
it and
voila there it goes
and in this widget area i can have
multiple widgets so this over here is
one widget so if i click on the plus
i can have a text widget or a paragraph
widget
let me go to the dummy text generator
and you can play some text about your
company
i paste it
but i don't see it
why because a design
i need to say that the font color is
white
and a link also white and when i
hover over it it becomes orange
okay
then i can go to widget area 2
and this time i click on the plus and i
want to go for a menu
so i go for the navigation menu
i need to select one
there it goes really dark
so first i want to create a title quick
links
and then also here over
design
i can make them white or i go to this
whole area
design and i say that all the
titles should be white
and all the fonts
colors should be white
when i hover over things it can be no no
links can be white and when i hover over
it can be
orange
so that's how you can do that i click on
click on publish
but i think the text is a little bit big
so i can click over here
just for the title
make it a bit bigger make it uppercase
okay and then for the fonts
i can make it a bit smaller
like that
i like it
then the third area widget area three i
want to have a special plugin for that
so i click on publish
i close this
i close this
then i go to the back end
to plugins add new
i search for
a recent post with thump
nail
i'm searching for kybernetic
there it is
a lot of installations
installed now
it
now i go to the website
to the customizer
i scroll down
okay and then in the third area
these are the settings so let me go back
i click over here
click on the plus
and then i search for a recent post with
thumbnails there it is because we
downloaded that you see a lot of options
and by default
it looks like that oh it's quite nice
so i can say block or recent
posts
posts
how many do i want to show let's say
three
otherwise there will be a lot of space
over here which is not used so
when i say three is better
open a new window no order descending
just uh based on the newest blog post
and
[Music]
i do want to
show the date
so over here
it will be shown
no excerpts
i can choose to show certain category do
i want to show the
thumbnail
well if i would say 300 by 300
i'll get a weird aspect ratio
so i say um
thumbnail
and that looks better
i can change the
size here manually
and i think it's uh great like this
okay
right now it's not evenly divided 25 25
50. so i want to divide it equally so i
go to the middle row
and bring it back to
equally
maybe over here
edit i can bring it to the
i can bring it to the center
also here
great
that's how we have created our footer
now i want to go up and then i need to
scroll up all by myself
i don't want that so i can go back i can
go back
some general options
and then here we see scroll to top
then there's that button
and if i click over here
i can change the arrow
and change the design so let's make the
background
blue
i can color white
when i hover over it can be orange
and i want to change it to
this arrow i can change it to a circle i
can do a lot of things
so
that's how you can do that
publish
ladies and gentlemen
we have created an amazing
website
so ladies and gentlemen congratulations
with your website congratulations with
following true
i'm happy for you
and i wish your company or whatever you
do whatever you created the website for
the best of luck
and i hope you will reach a lot of
people
so what is
the next thing you should do what you
can do well i have a few tutorials as i
said i don't want to create a one ten
hour long tutorial i rather have
specific subjects because not everybody
wants to follow every subject
so let me show you a few tutorials i
suggest you follow if you want to take
it to the next level
the first one is rank math
tutorial
rank math is a tool that will help you
to optimize your websites for the search
engine search engine results so here's
uh mine and if you don't see me on
number one
you can
say space 30
and i probably will be number one
so that's why you can do this one is two
years old this one is five months old
what else maybe you want to sell things
on your website well then there's the
woocommerce
tutorial
and again if i'm not number one you can
say 30 after that but i'm still number
one
uh this is a newer one
so choose one of those i should choose
this one
uh what else
convertkit maybe you want to build an
email list
get subscribers i made a lot of money
building an email list giving something
away for free uh for instance my um
free templates and then i built an email
list and then where there was uh
something i could sell to them with some
discount i send an email to all my
people
sometimes i make a lot of money in a
short amount of time using my email list
and using this convertkit tutorial two
and a half hours i show you step by step
how you can get started i think i don't
know why it doesn't have that much views
maybe because i'm a wordpress related
channel
this is crazy what you can learn over
here so i highly suggest you watch that
one if you're interested in it and then
of course there is affiliate
marketing
selling
other people's products and when people
buy it through your unique affiliate
link you get a commission an amazing way
to help people and make money i have two
tutorials about it this is
affiliate marketing in general and this
one is affiliate marketing
for uh when you want to make a website
so we already have a website if you want
to turn it into a
affiliate marketing machine you can
watch this tutorial also here i don't
get it why i don't get that much views
but hey
so be maybe it will come this one for
instance after a time all of a sudden i
got a lot of feel so
it looked like i was less heavy over
there
that's true
so
those are a few follow-up tutorials
thank you for watching this tutorial i
hope you learned a lot of stuff and good
luck with your website
one more time feel free to like this
video and subscribe for more upcoming
wordpress related tutorials and then i
hope you have a great day
and a great life
bye