Author 诗语

Starter Templates — Basics and FAQs

Astra provides a stunning library of pre-built templates. Instead of designing a website from scratch you can import Starter Templates (formerly Astra Starter Sites) with few clicks and customize them in your own way.

Starter Templates are available with your favorite page builders and WordPress default editor – Elementor, Beaver Builder, Brizy and Gutenberg Editor.

Starter Templates library has a number of templates, some are FREE (without any tag) while some are marked with a PREMIUM tag.

FREE and Premium Starter Templates

Templates without any tag ( Free Starter Templates )Templates with tag – PREMIUM ( Premium Starter Templates )

Templates Without Any Tag ( Free Starter Templates )

Starter Templates that do not have any tag are available for free. These templates are built with free resources like – free versions of page builders (Elementor, Beaver Builder, Brizy) and free external plugins.

How to Import? – For a detailed step-wise explanation on how to import the FREE starter templates, you can refer to the article here.

Templates With Tag PREMIUM

In the library, templates with PREMIUM tags are accessible only to those who own the Essential Bundle and Growth Bundle.

Why is it so? – In 『Premium』 templates, you will see advanced design styles and features. These sites are built with – Page builders (Elementor, Beaver Builder, Brizy) and a few of the premium plugins.

Note: The Growth Bundle owners can access all the sites marked as Premium. While those who own an Essential Bundle can access the Premium sites for a specific page builder (depending on their choice) only.

How to Import? – The Essential Bundle and Growth Bundle comes with the Premium Starter Templates plugin. You will find it along with the other plugins in your store account. Refer to the article here to see how you can install the plugin.

See Other Customizer Options

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 SidebarsBuild Your FooterHost Google Fonts Locally – Performance Is the KeySee Other Customizer Options (currently reading)How To Build Quick Sites With Astra?Getting the Most Out of Astra Theme

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.

Previous: Host Google Fonts Locally – Performance Is the Key

Next: How To Build Quick Sites With Astra?

How to Switch to Astra from Another Theme?

Have you already created any layouts built with Page Builders? Have you completed part of your website? And now want to switch to Astra to make your site super fast!

You might be wondering what will happen if you deactivate your current theme and activate Astra. What will happen to the layout of the site?  This document will help to set your site after switching your current theme with Astra.

You can do this using –

Astra Bulk Edit

Astra Bulk Edit

You can switch to the Astra theme by bulk updating your meta settings of posts/pages in Bulk.

Here』s a detailed article that explains How to Bulk Edit Astra Meta Settings on Multiple Pages & Posts at Once?

EDD Integration Overview in Free Astra Theme

Astra integrates nicely with Easy Digital Downloads. All Easy Digital Downloads 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: Astra Pro extends the options with Easy Digital Downloads Addon. You can refer to our article to know more about the features you get within this EDD addon.

Layout Settings:

Please be sure you have the Easy Digital Downloads plugin installed and activated. Once you have it installed, you will find a dedicated tab for it in customizer settings.

Easy Digital Downloads Tab: 

Under the Easy Digital Downloads tab, you will find further options categorized into further tabs.

Product Archive: 

Here you can control how your archive page looks. Archive page can be Product categories or Product tags pages. You can control:

Archive Columns: The number of columns for each device.Product Structure: Structure of products where you can move elements or disable them. Display or hide product information. Just click on the eye icon.Cart Button Text: Set a custom text for Add To Cart button.Variable Product Button: If you have enabled variable pricing and set options for it use this setting.Archive Content Width: Set the width for the archive page.

Refer: How to Add Download Archive Page to Menu?

Single Product:

Enable or disable Product Navigation from appearing on the single product page.

Cart Icon in Menu:

You can display the cart icon in the menu. Refer an article about How to Add EDD Cart in Header?

Container Setting:

You can control the container independently on Easy Digital Downloads pages. The option you set at Appearance > Customize > Global > Container will affect the EDD single product page.

Please note, you can override container settings for individual pages through meta settings.

Also, you can separately set the width of your Porduct Archive page. You will find this option at Appearance > Customize > Easy Digital Downloads> Product Archive

Sidebar:

You can control the sidebars independently on Easy Digital Downloads pages such as archive and a single product by navigating 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 by navigating to Appearance > Customize > Widgets

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

