Design Beautiful Headers and Footers For Your Toolset Site

   Dario

How to

December 23, 2021
0

Header and footer designs may be subtle, but they make a lot of difference when it comes to the overall appeal of your website. Learn how to create useful and good-looking ones.

The header makes that essential first impression. It catches the attention of the visitor and also establishes your brand. It is also the first place where your customers identify your logo, so it’s important to get right.

Similarly, the footer is where customers get important links and other important information regarding your website.

In this article, Sujay Pawar from the Astra theme covers the step-by-step process of creating a header and footer with Toolset. He uses the Astra theme to illustrate examples but the ideas are the same for any theme.

The Importance of a Website Header

According to researchers from Carleton University, Canada, it takes 50 milliseconds for someone to form an impression of a brand from the header. 

Also, according to research by Nielsen Neiman Group, audiences typically spend 57% of their time in the header before exploring the rest of the page.

That makes a website header prime real estate on the page!

A header typically contains:

  • Logo: The header is where your audience is first introduced to your logo. It is typically at the center or the left corner of the header.
  • Navigation Menu: Here, you add the navigation links to different parts of your website. 
  • Hero Section: The hero section is a fullscreen section above the fold in your website that typically contains:
    • A headline that represents your company 
    • A call to action button that invites your audience to take action

Here is an example of a hero section on the Astra theme’s own website.

An example of a hero section on the Astra theme’s own website

Header Design Best Practices

As headers build that first impression, it’s essential to design the header so it delivers the best user experience. 

Here are some of the best practices when it comes to header design.

Maintain Visual Hierarchy

The way you arrange the elements on your website header contributes to the user experience. You need to design the header so that users can easily interact with the information and everything appears where they expect it.

For example, a logo at the left of the screen received more attention than a logo at the center, according to research by Nielsen Neiman Group. So, keep your logo to the left side of the screen if possible.

Similarly, too many links in navigation may overwhelm visitors. But correct links placed strategically can lead your users to important pages.

Ideal Header Size

The header navigation stays the same for most of your pages. Being on top, it covers the most important real estate of your website. Hence having the correct width for the navigation bar is essential.

We always recommend creating slim header navigation. It makes the user easily view the page content, especially on mobile devices.

The header is where your customers are going to see your logo for the first time so you need it to stand out. Use a logo that complements your brand colors and makes you look professional. You could even try a logo creator that allows you to edit and test different colors.

Make a logo large enough to be noticeable but not large enough to cause distraction. 

Don’t use a logo with colors that clash with your site design and color palette. Either adjust the logo or alter the site design. They must complement each other in order to work. 

Use Readable Fonts

The most popular typefaces are the ones that are the most readable. It is better to use clean and clear fonts that make text easy to read. 

You can also keep words short and use larger fonts so that they are easier to read. For better readability, use a text size of 15-18 pixels. 

Using Sticky Headers

Also known as persistent navigation bars, sticky headers follow you while you scroll through pages. It helps keep visitors oriented and works best when there is an essential conversion element in the header.

For example, in eCommerce stores, the cart is always in front of users. This makes them aware that there is a product in the cart and can help encourage conversion. 

If you have a service website, you can have a Call to Action (CTA) element in the navigation bar. This can be a button to give your company a call, or it can lead to a contact form.

Transparent Header

Transparent headers are popular because they are low-key and provide essential navigation throughout your website without getting in the way.

Transparent headers can be ideal for mobile websites or image-heavy websites but need careful configuration to ensure text is legible and users can clearly see navigation wherever they are.

Use a Call to Action

Call to Action (CTA) buttons encourage readers to take a particular action. When you design a header, make sure that you place a CTA button in a prime position using an attractive design. 

A compelling CTA helps you convert more audience to become leads or customers so you need to get it right.

Responsiveness

Check your header with different screen sizes. With the rise in mobile and tablets, it is highly likely that your audience will visit your website using mobile devices.

Website footers serve an informational purpose. Although most of your audience spends their time in the header, the footer contains links that you wouldn’t normally add to the top navigation.

The footer typically contains the following information:

  • Legal Pages: The legal pages like copyright, privacy policy, terms of service, shipping policy, return policy, and disclaimer.
  • Sitemap: This is a list of web pages on your website. Adding a sitemap helps people navigate through the website.
  • Social Links: Social links help your customers find your social media pages. 
  • Email Opt-in Form: Audiences that reached the end of the page and do not leave are the most qualified ones. Footers are a great place to get visitors to sign up to your email list.
  • Contact Details: You can add the contact details of your business so that potential clients can easily reach out to you.

Here are a few things we consider essential for a well-designed website footer:

Maintain a Consistent Font

While designing the footer, make sure that all the text elements have consistent sizes. This helps with readability and navigation. 

We suggest keeping a font size between the 12 to 16px range.

Avoid Too Many Images

