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.

Since the header and footer are separate website areas from your content, they can be edited independently. Thus, you can create your header and footer with Astra and still use Elementor for your content. On the other hand, you can design your whole website, including the header and footer, with Elementor only.

Whatever way you choose, this document will show you how to get the most out of Astra and Elementor combo.

Why Are Header & Footer Important?

The header and footer are the first and last sections of your website and thus very important. The header is the first thing visitors see on your website, and the footer is usually the last.

They are located on all (or most) website pages and posts containing branding, navigation, and other important information.

Hence, a well-designed header and footer are essential for excellent user experience, brand awareness, and conversion. 

How Does Astra Theme Work With Elementor?

The Astra Theme is fully compatible not only with free Elementor but also with Elementor Pro and its Theme Builder. In addition, when you start building a page with Elementor, Astra will automatically set all options perfectly for Elementor.

Firstly, It’s important to understand that you use the Elementor to add and design your page or post content. Secondly, a theme is the “glue” keeping your website together. The WordPress themes are a canvas for your website – a framework that gives it structure and sets basics.

Thus, the Astra Theme will help you quickly set your website layout, fonts, colors, sidebars, breadcrumbs, featured images, etc. Further, Astra will provide you with options to integrate with some third-party plugins you might need, like WooCommerce. In addition, it will give you options to customize WordPress (e.g., Blog Archive) or third-party plugin pages (e.g., Shop).

Also, since the free version of Elementor comes without the Theme Builder, you are limited to editing only content. At the same time, you can build your header and footer with Astra Theme for free, and without additional plugins.

Header Footer Builder and Elementor

In truth, designing a great header and footer can make a real difference for your website. Therefore, Astra Theme comes with Header Footer Builder already included and ready to use.

The header and footer created with Astra will be perfectly integrated with the content you add with Elementor. Since the free version of Elementor has no options for header and footer building, this will be your default option.

Furthermore, all of our Starter Templates for Elementor are created this way. When importing any Starter Template for Elementor, you’ll get a website where only content is created with Elementor. Header and footer will be built with Astra’s Header Footer Builder.  

Astra Header and Footer Builder

Step 1 – To build your header, navigate to Dashboard > Appearance > Customize > Header Builder. Similarly, to start building your footer, navigate to the Footer Builder option;

Step 2 – To build your header or footer just add, style, and drag different elements to the desired position. Further, you can individually set each element you added. All other Customizer settings will be applied automatically;

Step 3 – Next, design your header and footer responsively by switching the viewport (desktop, tablet, and mobile) and making adjustments. You can use different elements, positions them differently, and modify settings for each viewport;

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

Once you have created your header and footer, you can add content to your pages and posts using Elementor. 

How To Create Header and Footer With Elementor (Free)?

Alternatively, you can choose to build your Header and Footer using Elementor. 

To do this, you will need to install the “Elementor Header & Footer Builder” plugin additionally. Then, you can and replace the default Astra header and footer with the ones created with Elementor. To illustrate, we’ll show you how to add the Elementor header for your entire website.

You can install the plugin by navigating to Dashboard > Plugins > Add New. In the search bar on the top right, type in “Elementor Header & Footer Builder”. Click on the “Install” button.

Create Template (Header or Footer)

Firstly, you need to create a new template (header or footer) and design it with Elementor. For this, you need both Elementor and Elementor Header & Footer Builder plugins activated.

Step 1 – Navigate to Dashboard > Appearance > Elementor Header & Footer Builder and click on the “Add New” button;

Step 2 – Give the template a name, and click on the “Edit with Elementor” button to start designing your template. 

Step 3 – Add your design and click on the “Publish” button to save it. Click on the Elementor menu and “Exit to Dashboard” to return to your template settings.

Add Template To Your Website

Now that your design is ready, you need to set up your template to display it on the front end:

Step 1 – Select the type of element you want to create: Header or Footer. For our example, we choose to create the header;

Step 2 – Add the display rules. For “Display on” choose “Entire Website”, and for the “User Roles” select “All”. Choosing these options will add this header or footer to all of your website’s pages and posts;

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

