Overview
hello friends welcome back with another
video and in this tutorial i’m going to
show you that how you can create a
beautiful header for your website using
elementor pro so if you don’t have
elementor pro
just follow the channel and you will get
a video of how you can install the
elementor pro in your website so if you
want to create a beautiful header
in this video i will show you step by
step how you can create it otherwise if
you want to download pre-built headers
for my website
just visit get into pocket.com
i will give you the link in description
and just here in the menu you will see a
header just click on it these all are
elementor headers
as you can see i have added a lot of
headers just click on it and download
the header you like mostly
so come back to my website
here in the dashboard as you can see the
website is empty and nothing we have in
this website just we are going to create
a beautiful header for this website so
first of all what we need to do is for
creating a header we need a beautiful
menu to
add on our header so for creating a menu
what you need to do is go to appearance
here menu
and i’m going to create a new menu here
as you can see we don’t have any menu
just click on menu name and add the menu
name you prefer i am going to add a
primary menu here and click on create
menu
as you can see our menu is npd and we
don’t have any pages here i’m just going
to create some demo link pages so first
of all i’m going to create a homepage so
i’m going to add the name of this page
as home
and nothing at the link
there is your first page and next is
about us
about
us
so
[Music]
next is about us and then
services
services
and the next is contact us or something
else about
plans so plans
the next
and the last is contact us so contact
us
page is the last you need to create all
the pages i’m just going to create demos
to show you how you can create
a menu so here i’m going to add the last
contactor so money is ready just click
on save menu here
and as you can see our primary menu is
ready okay the next step is that we are
going to create a header for this
website so come back to it
just go to elementor templates and here
click on add new
and here click on header so we are going
to
add the type of this template as a
header so next is the name of address so
we are going to add a default header
name here
create template
[Music]
so as you can see we have a lot of pro
templates here but we need to create a
new template that’s where we’re going
we’re not going to use this template
okay so here is our default area of
header we are going to customize it so
first of all what we need is the logo
here and a menu and a search or contact
us here so just click on this plus
and we have a structures here a lot of
structures and we are going to add this
one here the three section structure
so as you can see the structure is added
here what we need to do is adding logo
here so for adding site logo we are
going to add cycle over here i did not
uploaded the logo here so that’s why i’m
going to add an image
so
here i’m going to drag the image here
okay so this is added so first of all
click on the choose image
and select your logo so i’m going to
select it and insert media
as you can see my logo appears here what
we need to do first is the change of
color so as you can see my logo is in
white color so i’m going to add the
background color black so for this we
are going to start
first of all select the structure the
wall structure from here
and from here we are going to click on
background type and here classic
the color and we’re going to change this
to black as you can see my logo is
appears here so for changing the logo
size just click on the logo
and here you can change the size to
medium large or custom
like most so i’m going to
add it full
and from here you can drag it to
customize it as big and
smart
i’m going to add
logo here it looks perfect so first what
is the next next is the menu so click on
it
and add a navigation menu here
so you can see all menu is added here
what we need to do is drag the other
side to look it completely so it looks
complete here what we need to do is
change the colors of our menu
so for channing the color go back to
styles and here you can see the
typography here you can change the fonts
and size of your menu text
what is next the text color so here i’m
going to change the text color to white
now you can see the color is white and
the whole color is green so if we want
to change the whole color to red as you
can see the logo is end with a red dot
so
what we need to do is
click on hover and here you can see text
color is
green so i’m going to add a red color
here so for adding a red color you need
to select the red one
and pointer for what is the pointer
pointer is the last section as you can
see the green
line behind the text okay
so i’m going to also click on red and
add a pointer red so as you can see it
looks very beautiful here
okay what is the next step so we need to
add a search option here or contact us
anything else
as you can see i’m going to add a search
option here click on search form
and drag and drop here oh my god it’s
not looking better here so we need to
customize it the screen of it first
customizing skin we are going to add is
minimal so minimal looks attractive but
you don’t need minimal also
the full screen
as you can see this one is looking
durable so drag it and make it smaller
so as you can see we are going to change
the color of this we need to add the
size so
the size is looking fine here but the
search block icon is not appearing click
on style
and we need to find the logo color here
so color
click on it and change it to white so
a little dark white side that’s looking
perfect
so what we need to do is add this menu
to center so this menu is at left side
what we need to do is click on this menu
and find uh
here we need the align section click on
center and you can see
the menu is in center so this is the
logo
this is the menu and a search option
once we click on it as you can see the
search appears here we can write
anything and
okay this color is also halfway so we
need to add a white color searcher
click on it again and you will see the
typography overlay color is
black if we click on white what happens
no it’s not looking perfect
we need it black
okay so overlay color is black as you
can see the black appears here but we
need to change the text color
okay text color is
black so it’s white now you can see we
have the written text in white color
okay this also close it
and you can see our beautiful header is
created if you want to add some other
functions here
just click on here and customize what
you want so you want to add a heading
here
click on text and add at the bottom of
this menu as you can see
i’m going to add
that okay
that 50 percent off
and first order
so it’s a heading we need to customize
it also click on it to edit center and
then the typography
size so text size is too big we need to
make it smaller it’s perfect here just
need to change the color also to white
okay
if anyone click on it the whole color is
same so need to change the whole color
what is text for here so
it’s looking
nice here okay
you have a lot of blending options here
if you want to change it to screen
and
color dodge
a lot of options don’t need to do
anything here
so the header is completed as you can
see if you need to save it and publish
it on your entire website what you need
to do is click on publish here you can
see a condition widget appear here you
need to add the condition so i will tell
you what is condition if you want to add
this header on entire website you need
to select the entire site or if you want
to add on some pages except all over
let’s suppose you want to add on home
page and not other any page you need to
select the home page manually just click
on add
conditions and
includes entire website
and click on update so
here just need to click on update
congratulations your side part is live
so we are going to refresh it
wow the beautiful header appears here
well this one is looking perfect okay so
here is a beautiful
header completed so if you want to learn
more about this
just subscribe our channel and if you
want to download these type of headers
visit my website i will give you the
link in description also subscribe my
channel to support me i will teach you
how you can create a beautiful footer in
the next video thank you so much take
care bye
For more information check its documentation and also subscribe to the YouTube channel for the latest updates.