• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WPCity.com

WPCity.com

WordPress Themes & Plugin Reviews, How To Guide & Tips

Menu
  • Blogging
    • Blogging Reviews

      You’re looking for one of the best blogging courses right now. You simply want your business to grow without making critical errors. This is a great time to start or grow a blog.

    • How To

      • Start A WordPress Blog
      • Monetize a WordPress Blog
      • Best Blogging Courses
      • Blog Setup Services
      • Blogging Tools
      • Best WordPress Blogs
  • Web Hosting
    • Web Hosting Review

      Which is the best host for small business owners, and which should you avoid? Read our reviews to find out and see what customers have to say.

       

      Host vs Host

      • SiteGround vs Bluehost
      • SiteGround vs A2Hosting
      • SiteGround vs WP Engine
      • SiteGround vs DreamHost
      • Bluehost vs HostGator
      • DreamHost vs Bluehost
      • HostGator vs GoDaddy
    • Best Hosting

      • Best Web Hosting Providers
      • Best WordPress Hosting
      • Best Web Hosting for Beginners
      • Best Web Hosting for Blogs
      • Best Hosting for Small Business
      • Best Hosting for Food Blogs
      • Best Hosting for Photographers
      • Best Hosting for Travel Blogs
      • Best Hosting for WooCommerce
      • Best Cheap Hosting for Bloggers
      • Best PHP Hosting Providers
      • Best Magento Hosting Providers
    • Others

      • Hostwinds
      • InMotion

       

      WordPress Hosting

      • WPX Hosting
      • SiteGround
      • Bluehost
  • Themes
    • WordPress Themes Review

      Discover the best WordPress themes to choose from for your business and how to pick them wisely. Making your website look the way you want is a robust process. Choose a suitable theme, and the process becomes far easier.

    • Best Themes

      • Best WordPress LMS Themes
      • Best LearnDash Themes
      • Best Multipurpose WooCommerce Themes
      • Best WooCommerce Fashion Themes
      • WordPress Small Business Themes
      • Education WordPress Themes
      • eCommerce WordPress Themes
      • Genesis Child Themes
      • Free Genesis Child Themes
    • VS

      • Genesis Theme vs Astra
      • Genesis Theme vs GeneratePress
  • Plugins
    • Top Plugins

      • Best WordPress Page Builder
      • Best WooCommerce Plugins
    • WooCommerce Plugins

      • Best WooCommerce Plugins
      • Best WooCommerce Coupon Plugin
      • Best WooCommerce Subscription Plugin
      • Best WooCommerce Review Plugin
      • Best WooCommerce Multi Vendor Plugin
    • Others

      • WooCommerce
      • Elementor
      • Genesis Plugins
      • LMS
      • Membership
      • Page Builder
      • WordPress CRM
  • Deals
  • More
    • Reviews

      • HappyForms Review
      • Paid Memberships Pro Review
      • Paid Member Subscriptions Review
      • S2Member Pro Review
      • Wishlist Member Review
      • MemberMouse Review
    • CRM Software

      • Zero BS CRM Review
      • Hubspot CRM Review
      • Agile CRM Review
      • Maximizer CRM Review
      • Zoho CRM Review
      • Capsule CRM Review
    • Guides

      • WordPress Statistics
      • Speed Up WordPress Site
      • Secure A WordPress Website
      • Recover Hacked WordPress Website
      • Install WordPress on Windows
      • Add Custom CSS to WordPress
      • Add Custom Fonts to WordPress
      • Install a WordPress Theme
  • Shop
  • SiteGround Discount
Home » How to Create a Custom Header and Footer With Elementor 2022 (Step by Step)

June 4, 2020 by Editor Team Leave a Comment

How to Create a Custom Header and Footer With Elementor 2023 (Step by Step)

Your website’s design will determine how long visitors will stay on your site. It also determines the impression they will have about the website before even reading its content.

A well-done header and footer, in particular, can give a favorable impression and increase user retention.

For instance, a search bar or navigation menu will enable them to find what they need from your site fast while adding social media buttons will encourage them to share your content.

In this article, we will guide you through using Elementor to create a powerful header and footer for your site. Elementor is a free WordPress page builder that comes with excellent design features.

Once you install the Elementor plugin to your WordPress site, you can use this tutorial to build a header and footer from scratch.

But you can also make your work easier by working with a template from Elementor’s library of pre-designed header & footer templates.

Here’s a quick index to help you navigate this article:

  • Create a Menu From WordPress Dashboard
  • Decide the Basic Layout
  • Create a Blank Header or Footer
  • Create Your Custom Header/Footer
  • Publish Your Custom Header/Footer
  • Conclusion

