Completely Free Course

Connect with Facebook

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 Course

Connect with Facebook

or

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

Already Registered? Log In Here

Module 2: Designing 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

The Elementor Pro add-on is required for this step

Watch Our Video Tutorial For This Step

This video will walk you through how to create your header using our Elementor Template Blocks and the Header Footer Elementor plugin.

Video Summary

  • Select your header menu on the templates preview page (0:19)
  • Go to Elementor > My Templates > Header (0:50)
  • Edit your chosen template with Elementor (1:11)
  • If you need to change the menu you can use the menu selector in the sidebar (1:25)
  • Set your header as your global header by going to Save Options > Display Conditions > Add Condition > Publish (1:47)
  • Create a sticky header by going to Edit Section > Advanced > Scrolling Effect > On (2:40)
  • Disable your sticky header on different devices such as mobile (3:00)
  • Add your logo image (3:46)
  • Use a heading widget to add your site name (4:13)
  • Adjusting column widths (4:35)
  • Right-justify the nav menu widget (5:23)
  • Adjust columns on tablet (6:15)
  • Nav menu widget customization options (7:15)
  • Adjusting the drop-down menu distance (7:38)
  • Adjusting nav menu widget animations (8:14)
  • Adjusting the breakpoint on tablet and mobile for the hamburger menu (8:54)
  • Why use a hamburger menu on tablet (9:07)
  • Use display conditions to assign a custom header to a specific page (9:50)
  • Warning message when a header location has already been assigned (10:35)

(I added my header)

Step 3: Add Your Footer Using Elementor


Watch Our Video Tutorial For This Step

This video will walk you through how to create your footer using our Elementor Template Blocks and the Header Footer Elementor plugin.

Video Summary

  • Select your footer on the templates preview page (0:15)
  • Go to Elementor > My Templates > Footer (0:37)
  • The dark-bg-v2 template will use an extra dark background color (1:00)
  • Edit your chosen template with Elementor (1:09)
  • Set your footer as your global footer by going to Save Options > Display Conditions > Add Condition > Publish (2:13)
  • Add an additional call-to-action block to your footer (2:42)
  • Use the “+” sign to insert a template block above an existing section (3:11)
  • Add a background image with a gradient background overlay (3:40)
  • Add the “Waves” shape divider (4:45)
  • Click “Update” to save your footer (5:32)

(I added my footer)

Continue To The Next Tutorial Below

Module 2

Designing Your Website

Module 2 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

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