分类： 入门

How to Create Different Headers on Different Pages Using Astra?

Astra Pro Addon plugin offers addons that allow creating a custom header and replace the primary header for Astra. With following Astra Pro addons you can design different header and set them to display on different pages.

These are premium features available with 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.

Page HeadersCustom Layouts

Page Headers

Use Page Headers addon, if you just want a different logo, menu, header background, menu colors on different pages. Display rules allow you to display page header on specific pages. Create a page header for each page and then use display rules. Below is the detailed video that describes the Page Header addon. Read more about the addon here.

Custom Layouts

Use Custom Layouts addon, if you want completely different or complex design for your header on different pages. Display rules will allow you to choose exact target pages. Create a custom layout for each page and then use display rules. Below is the detailed video that describes the Custom Layouts addon. Read more about the addon here.

Structuring Shop WooCommerce Page

We have listed down some features of the Product Catalog section which will help you to Structure the Shop WooCommerce page –

This is a premium feature available with 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.

We have seen the WooCommerce integration with Free Astra theme.

WooCommerce Pro Addon gives powerful and exclusive styling options for your WooCommerce store. You can make your store all the more stylish with minimal efforts and simple customization settings.

Note – Make sure you have WooCommerce plugin activated.

Following options are easy to understand, and you will find these options below the Shop Product Structure which on being checked will enable the respective options –

Display Page Title

Enabling this option will display the title of the page.If you have disabled the page title from page meta settings it will overwrite the above setting.

 Display Breadcrumb

Breadcrumbs show the current location of the user on the website. It is often used as a secondary navigation that allows users to go up and down in the hierarchy of links.You will have to enable this option if you want to display Breadcrumb on your shop page.

 Display Toolbar

This option gives quick information about the total number of products available and displayed.It adds a drop-down of Default Sorting in the right-hand corner of the page with the following option:

Sort by popularitySort by average ratingSort by latestSort by price: low to highSort by price: high to low

 Shop Product Structure

Product structure helps you in giving quick details in a simple and easy way.This is as good as Blog Meta settings.All the information displayed appears from the individual product information.

Category

After enabling this option appears the category which we have selected in the product settings of an individual product.

Title

A title is the name of the product that you set for your individual product.

Ratings

When a particular buyer, rates your product for the quality, service, delivery or the overall product satisfaction star ratings appear.You have an option to enable or disable the rating option.

Price

The price of the product that you mention in the individual product section appears here.If you have entered the sale price, the old price will appear in crossed text way along with new price in bold styling.

Short Description

If you wish to portray a quick overlay about the product you are selling, you have an option to write this in a Product Short Description panel. Make sure your description is not too elongated.

Add to Cart

This is the call to action button where you make the buyer tend to add the product to the cart for the final purchase. For the marketing strategies, it is always suggested to keep this option enabled on the product/archive page or the single product page.

Note: Did you know you could change the Structure of the Shop Product by dragging and dropping the fields. Watch this video to help you understand –

Product Styling

Content Alignment

This option helps you to set the overall alignment of the product view.You can set the content alignment to Left, Right or Center.

Product Image Hover Style

Hover styles are the animation effects that you see after hovering or scrolling mouse on the product image.Along with the swap images option you get animation options like Fade, Zoom, Zoom Fade.

Swap Images

In this option, the default product image on the product page is swapped for option image by clicking or image hover. The option image you provide can be a photo of the same product in different angles, colors, shapes, etc.You can find the setting for the Product Gallery option on the right side of the single product page.

This option helps the buyer to understand more about the products in a quick hover view.

 Box Shadow and Box Hover Shadow

Shadows help in enhancing your product page design.You can add shadow for a box as well as for the mouse rollover.

 Button

The Add to cart button helps you to set the horizontal and vertical padding.The default theme color is applied. If you wish to change this color you can add a Custom CSS for the same.

Visit the following to know about the Shop WooCommerce Page layout settings.

Configure AMP Plugin

AMP plugin needs to be installed in order to enable AMP for your web pages. Read about Astra-AMP Integration. After installing the plugin we recommend you follow the AMP』s Wizard to configure AMP.

Or you can choose from the below settings and that would be all –

From WordPress dashboard navigate to AMP > Settings. Below are the global settings that are recommended with the Astra theme –

Template Mode – Transitional: Enable this option. It will create a non-AMP and AMP versions of your content.Advanced Settings – Supported Templates: Disable the first option ( Serve all templates as AMP ) so it will give you a particular post type choice. Select post types where you wish to have AMP.

Apart from the above global settings, you can enable/disable AMP on particular pages/posts.

Edit the page. In the right sidebar, you can see a toggle button to enable/disable AMP.If page builder is used to designing a page or post, it is recommended to turn off the AMP.

『The preview could not be loaded』 Pop Up with Astra and Elementor

Are you working with the following setup on your WordPress site –

Astra theme ( with/without Astra Pro Addon plugin )Elementor plugin ( with/without Elementor Pro plugin )

While trying to build a page, sometimes you might face the popup in Elementor that says 『The preview could not be loaded』. This problem can be caused due to many reasons.

1. For initial debugging refer the following document by Elementor How to Fix the 『Preview Could Not Be Loaded』 Error

2. One of the reasons of this problem can be hosting. The following solution might work in some scenarios but it is not always the case. Initially, check the above document and then try the following solution. Sometimes the plugin reaches a default limit set with the server. You can try raising the default limit with the following code. The code needs to be added into the .htaccess file

SubstituteMaxLineLength 10M

Product Archive – EDD Module Options

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

