This option can be particularly useful for websites that do not require a large banner area or for those that prefer to display their content in a more compact format. Disabling the banner area can also provide more space for the main content of your website, which can improve the user experience and help highlight the most important information on your site. In this document, we will explain how to turn the banner off from your single post pages using the meta settings of the Astra theme. If you would like to know more about the Banner Area in Astra theme, here is an article that will guide you through.

Let’s get started.

What is the banner area?

The banner area typically appears at the top of the posts and can include elements such as the Post Title, Post Meta, etc. 

How to disable the banner area for a single post?

You can easily disable the banner area for a single post using the meta settings of the Astra theme.

Step 1: Click on the Astra settings on the Post page where you would like to disable the banner.

Step 2: Navigate to Disable Elements option.

Step 3: Turn on the radio button next to the Disable Banner Area.

Please note that enabling or disabling the banner area won’t show the changes at the backend. You will need to open the post on the front end of your website to find the changes.

Before disabling the banner area:

After disabling the banner area:

In conclusion, the introduction of the Disable Banner Area Meta-Based Option in the Astra theme’s meta settings provides a useful feature for website owners to customize the appearance of their site.

We have added new Spectra Compatibility for users in the most recent update of the Astra theme version 3.9.4. This will enhance the user experience while working with Spectra utilizing the editor and the front end. In this document, we will explain the major updates that are going to be major game changers.

Better alignment with Page Title for Spectra blocks in Editor

We have improved the page title alignment and the container alignment of the Spectra blocks and the Gutenberg core block. All the container block types are now supported with the Spectra plugin and the alignment of all the blocks such as Full Width Contained, Content Boxed container and Boxed Container layout look better than ever.

Better alignment with Page Title for Spectra blocks in the Front-End

These alignments are improved in the front end as well without any extra effort. This will make creating the website using Gutenberg and Spectra along with the Astra theme much cleaner and easier. In the new version of the Astra theme, the page title, headers, paragraph columns, and core blocks and perfectly aligned.

Matching Front-end and editor experience with Specta

We have also improved the paddings and margins on this new version of the Astra theme. As always, we have also fixed a few minor bugs along the way.

User Experience:

For new users (fresh installation) the updates will automatically be in effect; however, the existing users, who updated to the latest version (3.9.4) of the Astra theme, will need to use the following filters (the updates directly don’t reflect in this case to maintain backward compatibility for your site). If you are not sure how to insert the code, please refer to this article.

You will need to switch to the “Compact” or “Comfort” or “Custom” mode from Customizer > Global > Block Editor > Core Blocks Spacing. Post switching to compact or comfort or custom mode, you can add the below filters to experience the new improvements:

/* For the new spectra compatibility fixes/improvements version 3.9.4 */
add_filter('astra_spectra_gutenberg_compat_css', '__return_true');

/* For previous fixes/improvements prior to version 3.9.4 */
add_filter( 'astra_get_option_wp-blocks-v2-ui' , '__return_true' );

Under the “Performance” option in the Astra Dashboard (WordPress Dashboard > Astra > Settings > Performance), you will find an option to enable this option to Load Google Fonts Locally. You can enable this option to download Google fonts and save them on your server. This can be great for improving the speed of your website and complying with GDPR laws.

Load Google Fonts Locally

When you use any Google font on your site, it requires a request to be sent to Google to fetch that font every time you load a page or post. This can harm your CLS points in the Core Web Vitals score. To help improve this, Astra Theme comes with a Self-Hosted Google Fonts feature built-in. This feature was added with Astra Theme 3.6.0 update. You can learn more about this feature in our Blog article.

In the Astra Dashboard, you will find a toggle button to enable the “Load Google Fonts Locally” option.

Enabling this feature will send only one Google Font API request, which will gather all of the font data & assets files from Google and store them locally on your server. Then, for any further requests, the Google fonts will be loaded using the locally stored files (until this option is enabled).

Preload Local Fonts

