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.

When working with your website, different themes, and plugins, you’ll inevitably encounter some problems. These can sometimes consume hours of your time while trying to find out the root of the problem. This is where debugging can help. You can enable debugging in different ways, and this document will show you how to do it.

Installing a new plugin or theme, updating, or adding a custom code can cause conflicts. Some issues will show immediately and can even make your website temporarily unusable (e.g., the White Screen of Death). Others will show only in certain situations and will create issues with some functionality or plugin. These issues can often be solved by manually deactivating all of your plugins and re-activating them one by one. This way you can find which plugin is creating the issue. Further, you can switch to another theme to check if the issue is coming from that side. All of this takes a lot of time.

If you enable the debug mode, it will display a log of PHP errors and warnings. This can help you find the source of the issue you’re facing quickly.

You could even use this to prevent some issues. Some errors, if they exist, will only be visible in debug log even though everything seems fine on your website.

You can enable debug mode by using a plugin or manually. We will show you how to do it using both methods.

No matter which method you choose, It’s advisable to do this in your staging environment (same as your new installations, updates, etc.) as errors will become visible on both your frontend and dashboard. Thus, doing this on your staging environment will enable you to check errors and fix whatever issues you find without disturbing your visitors.

Method 1 – Enable Debugging using a plugin

If you’re not sure about working with your website files or find Method 2 just too complicated, the WP Debugging plugin is the right solution for you. You can enable debugging using the plugin by following these steps:

Step 1 – Navigate to Dashboard > Plugins > Add New;

Step 2 – In the search bar, type wp debugging;

Step 3 – Click the “Install” button on the WP Debugging card in the results. Once the plugin is installed, an “Activate” button will appear in the same place;

Step 4 – Click the “Activate” button;

Step 5 – Navigate to the Dashboard > Tools > WP Debugging;

Step 6 – Click on the check box next to the “Set WP_DEBUG to true” option and click on the “Save Changes” button.

Don’t forget to disable the debug mode after you’re done.

Method 2 – Enable Debugging using manually

Alternatively, if you prefer to do this manually and have no problem with editing your website files, or you’re locked out of your website (e.g., White Screen of Death) and don’t have another option, we will show you how this could be done by editing your wp-config.php file.

How to access the wp-config.php file?

Before making any changes to any of your files, please create a complete backup of your website. Also, it is advisable to make a copy of the original file before editing it – in case something goes wrong, you can always use this original file to start over.

For this article, we’ll use the FileZilla FTP client, so please install it on your computer (unless you are familiar with another FTP client you would prefer to use). Let’s start:

Step 1 – Add your FTP access data to FileZillas’ Site Manager

Step 2 – Connect to your server

Step 3 – Navigate to your websites’ public_html (root) folder. Here you should find the found your wp-config.php file.

Step 4 – Right-click on the file and select “Download’ to copy the file to your computer.

Step 5 – Open the file using the code editor to edit the file. You can edit the file using some of the code editors like Sublime Text or Notepad++.

Step 6 – Scroll down to the “That’s all, stop editing! Happy publishing” line

Step 7 – Add the following value before that line and save changes:

define( 'WP_DEBUG', true);

define( 'WP_DEBUG_LOG', true); 

Step 8 – Once you modified your file, just upload the file back to your server (using the FTP client), replacing the original file with this modified one.

By following these steps, you will enable your debug mode and create a debug.log file where your errors will be saved.

To disable the debug mode once you’re done, repeat the steps for enabling, just this time, either completely remove the previously added code or modify it as follows:

define( 'WP_DEBUG', false);

How to use debugging?

If you’re trying to debug some issue you’re currently experiencing, you’ll need to repeat the steps that led to this issue once your debug mode is enabled. This will make a new error log, and you’ll be able to check it out.

Viewing the debug log

Method 1 – Using the plugin: click on the “Debug Quick Look” menu in your admin bar on the top of your Dashboard screen. In the dropdown menu, click the “View File” option. This will open a new tab showing the errors in the debug log.

Method 2 – Manually: access your site files and navigate to the following path public_html/wp-content/debug.log – open the file to view the errors in the debug log.

You can find the typography presets for your website by navigating to Appearance > Customize > Global > Typography.

What Are Typography Presets?

Presets are created by our team of professional designers. Thus, this feature provides you with a great combination of font families packed together with other font properties. Combined, these make your website look just perfect. Further, when you apply any preset it will modify all text on your website to match its style.

Each typography preset includes the following font properties:

• Font Family
• Weight
• Size
• Line Height
• Text Transform

Trying out different combinations of these settings over and over, searching for the right combination of settings can be tiring. On the other hand, you can let the typography presets do all the work for you. 

Moreover, all these settings will be applied to both your customizer typography options and your content, saving you time immensely.

How To Use Typography Presets?

Follow these steps to apply typography presets:

Step 1 – Navigate to Appearance > Customize > Global > Typography;

Step 2 – Click on the desired Preset to check it out. Immediately, click on the new preset will apply all typography settings to your Customizer options and your content.

Step 3 – After that, you can modify any of these settings even with the preset is applied.

