Astra 文档

Max Width Site Layout

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.

Please refer the following document, to begin with, Site Layout.

A website generally has the main wrapper followed by the container.

The main wrapper consists of header, content, sidebar, and footer — the entire website;And the container is the child wrapper that includes a content & sidebar.

In Max Width Site Layout, the main wrapper of the website is set to a certain maximum width. We have also provided settings for you to control the top and bottom margin, so you can design your website to appear like a real box.

You can find the setting to manage Max Width Site Layout under Appearance > Customize > Global > Container > Site Layout

Other Notes:If you need to set a background image for the entire site please check this document: Global Colors – Astra Theme.

Colors & Background Module

Design and Aesthetics are essential parts of any website. With that, the Astra theme already comes with modern and various color options. If you want to expand your options, however, the Colors & Background addon with the Astra Pro plugin can give you more control and options to your theme.

This premium feature is available with the Astra Pro plugin. So in order to use this addon, you need to have the Astra theme installed along with the actual Astra Pro plugin.

Astra theme (free) gives some basic color options. While Colors & Background Module with Astra Pro plugin adds more options in the customizer.

Here are steps to activate the add on and explore the premium settings –

Step 1 – Make sure you have the Astra Pro and WooCommerce plugin installed and activated.

Step 2 – Activate the addon from Appearance > Astra Options > Colors & Background.

Step 3 – After activating, the module will add additional color options for various sections in the customizer ( Appearance > Customize ).

Below is the detailed list where you can see newly added color options in the Customizer:

Global > Colors > Content Header > Site Identity Header > Primary HeaderHeader > Primary MenuBlog > Blog / ArchiveBlog > Single PostSidebar

1. Global Colors

The Astra theme itself provides basic global color options as mentioned here. In addition to this, the addon will also enable the following options –

Content Background – With this, you can add a background image and color to the container, i.e., any area where you add text.Headings – You can set colors for each heading, H1 to H6, from one place.You will also find the responsive option enabled for the Content Background.

Note: Content Background will be visible only with Boxed and Content Boxed container layout.

2. Header

Separate color options will be available under the Header tab for –

Site Identity- Enable displaying site title/tagline and you will observe color options.Primary Header- Set background and color for your header.Primary Menu- Set colors to the menu and submenus on normal, hover (color of the menu item when pointer moves over it), and active mode (color of the menu item that is currently active – the page you』re currently viewing).

3. Blog

Blog / Archive – Along with the post title and meta, this will add color options for the Archive Summary Box. This box will appear on an archive page like categories, where the title and the description of the archive page will appear.

4. Sidebar

You』ll get color options for your sidebar.

You can even manage the Sidebar』s Title Color, Text Color, Link Color along with the Background options.

Footer Widgets Module with Astra Pro

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:

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.

It allows you to add 7 different footer widget layouts to the footer.

Quick Steps on How to Design Footer Widgets Using the Footer Widgets ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the Footer Widgets module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Footer > Footer Widgets ] to edit module settings

After activating the module, you can find the settings under Appearance > Customize > Footer > Footer Widgets

Footer Widgets Layout

You can choose any layout out of 7 available layouts. After selecting one of the layouts you would be able to add widgets from Appearance > Customize > Widgets

After selecting a layout you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area.Choose any WordPress default widget or you can use any third-party plugin to add a widget to the list.

Footer Widgets Padding

You can add padding for footer from all sides.

Footer Widgets Width

Full Width

It will set a footer to full width no matter what your container width is.

Content width

It will set a footer to container width set under Appearance > Customize > Global > Container > Container Width

Footer Widgets Colors and Background

With the Footer Widgets module, you would get Background Image option along with default color options.

Footer Widgets Typography

With Footer Widgets module, you can set typography for Widget Title and Content under Appearance > Customize > Footer > Footer Widgets > Widget Title Font/Content Font

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.

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

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.

Above 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 Above 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 row virtually. Learn more here.

It appears above 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.

Above Header LayoutAstra provides two layouts for Above Header.

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

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

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

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

You would need to create a menu under Appearance > Customize > Menus > Create a new menu and assign it to above 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 above 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.

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

Above Header HeightYou can easily set height for the above 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 Above Header

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

You can set the following colors from available settings

Background ColorContent Section

Text Color
Link Color
Link Hover Color

Header Improvements in Astra!

Note:

Below are the classes that would not work over Astra』s 3.0 release. We are updating the classes shortly.

In this update of Astra theme v2.5.0 and Astra Pro Addon v2.6.0, we bring the following changes –

[ Deprecated ] – We are pulling the plug on the No Toggle Menu Style

[ NEW ] Adding a new Mega Menu Width option – Full Width Stretched

[ UPDATE ] :- Following are the selectors which are updated in this release –