Base Color & Typography:

As mentioned at the beginning of the article, all Easy Digital Downloads elements automatically adapt with the rest of your Astra-powered website and take colors, fonts out of the box from the theme customizer settings at Appearance > Customize > Global.

Related Articles –

1. How to Disable EDD Inbuilt Styling?2. How to Add Download Archive Page to Menu?3. How to Add EDD Cart in Header?

How to Remove Page Header Title?

You might ever have a requirement, where you needed to remove Page Header Title. And previously the only option was to hide the same using custom CSS.

We are providing two filters. One to remove the Page Header Title and another one to add the Page Title in the Content Area.

Let』s dive into both the cases and see the filter on how it will work –

Case 1:

How to remove Page Header Title which appears on top of the image. Here, you can remove the Page Header Title on all single pages, archive pages, and posts. Alternatively, you can remove Page Header Title only from single pages (the title will still be visible on archive pages and posts), from all pages (but not posts), or only from your Home page.

Solution 1: You will need to add the following filter, to remove the Page Header Title on all single pages, archive pages, and posts:

add_filter( 'astra_advanced_header_title', 'remove_page_header_title' );
function remove_page_header_title() {
  return;
}

Solution 2: You will need to add the following filter, to remove the Page Header Title only from single pages:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' );
function page_header_title_disable( $title ) {
if ( is_page() ) {
$title = false;
}
return $title;
};

Solution 3: You will need to add the following filter, to remove the Page Header Title from all pages but leave it on all posts:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' );
function page_header_title_disable( $title ) {
if ( is_singular( 'page' ) || is_archive() ) {
$title = false;
}
return $title;
}

Solution 4: You will need to add the following filter, to remove the Page Header Title only from the Home page:

add_filter( 'astra_advanced_header_title', 'page_header_title_disable' );

function page_header_title_disable( $title ) {
if ( is_front_page() || is_home() ) {
$title = false;
}
return $title;
};

Note

To use one of the above-mentioned codes, just copy, and paste it in the child theme』s functions.php file.

Case 2:

After removing the Page Header from the Top Banner, we will need to add the title in the below content area.

Solution: Let』s see the filter you will need to add the title to the content area –

add_filter( 'astra_the_title_enabled', 'display_page_title', 999 );
function display_page_title() {
  return true;
}

Note

Paste the above code in the child theme』s functions.php file.

This is how you can remove the Page Header Title and add the Title in the content section.

How to Turn Astra Website Multilingual with Polylang?

The Astra theme is 100% translation-ready and compatible with WPML. Since WPML is a premium plugin, alternatively, you can also use the Polylang plugin. This document will show you how to make your Astra Website Multilingual with Polylang for free.

Setup

For translating your Astra-based website with Polylang, you will need to install several plugins. To do this, please follow these steps: 

Step 1 – Navigate to Dashboard > Plugins > Add New. In the search bar on the top right, search for these plugins: 

「Polylang」「Duplicate Page」

Note:

If you』re using Elementor Pro for headers and footers on your website, you will need to use an additional plugin: 「Polylang Connect for Elementor」.

Step 2 – Install all plugins mentioned in the previous step; 

Step 3 – Activate the 「Polylang」 plugin. This will start a website translation wizard;

Polylang Setup Wizard

Step 4 – The first wizard option, Languages, will add the languages you need on your website. When you choose your first language, it will be set as your default language. Further, just click on the 「Add New Language」 button to enable additional language(-s).For our example, we will use English (primary), German and French languages:

Once you added all languages, click on 「Continue」;

Step 5 – In the next step, Media, you can allow translations for media (title, alternative text, caption, and description);

Step 6 – Under 「Content」, choose the language you wish to assign for all the content without an assigned language (this should be most often your primary language);

Step 7 – On the next step, you can confirm your Homepage translations. Clicking on the 「Continue」 button will create blank versions of your homepage in all languages. This means that non of your designs nor content will be copied from your homepage.

However, unless you』re planning to add different designs for each language (homepage looking differently in every language), click on the 「Not right now」 button at the bottom;

Step 8 – Consequently, you will be transferred to the Dashboard with the option to skip setup. Go ahead and click on that button to close the Polylang setup wizard (all of your previous wizard settings are saved).

