Astra 文档

Display Settings of Custom Layouts in Astra Pro

Custom Layouts module is available with Astra Pro and allows you to add different types of custom content. In addition, for each layout, you can set display settings. Here, you can set Custom Layouts (same as Page Headers) to be displayed only under specific conditions.

Display and User Role Settings

To access display settings, follow these simple steps:

Step 1 – Start editing your Custom Layout;

Step 2 – Click on the Astra icon in the top right corner to open the Custom Layout Settings panel;

Step 3 – Next, click on 「Display and User Role Settings「. Now, you can edit display settings in the popup.

Display Settings

With display settings, you can achieve great flexibility in displaying your custom content throughout your website.

You can start with the 「Display On」 option. Here, you can select specific locations or locations where your custom layout will be displayed. Thus, you can select an entire website, a group of pages or posts, or a specific target.

In addition, you can combine this with the 「Do Not Display On」 option. Hence, you can add exclusion rules and remove your Custom Layout on some locations while still visible on all others.

Further, you can limit Custom Layouts to be displayed only for specific types of users with the 「User Roles」 option. In other words, you can show different layouts depending on whether users are logged in or not. Also, you can show different content or hide some content depending on the user roles assigned.

Finally, these can also be combined with the rest of the visibility settings:

Responsive Visibility – You can choose on which devices you want to display your layouts. This will imporve your website』s repsonsivness; Time Duration – You can select start and the end date for the period during which you want your custom layout to be visible. You can use this option perfectly for different notifications or seasonal content.

Displaying Locations

Below, we listed locations available for the 「Display On」 and 「Do Not Display On」 options, with their descriptions:

Basic

Entire Website: Your laouts will show on all pages, post, CPTs, singulars, archives, search, 404;All Singulars: You can limit the layout to all single posts/pages;All Archives: Also, you can decide to use your layout specificaly for your achives – Monthly, Category, Tag, Author, Search.

Special Pages

404 Page: On the page shown when a page doesn』t exist on your site.Search Page: On the page that displays search results.Blog / Posts Page: On the Blog Archive Page, which is set as the Posts page and lists all blogs on your site.Front Page: On the page that is set as a Home page.Date Archive: On the Archive page for date, where posts are filtered based on date.Author Archive: On the Archive page for the author. Posts by a particular author will be listed here.

Posts

All Posts: On all blog posts (Single Post)All Posts Archive: On all posts archive pages (for example, all posts published by the same author)All Categories Archive: On all post category archive pagesAll Tags Archive: On all post tag archives

Pages

All Pages: On all pages

Specific Target

Specific Pages / Posts / Taxonomies, etc.: Only on a specific places (for example only one post or page)

How To Change Web Stories Position

Since version 3.2.0, the Astra theme supports the Web Stories plugin by Google. Hence, you can add Web Stories to your whole website using dedicated Customizer settings.

This document describes who you can use Web Stories in different locations on your website.

How do Web Stories work With Astra?

Web Stories plugin can showcase your website content as web stories. Here, you can easily embed stories to your page or posts using the Gutenberg block. 

Further, you can instead add it to your whole website using the Customizer. Just navigate to Customize > Web Stories and check the 「Display Stories」 box. Also, you can find more details on the integration and Web Stories in this article.

Thus, when you set Web Stories to be displayed, they will be positioned above the header by default.

To change the position where Web Stories are displayed, you』ll need to use a custom code.

Changing Web Stories Position

To change the default Web Stories location, you need to add the following custom code (filter) to the functions.php file of your Child Theme:

// Filter to change the web stories position

add_filter( 'astra_web_stories_position', 'astra_web_stories_position_callback' );
function astra_web_stories_position_callback(){
return 'astra_content_before';
}

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.

Web Stories will now be displayed under your header and before your content using this example code. 

In addition, you can set other positions for your Web Stories using Astra hooks. To change position, modify the above code by changing the bolded part of the code (hook). You can add any header, footer, or content Astra hook here instead.

To illustrate, if you want to show Web Stories before the footer and under your content, you should use the {astra_footer_before} hook instead. In this case, the code would look like this:

add_filter( 'astra_web_stories_position', 'astra_web_stories_position_callback' );
function astra_web_stories_position_callback(){
return 'astra_footer_before';
}