Once you have your local font files enabled, you can also preload these. By default, a browser will wait to load the font file until it starts “painting” visible content on the user’s screen (lazy loading). This may cause the situation where a browser is ready to load your websites’ text but needs to wait for the font file to be downloaded first, as it isn’t available yet. This situation slows down your page load and creates a bad user experience.

Preloading fonts will “tell” the browser to import the font early on, so the font is ready to be displayed as soon as the browser starts painting the text, which will result in a positive impact on your website performance.

Flush Local Fonts Cache

As the fonts will be loaded and saved locally, any changes with Google Fonts will not be applied automatically. However, to keep your website fonts up to date, this feature will occasionally refresh the locally stored fonts. This will happen with the following actions:

• Your website will update fonts automatically every month
• Every time you save changes in the Customizer

If needed, you can update fonts manually any time you wish by clicking the “Flush Local Fonts Cache” button.

Free Theme and Constantly Evolving

Astra theme started in 2017, and in 2020 it already had more than 1+ million active installs. Very quickly it became one of the Fastest, most Lightweight, and Highly Customizable themes for WordPress.

As you probably know WordPress is an open-source content management system. Being an open-source means that anybody can contribute to it. 

Keeping in mind that all of them have kind of unique living styles, you can imagine that the developers can have more or less different coding styles. That is why we have WordPress Coding Standards. Astra theme strictly follows these standards, using constantly very clean code, so it’s very simple for anybody to work with it. 

One of the reasons that theme is so popular, is that it’s constantly evolving and becoming more advanced while staying completely free. Since its beginnings we have released more than 200 theme updates, more than 270 templates, integrations with WooCommerce, LearnDash, LifterLMS, Easy Digital Downloads, etc.

When Gutenberg builder was added to WordPress 5.0 we made the Astra theme fully compatible from the start. We also added our free Spectra that come already included with the Astra theme. And not to forget, the Astra themes’ compatibility with Elementor, Beaver Builder, and Brizy too. 

All of this was coupled with the constantly expanding list of the theme features as well as a solid number of fully compatible free and paid plugins.

Astra 3.0 Theme Improved the Customizer Speed

With each Astra theme update, we are working on improving the performance of the theme and especially the Customizer. And with Astra 3.0 we made quite a leap forward – our already fast Customizer became 70% faster!

Using React JS combined with a lazy-loading feature which is also incorporated in the customizer, our customizer dropped from great 3.5 seconds to loading in around 1 second.

Since then, most Astra theme updates continuously bring further improvements and optimizations.

Astra Theme 3.0 also Brought a lot of Other Changes

Besides the Customizer speed increase, Astra 3.0 brought even more advancements and functions.

We optimized HTML and CSS significantly reducing the amount of code. The result is that our average page load times were reduced from 0.9 seconds to 0.7 seconds!

The biggest improvement that came with Astra 3.0 was our new Header Footer Builder. This created a completely new experience of visual Header and Footer building with a significant number of available elements and options, different Header and Footer design layers (Above, Primary, and Below), and much more.

With the following major updates, came the completely redesigned customizer UI that was covered by this guide, as well as new controls to duplicate and delete header and footer elements, Google Web Stories, SVG Icons support, Related posts… and there are many more to come.

Free Plugins

We constantly strive to help our users have an amazing website-building experience. You can check some of our free plugins that you can use:

All In One Schema Rich Snippet – you probably heard about schema markup? It’s a code you place on your website which provides additional information to help Search Engines understand what is the content on your pages really about. You can use this plugin to easily implement schema types like Review, Events, Recipes, Article, Products, Services, etc.

Ultimate Addons for Beaver Builder Lite – these ultimate addons will boost your Beaver builder with great additional modulus.

Elementor – Header Footer & Blocks Template – using this plugin you can add headers, footers, and blocks anywhere on your website and design these by Elementor without needing any other plugin or addon.

And these are just a few of the free ones. Feel free to also check out some of our premium plugins.

Education

