Author 诗语

Getting Started With Starter Templates

Welcome to the Starter Templates Walkthrough. This walkthrough contains a series of documents, which will show you how to get the most out of Starter Templates. The goal is to help you start building great websites in no time.

Starter Templates Walkthrough Docs:

Getting Started With Starter Templates (currently reading)Starter Templates ImportingHow to Import A Complete Site With Starter Templates?How to Import Single Page With Starter Templates?Importing Gutenberg Pages, Patterns, and WireframesStarter Templates – Elementor PopupHow to Fix Starter Template Importing IssuesBuilding Your Website With Starter TemplatesStarter Templates FAQs

About Starter Templates

The biggest boost to quickly building great websites is our Starter Templates collection. Our Library contains more than 100 ready-to-use free templates available to all Astra theme users. In addition, there are 120+ premium templates for users with Essential or Growth Bundle. 

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

Starter Templates are fully designed website templates made by our team, which can be imported using our free plugin. Similarly, you would need the Premium Starter Templates plugin to import the premium templates. You can download this plugin from Brainstorm Force Store.

Templates And Page Builders

You can choose templates based on your preferred Page Builder:

Gutenberg, Elementor, Beaver Builder, and Brizy.

Note:

Since Starter Templates version 3.0.0, Brizy builder templates are not available by default. Accordingly, if you wish to import Brizy templates, you』ll need to enable this option. To do this, navigate to Dashboard > Settings > General and click on 「Enable Brizy Page Builder Templates in Starter Templates」 [screenshot].

Importing the whole website template will come with all of the needed plugins and dummy content. Thus, you don』t need additional plugins for templates to look exactly as shown in the Starter Templates library. 

Also, you can import individual pages from any template, as well as pre-made blocks. 

Once a template is imported, you just need to replace the dummy content with your own, and you』re done. Further, you are free to modify the template designs as you wish. 

Free vs. Premium

When browsing the Starter Template library, you will notice that some templates have 「PREMIUM」 badges. These badges are used to distinguish Free templates from Premium ones. 

You have both free and Premium templates for many industries and different types of websites at your disposal. Thus there are no limits or differences between free and premium templates in what websites you can create. 

The main difference between Free and Premium templates is the quality of the design. In addition, we use several premium tools (plugins) like Astra Pro and Ultimate Addons for Elementor or Ultimate Addons for Beaver Builder to design Premium templates. 

These plugins provide specific design options and functionalities that are not available for free. That is an additional reason why Premium templates are available only for users with licenses for one of our Bundles.

How to Install Starter Templates plugins (Free and Premium)

Starter Templates can be imported using two different plugins, free and Premium. 

Free Strater Templates 

If you are looking only for our free templates, please follow these steps:

Step 1 – Navigate to the Dashboard > Plugins > Add New and download the free plugin from the WordPress repository; 

Step 2 – Install and Activate the Plugin;

Step 3 – Once the plugin is installed and activated, you can find the templates library at Dashboard > Appearance > Starter Templates. 

Though you will be able to see both free and premium templates in your library, you will be able to import only the free ones.

Premium Strater Templates

The process is slightly different if you need to import premium templates, as these are available only with the Premium Starter Templates plugin. You』ll need to buy a license for either our Essential Bundle or the Growth Bundle to use this plugin. 

Please follow these steps to install the plugin and activate the license:Step 1 – Log in to Brainstorm Force Store;

Step 2 – Download the plugin at Account > Downloads. This will save a .zip file on your computer. Stay logged in, as you will need your license a bit later. 

Step 3 – Login to your website admin area (Dashboard).

Step 4 – Navigate to Plugins > Add New and click on 「Upload Plugin」. Choose the .zip file you previously downloaded from our store and click on the 「Install Now」 button.

Step 5 – Get your Premium Starter Templates license from Brainstorm Force Store (Account > Licenses). The detailed step-by-step instructions are available in this article. 

Note

Please keep in mind that Premium Starter Templates have their own license key, so you can』t use the key for other plugins here (e.g., Astra Pro key, etc.)

Step 6 – Once you have installed and activated the plugin and got your license key, it』s time to activate your license too. Hence, navigate to Dashboard > Plugins.

Here, you will notice the 「Activate License」 button under the plugin name. Also, there will be a notice at the top of the page. Click to button or notice, and add your license in the license popup. 