You will find all Astra hooks in this document.

Custom Footer

Using the Custom Layout module available with Astra Pro, you can design a custom footer. Please refer document, to begin with, the Custom Layout module.

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.

Selecting a Footer layout will replace the current site footer with custom layout content. In this case, any settings from the customizer will not be applied to a custom footer.

You can design footer with any page builder and set them on the entire site or a particular page/post with display rules.

Footer Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Footer Layout Type options.

Sticky Settings

Stick – You can choose your custom footer to be sticky or not.Stick On – When Stick is enabled, you can choose to stick footer on Desktop and/or mobile.

Sticky Footer option is useful when your content is less, and it cannot cover page length. In this case, the sticky footer will stick to the bottom of the page, no matter your content length.

Display and User Role Settings

You can choose your custom footer to display on the entire website or specific pages/posts with the Display On option. You can even exclude a particular page/post by adding them to the Exclusion Rule.You can decide a user role for which custom footer should be visible. For excluded users, the footer set with customizer options will be visible.

For example:If you want to display a custom footer on the Entire Website except for the 404 page for all Logged In users, you need to set the following options-

Display On: Entire WebsiteDo Not Display On: 404 PageUser Roles: Logged In

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Once the time duration ends, the custom layout set as the footer will be disabled. Thus the footer designed with Astra customizer will be automatically displayed further on.

Custom Header

Using the Custom Layout module available with Astra Pro, you can design a custom header. Please refer document, to begin with, the Custom Layout module.

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.

Selecting a Header layout will replace the current site header with custom layout content. In this case, any settings from the customizer will not be applied to a custom header.

You can design headers with any page builder and set them on the entire site or a particular page/post with display rules.

Header Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Header Layout Type options.

Sticky Settings

Stick– You can choose your custom header to be sticky or not.Shrink– If you set the header to stick on the top of the page, you can decide whether it should shrink or not. Enabling shrink effect will remove all top and bottom space from the header.Stick On– You can choose to stick header on Desktop and/or mobile.

Display and User Role Settings

You can choose your custom header to display on the entire website or specific pages/posts with the Display On option. You can even exclude a particular page/post by adding them to the Exclusion Rule.

You can decide a user role for which custom header should be visible. For excluded users, the header set with customizer options will be visible.

For example:If you want to display a custom header on the Entire Website except for the 404 page for all Logged In users, you need to set the following options-

Display On: Entire WebsiteDo Not Display On: 404 PageUser Roles: Logged In

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Once the time duration ends, the custom layout set as the header will be disabled. Thus the header designed with Astra customizer will be automatically displayed further on.

Custom Layouts 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.

Custom Layouts is a very powerful module offered in Astra Pro. With this module, you can create a totally custom header, footer, 404 pages as well as custom content or code on various hook locations.

Quick Steps on How to Create Custom Layouts Using the Custom Layout 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 Custom Layouts module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Astra Options > Custom Layouts ] to edit Custom Layouts settings

How To Add A Custom Layout?

After activating a module, you will also find the Settings option. Further, clicking on this option will take you to Dashboard > Appearance > Custom Layouts. Here, you can add new custom layouts or edit the existing ones:

When you click on 「Add New」, you will see the popup where you can select the layout type you wish to create:

Next, you can manage Custom Layouts using options located in the right side menu:

In addition, you can change your layout type using the 「Layout」 dropdown. Accordingly, other options will adjust to your selection. 

Since Astra Pro version 3.6.4 the Custom Layout Settings are located in a separate Gutenberg sidebar panel. Thus, if you don』t see the Custom Layout settings, you can access the panel by clicking the Astra icon (top right corner) as shown below:

Manage Custom Layouts

Custom Layouts come with some great options that allow you to, for example, make a custom sticky header. Also, you could add a custom code to almost any place in your website using Hooks, and many more. 

Though each custom layout type has some specific options available, these are some common settings available for all layouts:

Display and User Role Settings:Display On – select the locations where you want to display your custom layouts.Add Exclusion – select the locations which you want to exclude from a display rule.User Roles – choose which user roles should be seeing your custom layoutResponsive Visibility: Choose whether to show your custom layouts on all devices or choose individually: desktop, tablet, or mobile.Time Duration Settings: Set the layout start time and the end time. This will make your layout visible only for that choosen period.