Let’s dive in.


Create a Menu From WordPress Dashboard (for Header Only)

Head over to WordPress dashboard > Appearance > Menus > Edit Menus.

create a menu from wordpress dashboard
  1. Write your menu name in this box. As we will create a primary menu for our website, write “Primary Menu”. On the other hand, if you want to create a footer menu, type here “Footer Menu”.
  2. Now click on the “Create Menu” button.
  3. Select the pages that you want to show in your primary menu. Check “Select All” if you want to see all the pages.
  4. Next, click “Add Menu”
  5. After that, the pages will appear on the right side. If you want to create a sub-menu under any page, then simply select the page that you want to add as a sub-menu and drag the page a little bit to the right side and drop it.
  6. Select “Primary Menu” from here.
  7. Last, save the changes.

Decide the Basic Layout

In this part, you have to decide the basic layout of your header and footer. An ideal header may contain a site logo, a site title, a menu that contains page links, a search bar, social icons, and more.

On the other hand, an ideal footer menu may contain web page links, a site logo, title, social icons, the official address, a google map, and more.

After deciding the site’s elements, create a UI design of your header and footer where you will place the elements. If you need to, you can use Adobe XD to create the UI/UX of your site.


Create a Blank Header or Footer (or Use an Elementor Template)

Go to WordPress dashboard > Templates > Saved Templates > Add New.

create a blank header or footer in elementor

Now choose ‘Header’ to create a header template. If you want to create a footer template, choose ‘Footer’ instead of using ‘Header’.

Now if you want, you can choose a name for your template or leave this box blank.

select new template type in elementor

This will open the Elementor template library. You can choose a template for your website.

Simply insert a template by clicking the ‘Insert’ button. You can see this insert button when you move your mouse cursor over to a template.

If you like, you can use the default template. Otherwise, you can also redesign the template per your requirements. That will save you a lot of time.

choose a header block from elementor library

On the other hand, you can also design it from scratch. To do this, simply click on the ‘X’ icon to remove the template library.

Now let’s dive into the next step.


Create Your Custom Header/Footer

In this guide, we will create a header that contains a logo and site title, navigation menu, and search bar.

1. Add a Section

Now create a section with three columns that defines the header structure. Our site logo will be on the left side, menu in the middle, and the search bar on the left.

add a section using elementor

If you don’t know how to work with the sections, columns, and widgets, you can read how to get started with Elementor tutorial on our website. To learn how to edit Elementor widgets and design a page, you can also read how to use the Elementor free page builder tutorial.

edit layout section in elementor
  • From the layout tab, you can select different kinds of values of properties.
  • You can fit the content width to boxed or full width, or set a custom size.
  • You can also decide the proportion of columns under the section.
  • The layout or content tab is used to upload contents or elements and to customize some options as well.
  • From the style tab, you can set the color of every element and design it in your own way.

It is mainly used to design the elements of a website.

edit style section in elementor

From an advanced tab, you can set the advanced options of a website, like a margin, padding, motion effects, etc.

You will find content/layout, style, and advanced options for every section, column, and widget. Using these options, you can design your header and footer however you want.

2. Add a Logo

add a logo from wordpress dashboard

The first thing you need to do is add your logo from the WordPress dashboard. To maintain proper guidelines, your current WordPress theme will handle the site identity-related elements like site logo, site title, etc.

You have to set the logo correctly. For doing that, go to WordPress dashboard > Theme customizer > Header > Site identity > Upload your logo.

After that, when you use the ‘Site Logo’ Elementor widget anywhere on your navigation menu, it will pick the logo automatically.

Select the ‘Site Logo’ widget and drop it into the first column.

site logo elementor elements

From the editing options, you will be able to edit the logo according to your requirements. You can change its size, alignment, and more.

edit site logo in elementor

If you have previously added your site title from the WordPress dashboard, the logo will automatically pick the site homepage link. Otherwise, you can also add your custom link to the logo.

3. Add a Navigation Menu

Now drag the ‘Nav Menu’ widget from the left side and drop it into the middle column.

add a navigation menu using elementor elements

As we have created the menu earlier from the WordPress dashboard, the menu will appear when you drop the nav menu widget.

There are some main options on the settings panel that you need to configure.

edit nav menu in elementor

‘Menu’ automatically picks what type of menu you want to create. You have set it from the WordPress dashboard.

‘Layout’ decides if your menu will be horizontal, vertical, or drop-down.

‘Pointer’ gives you the option to set how you want to highlight the page link.

