Completely Free Course

Or log in with email below...

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 sign up with email below...

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

Already Registered? Log In Here

Day 2: Design 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

Elementor Pro is required for this step. The small commission we receive from your purchase helps us keep our tutorials completely free.

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 > Motion Effects > Sticky > Top (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

Elementor Pro is required for this step. The small commission we receive from your purchase helps us keep our tutorials completely free.

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)

FAQ


How do I make my header sticky?

If you would like your header to “stick” to the top of the page when users scroll down the page, you can easily do this with Elementor. To add this feature, edit your header template with Elementor and go to Edit Section > Advanced > Motion Effects > Sticky > Top.

You can choose which devices you want your header to be sticky on by adding/removing the tags found in the “Sticky On” box. For example, you can remove the “mobile” tag so that the header will be sticky on desktop and tablet, but NOT on mobile.

To learn more, watch the video tutorial in Step 2.

How do I add "floating" social media icons to the bottom of the page?

If you want to add social media icons that stick to the footer as users scroll down the page, just follow the following steps:

  1. Edit your footer template and add your social media icons or sharing icons (right-justified works best).
  2. Edit the icon widget and go to Advanced > Motion Effects and next to “Sticky” choose “Botttom” from the drop-down.
  3. Change the “Offset” value to set the amount of padding below the icons when they stick to the bottom of the screen.
  4. If you do not want your icons to appear on mobile, remove the mobile tag next to where it says “Sticky On”.
  5. Save your updated footer template.
How do I create a transparent header?

A transparent header isn’t really possible yet with Elementor.

If you would like a transparent header on your website, you can instead use the default header that’s included in your Astra WordPress theme. You can learn more about their transparent header options here.

If you choose to use Astra’s default header, make sure to deactivate any of your Elementor headers in order to see the default Astra header.

Will the copyright year in my footer update automatically?

Yes, as long as you are using the “dynamic” option in the text editor widget.

Here are the instructions for creating a dynamic year that changes automatically using the text editor widget:

  1. Add a text editor widget to your footer.
  2. In the text editor widget options click the “Dynamic” link and select “Current Date Time” from the drop-down.
  3. Once that is selected, click “Current Date Time” again. Next to “Date Format” choose “Custom” and next to “Custom Format” enter “Y”.
  4. In the “Advanced” section you can add any text you want to appear before or after the year.
Have a question?
Click here to submit your own

Continue To The Next Tutorial Below

Day 2

Design Your Website

Elementor Pro is required for many of our tutorials in Day 2. The small commission we receive from your purchase helps us keep our tutorials completely free.
Your Progress
0

How Can This Challenge Be Free?

Our "Website In A Weekend" challenge is supported by the small affiliate commissions we receive from SiteGround Hosting and Elementor Pro. Other than this, we are not associated with SiteGround or Elementor in any way.