In addition, since Astra Pro version 3.6.4 you can choose to enable or disable specific custom layouts added to your website:

For more information on each custom layout type, please check the dedicated articles on the links below:

HeaderFooter404 PageHooksInside Post/Page Content

How to Manage Sidebars in Free Astra Theme?

With Astra you get three Sidebar options – right sidebar, left sidebar, and an option that disables the sidebar. You can manage Sidebars in two ways.

Globally for the site from CustomizerOn particular Pages and Posts

Quick Steps on How to Manage Sidebars on Your WebsiteStep 1: Find the Sidebar Options under the customizer [ Appearance > Customize > Sidebar ] to edit Sidebar Options globally.Step 2: Or manage the Sidebar Options on particular Pages and Posts from the Meta Settings.

Manage Sidebar globally in the customizer

Step 1 – You can find settings under Appearance > Customize > Sidebar;

Step 2 – To make your sidebar visible, you will need to set the Right or Left Sidebar in the appropriate dropdown menu;

You can set a sidebar for the entire site at the Default Layout dropdown menu. Also, you can set a sidebar individually for individual locations: Pages, Blog Posts, and Archives.

To disable the sidebar on any of these locations, select the 「No Sidebar」 option in the dropdown menu.

Step 3 – Once at least one of your sidebars (left/right) is set, you can adjust the sidebar width. You can set the percentage of your content area that the sidebar would take:

Step 4 – Finally, navigate to Dashboard > Appearance > Widgets to add items to your sidebar. That』s it. Your sidebar is ready now.

Note

If you followed the above-mentioned steps and you still don』t see the sidebar, please check your sidebars. Here, it』s possible that there you didn』t add any widgets to your sidebar. You can set this in the Customizer by navigating to Customize > Widgets.You can also check the FAQs at the bottom of this article.

Additional Sidebar Options

With Astra Pro, you can activate the addons for integrated plugins like WooCommerce, LifterLMS, LearnDash, etc. These add-ons can be activated at Appearance > Astra Options > Astra Pro Modules. As a result, you will see additional options to manage dedicated sidebars in your Customizer:

Managing sidebar for particular pages or posts

Astra also allows you to manage sidebars for a particular page or post through the meta settings.

FAQs

How Can I Create / Manage My Sidebars?Once you have enabled your sidebar, you might want to add or remove some widgets, set a different order, or modify some settings. You can do this in the Customizer by navigating to Customize > Widgets. Also, this can be accessed from your backend too by navigating to Dashboard > Appearance > Widgets. Here, you will be able to organize your sidebar and other widget areas. Once you navigate to your Widget panel, you will notice all of your existing sidebars. Now, you need to expand your desired sidebar and add widgets to it. Further, each widget has its own settings which allow you to make additional adjustments.

Does Astra Theme Supports Block-Based Widget Editor (WordPress 5.8)Since WordPress version 5.8, you can use Blocks in your widget areas together with legacy widgets. The Astra theme is fully compatible with WordPress 5.8 and Block-Based Widget Editor since version 3.6.5. Keep in mind that some of the Astra Header and Footer widget settings (font, color) were deprecated for better compatibility – if you need these options, you can find more details enabling them in this article.

Download Astra Pro With Composer

Composer is a dependency manager for PHP, which you can use for your WordPress websites. This document will show you how to manage Astra Pro on your projects using Composer.

With Composer, you can add all of your standard themes and plugins to a new WordPress site from one place. Also, you can keep your websites updated the same way.

Configure The Composer.json File

To update or install the Astra Pro plugin with Composer, you first need to configure the composer.json file. 

Here, we assume that you already have the file in your website』s root directory. Also, we are assuming that you have set your project. Check this article if you need help installing Composer, adding composer.json file, or setting up the project.

Let』s get started.

Note:

If you』re installing an Astra Pro for the first time on your website, the plugin will not be activated in this process. Once you import the plugin to your website, you will need to log in to your Dashboard and activate your Astra Pro license.

Code Example

You can check the example of the entire code:

