Since the header and footer are separate website areas from your content, they can be edited independently. Thus, you can create your header and footer with Astra and still use Elementor for your content. On the other hand, you can design your whole website, including the header and footer, with Elementor only.

Whatever way you choose, this document will show you how to get the most out of Astra and Elementor combo.

Why Are Header & Footer Important?

The header and footer are the first and last sections of your website and thus very important. The header is the first thing visitors see on your website, and the footer is usually the last.

They are located on all (or most) website pages and posts containing branding, navigation, and other important information.

Hence, a well-designed header and footer are essential for excellent user experience, brand awareness, and conversion. 

How Does Astra Theme Work With Elementor?

The Astra Theme is fully compatible not only with free Elementor but also with Elementor Pro and its Theme Builder. In addition, when you start building a page with Elementor, Astra will automatically set all options perfectly for Elementor.

Firstly, It’s important to understand that you use the Elementor to add and design your page or post content. Secondly, a theme is the “glue” keeping your website together. The WordPress themes are a canvas for your website – a framework that gives it structure and sets basics.

Thus, the Astra Theme will help you quickly set your website layout, fonts, colors, sidebars, breadcrumbs, featured images, etc. Further, Astra will provide you with options to integrate with some third-party plugins you might need, like WooCommerce. In addition, it will give you options to customize WordPress (e.g., Blog Archive) or third-party plugin pages (e.g., Shop).

Also, since the free version of Elementor comes without the Theme Builder, you are limited to editing only content. At the same time, you can build your header and footer with Astra Theme for free, and without additional plugins.

Header Footer Builder and Elementor

In truth, designing a great header and footer can make a real difference for your website. Therefore, Astra Theme comes with Header Footer Builder already included and ready to use.

The header and footer created with Astra will be perfectly integrated with the content you add with Elementor. Since the free version of Elementor has no options for header and footer building, this will be your default option.

Furthermore, all of our Starter Templates for Elementor are created this way. When importing any Starter Template for Elementor, you’ll get a website where only content is created with Elementor. Header and footer will be built with Astra’s Header Footer Builder.  

Astra Header and Footer Builder

Step 1 – To build your header, navigate to Dashboard > Appearance > Customize > Header Builder. Similarly, to start building your footer, navigate to the Footer Builder option;

Step 2 – To build your header or footer just add, style, and drag different elements to the desired position. Further, you can individually set each element you added. All other Customizer settings will be applied automatically;

Step 3 – Next, design your header and footer responsively by switching the viewport (desktop, tablet, and mobile) and making adjustments. You can use different elements, positions them differently, and modify settings for each viewport;

Step 4 – Click the “Publish” button to save changes.

Once you have created your header and footer, you can add content to your pages and posts using Elementor. 

How To Create Header and Footer With Elementor (Free)?

Alternatively, you can choose to build your Header and Footer using Elementor. 

To do this, you will need to install the “Elementor Header & Footer Builder” plugin additionally. Then, you can and replace the default Astra header and footer with the ones created with Elementor. To illustrate, we’ll show you how to add the Elementor header for your entire website.

You can install the plugin by navigating to Dashboard > Plugins > Add New. In the search bar on the top right, type in “Elementor Header & Footer Builder”. Click on the “Install” button.

Create Template (Header or Footer)

Firstly, you need to create a new template (header or footer) and design it with Elementor. For this, you need both Elementor and Elementor Header & Footer Builder plugins activated.

Step 1 – Navigate to Dashboard > Appearance > Elementor Header & Footer Builder and click on the “Add New” button;

Step 2 – Give the template a name, and click on the “Edit with Elementor” button to start designing your template. 

Step 3 – Add your design and click on the “Publish” button to save it. Click on the Elementor menu and “Exit to Dashboard” to return to your template settings.

Add Template To Your Website

Now that your design is ready, you need to set up your template to display it on the front end:

Step 1 – Select the type of element you want to create: Header or Footer. For our example, we choose to create the header;

Step 2 – Add the display rules. For “Display on” choose “Entire Website”, and for the “User Roles” select “All”. Choosing these options will add this header or footer to all of your website’s pages and posts;

Step 3 – Click on the “Publish” / “Update” button to save changes.

Now you have set your Elementor header and footer. Keep in mind that adding individual widget settings in the Elementor editor, will overwrite any Customizer settings. To change this, you’ll need to edit the element. 

FAQs

The update came with the fix for this, but the fix is not applied automatically to existing websites. Learn how to apply it to your website.