On top of the Astra theme and our products, we are proud to provide great support for both our free and Pro users. Our Blog and extensive Knowledge base cover a massive amount of detailed documentation, articles, and guides for building websites with Astra.

Though our products are simple to use and developed with user-friendliness on our minds, they are continually evolving. That is why we regularly update and expand our Knowledge base.

Next to the docs that will clarify any bump or issue you might encounter with Astra, we also create detailed guides, walkthroughs, and blog articles to make your work easy and help you get the most out of the Astra theme and our other products.

Support & Community

On top of the Astra theme and our products, we are proud to provide great support for both our free and Pro users. Our Blog and extensive knowledge base cover a massive amount of detailed documentation, articles, and guides for building websites with Astra. 

Further, our Support team is available to help you 24/7, all year round with any issues you can’t solve on your own or couldn’t find in our knowledge base or blogs. Just drop us a message here and our support engineers will help you out in no time. 

Last but not least Astra theme is backed by a huge community ready to help and share knowledge at all times. Join our Facebook groups to become a part of Astra Comunity:

• Astra WordPress Theme Community
• Astra and Elementor Users

Astra Pro

We hope that you enjoyed this Astra Theme Walkthrough. As we work on constantly improving our free theme, we know that some of our users require more powerful features, an enhanced list of customization options, and premium support. For this reason, we created Astra Pro Addon. 

Please check the full list of features available with Astra Pro and our comparison with the Astra free theme.

We invite you to visit our official website and find out more about the world of Astra.

Growth and Essential Bundle

Having Astra Pro is a great addition to your theme, but you might also need additional options for your content or a boost in your online sales. Also, if you build websites for your clients, you might be dealing with a number of different requests and preferences.

This is where our Bundles step in. Next to Astra Pro which is included in our bundles, you would be getting additional products to help you expand your business and premium support.

Essential Bundle is a great choice to boost your online business or start the agency or freelancer work. Mini-Growth Bundle gives you a balanced mix with just the right combination of products you would need like:

• Ultimate Addons for Elementor or Ultimate Addons for Beaver Builder (you can choose the one you prefer) to expand your preferred Page builder capabilities and help you build amazing website designs
• Premium Starter Templates and
• WP Portfolio plugin.

You can find more details about the Essential Bundle in this article.

Furthermore, our Growth Bundle will boost your traffic (Schema Pro plugin) and your conversions (Convert Pro plugin), while giving you both page builder addons (Ultimate Addons for Elementor AND Ultimate Addons for Beaver Builder) and access to our SkillJet Academy. You can find more details about Growth Bundle in this article.

Hosting and Configurations for Better Performance

Having a fast-loading website is a must today. But once you start building your website for the first time you might notice that it’s not that simple to achieve.

To start with, the Astra theme is a fast, lightweight, and well-coded theme that works great on any hosting. But your theme is just one element of your website that affects your speed.

The choice of the Page Builder, adding various plugins for functionalities, quality of your website optimization, and other factors can significantly damage your loading time.

One of the most underrated factors is hosting. Sometimes, no matter how well-built your website is, having bad hosting will cripple your speed to mediocre results. Here, you’ll find some basic guidelines on how to find the best option for your websites.

Some of the hosting options you might encounter are:

• Shared hosting – this is the cheapest and option as it means that your website is sharing server resources with many other websites. For small and simple websites this would be enough in most cases. It’s important to know that your website performance is affected by traffic surges and other resource-intensive processes on other websites on your server and that it will slow down your website too (when it happens). But if your website is growing and you need additional functionality, at some point you will probably need to migrate to some more stable option with more available resources.

• VPS hosting – This is usually the next step. Here you are still sharing the server physically with other website owners, but each you have your Virtual Private Server (VPS). The biggest difference here is that your server has guaranteed allocated resources. This will be enough for most of the smaller and mid-sized websites including even e-commerce websites with moderate traffic. Also, this is the moderate option when it comes to the price;