So, the Polylang plugin is now set, and language options were added to your website. Now you need to add your content and media translations.  

Translating Pages, Posts, and Post Types with Polylang

When you translate pages or posts with Polylang, you get linked versions of pages or posts where each version is assigned a language. 

We will show you two methods of creating the translated version of your page in a couple of steps.

For Polylang to work properly, you need to add at least translations for your homepage (static front page). Since we skipped the automatic step (Step 7) to create homepage versions in other languages through the wizard, we will show you how to do it manually now.

Method One – Translate Page

Step 1 – Navigate to Dashboard > Pages and check the right side of the pages list. You will notice the Polylang options for each page. Each page is shown with the flag of the language that is assigned to that page. In our example, existing pages are in English (Default language).

Step 2 – To create a page version in another language, just click on the 「+」 icon in the desired language column. This will open a page editor for a new empty version of the page. We decided to add a French version of the page in our example

Step 3 – Name your page, add your page content, and design for the language selected. Once you』re done, click on 「Publish」 to create the translated page.

As a result, you will get two different and connected pages. If you check the Polylang options for these pages, you will see each has its appropriate language flag mark.Also, you will see that existing translated versions have a 「pencil」 icon to mark that the translation exists.

This is the easiest method to translate a page when you wish to provide completely different content for different languages. For each language, you will get an empty new page to edit from scratch.On the other hand, if you wish to have precisely the same page design, just with the translated content, the second method would be a better option. 

Method Two – Clone and Translate

With 「Polylang」, you might be surprised to discover your page or post content is not copied to another language version. Upon adding a new language version, you will find just a clean new page or post. 

Unless you』re a Polylang Pro user (Pro comes with a 「Duplicate content」 feature), we suggest using the 「Duplicate Page」 plugin. 

Instead of adding all your content and designs manually for each language, you can duplicate pages or posts. Once you translate the duplicated page, just link it to the original one, and it』s done. 

As an example, we will show you how to clone your Home page and link different page versions. To start, make sure you activate the 「Duplicate Page」 plugin next to 「Polylang」. 

Let us show you how to do it:

Step 1 – Navigate to Dashboard > Pages to edit pages (you can also do this for posts or custom post types);

Step 2 – Click on the 「Duplicate This」 option under the page to clone it. You will see a new draft page appearing in the pages list with the same name;

Step 3 – Click on the 「Edit』 option under the cloned (draft) page and adjust the page title – as this is the home page for the French language, we will rename the page title to 「Accueil」;

Step 4 – In the page settings (on the right side), scroll down to the 「Languages」 section and set the cloned page language. Here, we set the language to French;

Step 5 – In the same section, connect this page with the original page. Just click on the original page language field and start typing the page』s title – click on the original page name once it pops out in the list.

Step 6 – As you will notice, the cloned page contains the exact copy of the content found on the original page. Now you need to adjust and update content on your cloned page. You can translate the text and adjust the rest of your content and design as you wish. Click on the 「Publish」 button to save.Note: Your cloned page might look different before you update the content created by Page Builders. Once you edit content and update the page, the design will show correctly.

Great, you just created your page translation.

Now you can repeat these steps for all pages and languages. You can also translate all of your posts and custom post types this way.

Translating Menus and adding a Language Switcher to the Header

Now that we have translated all pages and posts, it』s time to translate the menus and add a Language Switcher so website visitors can choose the language they want.

In addition, before editing menus you should check if activating Polylang affected your permalinks or your menu locations. Thus, if you notice any changes please correct these first.

Translate Primary (or any other) Menu

Now let』s see how you can set your menus for each of the languages added. Here, we』ll show you how to translate your Primary Menu. In this example, we will set a Primary Menu for a French version of our website:

Step 1 – Navigate to Dashboard > Appearance > Menus and select your Primary Menu. If you scroll down a bit to 「Display locations」, you will notice that Polylang added a Primary Menu location for each language you added. Your primary menu will be set for your default language. In our case, this will be 「Primary Menu English」;

Step 2 – Click on 「Create a new menu」 to start building your translated menu. Start by giving it a name (we』ll use Primary Menu FR) and selecting the appropriate display location. We choose 「Primary Menu Francais」 as we are creating a menu for the French language;

Step 3 – Add the appropriate language versions of pages and posts and other items you need in this menu. Click on 「Save Menu」 to create this menu and save the changes you made.