Step 7 – Now, after the license is activated, you can find the templates library at Dashboard > Appearance > Starter Templates. 

If you previously used the free plugin on the same website, you need to deactivate or remove the free plugin before using the 「Premium Starter Templates」 plugin.

Note

If you bought our Essential Bundle, you had to decide on Ultimate Addons for Elementor or Ultimate Addons for Beaver Builder bundle. Depending on the option you opted for, you will be able to import premium templates only for the chosen builder. In other words, by choosing Bundle with Ultimate Addons for Elementor, you can import the premium templates for the Elementor. Premium templates for Beaver Builder will not be available (and vice versa).

Next: Starter Templates Importing

How To Disable the Block Editor Support for Widgets

WordPress 5.8 brought many changes, and one of these is using Blocks in Widget Areas. The Astra Theme supports the use of a block editor and is fully compatible with the mentioned changes. This document will help you if you need to disable Block Editor for Widgets.

Though it』s a great feature, some users might still need this to be reverted to the previous widget editor. You can disable Astra』s Block Editor support for widgets by using a custom code provided in this document. Let』s show you how to do it.

Why Did This Happen?

WordPress version 5.8 came with a large number of improvements and changes, making a large leap forward for both WordPress and its Block Editor.

Using the Block Editor to manage Widget areas makes it easier to add different blocks to any widget area without coding or using shortcodes.

Having that Astra is fully compatible with this change, you』ll be able to use blocks directly with Astra Customizer options too, including the Header and Footer Builder.

How To Change This?

If for any reason you need to revert this to the previous Widget editor, you can disable Astra』s block editor support for widgets by adding a custom code.

You can add the following custom code to the functions.php file of your Child Theme:

add_action( 'after_setup_theme', 'astra_remove_theme_support' );
function astra_remove_theme_support() {
remove_theme_support( 'widgets-block-editor' );
}

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.

Custom Header

Using the Custom Layout module available with Astra Pro, you can design a custom header. Please refer document, to begin with, the Custom Layout module.

This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Selecting a Header layout will replace the current site header with custom layout content. In this case, any settings from the customizer will not be applied to a custom header.

You can design headers with any page builder and set them on the entire site or a particular page/post with display rules.

Header Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Header Layout Type options.

Sticky Settings

Stick– You can choose your custom header to be sticky or not.Shrink– If you set the header to stick on the top of the page, you can decide whether it should shrink or not. Enabling shrink effect will remove all top and bottom space from the header.Stick On– You can choose to stick header on Desktop and/or mobile.

Display and User Role Settings

You can choose your custom header to display on the entire website or specific pages/posts with the Display On option. You can even exclude a particular page/post by adding them to the Exclusion Rule.

You can decide a user role for which custom header should be visible. For excluded users, the header set with customizer options will be visible.

For example:If you want to display a custom header on the Entire Website except for the 404 page for all Logged In users, you need to set the following options-

Display On: Entire WebsiteDo Not Display On: 404 PageUser Roles: Logged In

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Once the time duration ends, the custom layout set as the header will be disabled. Thus the header designed with Astra customizer will be automatically displayed further on.

Mobile Header with Astra (Old Astra Header)

Astra version 1.4.0 and above provides a feature to design Mobile Header separately for responsive devices.

It offers options to adjust Header Breakpoint, set different Logos, choose different Menu Styles, set Colors separately for the menu.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.

Mobile Header Options with Astra Theme

From your WordPress dashboard navigate to Appearance > Customize > Header > Primary Menu. Here, scroll down to the 「Mobile Menu」 section which contains mobile header settings listed under several different tabs:

Menu Breakpoint

The setting can be found under Header > Primary Menu > MOBILE MENU The default menu breakpoint for Astra is 921px. It can be changed easily with the slider.For example – If a breakpoint is set to 554px then the desktop header will be visible till 554px width and it will change to a mobile header below 554px.

Dropdown Target

This will allow you to set a target to open a submenu in the mobile header. It has two options – Icon and Link.If you choose Icon, the submenu dropdown will open with the click of a small arrow icon beside the menu item name.And if you choose Link, the submenu dropdown will open with the click of an entire menu item (link).

Toggle Button Style, Toggle Button Color, and Border Radius

Settings can be found under Layout > Header > Primary Menu > MOBILE HEADER.Style the toggle button with these settings. (?)