Why Do I Need This Improvement?

Previously the right margin wasn’t applying on the front end for the Footer Widget elements in your Footer Builder. 

Though Astra 3.6.7 update comes with the fix, this won’t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when the theme is updated. 

As mentioned, for the existing website, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don’t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_apply_right_margin_footer_widget_css', '__return_true' );

If you are not sure how to add this code, please check this article.

Following the easy steps in this article, you can expect the end result like the one in the screenshot below – a header that displays your logo in the middle with your menu items distributed on the left and the right side.

How To Do This?

To achieve this header design with the Astra theme, you will need to use Header Builder and three elements:

• Site Identity & Logo
• Primary Menu
• Secondary Menu

No matter if you started building your website from scratch or imported one of our Starter Templates, the default header setup you will most likely see in the Header Builder consists of the “Site Identity & Logo” element on one side, coupled with the “Primary Menu” element on another:

To start building your header with a centralized logo, let’s first create your menus.

Creating Primary and Secondary Menu

Navigate to Appearance > Customize > Menus (you can also access menu setup via Dashboard). Follow these steps to start building your menus (you will need to build two):

Step 1 – Click on the “Create New Menu” button to create a menu:

Step 2 – Name your menu. You can name the menu as you wish. In order to track things easier, we named this first menu “Left Menu” as we will add this one on the left side of the Logo in the header

Step 3 – Select menu items you wish to add to the menu. If you need to create any new items, you can simply click on the “Add Items” button.

Step 4 – Scroll down to the “Menu Locations” section and mark this menu as “Primary Menu”:

Step 5 – Return to the Appearance > Customize > Menus and repeat steps 1 to 3 to create your second menu. We named this menu “Right Menu” but you can name it as it suits you:

Step 6 – Scroll down to the “Menu Locations” section and mark this menu as “Secondary Menu”:

Build Your Header

Now that you’ve created your menus, navigate to Appearance > Customize > Header Builder and follow these steps to create your header:

Step 1 – Add your “Site Identity & Logo” element to the middle section of the Primary Header, and add your Logo. The primary header is the middle header in your visual header builder:

Step 2 – Finally, to create your header with a centrally positioned logo as previously shown, add your Primary and Secondary Menu elements. Click to the left section of the Primary Header and add the Primary Menu element. Click on the right and add the Secondary Menu too. Click “Publish” to save your header.

Alternatively, you can position menus closer to the sides of your website by moving (drag-n-drop) Primary and Secondary Menu elements:

Step 3 – This step is optional and it will depend on your Logo design and other Site Identity options (if you activated Site Title or Tagline). You can add margins to your Site Identity & Logo element to make your logo equally distanced from both menus. Using percentage (%) as a size unit will make sure this distance looks good on all screens.

The Astra Theme comes with a drag & drop Header Footer Builder. With Header Builder, you can manage your site identity using the Site Identity & Logo element. This document will show you how to easily set your Logo and other Site Identity elements. These include:

• Logo
• Retina Logo
• Logo for mobile devices
• Site Title
• Site Tagline
• Site Icon (Favicon)

You can find the Header Builder by navigating to Appearance > Customize > Header Builder. To access the element settings just click on the element in the elements list on the left, or in the visual header builder under the preview.

Logo

You can add your Logo under the General tab. To add or change your logo, you can follow these steps:

Step 1 – Click on the Logo area and upload a file or select a logo from your Media Library. You can add logos as JPG, PNG, and SVG.

Step 2 – Though this step is optional, enabling a Different Logo For Retina Devices will ensure your logos look great on devices with retina screens. It’s advisable to upload at least two times larger so your logos won’t be blurred on high-definition screens. You can find out more about the retina logo in this article. If you decide not to use this option, your website will show your primary logo (from Step 1) on retina screens too.

Step 3 – Once your logo is added, you can choose the Logo Width. This will set the size of your logo, as the height will be automatically calculated based on the width. You can also set different logo widths for desktop, tablet, and mobile by clicking the responsive editing icon to switch between these screens.

Step 4 – If your design requires a different logo on mobile devices, you can switch to mobile editing and enable Different Logo For Mobile Devices to add a different logo only for mobile devices. Keep in mind that the mobile logo you set will be used for both tablets and mobile phones. You can find more about creating a mobile header in this article.

Step 5 – You can switch to the Design tab of the element and set Logo margins.

Site Title and Tagline

Site Title is a name you set for the website, while the Tagline is the short one-line description.

