Astra 文档

Why font-display property is added to Astra?

With Astra Version 1.8.3 and above, improvement is added with property font-display: fallback; for loading Astra Font.

@font-face {
font-family: “Astra”;
src: url( https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.woff) format(“woff”),url(
https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.ttf) format(“truetype”),url( https://wpastra.com/wp-content/themes/astra/assets/fonts/astra.svg#astra) format(“svg”);
font-weight: normal;
font-style: normal;
font-display: fallback;
}

While loading a website, there is a very short period of time (100ms according to Google) for which text will not display in a font applied to it. That means custom fonts ( Astra fonts ) will be invisible for a small period of time. Once your website is fully loaded text will display with a font set from the customizer.

For this short period of time browsers have introduced new property font-display which adds a fallback font until custom font is loaded.

For more information, please refer to the doc below – https://developers.google.com/web/updates/2016/02/font-display

Astra Compatibility with LearnDash Version 3.0

The following article will help you get an overview of LearnDash – Overview of LearnDash integration in Astra

Recently LearnDash released version 3.0 with major improvements. In this version, few new things were added while few of the previous structures were changed.

LearnDash Legacy mode

In case you still wish to continue with the previous version you can select a Legacy mode –

You can find the settings under WordPress Dashboard > LearnDash LMS > Settings > General > Design & Content Elements > Active Template.

When you choose Legacy mode Astra will continue working as it was previously. Astra adds LearnDash settings in the customizer under –

1. Customizer > LearnDash

2. Customizer > LearnDash > Colors [Astra Pro]3. Customizer > LearnDash > Typography [Astra Pro]

Below are the related documents –

LearnDash Integration in Astra ThemeLearnDash integration in Astra Pro

LearnDash 3.0 mode

You can switch to the LearnDash 3.0 template from WordPress Dashboard > LearnDash LMS > Settings > General > Design & Content Elements > Active Template. This will enable all the new LearnDash features on your site.

Astra theme and Astra Pro – version 1.8.6 and above, can work seamlessly with LearnDash 3.0 version. Astra disabled a few of the settings that were dependent on LearnDash previously and that are no longer usable. Also, LearnDash 3.0 provided some new attractive features that were available with Astra before. We removed such duplicate options too as we do not want to bloat your site with identical options.

Below are some settings that you will find disabled from Astra customizer –

1. Customizer > LearnDash – This tab held a few layout options for LearnDash pages. Like –

1.1 Distraction Free Learning: LearnDash 3.0 has a similar feature – Focus Mode. ( LearnDash LMS > Settings > General )

Note: The Astra Meta Settings will not work when the Focus Mode of LearnDash is enabled.

1.2 Student’s Gravatar in Primary Header: Enabling Focus Mode will add Student’s Gravatar by default.

1.3 Course Content Table: LearnDash 3.0 doesn’t support table structure anymore. All tables are now converted into fields.

2. Customizer > LearnDash > Colors [Astra Pro] – This tab will be available in the customizer with new color options. We will see all the new options in the later part of this document.

3. Customizer > LearnDash > Typography [Astra Pro] – This tab will be disabled. Previously typography options were available for LearnDash Tables. Since the table structure will not be available these settings are no longer usable. LearnDash pages will inherit typography from Customizer > Global > Typography > Base Typography.

New Colors & Background options for LearnDash 3.0 with Astra Pro

LearnDash 3.0 provides basic colors options under WordPress Dashboard > LearnDash LMS > Settings > General > Design & Content Elements. Below are the available settings with LearnDash –

Accent Color: This will be a base color for the LearnDash pages. It will be applied to – buttons, action items, and highlights Progress Color: Color used for all successful progress-related items (completed items, certificates, and progress bars).Notifications, Warnings, etc.: This color is used when there are a warning, important messages.

With Astra Pro, it provides more specific color options for your LearnDash pages. These will be available in the customizer under Customizer > LearnDash.

Note: Make sure you have activated LearnDash addon from Appearance > Astra Options.

In color settings, you will see a checkbox saying – Check this if you wish to overwrite LearnDash Colors. This will allow you to apply Astra colors over the above LearnDash colors.

Link Color: This will be applied to links on LearnDash pages, lesson panels, etc. Highlight Color: This will work as a background for buttons, highlighted tabs, hovered text/link, etc. Highlight Text Color: It will work with the above highlight background color as well as text color for progress items. Progress Color: Progress bars, completed items, certificates will have this as the background color.

We provide more styling options in dedicated modules of Astra Pro Addon plugin. Learn more about the LearnDash module of Astra Pro Addon.

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?

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.

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.

Naming Convention for Astra 2.1.0 CSS File(s)

Astra with version 2.1.0 offers an option of CSS file generation. In this article, you will see how these CSS files are named.

The new naming convention is really simple, so you don’t get confused when looking at these files.

The CSS file is named based on the post(s) or page(s) on your website. The Post ID or the Page ID will be used as a suffix at the end of the CSS file.

Let’s say you have a post and it’s ID it “206”.

Then the CSS file will auto-generate with this name:

“astra-theme-dynamic-css-post-206.css” (for Astra Theme)“astra-addon-dynamic-css-post-206.css” (for Astro Pro)

Get SkillJet Access – Brainstorm Force Customer

If you own the Astra Growth Bundle by Brainstorm Force, you can easily unlock SkillJet access with following steps –

Step 1: Login to your store account, hover on the Account menu and select SkillJet Academy.

Step 2: Once on the SkillJet Academy page, click on the ‘Access SkillJet’ button.

Done!

You will be logged in to the SkillJet website automatically.

Go ahead and access your courses from the ‘My Courses‘ page.

Astra 2.2 for Existing Users

Astra 2.2 brings new customizer options for headings and buttons.

What will happen if you update the theme and plugin?

If you are existing Astra user and update Astra theme and Astra Pro to version 2.2, you would be able to see these new options in the customizer, But they will NOT be functional. That means you can see the new options but they will not work and cause any change on the website.

Even after updating both theme and plugin, everything will remain same on the website.

Why this is so?

Astra 2.2 adds new customizer options and these options would impact the current way customizer settings are applied. And so we have restricted inheriting any automatic changes on existing websites, to ensure that there’s no unexpected effect.

We have taken the utmost care that Astra 2.2 won’t disturb your existing website design and structure.

How existing users can avail Astra 2.2 features?

A simple answer is – using a single line of code.

To make Astra 2.2 features work on existing websites, you can use custom filter code.

As mentioned above, even if the Astra theme and Astra Pro are updated to version 2.2, new customizer options will not work unless the custom filter is added to the child theme.

How existing Astra users can work with Astra 2.2 update?

1. Update the Astra theme and Astra Pro to version 2.2 from the WordPress Updates page. 2. As mentioned above, nothing will be changed on the website.3. Now copy the following code and paste it into the child theme’s functions.php file. 4. For Theme, use –

add_filter( ‘astra_page_builder_button_style_css’, ‘__return_true’ );

5. For Addon, use –

add_filter( ‘astra_addon_page_builder_button_style_css’, ‘__return_true’ );

Note: Do NOT remove this code in order to keep using Astra 2.2 features.

After adding custom filters –

Once you add above code to the child theme’s functions.php file, new Astra 2.2 options will be working for you.

With this, you might notice a slight change in buttons.

This is because static default value for buttons line-height is changed in this update. That might change the existing look of buttons.

You can alter it easily from the customizer buttons settings and it will be applied globally to all buttons on the website.

How to Enable Astra Comment Box on Custom Post Types?

Do you notice the default Comment Box and need to change it to Astra’s Comment Box on Custom Post Type?

Astra provides a filter using which you can replace the default Comments Box with the Astra’s Comment Box.

add_filter( ‘astra_comment_form_all_post_type_support’, ‘__return_true’ );

You will need to add this filter to the Child theme’s functions.php.

Default Comment box –

Updated Comment box using the above-mentioned filter –

Note: If you are unable to find the Comments box on your Custom Post Types, you will need to enable it from the Types if using Custom Post Types plugin. Also here’s an article to help you locate this feature.

Starter Templates with Other Themes

Starter Templates are initially designed with the Astra theme. They inherit global properties like typography, color, logo, menu, layout, button from Astra customizer.

While importing a template when you click on the ‘Import Template’ button, you will see a popup that gives the option to install and activate the Astra theme. Choosing this option will automatically add the Astra theme.

In case, you skip this option and continue importing template with the current theme (other than Astra) you might notice a few changes in template. In this case template will inherit styling from current theme customizer that might have different colors, typography, and other layouts.

This article lists all the possible changes that you might see if you import a starter template with another theme than Astra.

1. Site logo missing/ Change in Site Tagline – Astra customizer provides an option to add a logo and site tagline. This might be missing when the template imported with another theme. 2. Colors & Typography – You might see colors and typography applied from an existing theme. 3. Few icons in Header – Astra allows adding extra menu item like search icon, button, cart icon, etc. This might be missing with another theme. 4. Page Title – Astra does not display site title unless it’s chosen intentionally. With another theme, you might see them displayed. 5. Button Style – Global button stylings with color and border are set from Astra. You might see different button styles. 6. Spacing – Some of the themes apply static spacing to page builder sections. So padding and the margin between the sections might look different. 7. Background Color – Overall background color for the site can be set from the Astra. This will change according to the different themes. 8. Background Color on Sections – Background color for each section. It will appear above the site background color. 9. Transparent Header will be replaced by Theme header – Astra theme customizer gives option to set transparent header. With other themes, this will be replaced by a normal theme header. 10. Blog page – Astra manages the layout of the blog archive and single blog page. With other themes, content width might look different. 11. Footer widgets – Astra allows inbuild footer widgets with number fo columns. So with other themes, you might see these missing.

Starter Templates — Basics and FAQsHow to Import Complete Site with Starter Templates?How to Import Single Page Starter Templates?Starter Templates – Elementor PopupStarter Templates – Free Images from Pixabay