Also, make sure that you have the Easy Digital Downloads plugin installed and activated.

Read about the module here. Make sure that the Easy Digital Downloads Module is activated from Astra Pro options.

You can style the product archive page where all your products are listed.

You can find the settings under Appearance > Customize > Easy Digital Downloads > Product Archive.

Below are the available options in the module –

1. Choose Product Style – Layout

Astra has two layout options for your Shop page:

Grid View: Where you can display your product archive page in a grid style, where the product image is displayed at the top. Product related information like price, category, title etc is displayed below the image.List View: Where the image and product related information is displayed side by side.

2. Archive Columns

You can choose the number of columns to be displayed for your products on the shop page, in Grid View and List View. You can choose the number of columns on your responsive devices with the toggle button.

3. Display Page Title

Enabling this option will display the title for the archive pages.

4. Product Structure

Product structure helps you in giving quick details in a simple and easy way. You can hide or display them by clicking on the 『eye』 icon.

5. Cart Button Text

Change the text for the Add To Cart button.

6. Variable Product Button

Choose a button or option for the variable product.

7. Variable Product Button Text

Change the text for the Variable Product Button text.

8. Product Styling

Content Alignment: This option helps you to set the overall alignment of the product view. You can set the content alignment to Left, Right or CenterBox Shadow and Box Hover Shadow: Shadows help in enhancing your product page design. You can add shadow for a box as well as for the mouse rollover.

8. Button

This helps you to set the horizontal and vertical padding for Add To Cart button.

9. Archive Content Width

Adjust the width specifically for product archive pages.

10. Colors

You can set the Colors for the Product Title, Price Color, and Content Color.

11. Typography

You can set the Typography for the Product Title, Product Price, Product Content from here.

How to Set Animation To The Sub Menu?

With Astra Theme version 1.5.0 and above you can set animation for the navigation menus. It adds a style to the menu when the user hovers it.

The settings can be found under Appearance > Customize > Header > Primary Menu > SUB MENU – Container Animation. Following are available options  –

Submenu Container Animation:

It applies entry animation to the submenu container when the user hovers the parent menu. Available animation styles are Slide Down, Slide Up, Fade. These animations are available for normal as well as the mega menu. Note that mega menu functionality is available with Astra Pro.

Note: Above options will be available with Astra theme for the primary header. While with Astra Pro Addon plugin above options will be available for Above and Below Header.

How to Update Astra Theme Manually?

You get an update notification in the WordPress backend under the Dashboard > Updates tab. From this page, you can update Astra with one click. WordPress checks for updates every 48 hours. If you have not get the notification to update, here is how you can safely update any theme or plugin.

Step 1: Install the Easy Theme and Plugin Upgrades plugin.Step 2: Download the zip file of the Astra theme here.Step 3: Upload the downloaded zip as installing a theme.Step 4: If you are Astra Pro user, download the zip file of the plugin from our store.Step 5: Upload the downloaded zip as installing a plugin.

Note – 『Easy Theme and Plugin Upgrades』 is a plugin that is developed to help manually update any plugins or themes easily. Installing theme or plugin with this won』t lose any data on your website.

We always recommend backup. It only takes less than 10 minutes.

Related Docs

How to Update the Plugin Manually from WordPress Backend?

Premium Starter Templates – Install and Activate License

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

Once you purchase Essential Bundle or Growth Bundle, follow the steps below to install the plugin and activate its license. Activating the license will allow you to import starter templates with the 『Premium』 tag.

Step 1 – Login to your store account.Step 2 – Visit Account > Downloads. Step 3 – Choose to download Premium Starter Templates plugin.

Step 4 – From your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin and upload zip from the above step.

Once you activate the plugin you will have to activate the license key.

Step 1 – Visit store account and go to Account > Licenses and copy the license key.

Step 2- Navigate to WordPress dashboard > Plugins > Installed Plugins > Premium Starter Templates and click on Activate License. A popup window will appear where you need to enter the license key.

Note: The Premium Starter Templates is a different plugin than the Starter Templates plugin that is available for free on WordPress.org.

Once you are set with the plugin start importing your favorite template.

Related Docs –

How to Import Complete Site with Starter Templates?How to Import Single Page Starter Templates?

Does White Label Feature Make Changes in the Code?

The function of a white label in Astra is to just remove the Astra branding from the dashboard, and it does not change any code.

If we remove the mentions of Astra from the code, even WordPress will not understand that the Astra theme is being used and so it will not detect any updates we release in the future.

However, there are some plugins that take a different approach and can help you white label WordPress itself completely. Hide My WP Ghost plugin is an example of this. If you need to white label your website completely, you can consider similar plugins.

How to Apply For Brainstorm Force Affiliate Program? (Become Astra Affiliate)

Follow this step by step guide to apply for our Affiliate Program. It will give you affiliate links for all our products sold on the store.

Create an Account on Brainstorm Store

Before applying for the affiliate program, you need to create an account on Brainstorm Store. Visit the following link and create an account on our store.

store.brainstormforce.com/register

Apply for Affiliate Program

After creating an account on Brainstorm Store, login into your account. Click on the Account tab, then click on the Affiliate Area in the drop-down menu.

Fill the Affiliate Registration Form and click the Submit button.

After successful form submission, you will see the following message.

Wait for Approval Email

We will review your affiliate request within 24 hours. Once your request is approved you will get a similar email as seen below.

Affiliate Links for Promotion

Click on Account then Affiliate Area to see all your affiliate links.

Now you can see the affiliate ID and affiliate URLs as shown in the screenshot below.

Use these links to promote any products developed by Brainstorm Force.