This content provides a step-by-step guide on how to build a website header and footer using a web design tool, focusing on layout, global styling, and essential elements like logos, navigation menus, and social icons.
Mind Map
Click to expand
Click to explore the full interactive mind map • Zoom, pan, and navigate
since we haven't created any parts yet
your initial view will look like this
click to add a new header
you can either select one of the
pre-made header templates from the library
library
or create your own just like we'll do in
this course so
close the library and click the settings
cog on the bottom left
to enter the header settings then name it
it
next add a section with two columns and
now as mentioned before both on the home
and about me pages
the header page content and footer together
together
take up a hundred percent of the
viewport's height so it fits perfectly
on the screen
in order to achieve this we need to
control the height of each side part
we'll do this by giving the section a
min height which stands for minimum height
height
and as it sounds make sure that the
section will at least be a certain height
height
by default it's set to 400 pixels let's
change the unit to vh
which stands for viewport height and is
a unit that's relative to the screen's height
height
so exactly what we need set it to 15v edge
edge
now go to widgets and drag and drop the
site logo widget in the left column
the widget looks greyed out since we
haven't set it yet
let's go add it in site settings which
we can access without leaving the editor
simply click the top left menu button
and in site settings
go to site identity here you can change
the site name
and description and add the site logo
and favicon let's set the logo
click here to choose the image then drag
and drop your logo
to upload it to the library then click
insert media
once you're done click update and close
the site settings panel
back in the editor we can see the logo
is updated
as you can see the link is already set
to the site url
which we will soon set as the home page
after we create it
next in the column settings set the
vertical align to middle
great now let's add our menu
go to widgets and drag and drop the nav
menu widget
in the right column you can see that it
doesn't display anything yet
this is because we haven't created a
menu and pages we will start
by creating the pages and then add them
to the menu
click command or control plus e to open
the finder
which is a search bar that offers easy
navigation between different pages
and dashboard settings so you can
perform actions on the fly
such as creating new pages for example
simply type
add new page and while holding command
or control
click to open it in a new tab go to the
new page
and click the gear icon in the bottom
left to enter its settings
then give the page a name i'll name it portfolio
portfolio
then hit publish do the same to add
now let's go back to the header and in
the nav menu widget
click this link over here to create the
menu it will open the wordpress menus
page in a new tab
give the menu a name and click create menu
menu
then add the pages we just created from
the panel on the left
next click save menu and go back to our header
header
let's save this as a draft for now and
refresh the page
now we can find our menu in the
drop-down list
so make sure it's selected and set both
ok it's time to style our menu items we
can do that by giving them custom colors
and typography
but let's use elementor's design system
features to create some global styles
which will save us a lot of time in the
long run as you most likely know
colors and fonts are the building blocks
of a web designer's work
and are assigned to elements
consistently throughout your site
elementor's design system feature allows
you to create a go-to color palette as
well as a collection of font styles
which you can assign to elements
globally and all from one place
making editing easier and a lot more fun
so let's go ahead and create the globals
we are going to use across our website
you can either click here to manage your
global colors directly
or go to site settings and choose what
to manage
and a design system i'll start with the
global fonts
we'll come back to set the primary
headline when i show you how to add an
adobe typekit font to your site
for the secondary headline set the fun
size to 60 pixels weight to 600
and spacing to one
the body text will set to 18 pixels and
give it a line height of 35
then set the size to 14 pixels weight to 600
600
transform to uppercase and give it a
letter spacing of one
great let's click to go back and set up
our global colors
we'll give primary this dark color and
secondary white
then give text this gray color and lastly
lastly
set accent to this pink red color next
click update and close the panel to go
back to the editor
now click the menu widget again and in style
style
for typography select the accent text we
just set
then set the text color to primary and
for hover we'll leave the accent color
as you can see it will display once we
mouse over the links
next select the active color that will
be displayed for the active pages
set it to accent as well lastly
set the horizontal padding to 40 to
space them a bit
when it comes to contact information you
want it bold visible
and standing out on your website so
people can get in touch with you easily
we are going to create a contact button
that will be displayed right next to the menu
menu
and set it to open a pop-up with your
contact form
so drag in a button widget and drop it
under the menu
add the button text over here i'll type contact
contact
and in the style tab let's style it a
bit as you can see
it already comes with some default
styling such as the global accent text
for typography
and the global accent color for the
background which we set up earlier
let's change this to primary and set the
text color to secondary
next we'll set the border radius to zero
so it's a rectangle
and unlink the padding so we can set
them individually
i'll set it to 20 pixels on the top and
great now let's position the button next
to the menu
all we need to do is make a quick change
in the advanced tab
so for the baton widget go to advanced
and in positioning
set it to inline then back in the nav
menu widget
cool this setting allows you to align
elements side by side
in the same column as you can see both
the baton and the nav menu widgets
don't take up 100 of the column's width
anymore just the width of the widget itself
itself
as indicated by the blue line creating
space for more objects to be positioned
next to each other
now click the right column to enter its
settings set the vertical align to middle
middle
and horizontal align to end great
we are done with the header let's click
publish and set the conditions that determine
determine
where this header template is displayed
across the website
by default it's set to display across
the entire site
exactly what we need so hit save and close
close
just like the header we will need a
footer on every page across the site
so let's go back to the theme builder by
clicking the hamburger menu on the top left
left
and this time choose to add a new footer
you can select one of our pro footer
templates from the library
but since we are creating one from
scratch let's close this
and make a start name it first
and then add a section with two columns
and set the content width to 350 pixels
the same we set for the header so they
are aligned
next add a min height of 10vh so the
header and footer
take up 25 the edge together leaving 75
vh for the pages
we'll get to that later we will display
the website's credits in the left column
and the social icons in the right one so
go to widgets
search for and drag the icon list widget
into the left column
delete two items from the list and add
the copyright icon
next type your website link next to it
in my case it will be nickdavis.com
in the style tab select the primary
global color for the icon
and set the size to 15. do the same for
the text color
now search for and drag the social icons
add your personal links to each one and
click the gear icon to display the link options
options
for example select this one to make sure
the link is opened in a new tab
here you can change the shape of the icons
icons
we will select the circle and lastly
align it to the right ok time to style them
them
in the style tab set the color to custom
and for the primary color we'll open the
color picker
and drag the opacity all the way down so
it's transparent
this way we'll only see the social media
icons no matter the section's background color
color
next set the secondary color to primary
size to 18 and spacing to zero
in the hover option for primary color
open the color picker
and drag the opacity all the way down so
it's transparent as well
then set the secondary color to accent great
great
we're done with the footer click publish
and set it to display across the entire
site as well
then hit save and close lastly click on
the hamburger menu
and choose exit to dashboard
next up we'll get familiar with the
Click on any text or timestamp to jump to that moment in the video
Share:
Most transcripts ready in under 5 seconds
One-Click Copy125+ LanguagesSearch ContentJump to Timestamps
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
Most transcripts ready in under 5 seconds
Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.
