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.