分类： 入门

How Does Astra Work with the Gutenberg Editor?

Astra gives you a great experience of building a page with Gutenberg editor. Below are the points that explain how Astra suits best with Gutenberg editor.

Support Container Layout 

Container layout set for Astra from the customizer will be applied to the Gutenberg editor as well. So that user will get the experience of how the final page will look in the frontend. Read more about the container layout here.

Gutenberg editor with Boxed / Content Boxed – Container Layout

Gutenberg editor with Full Width / Contained – Container Layout

Note: It is not recommended to use Full Width / Stretched layout with Gutenberg editor. It is specially designed for page builders which need full control over the container width. So if you enable Full Width / Stretched layout, the content will not be stretched to the fullest with Gutenberg editor but will be stretched in the frontend.

Support Wide / Full width alignment options

Gutenberg editor provides wide width and full width option for blocks like Image, Image Gallery, Cover Image, Posts etc. Astra supports these width options depending on the selected container layouts.

Wide width option will display full image but will have some space around it. While full width option will stretch the image end to end. In Boxed and Content Boxed container layout, full width image will stretch as per the width of the box. That means it will not display out of the box.

Image with Boxed / Content Boxed – Container Layout

Image with Full Width / Contained – Container Layout

Note: If the sidebar is enabled for the page, the image will not be stretched to fullest. As doing so will overlap the sidebar content.

Backend same as a frontend 

Gutenberg editor has the object to provide a visual editing experience. So with Astra, we make sure that the editor looks similar to the frontend. The customizer settings for background colors, text colors, typography etc. can be seen while editing the page. So that you can have an idea of how the page will look in the frontend.

Style blocks nicely

Astra is tested with every block of Gutenberg. Customizer settings will be applied to all Gutenberg blocks.

Support for Astra shortcodes

Astra shortcodes that come with Astra Pro Addon plugin will work best with Gutenberg editor.

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)

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.

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.

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.

New Typography Improvement for Astra

Astra version 1.5.2 introduces a new typography param. With this user can select multiple font variants to be enqueued for base typography. That means the user can select different required Font Variant in Base Typography and use them on the entire site as per the requirement.

The settings can be found in the customizer under Global > Typography > Base Typography. After selecting a font-family, Font Variant option will appear. Select the required font variant. You can choose more than one variant.

Note: 

Font Variant option is available only for Base Typography.Font Variant option is available only for Google Fonts.

As shown in the above video, if you select font family as Poppins and select variant 400 Normal and Bold 700. Whenever you mark text as bold, it will be applied with Bold 700 font weight. These variants will be available with page builder as well.

Along with Font Variant option, typography param introduces an option that allows to search font-family from the lists. It can be seen in the above video. This is available for all typography settings.

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.

Astra Options that won』t work with AMP

As we know AMP does not allow JS to render on mobile devices. It also restricts the CSS size to 50 KB. Some advanced options from Astra theme and Astra Pro needs JS and extra CSS to work. With the restriction of JS and CSS, some Astra options will not work when AMP is enabled.

Though some Astra options will not work on AMP pages, switching to AMP with these options will not break anything on your website. These features will be replaced by alternative options from the Astra itself.

Below is the list for the Astra Pro addons that will not work with AMP –

Above and Below Header – If above/below header is designed with Astra Pro』s Header Sections addon then it will not appear on AMP pages.

Sticky Header – Header designed with Astra Pro』s Sticky Header addon will not work on AMP pages as it needs JS to work.Scroll To Top – If you have enabled Astra Pro』s Scroll To Top addon, it will not display on AMP pages.Mega Menu – The feature offered by Astra Pro』s Nav Menu addon will not work on AMP pages. All menu items will display as a normal drop-down. Template added from the page builder will not display, instead of the template a menu item text will display.Custom Layouts – Layouts designed with page builder in Custom Layouts addon will display without any style. If page builder used is not supported by AMP then only content from the layout will display and AMP will skip the style. So it is recommended to disable custom layout on AMP. You can find a setting on individual Custom Layout (Screenshot).

Apart from the above, some options from other Astra Pro addons will not work. They are as follows –

Search Style – Advanced search styles like Full-screen, Header cover search, the Search box will not work on AMP pages. Only slideMenu Style for Mobile Header – Astra Pro』s Mobile Header addon provide options for Menu Style – Flyout, Full-Screen, No Toggle style. These styles will not work on AMP pages. Instead of these styles, a simple drop-down menu will display.Toggle Button Style and color – For Mobile header, Toggle Button styles like outline, minimal and Toggle Button Color will not work. Instead of this a default Fill style will be applied with theme base color.Infinite Scroll on blog/archive page – Astra Pro』s Blog pro addon offers pagination option. If you select Infinite Scroll for blog/archive page, it will not work on AMP pages as it needs JS. Instead of the infinite scroll, pagination will be replaced with numbers.

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.