Step 1 – You can make these visible beneath your logo by enabling their respective options within the General tab of the Site Identity & Logo element. You can enable these separately for desktop, tablet, and mobile.

Step 2 – Usually, site title and tagline are added when creating a new website at Dashboard > Settings > General. If you want to modify these, you can do it directly in the element settings without leaving your Customizer.

Step 3 – Also, if you would like to position your site title and tagline on the right side of your Logo, you just need to enable the Inline Logo & Site Title option.

Step 4 – If you switch to the Design tab of the element, you will find the options for changing the Color and Font Size of the Site Title and Tagline.

Site Icon (Favicon)

This is a small image icon that can be seen in the tab of a web browser, bookmark bars, and WordPress mobile apps. You can set it with the site icon option. The recommended size for a favicon is 512 pixels. Learn more about Site Icon here.

When a user clicks on the toggle button, it brings an off-canvas window on the screen with all content you added inside.

As it needs a small space in the header, this is a great way to display content in the header.

This beneficial Header Builder element is a premium Astra feature and available since Astra Pro version 3.3. Before this version, you were required to use custom code to bring a toggle button on the desktop. But not anymore!

Now you can easily display off-canvas content on desktop and customize it completely with the new Toggle Button element.

Here is a video that explains how to use this element:

If you prefer a written version, let us dive in!

How To Add Toggle Button for Desktop

As this is a premium feature, make sure to have the Astra Pro plugin updated and activated. Follow the below steps:

Step 1: Open Header Builder and click on a section where you wish to add a toggle button. From the element list, choose Toggle Button.

Step 2: Now you can choose content i.e. elements to display inside a window that appears when users click on the toggle button.

You will observe the off-canvas section in the header builder as soon as you add the toggle button.

Click on the off-canvas section and a list of elements will open up.

Choose the required elements from this list and they will be automatically added to the off-canvas section. You can add various elements such as buttons, search, widgets, HTML, social icons, the off-canvas menu, and so on.

To customize these elements simply click on them and all customization options will open up in the customizer.

By default, the off-canvas menu will display all pages on your website just like the default WordPress menu. You would need to create a dedicated off-canvas menu or assign any existing menu as an off-canvas menu.

If you are not sure how to create and assign off-canvas menu, here are the steps –

• Click on the Off-Canvas Menu
• In the customizer, click on ‘Configure Menu from Here’
• From the ‘Off-Canvas Menu’ dropdown, select the required menu. If the required menu is not in the list you can even ‘Create New Menu’ and assign it as off-canvas.

Step 3: Once you add all required content inside the off-canvas section, you can design the toggle button as per your choice.

To customize the toggle button, click on the button in the header builder and all design options will promptly open in the customizer.

Once there, you can set the following:

• Icons – Choose from three different designs
• Toggle Button Style – Choose from three pre-built styles for button
• Menu Label – You can add a label for the menu button here.

Click on the Design tab to set the size, color, margin for the toggle button.

Step 4: You can customize the off-canvas window and set the layout and colors for it. To do so, click on the gear icon for Off-Canvas, and the options will open up in the customizer.

Under the General tab you can set the type, and position alignment, while under Design tab you can set the colors and spacing.

This feature allows you to add navigation for your multilingual website in the header or footer. This article will help you understand how to use it with WPML and other third-party translation plugins.

Below, you will find the steps to add and configure the Language Switcher element in the header. You can follow similar steps to add it to the footer.

Step 1 – In the customizer, visit Header Builder. Click on the section where you wish to add navigation for different languages. From the element box, click on the Language Switcher element.

Step 2 – When you open the Language Switcher settings you will observe two options:

1. WPML
2. Custom

You will only see this option if you have WPML active on your website.

Language Switcher has in-built support for the WPML plugin. It will automatically fetch available languages from WPML and display them as navigation.

If you are using s plugin other than WPML, you can choose the custom option and add a URL for the translated version of the website.

Language Switcher with WPML

Once you add Language Switcher to the header, choose the type – WPML.

This will automatically fetch the languages you added with WPML.

If you wish to add more languages, you can add them with WPML settings. For this, visit Dashboard > WPML > Languages > Site Languages > Add / Remove languages. From the list of languages select the required ones and click on save.

All selected languages from the step above will be available in your Header Builder with the Language Switcher.

You can customize the look of the language navigation with following options:

