Author 诗语

How to Add Gutenberg Design Compatibility?

With Astra theme v2.6.0 we are providing enhanced Gutenberg Design Compatibility. [ Read more here in our post ]

What does this mean?

In this theme update we are adding design specific compatibility with Gutenberg plugins.

We received many requests from our users to provide enhanced or full compatibility in terms of Design.

So with this update, we have added some default Spacings & CSS Styles to make any Gutenberg site more elegant.

For New Users: Those users who are downloading Astra theme on your environment from v2.6.0 and above. No need to make any changes, these changes will be auto applied to your core Gutenberg Blocks.

For Existing users: Users who are using Astra theme from previous version 2.6.0 and update to version 2.6.0 and above. To get this compatibility you will need to add the following filter –

add_filter( 'astra_gutenberg_core_blocks_design_compatibility', '__return_true' );

Note

Add the above code into the child theme』s functions.php file.

Astra』s Default Font Icons Replaced With SVG

Astra uses beautiful font icons internally in header, footer and other sections. You will see font icons like arrows, hamburger, search, account, cart and so on.

These font icons used to load from astra.woff file.

With Astra version 3.3, these font icons are replaced with SVG. SVG icons are lighter and look sharp on all devices.

Replacing Astra font icons with SVG icons can uplift page loading speed by 29ms and reduced about 12.5% part of the page load.

Users who are starting using Astra after version 3.3, can directly get icons in SVG format.

Users who are updating Astra from previous versions to v3.3, would need to use the following filter in order to replace font icons with SVG.

Here is a code you can paste into child theme』s functions.php file.

add_filter( 'astra_is_svg_icons', '__return_true' );

Can I Import Starter Templates Site on Existing Website?

Starter Templates plugin allows importing the entire site and as well as single-page templates. Sometimes you might have a website with some content on it like – pages, posts, customizer settings, etc. If you are wondering what will happen if you import a starter template on your website, this article will help you.

Importing Single Page Template will not affect anything on your website. This will create a new page as a draft in the page list. So even if you import a number of pages, it will not affect your existing website.

Importing Complete Site Template on the existing site that already has content, might affect the look of the site. Newly imported content will get mixed with existing one and it will display unexpected results.

While importing a complete site, a popup displays few options. In case you want to skip any of the parts of the site you can choose options accordingly.

In case you wish to clean/reset your existing WordPress installation and then freshly import the starter template, refer – How To Reset WordPress Installation?

We recommend taking a backup of your existing website before making any major changes. It』s easy and takes only a few minutes.

Astra Pro Shortcodes Reference

Following are the list of all the Shortcodes which can be used for the respective Astra Pro features or modules –

Breadcrumbs Shortcode

Here』s a link to the article.

EDD Mini-Cart Shortcode

Here』s a link to the article.

Search Box Shortcode

Here』s a link to the article.

Lifter LMS Profile Shortcode

Here』s a link to the article.

LearnDash Profile Shortcode

Here』s a link to the article.

WooCommerce Mini-Cart Shortcode

Here』s a link to the article.

Sorry, You Are Not Allowed To Access This Page

While trying to activate Astra Pro Addon, you may get a message 「Sorry, you are not allowed to access this page」.

Why Is This Happening?

Seeing this message means that you』re being blocked due to some settings. Some of the reasons that can cause this are:

Your Astra theme is not activated or updated.There is some issue with your Astra (parent) or Astra Child theme.Renaming or modifying Astra theme or Astra Pro plugin folders or files

How To Solve It?

If this happens, please try these steps:

Please make sure that you have the Astra theme activated and updated to the latest version.

Suppose you tried activating the Astra Pro using the activation link on the Plugins page. Try navigating to Dashboard > Appearance > Astra Options and try activating Astra Pro from here.

Deactivate the Astra theme, delete it, reinstall and reactivate. Try activating the Astra Pro.

If you』re using a child Theme, please try switching to Astra (parent) theme and try activating the Astra Pro.

If this doesn』t help, try enabling the debug log to see if there are any errors related to Astra Pro.

You can find out more about this issue and how to solve this in this article, or you can contact our support team.

Set Parallax Effect on Responsive Devices with Page Header

We have an improvement for the Page Header addon you will now be able to set the Parallax Effect on responsive devices too.

You will find the new option under the same section of Page Header. Now you will instead find the options to enable the Parallax on specific devices where you want to display the Parallax effect.

The main reason we have implemented this option?

Some images do not appear properly with the Parallax effect on responsive devices like mobile phones. In such cases, users can disable the parallax effect on Mobile and vice versa.

The New select option contains the following choices –

None = Disable Parallax across all devices.Desktop + Mobile = Enable parallax on both the devices.Desktop = Enable parallax on just Desktop ( Disable on mobile )Mobile = Enable parallax on just Mobile ( Disable on Desktop )

How to Enable the Parallax Effect on Responsive Devices?

Create a new Page Header.Now, In their settings, You will notice that the old option ( checkbox ) to enable Parallax has been replaced with the new option ( Dropdown ).

Note: We have also taken care of the Existing and New Users with this Improvement.

For existing users:

We will migrate the already set values, so if the user had the option enabled, it will work as it is and the parallax effect will be enabled after updating to 2.2.5 or above.

Users will now be able to select the Options from the responsive devices as per their requirement.

For new users:

By default, the Parallax will be set to None and it can be changed as required for the responsive devices.

New Color Controls in Astra theme & Astra Pro Addon

We have been working on quite a few things lately.

To begin with we have moved all our controls in our Customizer from PHP to ReactJS controls. Which means we have new and better and optimized performance.