Menu Label on Small Devices

The setting can be found under Layout > Header > Primary Menu > MOBILE HEADER.It allows adding a label to the toggle button and highlight it. (?)

Mobile Header Alignment

It allows choosing the alignment of logo and menu on devices below breakpoint. (?)

Logo (optional)

The desktop screens often require a larger logo than mobile screens. At the same time, this large logo might hide the big part of the viewport on mobile. Also, there might be differences between desktop and mobile headers that would require a different logo (color, type, size, etc.). Thus, there is a separate option for adding a different logo for mobile devices.

You can set this under Layout > Header > Site Identity. Choose option Different Logo for mobile devices? and add a mobile device logo image here. (?)

To adjust the size for the logo click on the responsive toggle button for Logo Width and adjust the width.

Mobile Header Options with Astra Pro

The Mobile Header module from Astra Pro adds more options to the layout along with Colors & Background options.

Mobile Header is a premium feature available with the Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Quick Steps to Manage a Mobile Header Using the Mobile Header ModuleStep 1: Make sure you have the Astra Pro Addon plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Header > Primary Menu > MOBILE HEADER ] to edit module settings

Activate the module from the dashboard under Appearance > Astra Options > Mobile Header. After activating the module additional options will be added under Appearance > Customize > Header > Primary Menu > MOBILE HEADER.

Menu Style

Choose a style for the menu which appears with the click of the toggle button.

Dropdown will be simply a list of menu items that will appear on clicking the menu toggle button. Flyout style will allow the menu to slide from either end of the screen.Full-Screen style will cover the whole screen and display menu item in the middle.No Toggle style will not display the menu inside the hamburger menu on responsive devices. The menu will appear same as desktop.

Border for Menu Items

It will apply a border around each menu item. Set width to the border and then apply color.

Colors & Background for Mobile Header

The colors & Background module from Astra Pro provides more Colors & Background options for Mobile Header.You would need to activate Colors & Background and Mobile Header modules from Appearance > Astra Options.

Settings can be found under Appearance > Customize > Header > Primary Menu.

Click on the responsive toggle button and set the colors and background for the Mobile Header.

Background

Set Background Color for Mobile Header or set Background Image and adjust the opacity. (?)

Primary Menu and Submenu

If either of the Menu Style – Flyout or Full-Screen is selected, you can set the background image and overlay color for a menu with the Primary Menu background image. (?)

Inside Page/Post Content Custom Layouts

You can insert any content inside Gutenberg Page/Post with Astra Pro』s Custom Layout module. Design your custom layout and display it at any location on selected Gutenberg pages/posts.

With this feature, you can design a layout in one place and display it on multiple pages/posts. This is useful for displaying the same information on different posts/pages to attract users. You can use this for CTAs, attractive sales offers, special discounts, important information, and so on.

You can completely customize the layout and easily put it on any page/post at the selected location.

Let』s see how this option works. Before we start, make sure to have the Astra Pro plugin is activated.

Add Inside Post/Page Content Layout

Step 1 – In the dashboard, visit Appearance > Astra Options and activate the Custom Layouts module;

Step 2 – Next, navigate to Dashboard > Appearance > Custom Layouts and click on the 「Add New」 button;

Step 3 – You will see the Custom Layout Type selection pop-up. Here, select the 「Inside Post/Page Content」 option.

Step 4 – Now, you can design a layout that you want to display on Gutenberg pages/posts. Further, you can design it with the Block Editor, Elementor, or Beaver Builder.

Inside Pages/Posts Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Inside Pages/Posts Layout Type options.

Location Settings

You will observe two options under Location on the post/page

After a certain number of blocks – This option will allow you to display your custom layout after the selected number of blocks on the Gutenberg page/post. Further, you also get an option to enter – Block Number. Here you can set the number of blocks after which your custom layout can display.

Before certain number of Heading blocks – This option will allow you to display your custom layout before the selected number of Heading blocks on the page/post. Note that only native Gutenberg heading blocks and heading added with the UAG plugin will be considered. Further, you also get an option to enter – Heading Block Number. Here you can set the number of Heading blocks before which your custom layout can display.

To illustrate, you can check the example below:

Display And User Role Settings

Next, you can set exact pages/posts where you want your inside pages/posts content to be used. Thus, you need to adjust Display and User Rule Settings.

