Astra 文档

Header Overview

Astra comes with several built-in header layouts which allows you to create an impressive header. You can easily design Sticky Header, Transparent Header and can add some extra sections to the header with addons. Astra Pro allows you to add custom headers where you can design headers with any page builder.

Note:

We have released Astra 3.0.0 which introduces the Header Footer builder which changes a few things, you can refer to the following article for the changes below video to know more.

Following are the links to explore all the previous options(i.e. before Astra 3.0.0) with headers, go through the following links.

Primary Header Options Color and Typography for Primary HeaderTransparent HeaderHeader Sections – Above and Below Header ( with Astra Pro)Sticky Header (with Astra Pro)Page Headers (with Astra Pro) Mobile Header with Astra (with Astra Pro)

Color and Typography for Primary Header

With the Astra theme, global colors and typography set for the entire website will be applied to the primary header automatically. In case you are looking for header specific color/typography settings, they are available with Astra Pro Addon plugin.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.Do note you will be able to find the new Typography and Color settings under the Design tab of each section. The following video will give in-depth details.

Primary Header Colors with Astra Theme

As mentioned above, global colors available under Appearance > Customize > Global > Colors will be applied to the header. While with Astra Pro Addon you get an option to set a color for each element in the header.

Primary Header Typography with Astra Theme

Typography set for the site under Appearance > Customize > Global > Typography will be applied to the header content by default. While Astra Pro Addon provides more specific options.

Footer Overview

Footer, generally contains data like copyright, important links.

Astra offers separate Footer Widgets area and Footer Bar area (Copyright area).

Settings can be found under Appearance > Customize > Footer.

Read more about Footer Widgets area and Footer Bar area from following links –

Footer Widget AreaFooter Bar Area

Footer Bar

Footer is the area where you can put copyright information along with widgets, menus, etc. You can choose a layout for the small footer bar under Appearance > Customize > Footer > Footer Bar > Layout

Footer Bar Layout

Astra provides two layouts for the footer bar.

Footer bar layout one – It will stack the two sections of the footer barFooter bar layout two – It will display the two sections inline

Section 1 and Section 2

As per the layout choose you can display the footer content as Stacked or Inline as mentioned above and Astra offers two different sections for the footer bar. You can choose options for each section from the dropdown.

Footer Menu

You can display the menu in the footer with this option. Once you activate this option for a section, it will show the menu set as a Footer Menu at Appearance > Customize > Menus.

If you need to create a new menu for your Footer you can do this under Appearance > Customize > Menus > Create New Menu and assign it to Footer Menu

Text (Custom Text/HTML)

You can add custom text or HTML code to the footer with this option.

Read more about Custom Text Helper Strings from here.

Widget

You can also add a widgets to footer sections using this option:

After setting widget for the footer section you can add widget to it under Appearance > Customize > Widgets > Footer Bar Section 1/ Footer Bar Section 2

Footer Bar Width

This allows you to set footer content width either to full width or to content width. You can choose options from the dropdown. Footer bar background will be set to full width by default just the content width will change.

Full Width – It will stretch the footer content to both ends according to your screen size.Content Width – It will set content of the footer to container width set under Appearance > Customize > Layout > Site Layout > Container Width.

Footer Bar Top Border

You can set a top border width for the footer bar and its color with these options.

Footer Widgets

Astra offers 4 widget layout for the footer.Settings are available under Appearance > Customize > Footer > Footer Widgets

Once you select the 4 widget layout for the footer, you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area 1/2/3/4.You can choose WordPress default widgets or can add a third-party plugin to add widgets in the list.

Colors & Background for Footer Widget Area

You can set colors for Widget Title, Text, Border and Links in the footer under Appearance > Customize > Footer > Footer Widgets

Note: The above colors will be applied to default WordPress widgets only. If you are using a third-party plugin to add widgets, you would need to manage colors from the plugin itself.

Typography for Footer Widget Area

Typography options set under Appearance > Customize > Global > Typography > Base Typography will be applied to the footer widget area by default.

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the Footer Widgets module of Astra Pro Addon.

How to Add Background Images?

Astra version 1.3.0 and above provides a feature to add background images to various sections of the site.

You can enhance the design of the Body, Header, Content, Sidebar, and Footer of your website with this option. In addition to the previous background color option now you can see the background image option as well.

Where can I find the option?

From your WordPress dashboard navigate to Appearance > Customize and under various areas, you will find settings to upload background images

Where can I add a background image to Astra theme?

With Astra theme, you get an option to add a background image to following areas-

Body (?)Footer Widgets (?)Footer Bar (?)

Background image for Astra Pro Modules

In addition to Body, Footer Widgets, Footer Bar section, you get an option for following modules of Astra Pro –

Primary Header (?)Above Header (?)Below Header (?)Content (?)Sidebar (?)Note: Background option might be visible only if you have Colors & Background module enabled from Astra Pro.

Options for Background Image

Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following CSS properties for the image –

RepeatBackground Image PositionBackground SizeBackground Attachment

You can adjust the background color overlay with color picker. A nice transparent layer of color above image will enhance the background image design.

Important Notes:

After adding a background image, make sure to adjust the opacity of background color with color picker.Background applied to the body will not be visible for Full Width/ Stretched – Container Layout as in this layout width of the container is stretched to the fullest.

How to Add Button as Last Item in Menu?

With Astra theme Version 1.6.0, a new option for the Last Item in Menu is introduced – Button. With this, you can easily put Button as the last menu item for the navigation menu in the header.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.Now, you will be able to add the Button element visually using the Header builder as the Last Element and makes further changes as previously.

