00:00:00
hi everyone and welcome in this new
00:00:02
video tutorial today we are going to
00:00:03
create an Elementor header in a
00:00:06
responsive way so it will be a mobile
00:00:08
tablet it will be sticky and we are
00:00:11
going to use flexbox technology and the
00:00:14
best thing is that we are going to use
00:00:15
this cool UI kit called Untitled UI you
00:00:20
will find the link in the description if
00:00:21
you want to get the pro version of this
00:00:23
big figma UI kit there is a ton of
00:00:26
things that you can use for your project
00:00:28
and looks pretty awesome so let's start
00:00:30
with the video
00:00:31
hi everyone so I'm going to show you
00:00:33
what I'm using as a team I'm using a
00:00:35
child theme of the hello team you can
00:00:37
also use only the hello team if you
00:00:39
prefer then on the settings and features
00:00:42
make sure you have flexbox container
00:00:44
activated
00:00:48
on General I usually disable the default
00:00:51
colors and font
00:00:54
click on team Builder and then on header
00:00:57
click the plus button to add a new
00:00:59
header
00:01:01
so I will close this pop-up and then
00:01:04
create my own Header by clicking the
00:01:06
plus button and clicking this little
00:01:07
arrow here so here we are going to add
00:01:10
our elements so click on the plus button
00:01:12
then select the container widget add it
00:01:17
here and as you can see I'm using the
00:01:19
Navigator right click here and then
00:01:22
navigator to show the Navigator if you
00:01:25
don't know what I'm using just check the
00:01:27
Navigator every time it's very useful
00:01:30
so follow along here click on the plus
00:01:32
button
00:01:35
search for a widget in this case the
00:01:37
menu widget
00:01:39
perfect
00:01:40
so now we have the menu widget here
00:01:42
right we are going to click on this
00:01:44
container and then duplicate it so now
00:01:47
we have two containers select the main
00:01:50
container on the top
00:01:52
and then select the direction right
00:01:57
select the the menu widget here and
00:02:00
delete it
00:02:03
right click delete and we're going to
00:02:05
add our buttons here
00:02:08
so search for button
00:02:11
drag and drop the button widget
00:02:14
click on the button widget right click
00:02:17
duplicate and now we have two button
00:02:19
widgets select the container of those
00:02:21
buttons you can select it from here from
00:02:23
the Navigator as you can see and then
00:02:25
again
00:02:27
Direction horizontal on the right and
00:02:30
then we are going to put the Justified
00:02:31
content on the end in this case we have
00:02:35
our structure right now so here we put
00:02:38
on the start by selecting this container
00:02:41
and now let's change the text of the
00:02:43
buttons
00:02:50
so select the buttons and change the
00:02:52
text very easily
00:02:54
great now we have to change the menu
00:02:57
right we don't have a menu on WordPress
00:02:59
so let's create it publish the page add
00:03:02
a condition and select entire site save
00:03:05
and close
00:03:07
perfect
00:03:10
so let's get back to the WordPress admin
00:03:12
panel so I usually select this and WP
00:03:15
dashboard and apply so every time I exit
00:03:18
from this I get here and then I'm going
00:03:21
to appearance menus and I will start
00:03:25
adding my menu so in this case I will
00:03:26
call it main menu or let's call it a
00:03:31
main one okay
00:03:33
great so now I'm going to add all the
00:03:36
the pages in this case I'm going to add
00:03:39
custom links because I don't have pages
00:03:41
in your case you can use pages instead
00:03:44
as you can see now I'm adding all my
00:03:47
pages
00:03:54
okay so I added everything save the menu
00:03:58
and now we should go back to our um you
00:04:02
know header
00:04:04
make sure the menu is saved okay we have
00:04:06
saved it so we are going now Elementor
00:04:09
sorry templates team Builder and you
00:04:13
know Elementor header here is it
00:04:19
click on it
00:04:21
and then edit
00:04:23
great so now click on this little icon
00:04:25
and change the name of this template
00:04:28
header template I will call it menu one
00:04:31
and as you can see anyway we have added
00:04:33
our menu and it's displaying right here
00:04:35
so let's go and add also the logo click
00:04:38
on this container here click on this
00:04:41
icon and select the site log widget drag
00:04:44
and drop it here and now we are going to
00:04:47
style it I'm going to select the pixel
00:04:50
instead of percentage and then give here
00:04:52
give him a width
00:04:54
in this case we're going to select again
00:04:56
the container and then we are going to
00:04:59
select the direction again on the right
00:05:01
and now we are going to change the order
00:05:04
of it so very easily from the Navigator
00:05:07
as you can see we can select the site
00:05:09
logo drag and drop it on the top and now
00:05:12
the order is correct so let's see the
00:05:15
preview
00:05:17
great looks like the structure is done
00:05:21
select the main container and then you
00:05:25
can play with the width if you want so
00:05:27
you can select the the width you want
00:05:29
here I will keep it like this for now I
00:05:31
will change it later and here you can
00:05:33
have it also full weight if you want and
00:05:36
as you can see it's taking the full
00:05:37
weight of the of the whole website
00:05:43
great
00:05:45
so now we are going to try and style
00:05:48
everything
00:05:49
for the design I'm using
00:05:52
um Untitled UI as you can see I'm
00:05:55
putting the link in the description to
00:05:57
get this big UI kit I'm saving now the
00:06:01
logo because I want to add a logo here
00:06:04
I'm using the the UI kit logo so first
00:06:07
update this template and let's
00:06:11
um edit the menu by changing the styling
00:06:15
of the menu so basically I get here on
00:06:18
the design and the UI kit settings and I
00:06:21
check like
00:06:23
um you know the font size and everything
00:06:25
so
00:06:26
with this clicked go on Style
00:06:29
check typography and of course start
00:06:33
adding the typography in this case I'm
00:06:35
going to use enter and the size will be
00:06:37
16 pixel
00:06:40
the weight will be
00:06:42
um let's see semi bolt 600 okay and
00:06:48
we'll also need to change the color
00:06:49
right so let's see what is the color
00:06:52
here
00:06:53
so I'm going to copy the the code color
00:06:57
code right here wait uh where is it
00:07:01
um okay not here sorry but here in the
00:07:04
text color
00:07:05
here is it and now the um the menu items
00:07:09
looks like the design right we don't
00:07:11
have drop downs but anyway let's go to
00:07:13
the buttons and again select the main
00:07:16
color of the button
00:07:18
copy the code and let me go first of all
00:07:22
on the hover because I want to make the
00:07:25
color hovering effect here on this menu
00:07:28
as you can see now the text is changing
00:07:31
the color and I'm going also to remove
00:07:33
the underline because I don't like it
00:07:35
very much so I'm going to remove it so
00:07:38
no
00:07:39
and now as you can see everything is
00:07:41
working fine Mouse over effect and now
00:07:44
is the turn of the buttons click on the
00:07:46
buttons here and start styling it so the
00:07:49
first one actually doesn't have like a
00:07:52
background right it's just looks like a
00:07:54
simple menu item so I select here I
00:07:57
select it here on the design and then I
00:08:00
just keep you know adding The Styling so
00:08:03
style it very quickly
00:08:06
on style change the color of the text
00:08:12
perfect
00:08:13
and then we also need to change the
00:08:16
background color right so the background
00:08:18
type it's basically on the bottom uh
00:08:21
here is it if you want you can disable
00:08:24
it but if you disable it I see usually
00:08:28
that the color doesn't change so I
00:08:29
usually enable it select a white color
00:08:32
as background or you can even make it
00:08:35
transparent so you're sure that there is
00:08:37
no background so I usually do this and
00:08:40
then you can change the typography to
00:08:42
enter of course I usually use
00:08:46
um you know
00:08:47
a general setting for the fonts and
00:08:50
everything but in this tutorial we are
00:08:51
going to basically set up each item so
00:08:55
it's faster
00:08:56
great so here is it and the design looks
00:09:00
the same let me try to check the font
00:09:03
size and everything
00:09:05
um yeah so everything is correct great
00:09:08
so I'm going to copy right click and
00:09:10
paste the style also on the sign in
00:09:13
um button and then
00:09:17
you know change the background by
00:09:19
clicking here we are going to paste the
00:09:22
color so I'm going to get this the color
00:09:24
from the design again
00:09:26
if I remember here is it and okay so we
00:09:31
have this color here
00:09:33
and is the normal
00:09:35
color perfect we need to make the test
00:09:39
why the text sorry White and the hover
00:09:43
effect we need to change it to
00:09:46
um darker color so I'm going to select
00:09:48
the color icon here and then on figma
00:09:51
this UI kit can also have
00:09:55
um the
00:09:56
um how can I call it
00:09:58
the state right so the state could be in
00:10:01
Hover and as you can see now it's darker
00:10:03
so I'm going to get this color here
00:10:06
and copy
00:10:07
and paste it
00:10:10
so you can play around here as you can
00:10:12
see there is a lot of option in this UI
00:10:14
kit anyway let's go back and paste the
00:10:18
darker color and now when I Mouse over
00:10:21
on the sign in Button as you can see
00:10:23
there is the mouse hover effect that's
00:10:25
great
00:10:26
so perfect let's see the preview and
00:10:29
everything looks really cool
00:10:31
maybe the design is not exactly the same
00:10:34
but we will fix that in a moment
00:10:37
so click on the first button
00:10:40
check the hover effect
00:10:42
I'm going to change the text color again
00:10:44
to the Violet so that you actually have
00:10:47
also the login Mouse hover effect and
00:10:50
then the logo let's change the logo now
00:10:53
so update the template and you need to
00:10:56
click on this little Burger menu here on
00:10:58
the left wait
00:10:59
click again and make sure it's boxed
00:11:03
let's say I want to make it box it right
00:11:05
away
00:11:06
so let's see what the figma has as width
00:11:09
right of the mini width so I'm selecting
00:11:12
the menu width and as you can see is it
00:11:17
1440 and I will do the same here so I
00:11:21
will add 1440.
00:11:24
and now I want to change the logo right
00:11:27
so save the template first
00:11:29
then go on the top left Burger menu site
00:11:32
settings and then you're going to change
00:11:35
the site identity and here site logo and
00:11:39
I'm going to upload my logo so I'm going
00:11:42
to use the Untitled logo
00:11:44
and then you need to click update to see
00:11:47
the change
00:11:49
close this with this x button so you get
00:11:52
back to the template and as you can see
00:11:53
now we have our logo right but the size
00:11:56
is not correct so let's click on the
00:11:58
container now and then I'm going to
00:12:01
check
00:12:02
the center right the Align Center so the
00:12:06
logo is now centered vertically then the
00:12:08
width of the logo we are going to set it
00:12:10
up let me check the design so if I
00:12:13
select the logo here it's giving me on
00:12:16
the top right the width and is 142 and
00:12:20
I'm going to add here 142 pixel as you
00:12:24
can see now the logo is correctly sized
00:12:27
and going to update again
00:12:29
now let's click on the button here and
00:12:32
go on style and Border radius we're
00:12:34
going to change it to 8. I don't
00:12:37
remember if it's actually eight but yep
00:12:40
it's actually eight and then we are
00:12:43
going to add the padding right I'm going
00:12:46
to try to add the same padding here
00:12:49
um as the design on figma as you can see
00:12:51
I unlocked
00:12:53
um the linked so I can change the values
00:12:55
for each input box again let me check
00:12:59
this
00:13:03
so I'm checking the font because doesn't
00:13:05
really look the same probably the pixel
00:13:08
padding on the web browser is not
00:13:11
actually looking the same anyway I think
00:13:13
the line height of the the font is the
00:13:15
problem here anyway I don't want to lose
00:13:18
time so I'm going to try and reproduce
00:13:21
this design
00:13:22
um by adding some some pixels so again
00:13:25
click the button and try to play around
00:13:28
with the padding
00:13:42
okay so uh I think I will set it like
00:13:45
this looks a little bit more like the
00:13:46
figma in this case
00:13:48
um and then
00:13:50
um I'm going to try and check again here
00:13:51
the font sizing everything is correct so
00:13:54
let's see the preview it looks a little
00:13:56
bit better okay take your time and make
00:13:58
it same as the design if you want to get
00:14:00
the same exact design so I'm going to
00:14:02
update this
00:14:04
and then
00:14:05
um I'm going to check now
00:14:07
um this little border here and a little
00:14:10
border is a gray color so I'm going to
00:14:13
click here and get the color code and
00:14:16
basically go back to Wordpress
00:14:22
and then select the main container and
00:14:26
you can go on style and add a border so
00:14:28
unlock the link here and add a one
00:14:31
border and then select solid border and
00:14:35
now we can change the color of that
00:14:37
solid Border in the color code we just
00:14:39
got the gray one so now if I check the
00:14:42
preview we have a little Gray Line here
00:14:44
at the bottom that looks really nice so
00:14:46
open again the option update here go on
00:14:50
the bottom left icon for the mobile and
00:14:52
tablet version and now you can select
00:14:55
this menu here and make it full weight
00:14:59
advanced
00:15:00
select the center to align itself
00:15:03
and that's great now if I click on it
00:15:06
the menu is coming down
00:15:08
here is the preview
00:15:13
great so now let's change the settings
00:15:15
click on this icon here okay right click
00:15:20
copy select the container the right
00:15:23
container and then right click paste now
00:15:26
we have our icon here our menu icon if
00:15:29
you click on it it's still working right
00:15:31
and it's still getting the same menu so
00:15:33
I'm going now to select uh here on text
00:15:36
align Center so that when I click on it
00:15:39
it should see you should see it in the
00:15:41
center right not sure why there is not
00:15:44
the right alignment but for now we're
00:15:46
going to use the center
00:15:48
click on this icon here go on the
00:15:50
advanced Tab and here on the responsive
00:15:53
make sure hide on mobile
00:15:57
and we also need to hide on tablet so
00:16:01
make sure this is on hide on tablet is
00:16:03
on perfect
00:16:05
now let's click on the mobile version
00:16:07
here on the top as you can see now we
00:16:09
need to click on the container the first
00:16:11
container make it full weight and then
00:16:15
um we are going to set a percentage but
00:16:18
first do this the same thing to the
00:16:20
second container here so now every the
00:16:22
both of them are full width and we can
00:16:24
set them to be on the same line so click
00:16:27
now this menu item Advanced uh
00:16:30
responsive and make sure this is not
00:16:33
hidden on mobile but hide it in the
00:16:36
desktop version only
00:16:39
like that so make sure this is on
00:16:42
perfect
00:16:44
so let's make sure this menu item here
00:16:46
is hidden correctly so again click on it
00:16:49
and go on Advanced responsive and make
00:16:51
sure tablet and mobile is hidden now
00:16:54
click on the first container and here
00:16:57
select percentage and change it to make
00:17:01
it fit on one line so first we will try
00:17:05
with 50 select the second one percentage
00:17:08
and again fifty percent okay so we need
00:17:12
to play around here a little bit because
00:17:13
it's a little bit complex so I'm trying
00:17:15
to change the values here by selecting
00:17:18
the first and the second container and
00:17:20
as you can see now we have everything on
00:17:22
the same line uh let me see the preview
00:17:25
we have still some problems because
00:17:27
looks like the content is too large and
00:17:30
we are going to change a few things so
00:17:32
first of all the the logo is too big so
00:17:35
I'm going to click the logo and I'm
00:17:37
going to figma to export only the icons
00:17:40
on the mobile version I can show only
00:17:42
the icon Xbox
00:17:44
PNG and select you know
00:17:47
the settings I'm going to export the
00:17:50
logo mark
00:17:52
back to Wordpress and I will be adding
00:17:55
an image widget just drag and drop it
00:17:58
here somewhere and go on the navigator
00:18:00
to make sure it's uh in the correct
00:18:03
order like this so now it's in the
00:18:05
correct order I'm going to click on it
00:18:06
and import my logo Mark select and now
00:18:11
same thing we need to change the pixel
00:18:14
sizing of this and make it a little bit
00:18:16
smaller
00:18:18
great I'm going to take the main logo
00:18:21
and hide it on the mobile version right
00:18:23
so hide it on the mobile version only
00:18:26
and then we are going to select the new
00:18:29
logo the logo Mark and hide it on
00:18:32
um responsive on the desktop and tablet
00:18:36
version okay so the preview will be this
00:18:38
as you can see now make sure the logo
00:18:41
has a link to the main site so click on
00:18:44
the logo link custom URL
00:18:48
and then click on Dynamic tag and site
00:18:51
URL so that when you click on the logo
00:18:53
here you get to the home page right
00:18:55
perfect so select the second container
00:18:58
and let's fix stuff here so as you can
00:19:01
see we played around a little bit with
00:19:02
the with the wheat and we still have
00:19:05
problems the problem is the item inside
00:19:07
of it so we are going to change the item
00:19:09
inside of it and make them a little bit
00:19:12
smaller again I'm trying you need to
00:19:14
test here and as you can see this is a
00:19:17
little it's already a lot smaller and um
00:19:21
in this case we are going to reduce the
00:19:24
buttons in it so click on the first
00:19:25
button
00:19:27
content
00:19:29
Style
00:19:30
and let's change the padding first right
00:19:37
so I'm reducing the padding
00:19:39
um on the top right left and bottom
00:19:45
oops this is too much
00:19:49
so you need to actually play around a
00:19:51
lot with this
00:19:52
to find the best sizing
00:19:56
okay so once you've found it
00:20:00
like this I'm going to remove for the
00:20:03
second button here the login button the
00:20:05
padding so add zero because there is no
00:20:09
you know no padding needed so we save
00:20:11
space
00:20:14
going to click on the first container
00:20:16
second container again playing with the
00:20:19
width
00:20:23
here is it
00:20:26
okay and now with the container selected
00:20:29
make sure the alignment is correct as
00:20:33
you can see from the preview the
00:20:34
alignment is not correct so container
00:20:36
selected go on align items and Center it
00:20:38
so now they are really nicely centered
00:20:42
as you can see now everything is
00:20:43
centered right so we had to play a lot
00:20:46
to to you know to get to this result but
00:20:48
I'm going to show you if you want
00:20:50
Perfection how to actually make it work
00:20:53
better because as you can see the
00:20:56
percentage doesn't really make sense
00:20:58
here because there is a lot of spacing
00:21:00
on the elements so we are going to clean
00:21:03
the space of the main container first so
00:21:06
click on the main container advance and
00:21:09
make sure there is no padding and here
00:21:11
now it's better because we don't have
00:21:14
padding of the main container we have
00:21:16
more space for our
00:21:17
container inside so now let me try to
00:21:21
reduce this there is some default
00:21:24
spacing still somewhere so click on the
00:21:27
main container and go on layout and make
00:21:31
zero gap between elements and now we are
00:21:34
removing all the gaps okay we need to
00:21:37
select the container now if I try to add
00:21:40
80 and here I try to add 20 it's
00:21:44
perfectly perfectly sorry fitting the
00:21:48
header this problem you just got is
00:21:51
because of the default spacing Elementor
00:21:53
adds to all the containers so you need
00:21:55
to clean them up like we just did so now
00:21:58
you've got on tablet everything looked
00:21:59
great on desktop everything looks great
00:22:01
again tablet mobile you can switch
00:22:04
between them and check it and looks
00:22:06
really nice
00:22:07
make sure you save the template and then
00:22:10
select the main container advance and go
00:22:13
on motion effect
00:22:15
sticky and put it to the top update the
00:22:18
template again make sure you have the
00:22:21
container selected on style change the
00:22:24
background color to white and update
00:22:28
great now you can view exit and view the
00:22:32
page so I'm going to do a test page I
00:22:34
made and as you can see I cannot scroll
00:22:37
much because I don't have enough content
00:22:39
but as you can see
00:22:41
um
00:22:42
it's it's sticky right it's following
00:22:44
you a problem that we are seeing right
00:22:47
now is this look like the menu it's a
00:22:51
little bit bugged so let's edit that
00:22:53
again
00:22:54
and select this container here change
00:22:58
the weight okay of it like that
00:23:02
um
00:23:03
then we need to select this other one
00:23:06
and make sure everything that is bigger
00:23:09
than the right one right so here I'm
00:23:11
going to add a 40 just to make things a
00:23:14
little bit more clear and 60 percent and
00:23:18
if I update and test this
00:23:21
everything now will work correctly let's
00:23:24
try it right away
00:23:29
and here you go now it's working thanks
00:23:31
a lot for watching this video and see
00:23:34
you in the next one bye