• Layout: You can either display all languages in a horizontal or vertical manner. Horizontal layout mostly applies well to the header while the vertical layout is often better suited for the footer.
• Show Country Flag: This will display flags for countries associated with the chosen language. It helps users to quickly spot the preferred language they are looking for.
• Show Name: This will display the full name for the language.
• Show Translated Name: This will display the translated names for all languages when a specific language is selected. For example – you added 4 languages, let us say English, French, German, and Hindi. When you select the German language, all languages will show their translated names in German.
• Show Language Code: This will display the language code for each language. For example – English (en), French (fr), German (de), and Hindi (hi).

Under the Design tab, you can manage spacing, typography, and the size of the items.

Language Switcher with Other Translation Plugins

If you are using any plugin other than WPML, please follow the below steps to add language navigation:

Step 1 – Navigate to Customizer > Header Builder > Language Switcher. Here, select the language from the dropdown and click on the “Add Language” button. You can repeat this step for all languages you wish to add.

Step 2 – Next, click on the language bar for a specific language. This will expand the language settings, allowing you to change its label (if needed) and set the appropriate URL. This URL is actually a translated version of your website (like https://www.yoursite.com/en/) and you can find it in your translation plugin. Just paste the URL there for the respective language.

Step 3 – You can manage other things from the above settings like the horizontal/vertical layout, show country flag, and display language name.

Step 4 – Under the Design tab, you can manage the spacing, color, and typography for the items.

Color Picker UI Updated

You will now find the Color Picker to be right outside having Normal/Hover color fields rather than inside the edit boxes and under the Normal and Hover color sections.

This means that you can modify the color of the respective options much faster with fewer clicks.

Spacing Control Design Updated

The Spacing control options include the Padding and Margin options. We have updated this design to give it better and cleaner look.

Cleaner UI with Divider between All Controls

We added spacing and dividers between all controls, dividing them into sections. We did this to make the Customizer more intuitive and to make it easy for users to understand and use the options.

Drag-Drop Meta Structure Updated!

We simplified the way Drag-Drop meta structure so it looks cleaner.

Other improvements

Apart from the above mentioned changes you will notice some additional major improvements.

Slider Input Control Updated

The slider input control has been updated with the WordPress Range Control option.

Dropdown/Select Groups converted to Multi-button Options

We have reduced the number of clicks need to set any dropdown option. Now you can simply select the options from the Multi-buttons and set up your pages in no time. Also, it gives you an overview of all available choices straight away.

Checkbox converted to WordPress Toggle Control

We moved from the Checkbox options on the left to the default WordPress Toggle Control options for quickly enabling and disabling options.

Align Select field converted to Multi-Button control

Just as the above Select options were updated we have converted the Align fields to a Multi-Button control for quicker selection.

Let us understand a bit more about these options.

If you wish to know how to design either a header or footer with the visual builder, please refer to the following articles:

• How To Create a Header With Astra Header Builder?
• How To Create a Footer With Astra Footer Builder?

Clone Header Footer Elements

As the name suggests, this option allows you to clone/duplicate elements of the Header and Footer Builder.

Cloning will create an exact copy of elements with text and style. This will save you time to design similar elements again from scratch. You can clone and easily place elements at a required position just with a single drag-n-drop movement.

In the Header and Footer builder, when you hover over the elements you can see little icons to clone the elements. Click on this to clone the element you wish to duplicate.

Delete Header Footer Elements

The Delete option lets you remove unwanted elements permanently from the customizer. Once deleted these elements can not be retrieved.

Just hover over the element and click on the bin icon to delete the element.

Delete and Remove: The Difference

You will observe the close(x) icon beside every element. This option will just remove the element from the visual builder temporarily. You can insert the element again by clicking on the plus (+) icon in the visual builder.

If you are an existing Astra customer and updating Astra from version 2.6 to 3.0, this article will help you to get started.

Note (for Astra Pro users) – Make sure to update both Astra theme and Astra Pro plugin to version 3.0 to use the new Header/Footer builder.

How to enable a new Header/Footer builder?

Once you update the Astra theme and Astra Pro to version 3.0, you would first need to activate the new Header/Footer builder.

To activate it, visit Appearance > Astra Options and click on the button Use New Header/Footer Builder.

This will activate the Header/Footer builder and add new options in the customizer. You can visit the customizer and explore new options under the Header Builder and Footer Builder tabs.

Note that, new Header/Footer builder brings a new structure to the customizer. This offers an advanced visual builder that replaces the old header and footer settings. With this, your old header/footer design might have some changes to adjust to the new structure. Read this article further to see all expected changes with a new structure.

In case you wish to continue with the old header/footer settings you can skip activating the new one.

How can I rollback to the old header and footer settings?

In case you activated the new Header/Footer builder and need to go back to old settings and design, you can roll back easily.

Go to Appearance > Astra Options, click the button Use Old Header/Footer to switch back to old controls and design.

You can continue working with Astra 3.0 and still use the old header and footer settings. But we recommend switching to a new Header/Footer Builder for future benefits.

I Don’t See the Switch/Rollback Button

If you want to do this on a completely new website and using the newest version of the Astra theme, there is a possiblity that you won’t see the switch button mentioned above.

In this case, you’ll need to use a filter. Please add the following custom code to the functions.php file of your Child Theme:

add_filter( 'astra_is_header_footer_builder_active', '__return_false' );

Also, you can use this code to switch between the old Astra header and footer options and a new Header Footer Builder if you wish to test it out. To do this just modify the bolded part of the code:

• Using false > Enable old Astra header and footer
• Using true > Enable new Header Footer Builder

If you don’t have your Child Theme installed, please check this article on how to do it. 
If you are not sure how to add this code, please check this article.

Why I should not rollback and continue using the new Header/Footer Builder?

Astra’s future updates will include enhancement for the new Header/Footer builder only.

Enhancements and fixes for old header and footer controls will no longer be released with Astra future updates.

Moreover, the new Astra Header/Footer builder offers the most advanced way to design creative headers and footers. It is an easy and powerful visual builder that gives you a great user experience.

So we recommend you switch to a new Header/Footer builder and create an advance header/footer for your website.

What will I retain?

When you switch to the new Header/Footer builder, your old header/footer design will be adjusted in the new 3-row structure. This new structure will try to retain the exact old header/footer design. You might observe small changes in header/footer design but most of the elements and design will be retained.

Some of the header/footer elements that are primarily needed will be retained. Like logo, primary menu in the header and copyright, widgets in the footer.

A few things will change. Those things are mentioned below.

What will change, and what should I recheck?

Once you switch to the new Header/Footer Builder do check the following things. Since a new structure is introduced with a visual builder, a few of the old structures might change.

1. Any custom CSS added to the header/ footer will no longer be effective.

This is because the new structure contains new CSS classes and targets. So custom CSS written with old targets will not work. You can check and target new CSS classes and write CSS again if needed.

2. Check mobile and tablet view.

Switch customizer view to tablet/mobile and check if it looks the same. New Header/Footer builder allows you to design mobile header separately from the desktop header. You get new controls in the mobile header. This might slightly change the mobile/tablet header view. Similarly, check the footer on the mobile and tablet view.

Also, we have changed the responsive breakpoints for Astra Theme, so you should check if this influenced the way your website looks on different devices. The default mobile header breakpoint is now 921px. If you need to modify the breakpoints, please check this document.

3. Elements in header and footer.

Many new elements are added to a new Header/Footer builder structure that can replace old ones. Example – Copyright section in the footer previously used Text section. While in a new structure you will see new dedicated copyright elements instead of text.

So do check all elements added to both header and footer.

4. Spacing

Above, below and primary header/footer now have dedicated spacing options. When you click on the gear icon you will find this option under General tab.

Refer article here to know how to get started with Astra Header Builder.

Editing Mobile Header

Once you switch to the Header Builder, visit the Customizer.

Step 1 – Click on the Header Builder to start editing.

Step 2 – Switch to Tablet or Mobile View in the Customizer.

Step 3 – You will observe a separate dedicated box for a mobile header in the visual header builder. Off Canvas section allows you to configure header items inside the toggle button. While visual builder on the right side lets you configure all parts of the mobile header – you set separately your Primary header (middle), as well as Above, and Below headers. Usually, you would have your logo and toggle button in your Primary header here, but there are actually no limits to where you can place elements in your mobile header.

Step 4 – In the Off Canvas section, click on the plus sign to add header elements like the primary menu, button, widgets, HTML, and so on. The Off Canvas section is the one that is shown when the user clicks on the toggle button.

Step 5 – Click on the gear icon to set mobile header type, color, and other options.

You can choose the following options for header type –

• Flyout
• Full-Screen
• Dropdown

Under the Design tab, you will find color options.

Step 6 – If you need to edit the Toggle button, click it and start configuring.

Step 7 – You can enable Transparent Header for mobile from customizer under Header Builder > Header Types. Choose to display it on mobile and configure it.

Similarly, With Astra Pro, you get an option for Sticky Header.