To do this, click on the 「Display On」 option dropdown and select the required display locations. In addition, you can exclude some locations using the 「Do Not Display On」 option.

If you wish to restrict this custom layout visibility to some user roles only, you can do so with the User Roles option.

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration Settings

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Done!

Custom Footer

Using the Custom Layout module available with Astra Pro, you can design a custom footer. Please refer document, to begin with, the Custom Layout module.

This is a premium feature available with the Astra Pro Addon plugin. To use these pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Selecting a Footer layout will replace the current site footer with custom layout content. In this case, any settings from the customizer will not be applied to a custom footer.

You can design footer with any page builder and set them on the entire site or a particular page/post with display rules.

Footer Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Footer Layout Type options.

Sticky Settings

Stick – You can choose your custom footer to be sticky or not.Stick On – When Stick is enabled, you can choose to stick footer on Desktop and/or mobile.

Sticky Footer option is useful when your content is less, and it cannot cover page length. In this case, the sticky footer will stick to the bottom of the page, no matter your content length.

Display and User Role Settings

You can choose your custom footer to display on the entire website or specific pages/posts with the Display On option. You can even exclude a particular page/post by adding them to the Exclusion Rule.You can decide a user role for which custom footer should be visible. For excluded users, the footer set with customizer options will be visible.

For example:If you want to display a custom footer on the Entire Website except for the 404 page for all Logged In users, you need to set the following options-

Display On: Entire WebsiteDo Not Display On: 404 PageUser Roles: Logged In

Responsive Visibility

This option lets you choose a device to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

The layout will be visible for the selected duration.

Once the time duration ends, the custom layout set as the footer will be disabled. Thus the footer designed with Astra customizer will be automatically displayed further on.

Mobile Header with Above/Below Header (Old Astra Header)

Mobile Header addon is available with Astra Pro version 1.4.0 and above.

This is a premium feature available with the Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Also, this addon adds more features to the Above Header and Below Header.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.

If you are below version 3.0.0 of Astra theme/ Astra Addon – You would need to activate Mobile Header and Header Sections addons from Appearance > Astra Options.

Settings can be found under Appearance > Customize > Header > Above/Below Header > MOBILE HEADER.

Display on Mobile Devices: This setting lets you choose whether you want to display above/below header sections on mobile or not.Merge Menu on Mobile Devices: If Menu is selected for both/either of the section in the above/below header, this option is useful. It allows choosing whether to merge above/below the header menu with the primary menu on mobile. If you select it to merge, the above/below header menu will appear inside the primary header toggle button.If you do not want it to merge, a separate toggle for the above/below header menu will appear on mobile.This allows setting the different layout for the above/below header menu and primary header menu. Swap sections on mobile devices: It will alter the sections of the above/below header on mobile. Enabling this will swap section 1 and section 2. Layout: Mobile Header Alignment – This allows to display the above/below header section inline or stacked on mobile devices.Mobile Header Menu Styling: Choose the Menu Style (Dropdown, Flyout or Full-Screen), add Menu Label, and set color and style for a Toggle Button.Colors: You can set colors for Menu Item Border, Header Background, and Menu and Submenu Links and Background.Typography: Choose Menu and Submenu font style.Spacing: Add spacing to Mobile Header, Menu, and Submenu

Custom Layout – Hooks

Custom Layouts is a module available with Astra Pro. One of the available Layout types are Hooks that allow you to insert custom code or content using Astra hooks. This article will show you how to set up the Hooks custom layouts.

In additions, Custom Layouts require both the Astra theme and Astra Pro Addon installed and activated on your website. Further, before proceeding, you can check out the Custom Layout module overview first.

Add Hooks Layout

Step 1 – In the dashboard, visit Appearance > Astra Options and activate the Custom Layouts module;

Step 2 – Next, navigate to Dashboard > Appearance > Custom Layouts and click on the 「Add New」 button;

Step 3 – You will see the Custom Layout Type selection pop-up. Here, select the 「Hooks」 option.

Next, you can add a custom code. To do this, you can click the 「Enable Code Editor」 button.

Adding Custom Code? You Got a Code Editor!

This option enables the code editor which is helpful to add custom code.

While adding your code, please make sure to include opening statements of the code which pasting your code. Some examples are below:

/* Add Your CSS Code Here. */

You can use Page Builder as well