Further for all Color, Responsive Color, Background & Responsive Background control now uses Gutenberg』s control in Customizer.

Let』s see how it would look –

Previous Color Picker Controls

New Color Picker Controls

Next, for the Background control in the Customizer, we have provided the Gradient color option –

New Gradient Control Option –

How to Remove the White Bars in the Safari Browser on iPhone X and Higher

The new iPhone X features a beautiful edge-to-edge display. But you might observe a small gap at the top of the browser.

When viewing the website in an upright (portrait) position, you will not notice this gap. But if you rotate your screen to horizontal (landscape) position mode you』ll notice white space on both sides of the screen.

In order to to avoid any such obstruction of the content, the iOS system restricts website display within a 「safe area」 on the screen.

On the websites, this results in letter-boxing on the left and the right.

You can read more about 「Positioning Content Relative to the Safe Area」 at official Apple website.

To avoid white bars around the browser you would need to extend the Safe Area. To do so you would need to add a custom code.

Simply adding 「viewport-fit=cover」 to your viewport meta tag will expand your site to fill the entire screen and not just the safe area.

Here is a custom code that you will need to add to your website –

Your website would look something like this as a result:

As you can see, the white spaces on left and the right side of the screen were removed.

How To Add Custom Code To Your Website

There are two ways to add this code to your website –

1. With Custom Layouts (Astra Pro)

Custom Layouts is an Astra Pro module. This means that for this method you would need to have your Astra Pro addon installed and activated. Follow these  steps to add the code with Custom Layouts: 

Activate the Custom Layouts module at Appearance > Astra Options > Astra Pro modules.

Navigate to Appearance > Astra Options > Custom Layouts and add a new Custom Layout.

On the next step, click 「Enable Code Editor」 to activate it.

Insert the code in the Code Editor.

Scroll down to the Settings and set the following options:

Layout: HooksAction: wp_headDisplay On: Entire Website

Publish the layout.

2. With Astra Hooks Plugin

If you』re using the only Astra Theme without an Astra Pro addon, you can add this code using the Astra Hooks plugin. Just go to Dashboard > Plugins > Add New, find Astra Hooks, install and activate it.

Once the plugin is activated follow these steps:

Open your Customizer (Dashboard > Appearance > Customize)

In the Customizer, go to Hooks > Header

Add the code to the wp_head section and Publish

That』s all!

Your website will now look great on iPhone edge-to-edge screens too.

Update Required Plugins – Starter Templates

While importing Starter Templates, does the popup says – 「Update Required Plugins「. If yes, here』s why and how you can clear it.

Why?

Starter Templates are built with some awesome plugins. In case, you already have these plugins installed but not updated to their latest versions you might see this notice.

For example – You are importing a template that is built using the Elementor page builder. If you already have Elementor installed but not updated to a recent version, you will see a popup with this notice.

How to Clear?

Just visit a WordPress 『Updates』 page and update all required plugins to their latest versions.

What If I Skip This Step?

In case you skip this step, the imported template might have some errors/issues depending on the update of the respective plugin.

For example – If the recent version of Elementor introduces a new widget and a template uses it, you might see error that the widget and its content is missing from the imported template.

Mountain Template With Elementor Theme Style

Loved the Mountain template from our library of Starter Templates?

This is a template built with the Elementor page builder. You might have imported this template and looking for how to proceed with editing it.

This template is designed with Elementor Theme Style. Let』s see what does that mean and how you can edit these settings.

What is Elementor Theme Style?

Elementor Theme Style provides global settings that allow you to control the entire site design from one place. These settings come with the Elementor page builder』s free version.

You can set default styling for Headings, Buttons, Form fields, Links, Text, Backgrounds, and more.

You can find these settings from page editor –

How Elementor Theme Style is Used with Mountain Template?

We have used the Elementor theme style kit and designed a starter template for Mountain.

For all Elementor pages in Mountain template – global styling is applied from Theme Style settings.

Once you complete the import process here is how you can edit Mountain site –

Edit Mountain Template

Editing Header and FooterEditing Elementor PagesIMPORTANT: Priority of Style Options

First, let』s understand how you can edit the header and footer of the site and then we will see how to edit pages.

Editing Header and Footer

Header of the Mountain template is designed with Astra customizer.

You can edit the header layout along with the logo , menu, button from the customizer. You can find settings under Dashboard > Appearance > Customize > Header.

Footer is designed with plugin – Elementor – Header, Footer & Blocks Template

In dashboard you can find settings under Appearance > Header Footer & Blocks

Editing Elementor Pages

When you edit Elementor pages, you can find Theme Style under Global Style.

Style set from Theme Style options will be applied to all Elementor pages on website. Below are available options –

BackgroundTypographyButtonsForm FieldsImages

Here is an example – When you change button color from theme style, it will be globally applied on site.

IMPORTANT: Priority of Style Options

In the Elementor page, a widget can have different properties set. Here is the priority –

1. Individual Widget: If the style is applied from a particular widget, its priority will be greater among all. For example, if a button has a blue background set from widget options then the blue color will appear.

2. Elementor Theme Style: If style is not set from individual widget, a global styling from Theme Style settings will be applied.

3. Astra Customizer Style: If styling is not set from Elementor Theme Style, Astra theme will apply styling set in the customizer. For buttons – settings will be available under Global > Buttons.

You can edit all Elementor pages, update content, images, layouts as per your requirement.

For styling – you can look out for the priority of the settings as mentioned above and then edit the style. Most of the settings will be available with Elementor Theme Style.