Step 4 – Click the “Publish” button to save the changes.

If you need to revert the typography settings to your default settings (before using presets), you can use the “Reset” button:

You can find the Button Styles section at Appearance > Customize > Buttons.

What Are Button Presets?

Each preset contains different button settings like padding and border radius, text, background, and border color. These presets provide different button styles for you to choose from.

Once a preset is applied, it will automatically apply all settings for that button. Thus, you don’t need to do the settings over and over nor add CSS manually to design multiple buttons. Just choose a style you wish to apply, and that’s it.

How To Use Button Styles?

Follow these steps to apply your button styles:

Step 1 – Navigate to Appearance > Customize > Buttons

Step 2 – Click on the desired Button Style. You can try them all. Applying the new presets will change all button settings to adjust it to the selected style.

Step 3 – If needed, you can modify these buttons after the style is applied.

Step 4 – Click the “Publish” button to save the changes.

If you need to revert the button style, you can use the “Reset” button:

The Global Color Palette feature is available with the Astra theme since version 3.7.0. You can find these settings under Appearance > Customize > Global > Colors.

Setting Palettes

There are three palettes available, each of them containing nine colors in total. These colors are connected throughout the palettes. This means, that when you switch between the palettes, colors will be replaced with their matching colors in the currently activated palettes.

For example, let’s say that the “Color 1” is set blue in Palette 1, and set to green in Palette 2. Switching from Palette 1 to Palette 2 will change all settings linked to “Color 1” from blue to green.

Let’s start by editing palettes, following these steps:

Step 1 – Click on one of the three available palettes to start editing. This will show you available color slots;

Step 2 – You can set each of these colors by clicking on the color slot. This will open a color picker.

Step 3 – Choose the color you want to apply to this slot;

Step 4 – In the same way, you can set all other colors;

Step 5 – Click the “Publish” button to save changes.

You can repeat these steps for each of the three color palettes.

Also, the Astra Theme is one of the first default themes to implement theme.json for Gutenberg Color Palette, so the palette colors can be edited this way too.

Linking Global Colors

Each palette color can be used for any of the color settings on your website. You just need to link the global palette color to your settings and you’re done.

Let’s show you how to link the global colors. For this example, we’ll be linking the button colors:

Step 1 – Let’s say we have a button in the header. To link its background color with global color, just edit the setting and from the global color palette select the color you want. Clicking on any color from the palette will link it to the current color.

Step 2- Now if you navigate to navigate Appearance > Customize > Global > Colors and try to change the color that you linked in the above step, you will observe the linked color will change automatically.

Step 3 – Click the “Publish” button to save changes.

Though you set your Global Color Palettes, you can still use your static colors, as you did previously, for any color settings in your customizer.

Keep in mind that changing any color settings to some other static color will disconnect the palette colors for these settings. This means that the palette colors will not be automatically applied to these settings anymore.

To use palette colors for these options again, you need to link them again.

Switching Between Palettes

Now that you have all the color settings linked to Global colors, you can switch between your three palettes to completely change the way your website looks.

You only need to activate another Global Color Palette and all colors will be replaced on your entire website with the matching color set for this palette:

Let’s say that we set the “Color 1” in our “Palette 1” to orange color. In our “Palette 2” the “Color 1” is set to purple color. This means, that when our Palette 1 is active, all website elements linked to the “Color 1” are orange. Switching to “Palette 2” will automatically change all of these elements to purple color.

Let’s show you how we did this in our example:

Step 1 – Navigate to the Global Palette option (Appearance > Customize > Global > Colors);

Step 2 – Click on “Palette 1” to activate and set the “Color 1” to the orange color;

Step 3 – Click on “Palette 2” and set the “Color 7” to the purple color;

Step 4 – Navigate to Appearance > Customize > Global > Buttons

Step 5 – Here, click on the “Border Color” and link it to the “Color 1”. This will make the button border white orange when Palette 1 is active, and purple when you switch to Palette 2.

Step 6 – Click the “Publish” button to save changes.

This way, you can easily switch all of your website colors with just one click. For example, this way you could use your standard website color palette most of the time, and switch to the remaining two palettes for special occasions. Thus, you could make adjustments to your whole website for the New Year holidays, St. Valentine’s day, Winter or Summer season, etc. in just one click.

Global Color Palette for Your Content

Global Color Palette is compatible with both Gutenberg and Elementor.

Your active palette colors will be available with your page builder color options out of the box – just set your palette colors and use them for your content too. Check it out:

Gutenberg Blocks:

Elementor Widgets:

Same as with Customizer options, these colors will adjust to your palette selection. Thus, when you change your color palette, your content colors will change accordingly.

The settings can be found in the customizer under Global > Typography > Base Typography. After selecting a font-family, Font Variant option will appear. Select the required font variant. You can choose more than one variant.

Note: 

1. Font Variant option is available only for Base Typography.
2. Font Variant option is available only for Google Fonts.

As shown in the above video, if you select font family as Poppins and select variant 400 Normal and Bold 700. Whenever you mark text as bold, it will be applied with Bold 700 font weight. These variants will be available with page builder as well.