{
"name": "example/example",
"type": "project",
"description": "Project description",
"require": {
"brainstormforce/astra-addon": "^3.0"
},
"extra": {
"installer-paths": {
"wp-content/plugins/{$name}/": ["type:wordpress-plugin"]
}
},
"repositories": [
{
"type": "package",
"package": {
"name": "brainstormforce/astra-addon",
"version": "3.6.3",
"type": "wordpress-plugin",
"dist": {
"type": "zip",
"url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
},
"require": {
"composer/installers": "^1.11"
}
}
}
]
}

Further below, we』ll show you how to make this work.

Add Astra Pro Package And Version Constraints

"require": {
"brainstormforce/astra-addon": "^3.0"
},

You need to add the following line to your composer.json file under the 「require」 key. This will tell Composer to add the Astra Pro package to the list of packages your project depends on. 

Also, this will set the Astra Pro plugin version constraints to any stable version above 3.0.0.

Repositories Arrey

"repositories": [
{
"type": "package",
"package": {
…
}
}
}
]

Next, you need to register Astra Pro Package Repository in your composer.json file. To do this, you must first edit the Astra Pro Package object. 

repositories: Repository Arrey containing Astra Pro Package object

ElementDescriptionTypepackagePackage description for Astra Pro version which is requestedpackage element

Astra Pro Package Object

The 「package」 object contains data on the Astra Pro package you are requesting. Here, you need to modify the version string for each update.

"package": {
"name": "brainstormforce/astra-addon",
"version": "3.6.3",
"type": "wordpress-plugin",
"dist": {
"type": "zip",
"url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
},
"require": {
"composer/installers": "^1.11"
}
}

package: Astra Pro Package Description Object

ElementDescriptionTypeNotesversionThe Astra Pro version which is requestedstringYou need to specify the exact version in format 「X.X.X」 (e.g. 「3.6.3」) for each update.distThe packaged version of Astra Pro stable version filesPackage data objecturlDownload link with authentication parametersstringurl element

Also, you need to update the url parameters by adding your Astra Pro license key and a domain of the website on which you』re updating the plugin.

url: URL parameters