Following are the settings for Astra theme below version 3.0.0.

From WordPress Dashboard a setting can be found under Appearance > Customize > Header > Primary Menu > Last Item in Menu.

Choosing Button from Last Item in Menu dropdown will offer the following options –

1. Button Text – Add a text2. Button Link – Give a link for the button3. Button Style – With this option button can be displayed differently for different headers like primary header, transparent header, sticky header (option with Astra Pro). Below is the detailed description –

Button Style

1. Theme Button: Set a button style same as a theme button style. Choose a Theme Button option and click on the Customize Button Style link. The link will take you to the default button style options.

If you wish to set a similar style for all button on the site and different style just for the header button choose Theme Button option and click on the Customize Button Style link.

The Customize Button Style will redirect you here –

2. Header Button: This allows you to style the header button differently than a theme default button. It will offer the following options under the Header Button section –

Colors – Set the Text Color, Background Color and also on Hover.Border – Set the Border width, Color, Hover Color, and Border Radius.Padding – Set the overall Padding for the Header Button.

Note: Header button styles cannot be set unless the option Header Button is chosen for the Button Style.

How To Create Mobile Header With Astra Header Builder?

Astra Header Builder provides a dedicated option to design a mobile header. These options are available with the Astra theme out of the box, while advanced configuration options are available with Astra Pro.

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.

How To Create a Footer With Astra Footer Builder?

Astra Header Footer Builder is new and advanced way to design creative header/footer in Astra.

The Header Footer Builder feature has been released in Astra 3.0.0 version.

This article will help you to understand how to get started and all are available option with Astra Header Footer Builder.

Before starting you can read FAQs about Header Footer Builder here.

Getting Started

Once you have the Astra theme installed go to Astra welcome page under Appearance > Astra Options. Here you can see a small notice and a button that says 『Use New Header/Footer Builder』.

Click on the button to start designing with New Header/Footer Builder』.

Then visit customizer by clicking on Go to Customizer. Once you are in the customizer you will see new options for Header Builder and Footer Builder.

Editing Footer

Footer Builder contains –

Visual Footer Builder – with an above footer, primary footer, and below footer.General tabDesign Tab

You can add and manage footer elements with Visual Builder and customize them from General and Design tab.

Visual Footer Builder

Visual Footer Builder is a flexible and advanced footer builder. Changes you do in the visual builder will instantly reflect on your footer design.

It gives you 3 rows to build a unique footer structure – Above, Primary, and Below You can click on the plus sign to add different footer elements – Button, HTML, Footer Menu, Widgets, Social, Copyright You can drag and drop widgets to different sections to place them in the required position.

Configure styling for above, primary and below footer –

Click on the setting icon above each footer section and it will take you directly to styling options.

General Tab

Elements you add in the visual footer builder will be available under the General tab. You can click on the individual element and edit the settings.

Design Tab

This will give you design options for footer background and spacing.

Footer Builder Elements with Astra theme and Astra Pro

Astra theme offers an entire structure for new footer builder. While you can unlock advanced features with Astra Pro.

Here is a list of footer elements that are available with Astra theme and Astra Pro

With Astra

CopyrightHTML 1HTML 2Widget 1Widget 2Widget 3Widget 4SocialFooter Menu

With Astra Pro

CopyrightButton 1Button 2 HTML 1HTML 2Footer MenuSocialWidget 1Widget 2Widget 3Widget 4Extra Footer Layouts and Columns

Note: You can extend the number of elements further in Astra Pro. Read more.

Add Multiple Elements in Header Footer Builder

Astra Header Footer Builder allows you to add the following elements to header and footer sections –

ButtonHTMLWidgets Social More will be added in future

When you use the free Astra theme only, the number of each of these elements is limited. But with Astra Pro, you can extend this.

For example, Astra Theme comes with one available Button element. When you activate the Astra Pro addon, you will have two buttons available by default.

Next to having more elements by default, with Astra Pro, you can extend the number of buttons to have more than two buttons.

You can also do this for most of the other elements in your Header Footer Builder. You can add multiple elements for HTML, widget, and social elements.

Steps for Adding Multiple Elements (Button, HTML, Widget, and Social)

Step 1 – Make sure to have the Astra Pro plugin activated.

Step 2 – You will need to add custom code for multiple elements so make sure to have the Astra child theme installed and activated.

Step 3 – Edit Astra child theme』s functions.php file and add the following custom code. You can add only the required fields from the following code.

/**
* Update the count of elements in HF Builder.
*
* @param array $elements array of elements having key as slug and value as count.
* @return array $elements
*/
function astra_builder_elements_count( $elements ) {
$elements['header-button'] = 3;
$elements['footer-button'] = 3;
$elements['header-html'] = 3;
$elements['footer-html'] = 3;
$elements['header-widget'] = 3;
$elements['footer-widget'] = 3;
$elements['header-social-icons'] = 3;
$elements['footer-social-icons'] = 3;
return $elements;
}
add_filter( 'astra_builder_elements_count', 'astra_builder_elements_count', 10 );

In the above code, you see values set for each header and footer element. You can edit the code and set the value to match the number of elements you require. In the above code, these values are set to 3 as an example.

Thus, if you would need, let』s say 6 widgets available in the footer builder, the edited code would look like this:

/**
* Update the count of elements in HF Builder.
*
* @param array $elements array of elements having key as slug and value as count.
* @return array $elements
*/
function astra_builder_elements_count( $elements ) {
$elements['footer-widget'] = 6;
return $elements;
}
add_filter( 'astra_builder_elements_count', 'astra_builder_elements_count', 10 );

This can be done for any header or footer element.