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


Complete The Following Tasks

Create your header menu in your WordPress admin by going to Appearance > Menus.
Create a new menu.
Add any pages and posts you want to appear in your menu.
Edit the names for each page/post.
To create drop-down menus, watch our video tutorial below.

Watch Our Video Tutorial

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.

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.

Complete The Following Tasks

Create a header using Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Header template you want to use for your website header.
In your WordPress admin, go to Templates > Theme Builder and click the Header tab. Find your template and click Edit with Elementor.
Customize your header template on desktop, tablet, and mobile.
Make your header sticky (optional) by going to Edit Section > Advanced > Motion Effects > Sticky > Top.
Using a sticky header means that your header will "stick" to the top of the page as users scroll down the page. I usually disable the sticky header on tablet and mobile by removing those devices from the Sticky On options.
Click Update and set the Display Conditions.
Display conditions will allow you to choose which pages use this header design. To set this design as your site-wide header, go to Update > Add Condition > Entire Site > Save & Close.

In the future you can create additional header designs for specific pages by using the display conditions.

Watch Our Video Tutorial

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.

Complete The Following Tasks

Create a footer using the Elementor Pro's theme builder functionality.
Visit our theme builder preview page to find the Footer template you want to use for your website footer.
In your WordPress admin, go to Templates > Theme Builder and click the Footer tab. Find your template and click Edit with Elementor.
Customize your footer template on desktop, tablet, and mobile.
Click Update and set the Display Conditions.
Display conditions will allow you to choose which pages use this footer design. To set this design as your site-wide footer, go to Update > Add Condition > Entire Site > Save & Close.

In the future you can create additional footer designs for specific pages by using the display conditions.
You Earned A Badge!

Watch Our Video Tutorial

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 Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.