Now you have set your Elementor header and footer. Keep in mind that adding individual widget settings in the Elementor editor, will overwrite any Customizer settings. To change this, you’ll need to edit the element. 

FAQs

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 update came with the fix for this, but the fix is not applied automatically to existing websites. Learn how to apply it to your website.

Why Do I Need This Improvement?

Previously the right margin wasn’t applying on the front end for the Footer Widget elements in your Footer Builder. 

Though Astra 3.6.7 update comes with the fix, this won’t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when the theme is updated. 

As mentioned, for the existing website, this improvement needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don’t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_apply_right_margin_footer_widget_css', '__return_true' );

If you are not sure how to add this code, please check this article.

This document will help you avoid blurry and cut-off images. Learn how to get your images perfectly sized every time. Also, for more details, please check our Blog article on featured images. 

Why Is Featured Image Important?

Featured Image is most often the first point of contact between your content and users. Whether we’re talking about social media, browsing through your website, or any other search, the task of the featured image is to attract the user’s attention.

This image most often shows on the top of your posts, your website’s Blog Page, and related posts. Also, a featured image is often displayed when your content is shared on social media or as a message. 

The featured image gives a glimpse of the content in your post or page. Furthermore, it creates user expectations regarding the quality of your content as well as the offer. 

Also, with a bit of effort when designing your featured images, this becomes a chance to raise your brand awareness and stand out from the crowd.

Having said that, it’s clear why is it is crucial to make your featured image perfect every time.

Social Sharing

When your website content is shared on social media, your featured image will take a central role in attracting traffic, as it is shown together with the title whenever shared. 

Here, your images will be scaled proportionally. Thus, failing to set them properly may result in cropping, thus making parts of your image not visible.

SEO plugins like Yoast SEO or RankMath will provide you with options like adding a custom title and description for your posts, pages, and other content. Also, you could choose a different featured image, title, and description for sharing on Facebook or Twitter.

Set Featured Image

We explained the importance of featured images and how these are used. Now, let’s talk about featured image size and how to set things up.

To add a featured image to a page or a post, you will need to edit it. Once you start editing, choose a featured image in the page/post settings. As an example, we will explain how to add a featured image to a new post:

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

Step 2 – On the right side of the screen, check the post settings, and scroll down to the “Featured Image” section;

Step 3 – Click on the “Set Featured Image” field, and select or upload your featured image;

Step 4 – Publish/Update doc to save featured image.

Featured Image Size

Featured image size may vary depending on the theme being used. With Astra Theme, we recommend uploading the image size of 1200 pixels (width) by 628 pixels (height):

Once you upload the image, WordPress will automatically create several versions of your original image, used for different screen sizes. 

Setting your original image to 1200 x 628 pixels will also help avoid some cropping issues on your website and social media both.

Uploading Right-Sized Image vs. Resizing

It is vital to have all of your images optimized as the size of the images impacts your loading times and overall website performance. Some great tools will do this for you. You can check our blog article to compare different image optimization plugins and choose the best tool for you.

On the other hand, though these tools are a great help, only up to a certain point. To achieve the best results, the image files should be already formatted the right way before uploading them to your website.

Following the easy steps in this article, you can expect the end result like the one in the screenshot below – a header that displays your logo in the middle with your menu items distributed on the left and the right side.

How To Do This?

To achieve this header design with the Astra theme, you will need to use Header Builder and three elements:

• Site Identity & Logo
• Primary Menu
• Secondary Menu

No matter if you started building your website from scratch or imported one of our Starter Templates, the default header setup you will most likely see in the Header Builder consists of the “Site Identity & Logo” element on one side, coupled with the “Primary Menu” element on another:

To start building your header with a centralized logo, let’s first create your menus.

Creating Primary and Secondary Menu

Navigate to Appearance > Customize > Menus (you can also access menu setup via Dashboard). Follow these steps to start building your menus (you will need to build two):

Step 1 – Click on the “Create New Menu” button to create a menu:

