Author 诗语

Colors & Background options for EDD

Easy Digital Downloads Module is a premium feature available with Astra Pro Addon plugin that extends color and background options for EDD pages. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Read about the module here. Make sure that the Easy Digital Downloads Module is activated from Astra Options under Appearance.

Before that please verify if you have the Easy Digital Downloads plugin installed and activated.

Colors & Background options will be available in the customizer under Customize > Easy Digital Downloads > Product Archive / Single Product.

Below are the available tabs –

Product Archive

Product Title Color: Applies color to product title on the product archive page.Product Price Color: Applies color to product price on the product archive page.Product Content Color: Applies color to product short description on the product archive page.

Single Product

Product Title Color: Applies color to product title on the single product page.Product Content Color: Applies color to the product description on the single product page.Product Navigation Color: Applies color to the product navigation at the bottom of the single product page.

How to Get Started with CSS File Generation in Astra 2.1.0 Update?

Astra 2.1.0 update provides a new way for CSS file generation for faster browsing caching. This article explains how you can update Astra to this version and enable the File Generation option.

You can simply update the Astra theme and Astra Pro from your WordPress Dashboard.

NoteYou will need the Astra Pro plugin installed and activated to find this feature!

1) Head over to your WordPress Dashboard, and then click on the Updates Tab

2) You will see the update notification for Astra theme and Astra Pro – v2.1.0

3) First, select and update the theme and then update Astra Pro.

4) Head over to the Astra Options page, and on the right-hand side, you will see the option under the CSS File Generation section.

5) Click on the Enable File Generation button and after it』s done. Click the Refresh button to complete the regeneration process.

6) Once you have updated the theme and the plugin make sure to clear your browser cache (Ctrl + F5). Alternatively, if you use any type of Cache Plugin, you can use that as well to clear the cache.

NoteIf you still want to load the inline CSS and do NOT generate separate CSS files within your Astra/ Astra Pro themes – disable the above option and refresh the page.

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.

How to Change the Direction for Submenu Opening?

By default, submenus will open to the right side. Sometimes if the submenu structure is long, it might open out of the viewport in the right and user will not able to see it. 

To fix this add a below-mentioned CSS class to the parent menu who』s submenu is displaying out of the viewport.

ast-left-align-sub-menu 

For example:  If following is the menu structure:About> About Team>> Team Members>>> Team Responsibilities>>>> Team ContactsThen add a CSS class ast-left-align-sub-menu to the parent menu – About Team  So that their sub-menus will open to the left instead of right. 

Detailed steps to add CSS class – 

Step 1: From the dashboard navigate to Appearance > Menus.

Step 2: At the top right corner click on Screen Options and enable the CSS Classes option.

Step 3: From the menu structure click on the menu whos submenu needs to be opened at the left.

Step 4: Add CSS class ast-left-align-sub-menu and click on save. 

Now the submenus will open like –

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.

How to Switch From Existing Breadcrumb to New Trail?

Astra version 1.8.0 introduces breadcrumbs that can be added from within a theme.

The Page header module of the Astra Pro addon already adds breadcrumbs. The ones that you already have will follow the previous way. However, the ones you add now on will follow the recent Breadcrumb trail.

If you want to switch from the existing breadcrumb to the new trail, you can use the following filter.

add_filter( 'astra_addon_advanced_headers_use_astra_breadcrumb_trail', '__return_true' );

Add this code to the child theme』s functions.php file.

Typography options for EDD

Easy Digital Downloads Module is a premium feature available with Astra Pro Addon plugin that extends typography options for EDD pages. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Read about the module here. Make sure that the Easy Digital Downloads Module is activated from Astra Pro options. And before that please verify if you have the Easy Digital Downloads plugin installed and activated.

Typography options will be available in the customizer under Customize > Easy Digital Downloads > Product Archive / Single Product.

Below are the available tabs –

Product Archive

Product Title: Applies typography to product title on the product archive page.Product Price: Applies typography to product price on the product archive page.Product Content: Applies typography to the product description on the product archive page.

Single Product

Product Title Color: Applies typography to product title on the single product page.Product Content Color: Applies typography to the product description on the single product page.Product Navigation Color: Applies typography to the product navigation at the bottom of the single product page.

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.

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.

Native AMP Support in Astra

Astra integrates beautifully with AMP (Accelerated Mobile Pages). AMP allows loading web pages faster on mobile devices than their usual speed. This document will help to understand AMP in detail and how Astra works with AMP. Let』s take a look! 

What is AMP (Accelerated Mobile Pages)?

AMP gives faster page loading experience on the mobile web. Your website pages will load on mobile devices without delay. AMP allows restricted HTML and JS to render on mobile devices and so the speed of the pages will be increased.

AMP is an open-source project for the betterment of future web on mobile devices. It is an initiative by Google. It is recommended to use AMP pages as most of your website viewers will be using smaller devices.

What is mean by Native AMP Support in Astra?

As mentioned earlier AMP restricts HTML, CSS, and JS to load on mobile devices. It does not allow more than 50KB CSS to load on mobile. Because of this, you can not see the exact Non-AMP pages design on AMP pages.

Astra』s native AMP support takes care of allowed CSS size and manages the design of the mobile pages accordingly. Astra tries to retain the original design of the pages in AMP mode. So that your AMP pages look much similar to Non-AMP/ original design.

How AMP can be enabled on the website?

To start using AMP, you need to enable it on the site with a plugin. Install the following plugin on your website just like any other WordPress plugin.

AMP: This plugin is freely available on WordPress.org

Read how the AMP plugin can be configured with recommended settings.

Important Note: Due to JS and CSS restrictions by AMP some of the Astra theme and Astra Pro settings will not work. Here is the complete list for the options that won』t work with AMP.