Header selectors in Addon

Header selectors in Addon -

Normal Header -

Primary Header -
- CSS Prefix = .main-header-menu
- For menu li = .main-header-menu .menu-item
- For menu li -> current menu item = .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .main-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-above-header-menu
- For menu li = .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-above-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-below-header-menu
- For menu li = .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-below-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-below-header-menu .sub-menu .menu-link

Transparent Header -

Primary Header -
- CSS Prefix = .ast-transparent-header .main-header-menu
- For menu li = .ast-transparent-header .main-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-transparent-header .ast-above-header-menu
- For menu li = .ast-transparent-header .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-transparent-header .ast-below-header-menu
- For menu li = .ast-transparent-header .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-link

Page Header -

Primary Header -
- CSS Prefix = .ast-advanced-headers .main-header-menu
- For menu li = .ast-advanced-headers .main-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-advanced-headers .ast-above-header-menu
- For menu li = .ast-advanced-headers .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-advanced-headers .ast-below-header-menu
- For menu li = .ast-advanced-headers .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-link

Sticky Header -

Primary Header -
- CSS Prefix = #ast-fixed-header .main-header-menu
- For menu li = #ast-fixed-header .main-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = #ast-fixed-header .ast-above-header-menu
- For menu li = #ast-fixed-header .ast-above-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = #ast-fixed-header .ast-below-header-menu
- For menu li = #ast-fixed-header .ast-below-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-link

PS: For specifically desktop view and for higher weightage of CSS you can use .ast-desktop selector as prefix and similarly for responsive view you can add selector .ast-header-break-point.
Eg- The above CSS will work as follows - .ast-transparent-header .ast-below-header-menu
For Desktop - .ast-desktop .ast-transparent-header .ast-below-header-menu
For Mobile - .ast-header-break-point .ast-transparent-header .ast-below-header-menu

Note

If in any case the above selector or CSS not working for you, try by higher specificity for that CSS selector.

Following are the Improvement and Fixes we have introduced from this update –

Improvement:

Gutenberg + UAG support in Mega Menu templatesReusable Blocks support in Mega Menu TemplatesLowered weightage, and Optimized CSS now loading for all headerRemoved extra CSS from headers

Fixes:

Menu template』s CTA buttons getting full widths.Mega Menu colors not applying properly when any Template is used inside Mega Menu.Mega Menu not working on Above and Below Headers in some cases.Merge menu case not working with Primary hiding last menu item.Menu container width mega menu not working when the primary menu is disabled.Mega Menu Column heading color not working for Above Header & Below Header.Related products CSS not working properly when using Elementor pro related products for WooCommerce.Elementor popups are not working in the mega menu.Elementor template』s anchor links inside mega menu not working.Background image from Primary Header not inheriting in Sticky Header.Sticky header color not reflecting when we select animation style as 『none』.Left padding missing for submenu in mobile devices.Every mega menu template』s link showing submenu arrow on responsive devices.Font-size of Above Header submenus works alternately for tablet & mobile.

Unable to find 「No Toggle」 Menu Style?

From the update of Astra Addon 2.6.0, we』re deprecating the No Toggle menu style.

For existing users –

Those who have already set No Toggle menu style –

The style will be active, and won』t have any effect.But as soon as, user change menu style to anything else ( Fullscreen / Flyout / Dropdown ) the No Toggle menu style will be removed from their end.

For new users –

By default this style won』t be visible for selection.

And if in case, you want to get back the No toggle menu style, here is a filter for this –

add_filter( 'astra_no_toggle_menu_style_deprecate', '__return_true' );

Primary 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 virtually create the Primary Header by adding Logo, Menu, other Elements to the middle row of the Header builder. Do check the below video for in-depth details.

Below are the settings which are applicable if you are below Astra 3.0.0 —

Primary Header is a default Astra header. It will display a logo and a primary navigation menu. This header can be customized with the following options available in customizer under Header > Primary Header.

Layout

This setting will give three different positions for the logo in the header.

Logo Left – Logo will display left to the menu. This is a widely used header style. Logo Center – Logo will be placed above the menu in the center. If you have long menu you can opt for this layout. Logo Right – Logo will be placed at the right of the menu.

Width

This allows you to set header width either to – full width or to the content width.

Full Width – This will stretch the header content to both ends according to your browser size.Content Width – It will set the content of the header to container width set under Global > Container > Width.

Border

It will add a nice border at the bottom of the header. You can choose a width and color for this border.

Mobile Header – Layout

On responsive devices, the menu converts into a hamburger. In the primary header, on responsive devices, only the logo and hamburger menu will display. You can manage the position of the logo with respect to the hamburger menu.

In case you have a big logo you can opt for Stack where hamburger will display below the logo. Else Inline menu and logo will look fine with a small logo.