You can translate your other menus this way too.

Adding the Language Switcher

Our final step here is to add the Language Switcher. Polylang provides its own Language Switcher that can be added to your menus at Dashboard > Appearance > Menus.  

Keep in mind that this option might be hidden by default. If you don』t see the 「Language switcher」 section under 「Add menu items」, please click on the 「Screen Options」 on the top of your screen and add this option:

We』ll be adding the Language Switcher to the Primary Menus here, but this can be done with any menu you need. Please follow these steps:Step 1 – Navigate to Dashboard > Appearance > Menus and select your Primary Menu for your default language. From the menu items, under the 「Language switcher」 section, select the 「Languages」 option and click on the 「Add to Menu」 button to add it to your menu;

Step 2 – Drag and drop the Language Switcher item to position it in your Primary Menu;

Step 3 – Click on the Language Switcher item to expand it. Here you have several options to set the way your Language Switcher looks. Click on 「Save Menu」 to save changes;

Step 4 – Repeat steps 1 to 3 for each language to add the switcher on all of them.

Great job, your multilingual Astra Website is ready for visitors.

Other Polylang Settings

There are some additional settings for the 「Polylang」 plugin that you might find helpful. You can find these at Dashboard > Languages > Settings. 

Here you will find the following options:

URL modifications – set how do you want your multilingual URLs to look like

Detect Browser language – your website will show the version of your website based on the browser language preference;

Media – you can activate or deactivate media translations (we set this to 「active」 during the initial setup);

Custom post types and Taxonomies – choose custom post types and taxonomies you wish to activate translations for;

Synchronization – choose where you wish to keep meta content synced between translations.

Further, you can find more details about translating categories, tags, and Astra strings in this article.

In addition, at Dashboard > Languages > Strings translations, you can translate your Site Title and Tagline, as well as the date and time formats.For more details, or help and assistance working the 「Polylang」 plugin, you can check the official Polylang documentation.

Style Your Website With Global Settings

The settings you do here will reflect on your whole website. The available options are typography (your fonts), colors, container, and buttons. These settings will be automatically used (Default) for all of your website content, except those elements on which you make some individual changes. 

Astra Theme Walkthrough Docs:

Astra Theme WalkthroughThis Is Your CustomizerStyle Your Website With Global Settings (currently reading)Build Your HeaderFind the Way With BreadcrumbsSet Up Your BlogAdd Your SidebarsBuild 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

Typography

Maybe sometimes you wouldn』t even notice, but using great fonts on a website really makes a huge difference. You can decide here what fonts would you like to use for different elements, font sizes, weight, etc. If you wish to learn more about choosing the right font check this article.

Base Typography 

Let』s start here with choosing a font Family for your website. This should be the dominant family for your website (though you can use more than one on your website).

If you don』t already have a predetermined font, spend some time going through fonts and choosing the right one. You can do this by clicking on the Family dropdown menu and scrolling down the font list or typing the name in the search field.

Selection is wide, as next to the System fonts you can choose any of Google Fonts, the largest directory of free and open-source web fonts. The list can be expanded even further with our plugins:

Custom Adobe Fonts (Typekit) to embed Adobe fonts;Custom Fonts will allow you to use any custom fonts that you need – just upload the font file and it will be added to the font list.

Now, once you selected your font family, let us move to specifics. Selecting all the Variants will save you time and clicks – if you choose for example the 「700 Italic」 variant, any time you mark your text as italic, it will automatically get the 700 weight.

Next, set the default text Size (in px), Weight and if you need it Text transformation (e.g. capitalizing every word on your website).

The last two options will influence how much space will your text take. Line height will set the height of each row of text, while Paragraph Margin Bottom will determine the space added to the bottom of each paragraph. You can set these values by typing in the size value or by moving the slider left and right. 

Headings

Headings help your website visitors understand the importance of different page or post sections. WordPress uses headings from H1 to H6. 

The most important heading on each page or post is H1, and it should provide search engines with the information about that page or post content (what』s it all about). Thus, there should be only one of these on each post or page. 

Other headings can be used as needed. The higher the heading number, the less important it is (so the H6 if used, marks the least important content).

Here, you can set almost all of the options as in Base Typography for each header separately, giving them a specific and accented look.

