诗语，作者Astra 文档

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.

上次修改 2022.1.1

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)

上次修改 2022.1.1

Custom 404 Page

You can design a custom 404 page using the Custom Layout module available with Astra Pro. 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 layout for the 404 page will replace the default 404 page content with your custom content.

You can design a 404 page with any page builder.

404 Page 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 404 Page Layout Type options.

404 Page Display Settings

Disable Primary HeaderDisable Footer Bar

Display and User Role Settings

You can decide to display your custom layout set as a 404 page only for specific user roles. You can add more than one user role with the “Add User Role” button.

Responsive Visibility

This option lets you choose a device where you wish to display this 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.

上次修改 2022.1.1

Starter Templates – Restore Customizer Backup

While importing a complete site with starter templates, you’ll see a popup offering the option to “Delete Previously Imported Sites”.

This option will delete all previously imported data from starter templates, including pages, posts, media, customizer settings, etc.

But, at the same time, the plugin will create a backup only for your existing customizer settings. Thus, if you access your website files, you’ll find the backup file following this path: /wp-content/uploads/astra-sites/. This is automatically done to give you an option to save time applying style, typography, and colors again.

In case you need to restore these customizer settings, just follow the steps below:

Note:

The below-mentioned steps and Import / Export Customizer Settings plugin work only with the Astra theme.

Step 1 – Access the root folder of your WordPress site via FTP client (e.g. Filezilla), and follow this path: /wp-content/uploads/astra-sites/. Your latest backup file will mostly appear on the top. In addition, backup names will contain the date and time when the files were created.

Step 2 – Once you find the backup you need, download the file to your computer. Make sure you download the .JSON file and NOT the Text file.

Step 3 – Log in to your website, navigate to Dashboard > Appearance > Astra Options, scroll down to find the “Import / Export Customizer Settings” option, and click Activate. Accordingly, this will install and activate the “Import / Export Customizer Settings” plugin with one click.

Step 4 – Once you activate the plugin mentioned above, you will see a new import option on your “Astra Options” page. Hence, you will find the “Import Settings” in the sidebar (refresh the page once if you don’t see the option). Now, import a backup file you downloaded in step 2 to restore your Customizer settings.

You’re done!

Your new site will now have the same Customizer settings you previously used.

上次修改 2022.1.1

How To Disable the Block Editor Support for Widgets

WordPress 5.8 brought many changes, and one of these is using Blocks in Widget Areas. The Astra Theme supports the use of a block editor and is fully compatible with the mentioned changes. This document will help you if you need to disable Block Editor for Widgets.

Though it’s a great feature, some users might still need this to be reverted to the previous widget editor. You can disable Astra’s Block Editor support for widgets by using a custom code provided in this document. Let’s show you how to do it.

Why Did This Happen?

WordPress version 5.8 came with a large number of improvements and changes, making a large leap forward for both WordPress and its Block Editor.

Using the Block Editor to manage Widget areas makes it easier to add different blocks to any widget area without coding or using shortcodes.

Having that Astra is fully compatible with this change, you’ll be able to use blocks directly with Astra Customizer options too, including the Header and Footer Builder.

How To Change This?

If for any reason you need to revert this to the previous Widget editor, you can disable Astra’s block editor support for widgets by adding a custom code.

You can add the following custom code to the functions.php file of your Child Theme:

add_action( ‘after_setup_theme’, ‘astra_remove_theme_support’ );
function astra_remove_theme_support() {
remove_theme_support( ‘widgets-block-editor’ );
}

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.

上次修改 2022.1.1

Inside Page/Post Content Custom Layouts

You can insert any content inside Gutenberg Page/Post with Astra Pro’s Custom Layout module. Design your custom layout and display it at any location on selected Gutenberg pages/posts.

With this feature, you can design a layout in one place and display it on multiple pages/posts. This is useful for displaying the same information on different posts/pages to attract users. You can use this for CTAs, attractive sales offers, special discounts, important information, and so on.

You can completely customize the layout and easily put it on any page/post at the selected location.

Let’s see how this option works. Before we start, make sure to have the Astra Pro plugin is activated.

Add Inside Post/Page Content Layout

Step 1 – In the dashboard, visit Appearance > Astra Options and activate the Custom Layouts module;