Footers are the area where you don’t need to add a lot of images. Instead just add your logo in the footer to keep the website branding consistent. Avoid long paragraphs or icons too.

How to Create Header Navigation for Your WordPress Website

You can easily customize the header navigation using your theme’s default functionality. 

Here is an example of how you can do it. We’ll use the Astra Theme for building the header.

  1. Go to Appearance → Customize → Header Builder.
Navigating to Astra theme’s Header Builder section in the Customizer
  1. Once you are in the header builder section, you can start customizing the header. Here you can add any element to the title, set navigation, and control the look and feel.
Customizing the header using the header builder
  1. Click on the plus button in the header block editor.
Adding elements to the theme’s header section

You can drag the elements around to change their placing.

  1. You can even add Toolset blocks to the header. To do so, click on the widget options.
  2. Add a new widget by clicking on the plus icon.
  3. Search for “toolset” in the search box to find Toolset blocks that you can add to your header navigation
Adding Toolset blocks to the header

For an in-depth tutorial check out the page on creating attractive header navigation in Astra.

How to Design the Header Section With Toolset

The header section is the segment of a website that appears at the top of every page. As we discussed earlier, this section contains the hook that keeps the audience engaged.

We will be building the header on the Astra theme and Toolset. 

Before Creating the Header Section

  1. Edit the page then go to Astra Settings. You can access the Astra settings menu from the top right corner of the page.
Setting up options before creating a header section
  1. Remove the sidebars. Choose the No Sidebar option from the drop-down.
  2. Make the layout Full Width and Stretched so users can see the complete image.
  3. Disable the page title unless needed as it can cause a distraction.

Now you are ready to build your header section.

Create the Header Section in Toolset

Here’s how to create a beautiful header section with Toolset.

  1. Add a full-width section. To do this, insert the Container block in the page editor.
Adding the Toolset Container block to start designing our header
  1. In the right sidebar, open up the Background section and select an image. Here you can add a new background image to the Container block.
Setting the background image for the Container block in the header
  1. Scroll down to the Advanced Panel and select the full-width option.
Setting the header Container block to be full-width
  1. Expand the Inner Content panel and increase the max-width to the desired header section width. 

You can keep it at 900px or less. Also, set the vertical alignment to the center.

Setting the Container block’s inner content width
  1. Go to the Additional Styles panel and add padding. We recommend adding 80px padding on all sizes so the headline text is readable and not too wide.
Setting the padding for the Container block
  1. Add an Overlay. If your background image is too light, you can add a darker overlay to make the headline and CTA stand out.

To add an overlay, go to the Background panel, scroll down, and find the overlay option. Here you can select the overlay color and the opacity of the overlay.

Setting the overlay color and opacity for the Container’s background

In this panel, you can also fix the image position and add parallax effects to your header section

  1. Add the headline. Click on the plus button in the container to add a headline block. You can customize the headline from the right sidebar.
Adding the headline to the header
  1. Add a Toolset Button block.
Adding Toolset blocks to the header
  1. Add the URL you want your visitors to go to.
Adding the URL to the button
  1. Change the button attributes (colors and typography of the button) from the right sidebar. Go to Style Settings to do this.
Adjusting the button’s style settings

Your header section is now ready and good to go!

Finished header hero section on the front-end

The footer receives the least attention on any web page. However, a visitor who scrolls all the way down to the footer certainly is an interested customer. 

That’s just one reason why the website footer deserves attention.

Here is a step-by-step guide on designing an excellent footer for your website.

  1. Go to Appearance → Customize → Footer Builder.
Navigating to Astra theme’s Footer Builder section in the Customizer
  1. Once you are in the footer builder section, you can start customizing the footer. Here you can add all the elements you need.
Astra theme’s Footer Builder section in the Customizer
  1. Click on the plus widget in the header block editor. 
Adding blocks in the header block editor

You can drag elements around to change their position. You can also add Toolset blocks.

Adding Toolset blocks to the footer area
  1. In the example image, the entire footer falls in one line. You can create different columns for different footer elements. Here’s how:
  1. Click on the gear icon in the footer bar.
  2. Select the number of columns you want in the footer.
  3. Select the footer layout that you want.
  4. Align the footer elements as required.

To learn more, check out the page on creating custom footers in the Astra theme.

There’s More!

This article is a part of an ongoing series where we present interesting and powerful ideas of what you can build with Toolset. We’re publishing these every few weeks, so stay tuned!

Other articles in this series:

About the Author

Sujay Pawar is CEO and Co-Founder of Brainstorm Force, the company behind Astra. He’s passionate about the online space and writes articles to help entrepreneurs and freelancers succeed online.

A father, a Youtube addict, and the brain behind numerous world-class products, you can connect with him on Twitter @sujaypawar.

Feedback? Suggestions?

How do you create your headers and footers? Let us know in the comments.