Colors

Not that you have your typography set, it』s time to give it some color. Here you can set your color scheme to make it appealing and set the mood. Used the right way, the colors tell users a lot about the type of website they are viewing and about the brand itself. 

We will explain what each color type does:

Text Color – Color for the body text (all of your regular text) and descriptions on the website;

Theme Color – Color for all theme elements like buttons, selected text background color, etc.;

Link Color – Color for all text that has link added to it;

Link Hover Color – Color for all text that has link added to it when being hovered over with the pointer (hover color).

To change any color, click on the colored circle next to the color type name. You will be able to visually choose your color by clicking on the color picker and setting the opacity (transparency) if you need it. Alternatively, you can add the color value in HEX, HSL, or RGB formats. 

To remove the changes and revert the color to a default color, click on the 「Clear」 button or click on the 「back to default」 icon.

Here, you also have the option to set the background for the whole website:

Background – You have three options to choose from: Color, Gradient, or Image. Whichever option you choose, it will be applied as a background to the body on the entire site.You can also set both color and image at the same time – in this case, make sure to adjust the opacity (less than 100%) of the color to make the image visible, as the color will be used as an overlay.

You can find more details about color and background settings in this article.

Container

Now it』s time to make some settings for the content of your website. A container is the area where all of your content is being displayed on each page or post. 

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

Content Width 

This value will set the maximum width of your container. This will define how much space will your content and sidebars (if you set these) take on pages and posts.

Layout

By setting the container layout, you will be choosing how your content, sidebar and widgets, header, footer and website background come together on your website. You have 4 types of Container layouts:

Boxed – this layout will display individual containers and widgets appear in boxes. This leaves space on all sides around each box – thus, you will be able to see the website background.Content Boxed – with this, only your content appears in the boxed format, while sidebar and widgets are displayed on a plain background.Full Width / Contained – this will set your content and sidebar in a single container. This container will display in a container width, leaving the space on the left and right side.Full Width / Stretched – using this layout, your content and sidebar will be displayed in a single container, stretched from edge to edge of your screen.

Astra theme allows you to set a different layout throughout the website, depending on your needs:

Layout – the layout selected here will be a Default layout for the whole website.  Remaining layout option will have this layout selected automatically. You can change layout for following post types if needed:

Page Layout – for pages

Blog Post Layout – for blog archive and single blog post pages

Archives Layout – all archives

Further, depending on other plugins you might be using on your website, you will find the options to set the layout for their dedicated pages, for example, WooCommerce Layout or LearnDash Layout.

Buttons

The last global option is used for setting default look for website buttons. We will make a short overview of available options and what they are used for:

Text Color – set the normal & hover color of the button text;

Background Color – set the normal & hover color of the button (background) color;

Border Width – if you wish to add border to your buttons, just set the border width here;

Border Color – set the normal & hover color of the button border;

Border Radius – adding radius will make your buttons more rounded; as you increase the radius value your buttons will change shape from rectangle towards circle.

Button font – typography settings available here will be applied only on button text.

Padding – this will add an inner padding of your button; larger padding will make your button larger

Final remarks for Global settings:

Option with a 「responsive editing」 icon next to it can be separately edited for desktop, tablet, and mobile. Applying changes in each view will change the settings only for the currently active view. On the other side, changing settings for the options without a 「responsive editing」 icon will apply the same changes to all views.

Please have in mind that some global options will not be applied to your content as they might get replaced by settings you make in the Page builder. This will depend on your choice of Page Builder to use for your website.

Previous: This Is Your Customizer

Next: Build Your Header

Import / Export Astra Customizer Settings

All customizer settings set with Astra can be exported and then imported into another site. In this way, you can move all layout, color& background, typography and other settings from one site to another.

You can do this with a plugin Import / Export Customizer Settings which is available on wordpress.org for FREE. If you own Astra Pro, this plugin will export/import Astra Pro addons settings. This plugin will copy theme customizer settings as well as activated/deactivated Astra addon settings.

Note: Import / Export Customizer Settings plugin will only work with the Astra theme. You will need to have the Astra theme installed and activated on your website.

How to use Import / Export Customizer Settings plugin?