Step 2 – Next, navigate to Dashboard > Appearance > Custom Layouts and click on the “Add New” button;

Step 3 – You will see the Custom Layout Type selection pop-up. Here, select the “Inside Post/Page Content” option.

Step 4 – Now, you can design a layout that you want to display on Gutenberg pages/posts. Further, you can design it with the Block Editor, Elementor, or Beaver Builder.

Inside Pages/Posts 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 Inside Pages/Posts Layout Type options.

Location Settings

You will observe two options under Location on the post/page

After a certain number of blocks – This option will allow you to display your custom layout after the selected number of blocks on the Gutenberg page/post. Further, you also get an option to enter – Block Number. Here you can set the number of blocks after which your custom layout can display.

Before certain number of Heading blocks – This option will allow you to display your custom layout before the selected number of Heading blocks on the page/post. Note that only native Gutenberg heading blocks and heading added with the UAG plugin will be considered. Further, you also get an option to enter – Heading Block Number. Here you can set the number of Heading blocks before which your custom layout can display.

To illustrate, you can check the example below:

Display And User Role Settings

Next, you can set exact pages/posts where you want your inside pages/posts content to be used. Thus, you need to adjust Display and User Rule Settings.

To do this, click on the “Display On” option dropdown and select the required display locations. In addition, you can exclude some locations using the “Do Not Display On” option.

If you wish to restrict this custom layout visibility to some user roles only, you can do so with the User Roles option.

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 Settings

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.

Done!

上次修改 2022.1.1

Custom Layout – Hooks

Custom Layouts is a module available with Astra Pro. One of the available Layout types are Hooks that allow you to insert custom code or content using Astra hooks. This article will show you how to set up the Hooks custom layouts.

In additions, Custom Layouts require both the Astra theme and Astra Pro Addon installed and activated on your website. Further, before proceeding, you can check out the Custom Layout module overview first.

Add Hooks Layout

Step 1 – In the dashboard, visit Appearance > Astra Options and activate the Custom Layouts module;

Step 2 – Next, navigate to Dashboard > Appearance > Custom Layouts and click on the “Add New” button;

Step 3 – You will see the Custom Layout Type selection pop-up. Here, select the “Hooks” option.

Next, you can add a custom code. To do this, you can click the “Enable Code Editor” button.

Adding Custom Code? You Got a Code Editor!

This option enables the code editor which is helpful to add custom code.

While adding your code, please make sure to include opening statements of the code which pasting your code. Some examples are below:

/* Add Your CSS Code Here. */

You can use Page Builder as well

You can create a layout with page builder too, and add it to any action hook. For example, you can design a call to action with page builder; or newsletter subscription form and display inject it automatically below the content of all blog posts.

Pro Tips:

For Beaver Builder: Make sure your page builder is enabled for the “Custom Layouts” post type. For example, Beaver Builder has a setting for that. For Elementor: Make sure your page builder is enabled for the “Custom Layouts” post type. If you’re having trouble loading the page builder for any Custom Post Type such as this, please flush your permalink settings and try again.

Inside Hooks 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 Hooks layout type options.

After selecting “Hooks” dropdown from Custom Layout, you get the following options:

Action: Action is basically a location where your code or custom content will be injected. To see all actions Astra offers and their locations, please visit this page.Priority: If there are multiple items added for a particular action, priority decides which item gets executed first. Lower the number, higher the priority.Spacing: If you need to add some padding above / below the custom content, use this option.

Display And User Role Settings

Next, you can set exact pages/posts where you want your hooks layout to be used. Thus, you need to adjust Display and User Rule Settings.

You can choose your custom layout to display on the entire website or on specific pages/posts with Display On option. In addition, you can exclude some locations using the “Do Not Display On” option .

Furthermore, you can disable your added hooks layout only for some user roles. You can do this with the User Roles option.

For example:If you want to inject a call to action on Entire Website; Except on 404 page; For Logged Out users, you need to set the following options –

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

Responsive Visibility

This option lets you choose a device where you wish 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.

Layout will be active for selected duration.

上次修改 2022.1.1

How to Remove Featured Image Link on Archive Page?

A Featured Image on the Archive pages has a link to the image, if you need to remove the link you will need to just use the following filters –

// Filter to remove featured image link on Archive Page