Along with Font Variant option, typography param introduces an option that allows to search font-family from the lists. It can be seen in the above video. This is available for all typography settings.

From the WordPress dashboard navigate to Appearance > Customize > Global > Colors.

Base Colors

This is default basic color option available with the theme –

Following are the options you will find –

• Text Color – Color for body text and description on the website
• Theme Color – Color for all theme elements like button, selected text background color, etc.
• Link Color – Color for all text to which links have been added
• Link Hover Color – Hover color for all text to which links have been added
• Background (Color and Image) – This color will be applied as a background color to the body on the entire site. If you set both – color and image – make sure to adjust the opacity of the color to make the image visible.
• Improvement (*) from Astra theme and Astra Pro v2.4.0 you will find a responsive option besides the Background option.

If you are using a page builder, you can override the above colors with the page builder’s color settings. Also, overriding the theme colors can affect your color consistency across pages. Page builder colors will be applied to your content build with the page builder. On the other side, other pages and posts (not built by that page builder) will still use the theme settings. Thus, it could happen, for example, that your text or heading font color is different on your pages (created using page builder) and your Blog Archive or Posts. It’s important to keep in mind that this should be checked, as the settings will not be automatically synced.

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the options available with Astra Pro Colors & Background module.

Astra provides global typography options where you can make changes at one place and they will reflect globally.

From the WordPress dashboard, you can find settings under Appearance > Customize > Global > Typography

Base Typography

This is default typography that will apply to the entire website. Available options are –

• Family – Make your choice of Font Family from Nunito, Times New Roman, Sans Serif, etc. for the content on your website
• Variants – It is necessary to select font variants that you will be using on the website. Read more here
• Size – Select the default Font Size of the content on your website, you will also find the option to set the Text Transform i.e [None, Capitalize, Uppercase, Lowercase]
• Weight – Select the default Font Weight of the content on your website
• Line Height – Setting a value here would add a line-height to the website’s body and content
• Paragraph Margin Bottom – Set a default Paragraph Margin Bottom for the Body and Content

Font Family

Astra allows you to use System Fonts, Google Fonts, Typekit Fonts as well as Custom Fonts on your site. Refer a document that will explain how you can select a font with Astra.

You can easily include Custom Fonts with Astra without adding a single line of code.

Headings

Headings Typography can be found under the Customizer > Global > Typography > Headings.

You can set common font style and individual font size for all Headings – H1 to H6

Note: If you are using a page builder, you can override the above Typography with page builder’s Typography settings for specific sections.

We provide more specific typography options in the dedicated module of Astra Pro Addon plugin. Learn more about the Typography module of Astra Pro Addon.

The content area and the sidebar are parts of the container. The content area is technically called as the primary container, whereas the sidebar is the secondary container.

You can apply container layouts globally for the entire website through the Customizer option at Appearance > Customizer > Global > Container.

Different containers can be applied for individual pages and posts from meta settings. These are page-specific settings that have high priority than customizer settings.

Container Width

Content will be display within this width. You can try width in combination with container layout to create different views.

Container Layout

Astra offers 4 types of Containers Layout. These are global containers that will be applied to the entire website. But you can set different containers’ layout for different post types with Dedicated Container Layout. To have more control over container layout on each page you can refer page meta settings.

All container layout types are explained in the following links –

• Boxed
• Content Boxed
• Full Width / Contained
• Full Width / Stretched

Dedicated Container Layout

The above 4 types of container layouts are separately available for the following post types. That means if you choose default layout as Full Width/Stretched, and for Archives you choose the Boxed option, then the entire site except archive pages will have Full Width/Stretched layout while Archive pages will have Boxed layout.

• Page Layout – For only pages
• Blog Post Layout – For blog archive and single blog post pages
• Archives Layout – All archives

Astra has integration with a few popular plugins. When those plugins are installed you will get dedicated container layout options for those plugin pages too. Below is the list of plugins that has integration with Astra –

• WooCommerce
• LifterLMS
• LearnDash
• EDD (Easy Digital Downloads)

Note:

We provide more advanced options in dedicated modules of Astra Pro Addon plugin. And such options are available in dedicated modules of Astra Pro Addon plugin. For e.g.

1. Container layout can be overridden by the page meta settings. The priority of the meta settings is higher than the customizer settings. Read more about Meta Settings here.
2. The width of the container depends on the Site Layout settings.

Primary Container is where the main content appears, whereas Secondary Container consists of the sidebar and various different widgets in the sidebar.

When you select the “Boxed Layout”; the individual containers and widgets appear in boxes.

You can find the setting under Appearance > Customize > Global > Container

You can change the background color from Customizer > Global > Colors > Base Colors > Base Colors.

Other Notes:

You can apply boxed containers for selected pages or posts from meta settings.

The width of the container depends on the Site Layout settings.

If you have Astra Pro Addon plugin, you can find additional options such as background color through our Colors & Backgrounds module. In case, if you don’t have Astra Pro, you can also add a background image with Custom CSS.

Also, we provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the Site Layout module of Astra Pro Addon.