Step 2 – Name your menu. You can name the menu as you wish. In order to track things easier, we named this first menu “Left Menu” as we will add this one on the left side of the Logo in the header

Step 3 – Select menu items you wish to add to the menu. If you need to create any new items, you can simply click on the “Add Items” button.

Step 4 – Scroll down to the “Menu Locations” section and mark this menu as “Primary Menu”:

Step 5 – Return to the Appearance > Customize > Menus and repeat steps 1 to 3 to create your second menu. We named this menu “Right Menu” but you can name it as it suits you:

Step 6 – Scroll down to the “Menu Locations” section and mark this menu as “Secondary Menu”:

Build Your Header

Now that you’ve created your menus, navigate to Appearance > Customize > Header Builder and follow these steps to create your header:

Step 1 – Add your “Site Identity & Logo” element to the middle section of the Primary Header, and add your Logo. The primary header is the middle header in your visual header builder:

Step 2 – Finally, to create your header with a centrally positioned logo as previously shown, add your Primary and Secondary Menu elements. Click to the left section of the Primary Header and add the Primary Menu element. Click on the right and add the Secondary Menu too. Click “Publish” to save your header.

Alternatively, you can position menus closer to the sides of your website by moving (drag-n-drop) Primary and Secondary Menu elements:

Step 3 – This step is optional and it will depend on your Logo design and other Site Identity options (if you activated Site Title or Tagline). You can add margins to your Site Identity & Logo element to make your logo equally distanced from both menus. Using percentage (%) as a size unit will make sure this distance looks good on all screens.

The Astra Theme comes with a drag & drop Header Footer Builder. With Header Builder, you can manage your site identity using the Site Identity & Logo element. This document will show you how to easily set your Logo and other Site Identity elements. These include:

• Logo
• Retina Logo
• Logo for mobile devices
• Site Title
• Site Tagline
• Site Icon (Favicon)

You can find the Header Builder by navigating to Appearance > Customize > Header Builder. To access the element settings just click on the element in the elements list on the left, or in the visual header builder under the preview.

Logo

You can add your Logo under the General tab. To add or change your logo, you can follow these steps:

Step 1 – Click on the Logo area and upload a file or select a logo from your Media Library. You can add logos as JPG, PNG, and SVG.

Step 2 – Though this step is optional, enabling a Different Logo For Retina Devices will ensure your logos look great on devices with retina screens. It’s advisable to upload at least two times larger so your logos won’t be blurred on high-definition screens. You can find out more about the retina logo in this article. If you decide not to use this option, your website will show your primary logo (from Step 1) on retina screens too.

Step 3 – Once your logo is added, you can choose the Logo Width. This will set the size of your logo, as the height will be automatically calculated based on the width. You can also set different logo widths for desktop, tablet, and mobile by clicking the responsive editing icon to switch between these screens.

Step 4 – If your design requires a different logo on mobile devices, you can switch to mobile editing and enable Different Logo For Mobile Devices to add a different logo only for mobile devices. Keep in mind that the mobile logo you set will be used for both tablets and mobile phones. You can find more about creating a mobile header in this article.

Step 5 – You can switch to the Design tab of the element and set Logo margins.

Site Title and Tagline

Site Title is a name you set for the website, while the Tagline is the short one-line description.

Step 1 – You can make these visible beneath your logo by enabling their respective options within the General tab of the Site Identity & Logo element. You can enable these separately for desktop, tablet, and mobile.

Step 2 – Usually, site title and tagline are added when creating a new website at Dashboard > Settings > General. If you want to modify these, you can do it directly in the element settings without leaving your Customizer.

Step 3 – Also, if you would like to position your site title and tagline on the right side of your Logo, you just need to enable the Inline Logo & Site Title option.

Step 4 – If you switch to the Design tab of the element, you will find the options for changing the Color and Font Size of the Site Title and Tagline.

Site Icon (Favicon)

This is a small image icon that can be seen in the tab of a web browser, bookmark bars, and WordPress mobile apps. You can set it with the site icon option. The recommended size for a favicon is 512 pixels. Learn more about Site Icon here.