Install this plugin on both sites. To install the plugin, download zip from plugin link – Import / Export Customizer Settings. From the WordPress dashboard, navigate to Plugins > Add New > Upload Plugin. Upload a zip and activate it.Navigate to Appearance > Astra Options.Export the file from the first site.Visit another site, open Appearance > Astra Options > Import Settings and choose the above file to import.

Once your settings are imported, new customization settings will be upload in customizer and Astra Options page will be updated with Astra Pro addons settings.

Note: If you have set any Page Meta settings, then customizer settings will not be applied. As the page meta settings have a higher priority than customizer settings. Read about page meta settings here.

Related Articles –

Import / Export Custom Layouts and Page headers

How To Build Quick Sites With Astra?

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 SidebarsBuild Your FooterHost Google Fonts Locally – Performance Is the KeySee Other Customizer OptionsHow To Build Quick Sites With Astra? (currently reading)Getting the Most Out of Astra Theme

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.

Previous: See Other Customizer Options

Next: Getting the Most Out of Astra Theme

Build Your Header

The header is the top section of your website, shown across all (or almost all) pages and posts. It』s something that every website visitor sees first… your chance for a great first impression.

This is a place for visitors to meet your brand, your offer or idea, and to be initially delighted and intrigued to explore your website further.

Astra Theme Walkthrough Docs:

Astra Theme WalkthroughThis Is Your CustomizerStyle Your Website With Global SettingsBuild Your Header (currently reading)Find the Way With BreadcrumbsSet Up Your BlogAdd Your SidebarsBuild 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

Astra theme comes with a drag & drop Header Builder – a perfect tool for you to create great headers quickly and effortlessly, without any coding. Here you will be able to add and customize your logo, site title, and tag, your header style, menus, buttons, social icons, and much more.

You have full freedom to position elements by just dragging them to any position in the header – as simple as that.

Header Builder – General Tab

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

On a left-side menu, all of your active header elements will be listed. Further down, under 「Header Types」 you can find the transparent header settings.

Rest of the screen is showing a live preview of your header and the position of your elements across header sections.

Transparent Header

Enabling a transparent header will remove the header background color and shift your content to the top of the page underneath the header, creating the transparency effect.

When the transparent header is enabled, it』s advisable to add a hero image (e.g., full-width image or video, sliders, etc.) or use sections without content (e.g., headings or text) positioned on top – this way, you will avoid overlapping the content and the header.

General Tab

To enable transparency, activate the 「Enable on Complete Website」 option. This will also open additional options to disable transparent header for a specific page or post types.

Enable On – choose to enable transparent header on Desktop, Mobile or both (Desktop+Mobile)

Different Logo for Transparent Header – if your Logo looks good on the standard header, but maybe not so much with a transparent one, you can activate this option and set the different logo to be used for the transparent header.

You can also set the transparent header Logo Width. Depending on the logo you』re using, you might want to add a logo for Retina (higher pixel density) screens which should be at least 2x larger or more. Just click on 「Different Logo for Retina Devices」 and upload your retina Logo.

Design Tab

Under the Design tab, you』ll find options for styling your Transparent header. You will be able to set the site title, background, menu, submenu, and colors. Also, there are options for setting background overlay and bottom border. The bottom border is by default set to 0px and thus not visible – increasing the border value (1px or more) will make it show on the frontend, and you will also get the option to set the Bottom Border Color.

Keep in mind that these settings are applied only to your Transparent header. If you』re using your regular header on some pages, these settings will not be applied there.

Header Builder – Design

Design tab is used to set your header spacing:

Width sets to total amount of space your header widgets will use:

Full Width will spread your header widgets from edge to edge of the screen;

Content Width limits your header widgets to be displayed using your content width – your header background will still be stretching from edge to edge of the screen.

Margin adds space to one or more sides of your header. This will add space to both your header widgets area and background.

Visual Header Builder

The header consists of three separate sections which you can see in the visual header builder area. You can use all three sections to add any element to any position. 

These three sections are:

Primary Header – this header is the middle section. It is most commonly used for adding your most important elements like Logo, Primary Menu, or Search, Cart, and Account.

Above Header – this header is the upper section, and it is displayed above Primary Header on your website. It can be used for your secondary elements, like the secondary menu, or elements like social icons, call to action buttons, etc. You can also use HTML code to add for example current discount period, breaking news or some notification for the website visitors. 