• Dedicated hosting – Dedicated hosting means that you are renting a whole physical server. This means that you have all server resources available, but at the same time be aware that you are responsible for everything and that you’ll need some server management skills here. This is a more expensive option too, but also the one that can take higher workload and high traffic;

• Cloud hosting – is the service where several computers share and combine their resources. The result is reliable hosting with great performance, and also more resilient (reduced downtime in case of server malfunction). On the other side, often these are ‘unmanaged’ hosting options which means that you are in charge of server management and any other needs you might have.  

• Managed hosting – Usually combines the great hardware (e.g. cloud hosting) together with software setup, scalability, backups, WordPress server optimization, etc.

Please check some of our recommendations or if you would like to find out more about hosting, and compare different hosting options take a look at our article Top 9 Fastest Managed WordPress Hosting Companies.

Further, be sure to test your website with tools like PageSpeed Insights and GT Metrix. These tools will show you what things should be improved on your website, as well as your server performance.

Also, have in mind that every plugin you decide to add to your website has certain system requirements and configurations, so please check these out and adjust your settings accordingly.

You can check the minimum and recommended system requirements for the Astra theme and Starter Templates to be sure that everything works smoothly on your website.

Use Starter Templates

What are Starter Templates?

The biggest boost to building great websites quickly is our Starter Templates – a library of more than 100 ready-to-use templates available to all Astra theme users. Starter Templates is a free plugin that imports fully designed website templates made by our team.

Astra Theme works great with most major Page Builders but we have dedicated our attention especially to the following four: Gutenberg, Elementor, Beaver Builder, and Brizy… and our Starter Templates are available for each of these builders.

Why Use It?

Starting any project becomes much easier when you have a whole team to help you. Instead of starting from scratch, the Astra team designed a great-looking website for you to use.

You can import the whole website that comes with all needed plugins and dummy content. From there, just add your content instead of the dummy content, and you’re done.

Naturally, if you wish, you can use these designs as a starting point and modify them as you wish. Also, you can import only an individual page (or pages) from any template. This will drastically shorten the time you need to build your websites or develop design concepts. 

How To Start Building Your Website With Astra And Starter Templates?

Once you have the Astra theme installed and activated, navigate to your Plugins menu and click on “Add New” button. Search for “Starter Templates” there – install and activate the plugin.

Once the plugin is activated, you can find it at Dashboard > Appearance > Starter Templates. 

On the upper right corner of the Starter Templates window, you will see a Page Builder selector. Please choose your preferred Page Builder and the Templates library will be filtered accordingly.

At the top, you will see a search bar with additional filtering options. You can search this way or just scroll down and browse the templates library. Each template is represented by the home page cover picture. To see the template pages and details just click on any Template cover.

On a template page, you can select any available page within the template and scroll up and down, or click a “Preview” button to see the live demo site. 

Once you decide which template you would like to use, just click on the “Import Complete Site” button to import all template pages. Also, if you like just one or a few pages, you can import pages individually.

Our templates come with all plugins installed and settings already done. But naturally, once your template is imported, you are free to modify all settings and add, modify or remove any content you want.

In conclusion, to help you with building your websites, we created the Starter Templates Walkthrough docs. Here, you will find all the details you might need about importing templates and building websites with Starter Templated.

Other Options: WooCommerce, Easy Digital Downloads, LearnDash, WebStories, Hooks

The Astra theme is integrated with different plugins, thus when these plugins are activated, additional options may appear in the Customizer. Some of these plugins are:

• WooCommerce – if you plan on building an eCommerce website, you can do this easily with WooCommerce. Astra will provide great options for styling your store and products just the way you like them. Find out more about the Customizer options in this article;
• Easy Digital Downloads – if you plan on selling digital products you might decide to use this plugin for your store. Astra provides styling options for Easy Digital Downloads too. Find out more about the Customizer options in this article;
• LearnDash – If you’re planning to build an online learning website, LearnDash is a great solution for this. Find out more about the Customizer options for LearnDash in this article;
• Web Stories – Web Stories are an engaging way to display your website content. You can design stories with a Web Stories editor and show them on your own websites, just as you do on your Social Media profiles. Check out how you can use this plugin in this article.
• Astra Hooks – this plugin will help you add code to different parts of your website – for example, Google Analytics to Google Tag code. Find out more about how to use this plugin with Astra in this article;

