入门归档 - 第 20 页共 38 页

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.

Below Header Section

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Note:

You would not find the Below Header Section separately if you are above the Astra version 3.0.0. You will need to visit the Header Builder section and edit the insert elements to the last row virtually. Learn more here.

The Below Header Section will appear below the primary header. It helps to show a call to action button, contact details, social media icons, menu etc. Make sure you have activated Header Sections module from Astra Pro.

Below Header LayoutAstra provides two layouts for Below Header.

Below Header Layout 1It will display section 1 to the left side and section 2 to the right side.

Below Header Layout 2It will allow you to display only one section at the center of the below header.

Section 1 and Section 2You can put content into two different sections in below header. You can choose options for each section form drop down.

Let』s have a look.

MenuYou can display menu in the below header with this option.

You would need to create a menu under Appearance > Customize > Menus > Create a new menu and assign it to below header menu.

SearchIt will add a search icon for a search box. When you click on the icon, the search box will appear.

Text / HTMLIt will allow you to insert text and HTML code. You can insert a call to action button, contact number, email address etc.

WidgetYou can add a widget to the below header with this option.

After selecting the widget option, you will able to set a widget from Appearance > Customize > Widgets.

Choose any WordPress default widget or you can use any third party plugin to add a widget to the list.

Below Header Bottom Border Width and ColorYou can set a bottom border for a below header with this option. Set a border width and then set a color for it.

Below Header HeightYou can easily set height for the below header with a slider.

Mobile Header AlignmentIt allows you to set the alignment of section 1 and section 2 on mobile devices.You can choose it to be Inline or Stack.

Menu Label on Small DevicesIf you have selected a menu to be displayed in section 1/ section 2, it will appear as a hamburger menu on mobile devices. You can set a label for this menu.

Merge menu with primary menu in responsiveThis allows you to merge your above header menu (set with section 1/ section 2) into a primary header on the mobile device.

Colors & Background options for Below Header

You can set background and content color for Below Header from Appearance > Customize > Header > Below Header

You can set following colors from available settings

Background ColorContent Section

Text Color
Link Color
Link Hover Color

Typography Options for Below Header

You can set typography for Below Header from Appearance > Header > Below Header.

Clone and Delete Elements in Header Footer Builder

With the Astra Header Footer builder, you can easily add various elements such as logo, menu, button, widget, etc., and create unique navigation for your website. With Astra version 3.1 and above, you will observe a set of new controls to duplicate and delete both header and footer elements.

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?

Note

1. The Clone and Delete options are available only with Astra Pro. To use these options make sure you have the Astra Pro plugin installed, updated, and activated.2. The Clone and Delete options are only available for elements that can be used in multiple numbers. Example: buttons, menus, widgets, etc. These will not be available for single elements such as logo, search, etc.

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.

Delete Option

Remove Option

Note:

Delete: Permanently removes the element from the customizer, the element cannot be retrieved.Remove: Only removes the element from the visual builder and can be added back by using the plus icon.

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

Header Sections Overview

This is a premium feature available with the Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Header Sections module introduces two header sections (Above Header and Below Header ) in the website header.

Important Note:

You would not find the Above Header/Below Header Section separately if you are above the Astra version 3.0.0. You will need to visit the Header Builder section and edit the insert elements to the first and last row virtually. Learn more here.

You can find settings under Appearance > Customize > Header

Explore the settings for Header Sections in detail –

Above Header Below Header

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.

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.

How to Stick Footer to Bottom when Page Content is Less?

Sometimes you may have pages on your site, that have few lines of text or very less content.

In such cases, the footer displays below the content somewhere between the page. That does not give a nice look to the page.

You can stick the footer to the bottom so that no matter what your content length is, the footer will stick at the end of the page.

Option with Astra theme –

Add the following filter to child theme』s functions.php file.

document.addEventListener(
"DOMContentLoaded",
function() {
fullHeight();
},
false
);
function fullHeight() {
var headerHeight = document.querySelector("header").clientHeight;
var footerHeight = document.querySelector("footer").clientHeight;
var headerFooter = headerHeight + footerHeight;
var content = document.querySelector("#content");
content.style.minHeight = "calc( 100vh - " + headerFooter + "px )";
}

<?php
}

Option with Astra Pro Addon plugin –

Sticky Footer option is available with Astra Pro』s Custom Layouts addon.

Firstly, you will need to Enable the Code Editor to insert code in Custom LayoutsNext, we need to design a footer and set it as a sticky using the below code. Choose the Layout as Hooks, and the Action as wp_footer.With Display On setting, you can set it to be displayed on a particular page or on the entire website.

Following is the above code which can pasted under the Custom Code Editor.

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.

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)