You can create a layout with page builder too, and add it to any action hook. For example, you can design a call to action with page builder; or newsletter subscription form and display inject it automatically below the content of all blog posts.

Pro Tips:

For Beaver Builder: Make sure your page builder is enabled for the 「Custom Layouts」 post type. For example, Beaver Builder has a setting for that. For Elementor: Make sure your page builder is enabled for the 「Custom Layouts」 post type. If you』re having trouble loading the page builder for any Custom Post Type such as this, please flush your permalink settings and try again.

Inside Hooks Layout Options

If you click on the Astra icon in the top right corner, you will open the Custom Layouts Setting panel. Further down, you will find the overview of the Hooks layout type options.

After selecting 「Hooks」 dropdown from Custom Layout, you get the following options:

Action: Action is basically a location where your code or custom content will be injected. To see all actions Astra offers and their locations, please visit this page.Priority: If there are multiple items added for a particular action, priority decides which item gets executed first. Lower the number, higher the priority.Spacing: If you need to add some padding above / below the custom content, use this option.

Display And User Role Settings

Next, you can set exact pages/posts where you want your hooks layout to be used. Thus, you need to adjust Display and User Rule Settings.

You can choose your custom layout to display on the entire website or on specific pages/posts with Display On option. In addition, you can exclude some locations using the 「Do Not Display On」 option .

Furthermore, you can disable your added hooks layout only for some user roles. You can do this with the User Roles option.

For example:If you want to inject a call to action on Entire Website; Except on 404 page; For Logged Out users, you need to set the following options –

Display On: Entire WebsiteDo Not Display On: 404 PageUser Roles: Logged Out

Responsive Visibility

This option lets you choose a device where you wish to display the custom layout. Just tick the checkbox for required devices – Desktop, Tablet, and Mobile.

Time Duration

You can set a start time and end time for layout visibility. Set a date and time duration for the layout.

Layout will be active for selected duration.

How To Change Web Stories Position

Since version 3.2.0, the Astra theme supports the Web Stories plugin by Google. Hence, you can add Web Stories to your whole website using dedicated Customizer settings.

This document describes who you can use Web Stories in different locations on your website.

How do Web Stories work With Astra?

Web Stories plugin can showcase your website content as web stories. Here, you can easily embed stories to your page or posts using the Gutenberg block. 

Further, you can instead add it to your whole website using the Customizer. Just navigate to Customize > Web Stories and check the 「Display Stories」 box. Also, you can find more details on the integration and Web Stories in this article.

Thus, when you set Web Stories to be displayed, they will be positioned above the header by default.

To change the position where Web Stories are displayed, you』ll need to use a custom code.

Changing Web Stories Position

To change the default Web Stories location, you need to add the following custom code (filter) to the functions.php file of your Child Theme:

// Filter to change the web stories position

add_filter( 'astra_web_stories_position', 'astra_web_stories_position_callback' );
function astra_web_stories_position_callback(){
return 'astra_content_before';
}

If you don』t have your Child Theme installed, please check this article on how to do it. If you are not sure how to add this code, please check this article.

Web Stories will now be displayed under your header and before your content using this example code. 

In addition, you can set other positions for your Web Stories using Astra hooks. To change position, modify the above code by changing the bolded part of the code (hook). You can add any header, footer, or content Astra hook here instead.

To illustrate, if you want to show Web Stories before the footer and under your content, you should use the {astra_footer_before} hook instead. In this case, the code would look like this:

add_filter( 'astra_web_stories_position', 'astra_web_stories_position_callback' );
function astra_web_stories_position_callback(){
return 'astra_footer_before';
}

You will find all Astra hooks in this document.

New Header Button Options in Astra theme (Old Astra Header)

Note:

We have released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.Now, you will be able to add the Button element visually using the Header builder and will find the same options of Open in a New Tab and Link Rel [Refer this screenshot]

Below are the new options introduced before Astra theme version 3.0.0 and where you can find them

The button field of Astra theme』s version 2.3.0 introduces two new options for Button which are – Open in a New Tab, and possible to add a nofollow, follow, and other using the rel attribute.

Note: You can refer to the following article to understand the working of rel attribute for any button module.

Typography options for Header Button

Astra theme version 2.5.0 brought Typography options for Header Button.

With new typography options, you can choose the Font family and set the Font Size and Weight, add Text Transform or set the Line Height and Letter Spacing.