WordPress Default Options

You can find a few default WordPress dashboard options available in the Customizer. Of course, these seetings can be made through the Dashboard, but having these options in the Customizer allows you to manage settings without leaving it.

• Menus – you can use this option to create new or edit your existing menus. You can also set which menu is being used for each website location (Menu Locations)
• Widgets – this option is used to manage your website widgets. Keep in mind that with Astra Customizer, you will not see the widget options here as they are located directly within the different options like Header and Footer Builder.
• Homepage Settings – here, you can set which pages you would like to use as your Homepage and Blog / Archive page.

Additional CSS

Though the Astra theme offers a lot of options out-of-the-box, sometimes you might need more. A lot of changes can be done by simply adding some custom CSS code to your website.

To do this, you can use the Additional CSS option in your customizer. Just click on this option and copy your custom CSS code in the space on the left side of the screen like shown in the example here:

The changes will be applied straight away on your Customizer preview on the right side so you can see the result prior to changing your changes.

To remove the effects of Custom CSS, just delete the code you added here.

This is the place where your visitors expect to find some key information like company details, contact information, social media links, or some additional or related content and links.

This is often a great place to add your links to other offerings you might have or put the most important links and call to action buttons to avoid the need of scrolling back to the top. 

Here again, the Astra theme comes with a drag & drop Footer Builder allowing you to build your footer equally easy as your header.

General and Design tabs

General tab is your default view when opening the Footer Builder. Here you have an overview of your footer setup.

On a left side menu, all of your active footer elements will be listed.

Rest of the screen is showing a live preview of your footer and the position of your elements across footer sections in your Visual Footer Builder.

Design tab gives you options of setting the Background Color & Image for the whole footer, as well as adding Padding and Margin.

From the above screenshot, you can see the Background Color and Image option. For a better understanding of this feature, you can check the below-attached video enlisted with an example.

Example: My website footer has a pink background color. In case I want to change the color to blue, usually, we will navigate to Appearance > Customize > Footer Builder > Design, will change the color to blue here. Even after applying the blue color, it is not reflected on the front end. It’s because the colors are set from the dedicated Below, Primary Footer settings. So, we need to navigate to the respective footer settings and change the color there.

Visual Footer Builder

Same as with Header, the Visual Footer Builder consists of three separate sections too. 

These three Footer sections are:

• Primary Footer  – the middle section; this is your main footer section.

• Above Footer – the upper section; often this is the place to add your subscription form or call to action buttons

• Below Footer – the lower section; usually Copyright information and come contact or company information are placed here (like address, phone number/e-mail, company registration number etc.)

As with the header sections, each footer section customizations are accessed by clicking on the “cog” icon on the left side of the sections.  

Each section has two tabs:

General tab – Footer

Column – select the number of columns you want to add to this footer section;

Layout – choose the column layout based on the selected number of columns;

Inner Elements Layout – display widgets in the same column Stacked (on top of each other) or Inline (next to each other) 

Width – set the footer content width to Full Width (edge to edge) or to Content Width

Height – set height of this footer section.

Vertical Alignment – vertically align element content across all the columns within this footer section to Top, Middle or Bottom of the section.

Hide on Mobile – hide this header on mobile devices.

Design tab – Footer

Top Border Size (& Color) – add the top border to the footer section by setting the size of your border.

Border Color – Once you set your border size, an additional option will appear (Border Color) for choosing the color of the border;

Background – set this footer background color;

Inner Column Spacing – add space within each column;

Padding – add padding on one or more sides of the footer; 

