How to make a responsive header with Elementor
Summary
TLDRThis tutorial guides viewers on creating a responsive Elementor header using flexbox technology. It incorporates Untitled UI, a comprehensive UI kit, to design a mobile and tablet-friendly sticky header. The video demonstrates setting up a child theme, activating flexbox, and using Elementor's team builder to add and style menu widgets, buttons, and a site logo. It also covers creating a WordPress menu, adjusting typography, colors, and hover effects to match the UI kit's design. Finally, it ensures the header is sticky on scroll and responsive across devices.
Takeaways
- 😀 The tutorial focuses on creating a responsive Elementor header using flexbox technology.
- 📱 It ensures the header is mobile, tablet-friendly, and sticky to the top of the screen.
- 🛠️ The tutorial utilizes the Untitled UI kit, which is a comprehensive resource for UI design elements.
- 🔗 A link to the Untitled UI kit is provided in the video description for those interested in the pro version.
- 🎨 The tutorial demonstrates how to activate flexbox container in Elementor's settings and features.
- 🏗️ It guides viewers through the process of building the header structure using Elementor's team Builder and header options.
- 🔧 The video shows how to add and style menu widgets, buttons, and the site logo within the header.
- 🖌️ It covers the process of customizing the typography, colors, and hover effects to match the Untitled UI kit's design.
- 📊 The tutorial explains how to adjust the header's layout for different screen sizes, ensuring a responsive design.
- 🔄 It demonstrates techniques for fixing alignment and spacing issues to achieve a clean and polished header design.
Q & A
What is the main focus of the video tutorial?
-The main focus of the video tutorial is to create a responsive Elementor header that works on mobile, tablet, and desktop, using flexbox technology and incorporating a UI kit called Untitled UI.
Which UI kit is recommended for enhancing the design of the Elementor header?
-The video recommends using the Untitled UI kit for enhancing the design of the Elementor header. It offers a variety of design elements that can be used for projects.
What is the first step in creating the header using Elementor?
-The first step is to access the Elementor's Template Builder and then select 'Header' to start adding elements to create the header structure.
How does one add a new header in Elementor?
-To add a new header in Elementor, click the plus button and then select 'Add New'. After that, you can start adding elements to your header.
What widget is used to create the menu in the Elementor header?
-The 'Menu' widget is used to create the menu in the Elementor header. It is added by searching for it and then dragging and dropping it into the desired container.
How can you ensure that the header is sticky on scroll?
-To make the header sticky on scroll, you need to select the main container, go to the 'Style' tab, and then choose the 'Sticky' motion effect, setting it to 'Stick to the top'.
What is the process to add a logo to the Elementor header?
-To add a logo, you first upload the logo image in the WordPress admin panel under 'Appearance' > 'Customize' > 'Site Identity'. Then, in Elementor, you drag and drop the 'Site Logo' widget into the header and adjust its size and alignment as needed.
How does one change the text of the buttons in the Elementor header?
-To change the text of the buttons, select the button widget and edit the text directly in the 'Content' tab or by clicking on the text and typing the new text.
What is the role of the 'Navigator' in Elementor when building the header?
-The 'Navigator' in Elementor provides a visual structure of the elements on the page, making it easier to select and edit specific parts of the header without having to manually click through layers.
How can you adjust the alignment and width of elements within the header?
-You can adjust the alignment and width of elements within the header by selecting the container or element, then using the 'Layout' and 'Style' tabs to modify properties such as 'Align Items', 'Justify Content', and 'Width'.
What is the purpose of disabling default colors and fonts in the Elementor settings?
-Disabling default colors and fonts in the Elementor settings allows for a clean slate when starting a new design, enabling full control over the aesthetics without being influenced by pre-set styles.
Outlines
🛠️ Setting Up a Responsive Elementor Header
The video tutorial begins by introducing the process of creating a responsive Elementor header that works across mobile, tablet, and desktop devices. The presenter plans to utilize flexbox technology and a UI kit called 'Untitled UI' for design elements. The tutorial focuses on using a child theme of the 'Hello Elementor' theme and activating the flexbox container in the theme settings. The presenter guides viewers on how to add a new header using Elementor's template builder, and then proceeds to structure the header by adding containers and widgets such as the menu widget and buttons. The process involves duplicating containers, adjusting their layout, and organizing the elements using the Navigator tool for better visibility and control.
🎨 Customizing the Header with UI Kit and Menu Setup
In this segment, the presenter demonstrates how to customize the header's appearance using the 'Untitled UI' kit, which includes a variety of design elements. The focus is on styling the menu, buttons, and other elements according to the UI kit's specifications. The tutorial covers changing the text, adjusting typography, and applying colors to match the design. The presenter also shows how to create and add a menu in WordPress, which will be integrated into the Elementor header. This includes publishing the page, adding conditions, and saving the menu. The tutorial also covers how to edit the header template in Elementor, add a site logo widget, and style it according to the design requirements.
🔧 Adjusting Logo and Buttons for Consistency
The video continues with the presenter adjusting the logo and buttons within the header to ensure they match the design from the 'Untitled UI' kit. This includes changing the order of elements, updating the template, and uploading a logo that fits the design. The presenter also discusses adjusting the logo's size and alignment, as well as modifying the button's border radius and padding to closely resemble the design from the UI kit. The tutorial emphasizes the importance of previewing the design and making necessary adjustments to achieve a consistent look across different devices.
📱 Optimizing for Mobile and Tablet Views
This part of the tutorial focuses on optimizing the header for mobile and tablet views. The presenter shows how to adjust the menu and logo for smaller screens, ensuring that they are appropriately sized and aligned. The tutorial includes steps for hiding certain elements on mobile and tablet views, adjusting the width of containers, and ensuring that the menu items are full-width for better readability on smaller screens. The presenter also demonstrates how to change the menu icon for mobile views and ensure that the menu functions correctly on all devices.
🔄 Final Touches and Sticky Header Effect
The final part of the tutorial involves making final adjustments to the header, such as cleaning up default spacing in Elementor containers and ensuring that elements are correctly aligned and sized. The presenter also adds a sticky header effect, which keeps the header at the top of the screen when scrolling down the page. The tutorial concludes with a demonstration of the header's appearance and functionality on desktop, tablet, and mobile views, highlighting the responsive nature of the design. The presenter encourages viewers to perfect their design to match the UI kit closely and thanks them for watching the tutorial.
Mindmap
Keywords
💡Elementor
💡Responsive
💡Flexbox
💡UI Kit
💡Sticky Header
💡Menu Widget
💡Child Theme
💡Typography
💡Hover Effect
💡Padding
💡Border Radius
Highlights
Introduction to creating a responsive Elementor header using flexbox technology.
Utilization of Untitled UI kit for design elements.
Enabling flexbox container in Elementor settings for better layout control.
Adding a new header using Elementor's template builder.
Using the Navigator for efficient widget management in Elementor.
Creating a menu widget and organizing it within the header structure.
Duplicating and managing container widgets for header elements.
Adding and styling button widgets for the header.
Adjusting the layout direction and content justification in the header.
Creating and assigning a WordPress menu to the Elementor header.
Incorporating the site logo widget and aligning it within the header.
Customizing the header's design using Untitled UI kit elements.
Styling the menu and buttons with specific typography and colors.
Previewing and adjusting the header for desktop, tablet, and mobile views.
Making the header sticky on scroll for improved user experience.
Troubleshooting and fixing alignment issues in responsive views.
Finalizing the header design with proper padding, alignment, and spacing adjustments.
Conclusion and a call to action for viewers to follow along with the tutorial.
Transcripts
hi everyone and welcome in this new
video tutorial today we are going to
create an Elementor header in a
responsive way so it will be a mobile
tablet it will be sticky and we are
going to use flexbox technology and the
best thing is that we are going to use
this cool UI kit called Untitled UI you
will find the link in the description if
you want to get the pro version of this
big figma UI kit there is a ton of
things that you can use for your project
and looks pretty awesome so let's start
with the video
hi everyone so I'm going to show you
what I'm using as a team I'm using a
child theme of the hello team you can
also use only the hello team if you
prefer then on the settings and features
make sure you have flexbox container
activated
on General I usually disable the default
colors and font
click on team Builder and then on header
click the plus button to add a new
header
so I will close this pop-up and then
create my own Header by clicking the
plus button and clicking this little
arrow here so here we are going to add
our elements so click on the plus button
then select the container widget add it
here and as you can see I'm using the
Navigator right click here and then
navigator to show the Navigator if you
don't know what I'm using just check the
Navigator every time it's very useful
so follow along here click on the plus
button
search for a widget in this case the
menu widget
perfect
so now we have the menu widget here
right we are going to click on this
container and then duplicate it so now
we have two containers select the main
container on the top
and then select the direction right
select the the menu widget here and
delete it
right click delete and we're going to
add our buttons here
so search for button
drag and drop the button widget
click on the button widget right click
duplicate and now we have two button
widgets select the container of those
buttons you can select it from here from
the Navigator as you can see and then
again
Direction horizontal on the right and
then we are going to put the Justified
content on the end in this case we have
our structure right now so here we put
on the start by selecting this container
and now let's change the text of the
buttons
so select the buttons and change the
text very easily
great now we have to change the menu
right we don't have a menu on WordPress
so let's create it publish the page add
a condition and select entire site save
and close
perfect
so let's get back to the WordPress admin
panel so I usually select this and WP
dashboard and apply so every time I exit
from this I get here and then I'm going
to appearance menus and I will start
adding my menu so in this case I will
call it main menu or let's call it a
main one okay
great so now I'm going to add all the
the pages in this case I'm going to add
custom links because I don't have pages
in your case you can use pages instead
as you can see now I'm adding all my
pages
okay so I added everything save the menu
and now we should go back to our um you
know header
make sure the menu is saved okay we have
saved it so we are going now Elementor
sorry templates team Builder and you
know Elementor header here is it
click on it
and then edit
great so now click on this little icon
and change the name of this template
header template I will call it menu one
and as you can see anyway we have added
our menu and it's displaying right here
so let's go and add also the logo click
on this container here click on this
icon and select the site log widget drag
and drop it here and now we are going to
style it I'm going to select the pixel
instead of percentage and then give here
give him a width
in this case we're going to select again
the container and then we are going to
select the direction again on the right
and now we are going to change the order
of it so very easily from the Navigator
as you can see we can select the site
logo drag and drop it on the top and now
the order is correct so let's see the
preview
great looks like the structure is done
select the main container and then you
can play with the width if you want so
you can select the the width you want
here I will keep it like this for now I
will change it later and here you can
have it also full weight if you want and
as you can see it's taking the full
weight of the of the whole website
great
so now we are going to try and style
everything
for the design I'm using
um Untitled UI as you can see I'm
putting the link in the description to
get this big UI kit I'm saving now the
logo because I want to add a logo here
I'm using the the UI kit logo so first
update this template and let's
um edit the menu by changing the styling
of the menu so basically I get here on
the design and the UI kit settings and I
check like
um you know the font size and everything
so
with this clicked go on Style
check typography and of course start
adding the typography in this case I'm
going to use enter and the size will be
16 pixel
the weight will be
um let's see semi bolt 600 okay and
we'll also need to change the color
right so let's see what is the color
here
so I'm going to copy the the code color
code right here wait uh where is it
um okay not here sorry but here in the
text color
here is it and now the um the menu items
looks like the design right we don't
have drop downs but anyway let's go to
the buttons and again select the main
color of the button
copy the code and let me go first of all
on the hover because I want to make the
color hovering effect here on this menu
as you can see now the text is changing
the color and I'm going also to remove
the underline because I don't like it
very much so I'm going to remove it so
no
and now as you can see everything is
working fine Mouse over effect and now
is the turn of the buttons click on the
buttons here and start styling it so the
first one actually doesn't have like a
background right it's just looks like a
simple menu item so I select here I
select it here on the design and then I
just keep you know adding The Styling so
style it very quickly
on style change the color of the text
perfect
and then we also need to change the
background color right so the background
type it's basically on the bottom uh
here is it if you want you can disable
it but if you disable it I see usually
that the color doesn't change so I
usually enable it select a white color
as background or you can even make it
transparent so you're sure that there is
no background so I usually do this and
then you can change the typography to
enter of course I usually use
um you know
a general setting for the fonts and
everything but in this tutorial we are
going to basically set up each item so
it's faster
great so here is it and the design looks
the same let me try to check the font
size and everything
um yeah so everything is correct great
so I'm going to copy right click and
paste the style also on the sign in
um button and then
you know change the background by
clicking here we are going to paste the
color so I'm going to get this the color
from the design again
if I remember here is it and okay so we
have this color here
and is the normal
color perfect we need to make the test
why the text sorry White and the hover
effect we need to change it to
um darker color so I'm going to select
the color icon here and then on figma
this UI kit can also have
um the
um how can I call it
the state right so the state could be in
Hover and as you can see now it's darker
so I'm going to get this color here
and copy
and paste it
so you can play around here as you can
see there is a lot of option in this UI
kit anyway let's go back and paste the
darker color and now when I Mouse over
on the sign in Button as you can see
there is the mouse hover effect that's
great
so perfect let's see the preview and
everything looks really cool
maybe the design is not exactly the same
but we will fix that in a moment
so click on the first button
check the hover effect
I'm going to change the text color again
to the Violet so that you actually have
also the login Mouse hover effect and
then the logo let's change the logo now
so update the template and you need to
click on this little Burger menu here on
the left wait
click again and make sure it's boxed
let's say I want to make it box it right
away
so let's see what the figma has as width
right of the mini width so I'm selecting
the menu width and as you can see is it
1440 and I will do the same here so I
will add 1440.
and now I want to change the logo right
so save the template first
then go on the top left Burger menu site
settings and then you're going to change
the site identity and here site logo and
I'm going to upload my logo so I'm going
to use the Untitled logo
and then you need to click update to see
the change
close this with this x button so you get
back to the template and as you can see
now we have our logo right but the size
is not correct so let's click on the
container now and then I'm going to
check
the center right the Align Center so the
logo is now centered vertically then the
width of the logo we are going to set it
up let me check the design so if I
select the logo here it's giving me on
the top right the width and is 142 and
I'm going to add here 142 pixel as you
can see now the logo is correctly sized
and going to update again
now let's click on the button here and
go on style and Border radius we're
going to change it to 8. I don't
remember if it's actually eight but yep
it's actually eight and then we are
going to add the padding right I'm going
to try to add the same padding here
um as the design on figma as you can see
I unlocked
um the linked so I can change the values
for each input box again let me check
this
so I'm checking the font because doesn't
really look the same probably the pixel
padding on the web browser is not
actually looking the same anyway I think
the line height of the the font is the
problem here anyway I don't want to lose
time so I'm going to try and reproduce
this design
um by adding some some pixels so again
click the button and try to play around
with the padding
okay so uh I think I will set it like
this looks a little bit more like the
figma in this case
um and then
um I'm going to try and check again here
the font sizing everything is correct so
let's see the preview it looks a little
bit better okay take your time and make
it same as the design if you want to get
the same exact design so I'm going to
update this
and then
um I'm going to check now
um this little border here and a little
border is a gray color so I'm going to
click here and get the color code and
basically go back to Wordpress
and then select the main container and
you can go on style and add a border so
unlock the link here and add a one
border and then select solid border and
now we can change the color of that
solid Border in the color code we just
got the gray one so now if I check the
preview we have a little Gray Line here
at the bottom that looks really nice so
open again the option update here go on
the bottom left icon for the mobile and
tablet version and now you can select
this menu here and make it full weight
advanced
select the center to align itself
and that's great now if I click on it
the menu is coming down
here is the preview
great so now let's change the settings
click on this icon here okay right click
copy select the container the right
container and then right click paste now
we have our icon here our menu icon if
you click on it it's still working right
and it's still getting the same menu so
I'm going now to select uh here on text
align Center so that when I click on it
it should see you should see it in the
center right not sure why there is not
the right alignment but for now we're
going to use the center
click on this icon here go on the
advanced Tab and here on the responsive
make sure hide on mobile
and we also need to hide on tablet so
make sure this is on hide on tablet is
on perfect
now let's click on the mobile version
here on the top as you can see now we
need to click on the container the first
container make it full weight and then
um we are going to set a percentage but
first do this the same thing to the
second container here so now every the
both of them are full width and we can
set them to be on the same line so click
now this menu item Advanced uh
responsive and make sure this is not
hidden on mobile but hide it in the
desktop version only
like that so make sure this is on
perfect
so let's make sure this menu item here
is hidden correctly so again click on it
and go on Advanced responsive and make
sure tablet and mobile is hidden now
click on the first container and here
select percentage and change it to make
it fit on one line so first we will try
with 50 select the second one percentage
and again fifty percent okay so we need
to play around here a little bit because
it's a little bit complex so I'm trying
to change the values here by selecting
the first and the second container and
as you can see now we have everything on
the same line uh let me see the preview
we have still some problems because
looks like the content is too large and
we are going to change a few things so
first of all the the logo is too big so
I'm going to click the logo and I'm
going to figma to export only the icons
on the mobile version I can show only
the icon Xbox
PNG and select you know
the settings I'm going to export the
logo mark
back to Wordpress and I will be adding
an image widget just drag and drop it
here somewhere and go on the navigator
to make sure it's uh in the correct
order like this so now it's in the
correct order I'm going to click on it
and import my logo Mark select and now
same thing we need to change the pixel
sizing of this and make it a little bit
smaller
great I'm going to take the main logo
and hide it on the mobile version right
so hide it on the mobile version only
and then we are going to select the new
logo the logo Mark and hide it on
um responsive on the desktop and tablet
version okay so the preview will be this
as you can see now make sure the logo
has a link to the main site so click on
the logo link custom URL
and then click on Dynamic tag and site
URL so that when you click on the logo
here you get to the home page right
perfect so select the second container
and let's fix stuff here so as you can
see we played around a little bit with
the with the wheat and we still have
problems the problem is the item inside
of it so we are going to change the item
inside of it and make them a little bit
smaller again I'm trying you need to
test here and as you can see this is a
little it's already a lot smaller and um
in this case we are going to reduce the
buttons in it so click on the first
button
content
Style
and let's change the padding first right
so I'm reducing the padding
um on the top right left and bottom
oops this is too much
so you need to actually play around a
lot with this
to find the best sizing
okay so once you've found it
like this I'm going to remove for the
second button here the login button the
padding so add zero because there is no
you know no padding needed so we save
space
going to click on the first container
second container again playing with the
width
here is it
okay and now with the container selected
make sure the alignment is correct as
you can see from the preview the
alignment is not correct so container
selected go on align items and Center it
so now they are really nicely centered
as you can see now everything is
centered right so we had to play a lot
to to you know to get to this result but
I'm going to show you if you want
Perfection how to actually make it work
better because as you can see the
percentage doesn't really make sense
here because there is a lot of spacing
on the elements so we are going to clean
the space of the main container first so
click on the main container advance and
make sure there is no padding and here
now it's better because we don't have
padding of the main container we have
more space for our
container inside so now let me try to
reduce this there is some default
spacing still somewhere so click on the
main container and go on layout and make
zero gap between elements and now we are
removing all the gaps okay we need to
select the container now if I try to add
80 and here I try to add 20 it's
perfectly perfectly sorry fitting the
header this problem you just got is
because of the default spacing Elementor
adds to all the containers so you need
to clean them up like we just did so now
you've got on tablet everything looked
great on desktop everything looks great
again tablet mobile you can switch
between them and check it and looks
really nice
make sure you save the template and then
select the main container advance and go
on motion effect
sticky and put it to the top update the
template again make sure you have the
container selected on style change the
background color to white and update
great now you can view exit and view the
page so I'm going to do a test page I
made and as you can see I cannot scroll
much because I don't have enough content
but as you can see
um
it's it's sticky right it's following
you a problem that we are seeing right
now is this look like the menu it's a
little bit bugged so let's edit that
again
and select this container here change
the weight okay of it like that
um
then we need to select this other one
and make sure everything that is bigger
than the right one right so here I'm
going to add a 40 just to make things a
little bit more clear and 60 percent and
if I update and test this
everything now will work correctly let's
try it right away
and here you go now it's working thanks
a lot for watching this video and see
you in the next one bye
تصفح المزيد من مقاطع الفيديو ذات الصلة
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 10
next.js in urdu - 9 - Navbar Tutorial (Step-by-Step)
Create Portfolio website HTML & CSS only ✅ Part - 1
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3
Responsive HTML Table With Pure CSS - Web Design/UI Design
5.0 / 5 (0 votes)