add_filter( ‘astra_blog_post_featured_image_link_before’, ‘__return_empty_string’ );
add_filter( ‘astra_blog_post_featured_image_link_after’, ‘__return_empty_string’ );

Note: Add the above filter to your child theme’s functions.php, here’s an article to help you Add Custom code.

上次修改 2022.1.1

Add Your Sidebars

Your pages and posts can have different sidebars. Sidebars are used to provide additional information, links, filters, etc.

Astra Theme Walkthrough Docs:

Astra Theme WalkthroughThis Is Your CustomizerStyle Your Website With Global SettingsBuild Your Header Find the Way With Breadcrumbs Set Up Your BlogAdd Your Sidebars (currently reading)Build Your FooterHost Google Fonts Locally – Performance Is the KeySee Other Customizer OptionsHow To Build Quick Sites With Astra?Getting the Most Out of Astra Theme

The Sidebar option in your Customizer allows you to add sidebars across your entire website by setting Default Layout. Additionally, you can set different options for the following locations:

PagesBlog PostsArchives (like Blog Archive for example)

Further, depending on what plugins you have activated, you will be able to set the sidebars for additional pages (e.g. WooCommerce or LearnDash pages).

There are four available sidebar options to be chosen:

No Sidebar – hide sidebarLeft Sidebar – position sidebar on the left side of the contentRight Sidebar – position sidebar on the right side of the contentChoosing Default on any location will apply the Default Layout sidebar settings.

Sidebar Width sets the percentage of your container area reserved for the sidebar.

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.

Previous: Set Up Your Blog

Next: Build Your Footer

上次修改 2022.1.1

WooCommerce Integration Overview in Free Astra Theme

Astra integrates nicely with WooCommerce. All WooCommerce elements automatically adapt to the rest of your Astra powered website and take colors, fonts out of the box from the theme customizer settings. That way, you can have your shop up and running immediately with minimum setup. Let’s take a look!

Note: We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the WooCommerce module of Astra Pro Addon.

Astra Pro Addon extends the WooCommerce options with WooCommerce Module.

WooCommerce Settings

Please be sure you have WooCommerce plugin installed. Once you have it installed and activated, you will find a dedicated tab for WooCommerce under the Customizer.

Note: After Astra 2.0, we have combined Astra WooCommerce settings with WooCommerce Default settings in the Customizer. Now you will find the combined settings in the first panel of WooCommerce.

WooCommerce Tab

Under the WooCommerce tab, you will find further options categorized into further tabs.

Note: Now we have brought all the WooCommerce settings under a single WooCommerce tab. While, you will find the Astra settings with the WooCommerce settings in the pointed-out tabs.

Product Catalog

Here you can control how your Shop page looks like. These are available settings:

Shop Archive Content Width: You can choose the default or custom option. If you select the custom setting you can set the Archive Content Width.Shop Columns: The number of columns for each deviceProducts Per Page: Number of Products you want to displayShop Product Structure: Structure of products where you can move elements or disable them.

Single Product Page

Enable or disable breadcrumbs from appearing in this section.

Cart Page

Should you wish to display cross-sell products, you can enable “Enable Cross-sells” checkbox.

Product Images

You can set Main Image width and Thumbnail Image Width using Astra along with WooCommerce settings which provides the Thumbnail Cropping options.

Cart Icon in Menu:You can display the cart icon in the menu by navigating to Appearance > Customize > Header > Primary Menu option and enabling WooCommerce as the Last Item in Menu.

Container Setting

You can control container layout independently on WooCommerce pages at Appearance > Customize > Global > Container. The option you set here will affect WooCommerce Shop, Single Product, Cart, and Checkout Pages.Please note, you can override container settings for individual pages through meta settings.

Sidebar

You can control sidebars independently on WooCommerce pages such as Shop, Cart, and Checkout. To set up sidebars navigate to Appearance > Customize > Sidebar.For further control on Single Products, we have provided its own sidebar setting so you can have a totally different sidebar there.You can add widgets in any sidebar from Customizer.

Again, please note, you can override container setting for individual pages through meta settings.

Base Color & Typography

As mentioned at the beginning of the article, all WooCommerce elements automatically adapt with the rest of your Astra powered website and take colors, fonts out of the box from the theme customizer settings.

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