Completely Free Course

or

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Day 2: Create Your Website

How To Create A Header And Footer With Elementor Pro

Action Plan

Step 1: Create Your Main Menu


Why This Step Is Important

Before you can design your header in the next step, you first need to create your “main menu” and decide which Pages and Posts should be displayed. This menu is what users will use to navigate your site.

Watch Our Video Tutorial For This Step

This video will walk you through how to create a menu using the menu creator found in your WordPress admin.

Video Summary

  • Go to Appearance > Menus (0:45)
  • Create menu name (1:00)
  • Select “Primary Menu” and save (1:13)
  • Choose which pages and posts to add to your menu (1:25)
  • Rename the links in your menu (2:15)
  • Drag-n-drop to adjust the order of your menu (2:40)
  • Indent items to create drop-down menus (2:53)
  • Create additional menus by clicking “Create a new menu” (3:44)

(I created my main menu for my header)

Step 2: Add Your Header Using Elementor

This step will require the Elementor Pro add-on. Please support our site and help keep our tutorials free by purchasing Elementor Pro through this link.

Watch Our Video Tutorial For This Step

This video will walk you through how to create your header using our LaunchParty Theme Builder templates.

Video Summary

  • Select your header template on the Theme Builder Previews page (0:28)
  • Go to Templates > Theme Builder > Header (1:02)
  • Edit your chosen template with Elementor (1:30)
  • If you need to change the menu you can use the menu selector in the sidebar (1:35)
  • In a future video we will show you how to add your logo to the header (2:00)
  • Use a heading widget to add your site name (2:10)
  • Adjusting column widths (2:39)
  • Right-justify the Nav Menu widget (3:05)
  • Drag columns to align the menu next to the header button (3:17)
  • Adjust the header on tablet (3:32)
  • Using the hamburger menu breakpoint on tablet and mobile (3:40)
  • Edit column widths on tablet (4:20)
  • Adjust the header on mobile (4:58)
  • Hiding widgets on mobile (5:08)
  • Set your header as your global header by going to Save Options > Display Conditions > Add Condition > Publish (6:06)
  • Create a sticky header by going to Edit Section > Advanced > Scrolling Effect > On (6:35)
  • Disable your sticky header on different devices such as mobile (6:57)
  • Adjusting Nav Menu widget animations (7:20)
  • Adjusting the drop-down menu distance on desktop, tablet, and mobile (7:38)
  • Use display conditions to assign a custom header to a specific page (8:43)
  • Make sure your header background colors don’t clash with your title section background colors (10:10)

(I added my header)

Step 3: Add Your Footer Using Elementor

This step will require the Elementor Pro add-on. Please support our site and help keep our tutorials free by purchasing Elementor Pro through this link.

Watch Our Video Tutorial For This Step

This video will walk you through how to create your footer using our LaunchParty Theme Builder templates.

Video Summary

  • Select your footer template on the Theme Builder Previews page (0:10)
  • Go to Templates > Theme Builder > Footer (0:45)
  • The dark-bg-v2 templates will use an extra dark background color (1:25)
  • Edit your chosen template with Elementor (1:36)
  • Using the dynamic settings in the Text Editor widget for your copyright year (1:44)
  • Customizing the Social Icons widget (2:47)
  • Changing the footer links using the Icon List widget (3:01)
  • Double check the design on tablet and mobile (3:38)
  • Add an additional call-to-action template to your footer (2:42)
  • Set your footer as your global footer by going to Save Options > Display Conditions > Add Condition > Publish (3:44)
  • How to add the footer to a specific page (4:03)
  • Add multiple sections to your footer and save them globally (4:28)
  • The dark-bg-v2 color can also work well as a header color (4:55)

(I added my footer)

Continue To The Next Tutorial Below

Day 2

Create Your Website

Your Progress
0

Your Achievements

You have earned 0 badges

How Can This Challenge Be Free?

Our challenge is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.