ParameterDescriptionTypeRequiredNotesPURCHASE_KEYThe Astra Pro keystringRequiredThe key can be acquired from our Store at Account > LicensesSITE_URLThe domain of your website (without HTTPS)stringRequiredValid format is: 「example.com」 (not 「https://example.com」)

URL example:

https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key=fdsi3h3iu4n22l344n4l2&site_url=example.com

Install or Update Astra Pro With Composer

Now that your composer.json is configured, you are ready to update or install Astra Pro on your website. You can install or update Astra Pro by running the following command in Composer:

composer update

New Header Button Options in Astra theme (Old Astra Header)

Note:

We have 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 and will find the same options of Open in a New Tab and Link Rel [Refer this screenshot]

Below are the new options introduced before Astra theme version 3.0.0 and where you can find them

The button field of Astra theme』s version 2.3.0 introduces two new options for Button which are – Open in a New Tab, and possible to add a nofollow, follow, and other using the rel attribute.

Note: You can refer to the following article to understand the working of rel attribute for any button module.

Typography options for Header Button

Astra theme version 2.5.0 brought Typography options for Header Button.

With new typography options, you can choose the Font family and set the Font Size and Weight, add Text Transform or set the Line Height and Letter Spacing.

Mobile Header with Above/Below Header (Old Astra Header)

Mobile Header addon is available with Astra Pro version 1.4.0 and above.

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.

Also, this addon adds more features to the Above Header and Below 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.

If you are below version 3.0.0 of Astra theme/ Astra Addon – You would need to activate Mobile Header and Header Sections addons from Appearance > Astra Options.

Settings can be found under Appearance > Customize > Header > Above/Below Header > MOBILE HEADER.

Display on Mobile Devices: This setting lets you choose whether you want to display above/below header sections on mobile or not.Merge Menu on Mobile Devices: If Menu is selected for both/either of the section in the above/below header, this option is useful. It allows choosing whether to merge above/below the header menu with the primary menu on mobile. If you select it to merge, the above/below header menu will appear inside the primary header toggle button.If you do not want it to merge, a separate toggle for the above/below header menu will appear on mobile.This allows setting the different layout for the above/below header menu and primary header menu. Swap sections on mobile devices: It will alter the sections of the above/below header on mobile. Enabling this will swap section 1 and section 2. Layout: Mobile Header Alignment – This allows to display the above/below header section inline or stacked on mobile devices.Mobile Header Menu Styling: Choose the Menu Style (Dropdown, Flyout or Full-Screen), add Menu Label, and set color and style for a Toggle Button.Colors: You can set colors for Menu Item Border, Header Background, and Menu and Submenu Links and Background.Typography: Choose Menu and Submenu font style.Spacing: Add spacing to Mobile Header, Menu, and Submenu

Mobile Header with Astra (Old Astra Header)

Astra version 1.4.0 and above provides a feature to design Mobile Header separately for responsive devices.

It offers options to adjust Header Breakpoint, set different Logos, choose different Menu Styles, set Colors separately for the menu.

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.

Mobile Header Options with Astra Theme

From your WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu. Here, scroll down to the 「Mobile Menu」 section which contains mobile header settings listed under several different tabs:

Menu Breakpoint

The setting can be found under Header > Primary Menu > MOBILE MENU The default menu breakpoint for Astra is 921px. It can be changed easily with the slider.For example – If a breakpoint is set to 554px then the desktop header will be visible till 554px width and it will change to a mobile header below 554px.

Dropdown Target

This will allow you to set a target to open a submenu in the mobile header. It has two options – Icon and Link.If you choose Icon, the submenu dropdown will open with the click of a small arrow icon beside the menu item name.And if you choose Link, the submenu dropdown will open with the click of an entire menu item (link).

Toggle Button Style, Toggle Button Color, and Border Radius

Settings can be found under Layout > Header > Primary Menu > MOBILE HEADER.Style the toggle button with these settings. (?)

Menu Label on Small Devices

The setting can be found under Layout > Header > Primary Menu > MOBILE HEADER.It allows adding a label to the toggle button and highlight it. (?)

Mobile Header Alignment

It allows choosing the alignment of logo and menu on devices below breakpoint. (?)

Logo (optional)

The desktop screens often require a larger logo than mobile screens. At the same time, this large logo might hide the big part of the viewport on mobile. Also, there might be differences between desktop and mobile headers that would require a different logo (color, type, size, etc.). Thus, there is a separate option for adding a different logo for mobile devices.

You can set this under Layout > Header > Site Identity. Choose option Different Logo for mobile devices? and add a mobile device logo image here. (?)

To adjust the size for the logo click on the responsive toggle button for Logo Width and adjust the width.

Mobile Header Options with Astra Pro

The Mobile Header module from Astra Pro adds more options to the layout along with Colors & Background options.

Mobile Header 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.

Quick Steps to Manage a Mobile Header Using the Mobile Header 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 module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Header > Primary Menu > MOBILE HEADER ] to edit module settings

Activate the module from the dashboard under Appearance > Astra Options > Mobile Header. After activating the module additional options will be added under Appearance > Customize > Header > Primary Menu > MOBILE HEADER.

Menu Style

Choose a style for the menu which appears with the click of the toggle button.

Dropdown will be simply a list of menu items that will appear on clicking the menu toggle button. Flyout style will allow the menu to slide from either end of the screen.Full-Screen style will cover the whole screen and display menu item in the middle.No Toggle style will not display the menu inside the hamburger menu on responsive devices. The menu will appear same as desktop.

Border for Menu Items

It will apply a border around each menu item. Set width to the border and then apply color.

Colors & Background for Mobile Header

The colors & Background module from Astra Pro provides more Colors & Background options for Mobile Header.You would need to activate Colors & Background and Mobile Header modules from Appearance > Astra Options.

Settings can be found under Appearance > Customize > Header > Primary Menu.

Click on the responsive toggle button and set the colors and background for the Mobile Header.

Background

Set Background Color for Mobile Header or set Background Image and adjust the opacity. (?)

Primary Menu and Submenu

If either of the Menu Style – Flyout or Full-Screen is selected, you can set the background image and overlay color for a menu with the Primary Menu background image. (?)