You can also add different types of animation to your menu.

If you select ‘hamburger’ from the toggle button, then your menu will appear when you click on a button.

4. Add a Search Bar

Now let’s add a search bar on the right side of our menu by dropping the ‘Search Form’ widget here.

add a search bar using elementor elements

There are a couple of important options:

edit search form in elementor

Skin: Skin lets you decide what the search bar looks like if it will be classic, minimal, or full screen.

Placeholder: You can leave the search box empty or add some text like ‘Search here’ into the box.

Alignment and size: Alignment decides its position, and you can increase or decrease its size by using the search option.

5. Add More Header/Footer Elements

There are plenty of Elements and widgets that you can use to create a custom header and footer with Elementor. Look up the Elementor library to discover some amazing widgets. These widgets can add more value to your header and footer.

add more header footer elements from elementor

These extra widgets include site title, site map, images, texts, animated headlines, social icon, etc.

Design your header or footer further by using the style and advanced tab options.


Publish Your Custom Header/Footer

After finishing the design, it’s time to publish the header and footer. Click on the ‘Publish’ button on the bottom of the Elementor dashboard.

This is the most basic condition set up to show the header all over the website.

publish your custom header footer

Here is another type of condition to show the popup only on the ‘Contact Us’ page:

condition setting in elementor

After that, this set up shows you how to show a popup across the site except for only one page. According to this third type of condition, this menu will show the entire site without the blog page only.

exclude condition setting in elementor

At last, click on the ‘Save and Close button’

After finishing the configuration process, let’s see how the header is looking.

completed custom header in elementor

Using the same process, you can create a custom footer.


Conclusion: How to Create a Custom Header and Footer With Elementor

You do not need to be a coding expert or hire a web developer to take advantage of the benefits a customized header and footer can bring to your site. Follow this easy step by step guide.

Elementor allows you to create a captivating header and footer, and you can have it appear on one page of your website, selected pages, or every page.

You can redesign one of the templates provided by Elementor to meet your needs. You can add a logo, navigation menu, search bar, social media icons, or any other element or widget that will improve your site’s design and capture your visitors’ attention.

If you have any questions, feel free to talk to us.

Others Elementor Tutorials:

  • How to Get Started With Elementor
  • How to Use the Elementor Free Page Builder
  • How to Use the Elementor Theme Builder
  • How to Add a Popup With Elementor
  • How to Create a Countdown Popup Using Elementor
  • Create a Cookie Consent Popup Using Elementor
  • How to Create an Under Construction Website Using Elementor
  • How to Create a Login Form Popup With Elementor
  • How to Create a Subscribe Form Popup With Elementor
  • How to Create a Related Popup Using Elementor
  • How to Create a 404 Web Page With Elementor
  • How to Create a Mega Menu WIth Elementor

Filed Under: Elementor, Tutorials

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

elementor

wpengine

top wordpress blogs

  • Facebook
  • GitHub
  • Instagram
  • Pinterest
  • Twitter
  • YouTube

Recommended Articles

  • WordPress Statistics
  • Best WordPress Page Builder Plugins
  • Best WordPress Themes for Small Business
  • Best LearnDash Themes
  • Best Education WordPress Themes
  • Best WordPress LMS Themes: Excellent Ways to Manage Learning Content
  • Best WordPress Website Examples for Design Inspiration
  • Essential Addons for Elementor : Is It The Best Elementor Addons Plugin?
  • Genesis Framework Review: Is It Still Worth the Hype?
  • Best Genesis Child Themes
  • Best Genesis Framework Plugins
  • Best Blogging Courses That Will Help You Succeed
  • Best Blog Setup Services
  • Best Multipurpose WooCommerce Themes
  • Best WooCommerce Fashion Themes
  • Best eCommerce WordPress Themes for WooCommerce

Recommended Hosting

  • WP Engine – Managed WordPress Hosting
  • SiteGround – Powerful WordPress Hosting
  • WPX Hosting – Fastest WordPress Hosting

E-mail Newsletter

Footer

Browse Topics

  • Blogging
  • Coupons
  • Elementor
  • Genesis Framework
  • Guide
  • Gutenberg Blocks
  • Hosting
  • Interviews
  • Membership
  • News
  • Plugins
  • Reviews
  • Resources
  • Security
  • Software
  • Themes
  • Tutorials
  • Tips
  • Tech
  • WordPress LMS
  • WP Page Builder
  • WooCommerce

Get to Know Us

  • About
  • Contact
  • Privacy

Search

Copyright © 2023 · WPCity.com

x
x