Author 诗语

Native AMP Support in Astra

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.

How to Disable the White Label Settings Permanently?

How to Disable the White Label Settings Permanently?

Astra Pro allows you to white label the theme as well as plugin and show it as your own. You can read our white label settings article to know more.

Normally, the white label settings can be hidden by checking the respective box on the settings page. But, if your customer deactivates & activates the plugin then those settings are visible again.

To avoid this and for adding extra security layer you can hide the White Label settings completely by declaring below constant in the wp-config.php file at the root of your WordPress installation.

define( 'WP_ASTRA_WHITE_LABEL', true );

Once this is done, the White label settings will be hidden forever.

How to Add Icons to Menu Items?

How to Add Icons to Menu Items?

Icons in the navigation menu give more idea about the menu item. Icons can be added to a menu item with the following ways –

1. With an external plugin

Any external plugin that can provide such functionality can be used. Plugins like Menu Icons by ThemeIsle allows adding icons to menus.

2. With Font Awesome icon tag

Font Awesome library offers a number of icons. These icons can be added to menu items with the following steps –

Step 1 –  Astra does not come with the Font Awesome library. So the external plugin can be used to load the library to the theme. You can choose a plugin from WordPress Repository that allows loading a Font Awesome library to site. For Example – Better Font Awesome.Step 2 – Install the selected plugin on the site.Step 3 – Now visit a menu item where you want to add an icon. Menus are available under Appearance > Menus.Step 4 – Click on the menu item and in the Navigation Label add tag for the icon from Font Awesome library.

For Example – If you want to add address-book icon to the menu item – Contact. Then after following Step 1 and 2, you can copy the tag code for address-book from the Font Awesome library. Just visit the icon page, select the required icon and copy the code. The code for address-book icon can be copied from the link here. Visit the menu item – Contact and paste the code in the Navigation Label.

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

『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

Does White Label Feature Make Changes in the Code?

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.

Colors & Background options for EDD

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.

Typography options for EDD

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.

EDD – Easy Digital Downloads Module Overview

EDD – Easy Digital Downloads Module Overview

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.

We have seen the EDD integration with Free Astra theme.

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

Quick Steps on How to Style EDD Store Page Using the EDD ModuleStep 1: Make sure you have the Astra Pro Addon and Easy Digital Downloads plugin installed and activated. How to Install Astra Pro Addon plugin?Step 2: Activate the Easy Digital Downloads module from the Astra Options under the WordPress Dashboard > Appearance > Astra OptionsStep 3: Visit customizer [ Appearance > Customize > Easy Digital Downloads ] to edit module settings

Once you activate the Addon, settings will be available in the customizer under Appearance > Customize > Easy Digital Downloads.

Following are available settings –

GeneralProduct ArchiveSingle ProductCheckout Page

More Customization options –

Colors & Background options for EDDTypography options for EDD

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?4. Easy Digital Downloads Mini Cart Shortcode

Single Product – EDD Module Options

Single Product – 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. And make sure that the Easy Digital Downloads Module is activated from Astra Options under the Appearance.

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

Below are the options that will work on the single product page – Customize > Easy Digital Downloads > Single Product

Disable Product Navigation: Remove the navigation from the bottom of the single product page.Disable Add To Cart Button: Remove the Add To Cart button from the bottom of the single product page.

Colors

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

Typography

You can set the Typography for the Product Content from here.

General – EDD Module Options

General – EDD Module Options

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.

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

You can add a Cart Icon using Easy Digital Downloads module available with Astra Pro. Please refer document, to begin with, Easy Digital Downloads module.

Header Cart Icon

Header Cart Icon is the icon that appears at the end along with the primary menu in the header. Refer How to Add EDD Cart in Header?

This cart icon can be customized with the following settings – Customize > Easy Digital Downloads > General

Icon: There are 4 different kinds of Icon styles available for you to choose depending on the products you are selling on your store.Default, Cart, Bag, BasketStyle: You can set filled / outline styles to the icon.Display Cart Totals: When a buyer adds a particular amount of products in the cart, that number along with the total price addition appears in the Display cart Totals.Display Cart Title: It simply displays 「Cart」 name on the menu.

Copyright © 2024 Astra 文档, All Rights Reserved. 自豪地采用文派。