Below Header – this header is the lower section, and it is displayed below Primary Header on your website. The use of this header is the same as the Above Header.

The main purpose of Above and Below Headers is to avoid cluttering the Primary Header. They extend the available area for adding all elements and information you need in your Header, as well as to provide a certain level of prioritization.

You can customize each section by clicking on the 「cog」 icon on the left side of the sections. 

Each section has two tabs:

General

Height – set height of each header separately.

Design

Bottom Border Size (& Color) – if you need to separate your header from another section or website content you can add bottom border by setting the size of your border. Once you set your border size, additional option will appear (Bottom Border Color) for choosing the color of the border;

Background – set the header background color;

Padding – add padding on one or more sides of the header. This will add space between the header section edges and content;

Margin – add margin on one or more sides of the header. This will add space between that header and another website areas (other headers, page/post content, screen edges, etc.);

Each header can be customized separately for desktop and mobile and can have different elements added for each view. The position of elements can also be changed.

Off Canvas section

The Off Canvas section is used to edit your tablet/mobile menu. This menu is activated by clicking on the Toggle Button in the mobile menu (also called 「hamburger」 menu). 

To edit this menu, switch to tablet or mobile viewport editing. You can add elements to this menu and set their order the same way you edit other header sections. Clicking on the 「cog」 icon will open the following tabs:

General

Header Type – set Off Canvas type to Flyout (menu flying in from right or left side of a screen), Full-Screen or Dropdown;

Dropdown Target – choose if you want your sub-menus to open by clicking on the down-arrow icon (Icon) or by clicking to a whole menu item (Link)

Content Alignment – align the Off Canvas section widgets to Left, Centar or Right;

Design

Inner Element Spacing – adding space between the elements;

Background – set the background color.

Header Element

Site Identity & Logo

This is your Site Identity & Logo element (previously named 「Logo「). In the General tab, you can add your Logo, set Logo width, and add a Different Logo for Retina devices.

Using this element, next to Logo, you can set your Site Title, Site Tagline, and your Site Icon (favicon). This information is also displayed on the top of your website tab in your browser.

The Design tab is used if you want to add some Margin to this element.

Primary Menu

Here, you will find menu items added to your Primary Menu (Dashboard > Appearance > Menus). 

The General tab provides you with several Submenu options: submenu Width, Container Animation (the animation used when expanding a submenu), Item Divider (adds or removes divider between submenu items).

You can also decide if to set your menu items to Stack on Mobile. This is the most common setup for mobile menus – the menu items will be stacked one on top of the other.

The Design tab will allow you to set Menu Hover Style, style your Submenu Container, set the Text and Background Colors, Menu Font, Manu Spacing, and Margin.

Search

Adding this element will add a search function to your header. You can set the Icon Size, Icon Color and Margin.

Social (Header)

You can add your social media icons using this element. You can manage your social media icons using the General tab – add, choose the icon or remove them. 

The Design tab holds the options for styling the icons.

Button

This is used for adding a custom button to your header. Add the Text, Link and style (Design tab) the button here.

Secondary Menu

You can add another (secondary) menu to your header if you need it. You can also use this if you wish to split your primary menu into two separate menus – for example, if you want to create a header with a centrally positioned Logo, with your menu items next to it on the left and right sides.

You can customize this menu the same way as the Primary Menu.

HTML

Use this element to add HTML code or shortcodes.

Widget

This is used to add any of the website widgets (Dashboard > Appearance > Widgets) to your header.

Toggle Button

Toggle Button (also known as hamburger icon or button) is used to expand your tablet/mobile menu. Thus, this element is only available on tablet or mobile views. 

The General tab will enable you to choose the button Icon and Icon Size, add Menu Label (text next to the icon) if you need it, and the Toggle Button Style. 

The styling options are located in the Design tab: Icon Color, Background Color, Border Radius and Margin.

Account

If you have some plugins like LearnDash or WooCommerce active, you can add the user account shortcut using this element.

Cart

This will add a Cart icon (WooCommerce) to your header. Next, set if Cart Title should be displayed as well, or only the cart icon, and whether you want to display a Cart Total too (General tab). You can also style your cart and your cart tray (Design tab).

Previous: Style Your Website With Global Settings

Next: Find the Way With Breadcrumbs