Margin – add a margin on one or more sides of the header. 

Each footer section can be customized separately for desktop and mobile. You can add different footer elements or change their positions for each viewport.

Footer Elements

You can build your footer the same way as your header. Compared to Header Builder, the Footer Builder offers a somewhat smaller number of elements. You will be able to add the following elements to your footer sections: Footer Menu, Social, HTML, Widget, and Copyright.

Further down, we will show you how to use elements specifically available for the footer and a few of those used also for headers but with slightly different settings. The Rest of the elements are used the same way as with Header Builder.

Primary Menu

Here, you will see the menu items you added to your Footer Menu (Dashboard > Appearance > Menus). 

In the General tab you can set the menu Layout to Inline or Stack and set the menu items Alignment.

The Design tab will allow you to set the Text and Background colors, Menu Font Size, Menu Spacing and Margin.

Social (Footer)

Compared to the Social element used for header, the footer Social element has the additional Alignment option in the General tab 

Copyright

This element allows you to simply add and style your Copyright and it can be used only within the Footer. You can use the following shortcodes here:

[copyright] 
[current_year]
[site_title] 
[theme_author]

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:

• Pages
• Blog Posts
• Archives (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:

For Blog Posts:

• No Sidebar – hide sidebar
• Left Sidebar – position sidebar on the left side of the content
• Right Sidebar – position sidebar on the right side of the content
• Choosing Default on any location will apply the Default Layout sidebar settings.

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

To set your Blog page, start by creating and naming a page (Dashboard > Pages > Add New). Then, navigate to Dashboard > Settings > Reading and set this page as your “Posts page”. This will apply the Blog Archive template to this page – that means any previous content on this page will not be visible. This is why we use an empty page for this.

Within this option, you can also modify the number of posts to be shown on each page of your Blog archive (the default value is 10 posts).

Once you set this, you can customize your Blog / Archive page and your Posts using the Astra theme Blog option in the Customizer.

Blog / Archive

Within the General tab, you can see the toggle to enable or disable the Blog Title.

You can set the Container Layout and Sidebar Layout here from the available options.

You can modify the way the posts are displayed on the Blog page. In the Post Structure and Meta sections, you can set the order of elements in which they are displayed by simply dragging each of them to the desired place in the list.

Also, you can hide any element in the list by clicking on the “eye” icon on it (click the “eye” icon one more time if you decide to have the element displayed again).

The last option, the Post Content, lets you choose if you want to show the Full Content of the posts on the Blog page or only Excerpt.

Under the Design tab, you can set the Post Title Font Size (title of each of your posts shown on the Blog page).

Single post

A Single post option is used to customize the way your Posts are displayed.

General Tab

Similarly as with Blog / Archive settings, in the General tab, you can see the toggle to enable or disable the Post Title. Also, you can set the Container Layout and Sidebar Layout here from the available options.

You can set the Content Width for your Posts.

The last option in the General tab allows you to Enable Related Posts and adjust the settings according to your needs. You can set a custom Title for a related posts section, set the Number of related posts, Grid Column Layout, as well as Posts Query and Structure. You can find more details on related posts in this article.

Design Tab

In the Design tab, you can find options for Related Posts – Content Colors, Section Titles, Post Titles, and meta font sizes.

Featured Images for Blogs is not visible

If the featured image for your blog post is not visible, ensure that the meta settings are not set to hide this feature. Here is an article that you can follow to troubleshoot this issue. If this still does not resolve the issue, please do not hesitate to create a support ticket and we will be happy to look into this further.

These are navigational links, meaning the visitor can easily return to any higher-level category simply by clicking on them.

Use the General tab to enable your breadcrumbs by choosing the Header Position (where should breadcrumbs be positioned in your header) or disable them by choosing “None”. In addition, you can disable breadcrumbs on specific pages by activating appropriate options from the list.

Also here, you can use a Predefined Separator which will be used between the categories and the Alignment.

Styling options for breadcrumbs are located in the Design tab.