Enhanced block editor user experience

A study says that the usage of CSS on your website is directly proportional to the speed of your website. The more CSS you use, the slower your website will load. With the speed of the website being one of the major ranking factors, it is very important to minimize the usage of CSS. That’s what we have done with the block editor. We have used the built-in CSS of WordPress and reduced the usage of CSS in the theme.

Let’s take a closer look at all the major changes:

Latest Posts block

In the new version, we designed the latest posts block in such a way that it automatically highlights the headings, changes the color of the link and meta tags, changes the font size based on the theme, and many other features. 

Pullquote & Quote block

The pull-quote block can quickly and easily make short snippets look beautiful and also adds value when you try to attract the users to a particular portion of the website. We improved the User Experience with the new version of the Astra theme by updating the border and quote positions. Previously, when you moved the quote to the middle-centered or right-centered position, it still showed as left-aligned. This has now been changed and looks much better. We also fixed a few minor bugs in this section.

Improvements on the theme.json

A website’s design influences how your target audience perceives your brand. The impression you make on them can either persuade them to stay on your page and learn more about your company, or it can persuade them to go to a competitor’s page. This is why we’ve added more weapons to the block editor, allowing you to design the block more creatively.

Link Color Change

We’ve added a new Link color option in the colors group to the latest version of the Astra theme, allowing you to change the color of the links that appear inside the block.

Margin Improvements

We’ve added a margin option to the dimension control to give you more control over the dimension.

Padding Improvement

The improved padding option will allow you to select the space in which your block will appear. Inner block spacing allows you to control the distance between inner blocks and the container block, elevating the overall user experience.

Border Control Improvement

We’ve also added border control options, which allow you to choose and change the width, style, color, and radius of the block.

Improved design settings of Meta tags

We’ve made significant changes to the meta tags and how they appear on your site. Meta settings have been redesigned, optimized, and made more elegant. Here are a few standouts.

Disable Header

Added a new meta option called “Disable Header” – Previously, we had three options for disabling header parts (disable above, disable primary, and disable below), but no global option to completely disable the header.)

The “Disable Page Title” meta toggle option has been renamed “Enable/Disable Eye Icon” and is now located alongside the title. You can hide or show the page title just by clicking on the eye icon next to the page title.

Other changes in the Meta Settings

Apart from these, now you have better control over the sidebar and the content layout with the visual layout designs to choose from right inside the block editor. Page Elements where the number of toggles has been reduced or will appear conditionally which in turn will load the page faster.

Advanced header setting

The advanced header setting will let you have better control over the header section. When you choose this option, a pop up will appear on the screen with more settings that will let you modify the following options

Performance improvement

With all the changes made, the overall performance has increased significantly. The new Astra theme editor now loads 1.21 seconds faster than the previous version and 0.26 seconds faster on the frontend. Below is the performance comparison of the older version and the new version.

New Block Editor Under Customizer

We have added a powerful option to the customizer to change the padding of the entire website. You can access this option by navigating to Appearance > Customize > Global > Block Editor. You can now set custom paddings to all the blocks on your website with this global option. This setting will be overwritten if any of the blocks have any custom dimension set.

How to use the Block Editor to set the padding manually?

Improvement on the Featured Images of the Posts page

With the latest version of the Astra theme, you can now disable the featured image from the single post page; however, still, show it on the post list page. To access this option, simply click on the Settings button on the top right corner of any single post page and check the box just below the featured image option. Once checked, this option will enable the featured image on the post list page; however, it will be disabled on the single post page.

Change the default content width for the theme

With the latest version of the Astra theme, you can now change the default content width (910PX) to anything based on your requirement. Simply add the following filter to the child theme. To update the wide width for your layouts, please update Container Width from Customizer > Global > Container.

function astra_update_block_content_size( $content_size ) {
	return '840px'; // Default 910px overridden by 840px.
}

add_filter( 'astra_block_content_width', 'astra_update_block_content_size' );

With Composer, you can add all of your standard themes and plugins to a new WordPress site from one place. Also, you can keep your websites updated the same way.

Using Astra Pro With Composer

You can use Composer to upgrade or downgrade Astra Pro. Before using Composer, you’ll need to have the Astra Pro plugin installed and your license activated. Thus, you’ll need to do this manually on any new website.

Follow these steps to prepare your new website before using Composer:

Step 1 – Install and activate the Astra Pro plugin. If you’re not sure how to do this, you can check out this document;

Step 2 – Next, copy your Astra Pro license from the Store, and activate the license on your website. Further, you can find more details about activating the license in this document.

Activating the plugin license on your new website will register the website URL with our Store. Now you can configure your Composer.json file and manage Astra Pro with Composer further on.

Configure The Composer.json File

The composer.json file is necessary for Composer to work on your website. To manage the Astra Pro with Composer, you’ll need to configure the composer.json file and add Astra Pro-related code. 

Here, we assume that you already have the file in your website’s root directory. Also, we are assuming that you have set your project. Check this article if you need help installing Composer, adding composer.json file, or setting up the project.

Let’s get started.

Code Example

You can check the example of the entire code:

{
    "name": "example/example",
    "type": "project",
    "description": "Project description",
    "require": {
        "brainstormforce/astra-addon": "^3.0"
    },
    "extra": {
        "installer-paths": {
            "wp-content/plugins/{$name}/": ["type:wordpress-plugin"]
        }
    },
    "repositories": [
        {
            "type": "package",
            "package": {
                "name": "brainstormforce/astra-addon",
                "version": "3.6.3",
                "type": "wordpress-plugin",
                "dist": {
                    "type": "zip",
                    "url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
                },
                "require": {
                    "composer/installers": "^1.11"
                }
            }
        }
    ]
}

Further below, we’ll show you how to make this work.

Add Astra Pro Package And Version Constraints

"require": {
        "brainstormforce/astra-addon": "^3.0"
    },

You need to add the following line to your composer.json file under the “require” key. This will tell Composer to add the Astra Pro package to the list of packages your project depends on. 

Also, this will set the Astra Pro plugin version constraints to any stable version above 3.0.0.

Repositories Arrey

"repositories": [
        {
            "type": "package",
            "package": {
                …
                }
            }
        }
    ]

Next, you need to register Astra Pro Package Repository in your composer.json file. To do this, you must first edit the Astra Pro Package object. 

repositories: Repository Arrey containing Astra Pro Package object

Astra Pro Package Object

The “package” object contains data on the Astra Pro package you are requesting. Here, you need to modify the version string for each update. Thus, to upgrade Astra Pro with Composer, add a version number higher than the one you have currently installed. Similarly, to downgrade Astra Pro, add an earlier plugin version number.

"package": {
  "name": "brainstormforce/astra-addon",
  "version": "3.6.3",
  "type": "wordpress-plugin",
  "dist": {
    "type": "zip",
    "url": "https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key={PURCHASE_KEY}&site_url={SITE_URL}"
   },
  "require": {
     "composer/installers": "^1.11"
   }
}

package: Astra Pro Package Description Object

Also, you need to update the url parameters by adding your Astra Pro license key and a domain of the website on which you’re updating the plugin.

url: URL parameters

URL example:

https://support.brainstormforce.com/wp-json/bsf-products/v1/download/astra-addon/?purchase_key=fdsi3h3iu4n22l344n4l2&site_url=example.com

Install or Update Astra Pro With Composer

Now that your composer.json is configured, you are ready to update or install Astra Pro on your website. You can install or update Astra Pro by running the following command in Composer:

composer update

Also, theme.json enables template editor, but since this feature is still in development, we have disabled it until WordPress 5.9 is out. 

This document will show you how to override Astra’s theme.json file to modify your settings and styles. 

How Can I Do This?

To start with, please make sure that you downloaded and installed the Astra Child theme on your website. If you don’t have your Child Theme installed, please check this article on how to do it.

First, you will need to copy the theme.json file in the Astra theme folder and paste it inside the Astra Child theme’s main folder before you start editing the file itself. To do this, you would need an FTP client (like FileZilla, for example) installed on your computer and your website’s FTP access details.

We’ll use the FileZilla FTP client for this article, so please install it on your computer (unless you are familiar with another FTP client you would prefer to use).

Let’s start:

Step 1 – Add your FTP access data to FileZillas’ Site Manager and connect to your server;

Step 2 – You need to locate the theme.json file. Navigate to Astra theme folder (public_html > wp-content > themes > astra) Here you should find the file. Copy the file;

Step 3 – Next, navigate to the Astra Child theme’s main folder (public_html > wp-content > themes > astra-child; keep in mind that the folder name can be different if you’ve changed the name of the child theme when generating the child theme on our website). Paste the theme.json file here.

Now, you can access and modify Astra’s theme.json file copy in the Child theme, which will override the theme’s original file.

How Can I Edit Astra’s theme.json File?

Step 1 – Log in to your website Dashboard and navigate to the Appearance > Theme Editor. Choose the Astra Child in the theme selector (upper right corner);

Step 2 – Click on the theme.json file in the “Theme files” list;

Step 3 – Update the values and make any other changes you need to the theme.json file. Click the “Update file” button to apply the changes. 

Below, you can find several examples of changes made to the original theme.json code. As mentioned, you should make these changes in the code of the copy of our theme.json file, which you previously added to the Astra Child Theme.

Modify the palette colors

Your theme.json file contains the following code for defining the nine palette colors available within your Gutenberg Blocks color settings:

{
  "version": 1,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Theme Color 1",
          "slug": "ast-global-color-0",
          "color": "var(--ast-global-color-0)"
        },
        {
          "name": "Theme Color 2",
          "slug": "ast-global-color-1",
          "color": "var(--ast-global-color-1)"
        },
        {
          "name": "Theme Color 3",
          "slug": "ast-global-color-2",
          "color": "var(--ast-global-color-2)"
        },
        {
          "name": "Theme Color 4",
          "slug": "ast-global-color-3",
          "color": "var(--ast-global-color-3)"
        },
        {
          "name": "Theme Color 5",
          "slug": "ast-global-color-4",
          "color": "var(--ast-global-color-4)"
        },
        {
          "name": "Theme Color 6",
          "slug": "ast-global-color-5",
          "color": "var(--ast-global-color-5)"
        },
        {
          "name": "Theme Color 7",
          "slug": "ast-global-color-6",
          "color": "var(--ast-global-color-6)"
        },
        {
          "name": "Theme Color 8",
          "slug": "ast-global-color-7",
          "color": "var(--ast-global-color-7)"
        },
        {
          "name": "Theme Color 9",
          "slug": "ast-global-color-8",
          "color": "var(--ast-global-color-8)"
        }
      ]
    }
  }
}

To change any of the colors in your Guttenberg editor, just replace the values for Name, Slug, and Color like shown in this example:

{
"name": "Lipstick",
"slug": "lipstick",
"color": "#9f1f19"
},

If you wish to have fewer colors in the Gutenberg palette, you can remove code for the colors you don’t need. Likewise, if you need more colors than these nine default ones, you can just add them using this code template:

{
"name": "COLOR NAME",
"slug": "SLUG",
"color": "HEX Color Code"
},

All color codes should be added between the brackets.

Remove the “Custom Color” option

Your Gutenberg editor users will still be able to get their custom colors next to the colors you added to your palette using the “Custom Color” option. If you want to hide this option and limit users to the palette colors, you can modify the theme.json file by adding the following code:

"custom": false

This code should be added at the end of the theme.json code, between brackets and curved brackets. Don’t forget to add “,” (comma) after the bracket, like this:

..."name": "Theme Color 9",
          "slug": "ast-global-color-8",
          "color": "var(--ast-global-color-8)"
        }
      ],
		"custom": false
    }
  }
}

Update the color palette for the Paragraph Block

You can also add color limitations only for specific Blocks to Astra’s theme.json file. This is an example of how you can limit the Paragraph Block only to show the first three colors in the editor:

"blocks": {
"core/paragraph": {
    "color": {
	"custom": true,
	"palette": [
	{
	"name": "Lipstick",
	"slug": "lipstick",
	"color": "#9f1f19"
	},
	{
	"name": "Theme Color 2",
	"slug": "ast-global-color-1",
	"color": "var(--ast-global-color-1)"
	},
	{
	"name": "Theme Color 3",
	"slug": "ast-global-color-2",
	"color": "var(--ast-global-color-2)"
	}
      ]
    }
  }
}

This code should be added the same as the previous one – at the end of the theme.json code, between brackets and curved brackets, with “,” (comma) after the bracket.

This document will help you avoid blurry and cut-off images. Learn how to get your images perfectly sized every time. Also, for more details, please check our Blog article on featured images. 

Why Is Featured Image Important?

Featured Image is most often the first point of contact between your content and users. Whether we’re talking about social media, browsing through your website, or any other search, the task of the featured image is to attract the user’s attention.

This image most often shows on the top of your posts, your website’s Blog Page, and related posts. Also, a featured image is often displayed when your content is shared on social media or as a message. 

The featured image gives a glimpse of the content in your post or page. Furthermore, it creates user expectations regarding the quality of your content as well as the offer. 

Also, with a bit of effort when designing your featured images, this becomes a chance to raise your brand awareness and stand out from the crowd.

Having said that, it’s clear why is it is crucial to make your featured image perfect every time.

Social Sharing

When your website content is shared on social media, your featured image will take a central role in attracting traffic, as it is shown together with the title whenever shared. 

Here, your images will be scaled proportionally. Thus, failing to set them properly may result in cropping, thus making parts of your image not visible.

SEO plugins like Yoast SEO or RankMath will provide you with options like adding a custom title and description for your posts, pages, and other content. Also, you could choose a different featured image, title, and description for sharing on Facebook or Twitter.

Set Featured Image

We explained the importance of featured images and how these are used. Now, let’s talk about featured image size and how to set things up.

To add a featured image to a page or a post, you will need to edit it. Once you start editing, choose a featured image in the page/post settings. As an example, we will explain how to add a featured image to a new post:

Step 1 – Navigate to Dashboard > Post > Add New;

Step 2 – On the right side of the screen, check the post settings, and scroll down to the “Featured Image” section;

Step 3 – Click on the “Set Featured Image” field, and select or upload your featured image;

Step 4 – Publish/Update doc to save featured image.

Featured Image Size

Featured image size may vary depending on the theme being used. With Astra Theme, we recommend uploading the image size of 1200 pixels (width) by 628 pixels (height):

Once you upload the image, WordPress will automatically create several versions of your original image, used for different screen sizes. 

Setting your original image to 1200 x 628 pixels will also help avoid some cropping issues on your website and social media both.

Uploading Right-Sized Image vs. Resizing

It is vital to have all of your images optimized as the size of the images impacts your loading times and overall website performance. Some great tools will do this for you. You can check our blog article to compare different image optimization plugins and choose the best tool for you.

On the other hand, though these tools are a great help, only up to a certain point. To achieve the best results, the image files should be already formatted the right way before uploading them to your website.

If you check it on mobile devices, you’ll notice that your parallax sections don’t work but show static images instead. This document will help you understand why this is happening and how you can work around it.

Why Is This Happening?

The parallax scrolling effect is created by setting your background image position as “fixed” (background-attachment: fixed). This fixed image effect (parallax) is currently properly supported only by the Mozilla Firefox browser. 

When you use other browsers on any touch device, parallax scrolling will be overwritten for compatibility reasons. As a result, you will only see a static image instead of your parallax.

Due to responsiveness issues with parallax scrolling on mobile browsers and performance concerns, most mobile browsers still don’t support it. 

What Can Be Done?

Since version 3.0.0 Astra Theme comes with the Header Footer Builder. Thus, you can add a parallax scrolling effect for both the header and footer as Header Footer Builder supports it. 

Let’s show you how to activate this option, for example, for your Primary Footer:

Step 1 – Log in to your website and navigate to Dashboard > Header Builder > Primary Footer> Design > Background

Step 2 – Here, set your background image, and click on “More Settings”

Step 3 – Under the “Attachment” dropdown, select the “Fixed” option. “Publish” to save changes.

Now that you have your parallax effect set on your desktop, you can add separate settings for different screen sizes since parallax scrolling doesn’t work on mobile. You can use Astra’s responsive editing options to remove parallax and design your footer (or header) for Tablet and Mobile. For this, continue with the following steps:

Step 4 – Switch to Tablet/Mobile editing by clicking on the responsive editing icon on the “Background” option.

Step 5 – Edit your Background settings for tablet/mobile and “Publish”

This way, you will be able to have parallax scrolling on desktop screens while having well-designed header and footer sections on tablet and mobile devices at the same time.

What About The Content?

Most often you will add content to your pages and posts by using page builders. Thus, the Astra theme parallax settings will not be applied here.

Therefore, you can use the Page builder responsive editing options in a similar way to Astra’s Header Footer Builder.

Still, in some page builders (Elementor), you will not be able to separately adjust these settings for different viewports. Here, your parallax scrolling will automatically be replaced by a static image.

With these options, you can adjust settings throughout your website so it looks perfect on Desktop, Tablet, and Mobile.

Responsive Editing

Having that the difference between desktop and mobile phone screens is quite big, it is very hard (almost impossible) to create a single website design that will look perfect on both and all screen sizes in between. This is why you must design your websites to be responsive.

Responsive editing means that you need to modify your website design separately for desktop, tablet, and mobile to make it look equally good on all of these screens. Mostly, your website content is added using Page Builders, and all of them are equipped with responsive editing options.

You will be able to do the same for the most of the theme-related settings as Astra comes with these options built-in. In addition, It’s easy to know which options can have responsive editing enabled as you will see a responsive editing icon next to them.

Previews

When your website is responsive, the browser will display different designs following the breakpoints. The breakpoint is the specific screen width, set to serve as a point which the browser uses to distinguish desktop, tablet, and mobile screens.

You can switch between Desktop, Tablet, and Mobile preview to edit and preview your website design on different devices. To do this, you can use the responsive editing icon:

Step 1 – Navigate to the setting that you want to edit. Look for the responsive editing icon next to it;

Step 2 – Click on the icon to circle between desktop, tablet, and mobile device settings – choose the preview you need to edit.

Alternatively, you can change the preview by using the default buttons at the bottom of the Customizer.

Size Units

The important factor in responsive design is the size unit being used, as each unit reacts differently to changing the screen size.

There are three available units: PX, EM, and %. So what is the difference between these three?

• The pixels (PX) are often used for their precision. Having that 1px is a relatively small unit, you can easily adjust the size just as you imagined. Also, it’s an absolute unit, meaning that it always appears precisely the same and is not influenced by other website elements. For example, a margin set to 20px will always take this same space on any element.

On the contrary, both EM and percentage (%) are relative units. This means that they change depending on their parent elements (like body, header, footer, sections, rows, columns, widgets/blocks, etc.):

• EM is a unit relative to the parent element font size. For example, if you set your heading (parent element) font size to 20 px, setting spacing of 1 em for that heading will be equal to 20 pixels. Changing the font size will change the spacing automatically.
• A percentage (%) is a unit relative to the parent. This means if you set your logo (parent element) width to 150 px, setting the 20% margin will add spacing of 30px. Thus, If you change the width of your logo, the spacing will adjust proportionally.

It’s important to mention that some Customizer options are using only a specific size unit. Accordingly, these options don’t have the possibility of choosing the size unit.

Responsive Settings With Astra Customizer

Responsive settings are available in almost all Customizer options (only Sidebar and Performance options have no responsive settings). These are the types of settings that you could use with the responsive editing capability:

• Font Size & Colors
• Border Color
• Icon Size, Color, and Spacing
• Background Colors, Overlays, and Images
• Paddings
• Margins
• Alignments

How To Do This?

You can add responsive edits to the Astra Customizer options, by following these general steps:

Step 1 – Access the Customizer. When accessing the Customizer, it will be by default set to the desktop preview;

Step 2 – Navigate to the location of the option you wish to edit;

Step 3 – Using the responsive editing icon next to the settings, circle between the desktop, tablet, and mobile preview to select the one you wish to edit. We would suggest starting from the desktop as some settings could be automatically inherited by smaller viewport sizes (for example, font or background colors);

Step 4 – Edit your settings separately for desktop, tablet, and mobile. Click “Publish” to apply changes.

As an example, we will show you how to make your Breadcrumbs look different for each viewport size:

Step 1 – Navigate to Appearance > Customizer > Breadcrumbs and activate your Breadcrumbs in the General tab;

Step 2 – Click on the Design tab and do your settings as needed. For this example, we decided to have the Breadcrumbs background color set to black and font color to white for the desktop preview:

Step 3 – Switch to Tablet preview either by clicking on any responsive icons on available options or the Table Icon at the bottom of the Customizer;

Step 4 – Add settings for the tablet. In the screenshot below, you can see that in our example, we decided to have a white background with Breadcrumbs font set to black for tablet:

Step 5 – Switch to mobile preview, and apply changes for your mobile settings. In the example, we decided to change only the color of the last item in the breadcrumbs path (the current page; “Text Color” setting) to make it stand out on mobile. We also added top and bottom spacing for mobile.

Responsive Header and Footer

With Astras’ Header Footer Builder, you can also make your header and footer responsive and have them look differently for desktop and mobile devices:

• Set different Logo Width
• Site Title & Tagline Font and Color
• Set different Header and Footer Heights
• Add different widgets to your header or footer for each viewport size.
• Reorganize and position the elements differently

Hiding Elements

The “Hide on” option is available for all header and footer elements. It’s also available for each header and footer section (Primary, Above, and Below). You can hide the element or header/footer section on any of the previews using this option.

One of the examples where this option could be helpful would be showing different active elements for tablet and mobile preview in your header or footer:

Step 1 – Navigate to the header or footer builder (Customize > Header Builder or Customize > Footer Builder). Since your header and footer are linked for tablet and mobile viewports, these viewports will have the same elements active;

Step 2 – Switch to the viewport where you need to hide an active element;

Step 3 – Click on the element, end enable the “Hide on” option to hide it.

PHP and why it’s important?

PHP is a programming language used for writing WordPress. PHP makes it possible for WordPress to interact with the database and fetch data from it. It goes the same for your themes and plugins. 

These processes happen on your server before they are delivered to the browser, as PHP is a server-side language. 

PHP Limits and why do you might need to modify them?

Each WordPress installation comes with the default limits set by your hosting provider. These are usually optimal settings adjusted to the hosting services you use and will satisfy most of your websites’ needs.

As mentioned before, PHP can perform many different processes, and for all of these, it needs server resources. If, for example, you have some plugins that require more resources to function, they can take up most of the available resources, not leaving enough space for other plugins. Not having enough server resources will cause these plugins not to perform well.  

Once your website’s needs exceed the allocated resources, a fatal error happens on your website. Thus, to have all of your plugins function correctly, you would need to increase PHP limits.

Astra and Starter Templates – PHP configuration

Astra theme and Starter Templates require minimal resources to function correctly. Occasionally, it happens that your PHP limits are set too low for the plugins already running on your website, which can cause issues. If you see a fatal error message or have your Starter Template imports fail, please modify your PHP configuration to make more resources available for your website. 

These settings will ensure that there are enough resources on your website, even if you’re, for example, running some highly demanding plugins. These are not, in any case, the minimum required values, but these can be used as a configuration that would guarantee, in most cases, that your website has enough resources to function correctly:

• memory_limit = 512M
• max_execution_time = 900
• max_input_time = 900
• post_max_size = 256M
• upload_max_filesize = 720M

You can also try increasing your values gradually and checking if you can import your template successfully with those values:

For example, if your memory_limit is set by default to 128M – try changing it first to 256M, and check if your import goes well. If not, change the value then to 315M, and then to 512M, and so on.

Modify your PHP limits – Step 1

Modifying your server and website files can be challenging if you don’t have experience with this. Thus it’s always a good choice to contact your hosting provider and ask for assistance with this. Most hosting companies will help you with this. Make sure to mention the values for the PHP configuration which we suggested previously.

Modify your PHP limits – Step 2

There are several ways that you can modify your PHP configuration yourself. Depending on your host, these settings could be available through your admin panel (host admin, cPanel, etc.).

If not, you can change these values directly in the PHP.ini file.

Alternatively, if it suits you more, you can make these changes also in one of the following files:

• wp-config.php
• .htaccess 

All of these files can be found in the root directory of your website. To access it, you would need an FTP client (like FileZilla, for example) installed on your computer and your website’s FTP access details.

How to access the files?

Before making any changes to any of your files, please create a complete backup of your website. Also, it is advisable to make a copy of the original file before editing it – in case something goes wrong, you can always use this original file to start over.

We’ll use the FileZilla FTP client for this article, so please install it on your computer (unless you are familiar with another FTP client you would prefer to use). Let’s start:

1. Add your FTP access data to FileZillas’ Site Manager;
2. Connect to your server;
3. Navigate to your websites’ public_html (root) folder. Here you should find the files. 

How to modify your PHP configuration? 

Now that you have found your file (PHP.ini OR wp-config.php OR .htaccess), right-click on the file and select “Download’ to copy the file to your computer.

Now you can edit the file on your computer. You can edit these files using some of the code editors like Sublime Text or Notepad++. 

Once you modified your file, upload it back to your server (using the FTP client), replacing the original file with this modified one, and your new values will become active.

Method 1 – modify PHP.ini

If you can’t find the PHP.ini file, you can create the file yourself. Some hosts do not allow users to access the PHP.ini file. In this case, you can ask your host to allow you to create a duplicate PHP.ini file in your directory or try. The data or values in the duplicate file will override those in the original PHP.ini file. 

You can create a new file named PHP.ini in the directory where your WordPress website is installed (your root directory). Once you have the file, please follow the instructions:

Step 1 – Open the file using the code editor;

Step 2 – Add the following values:

memory_limit = 512M;
max_execution_time = 900;
max_input_time = 900;
post_max_size = 256M;
upload_max_filesize = 720M;

Step 3 – Save the file.

Method 2 – modify wp-config.php

Alternatively to modifying the PHP.ini file, you can modify the memory limit in your wp-config.php file, following these steps:

Step 1 – Open the file using the code editor;

Step 2 – Scroll down to the “That’s all, stop editing! Happy publishing” line;

Step 3 – Add the following value before that line:

define( 'WP_MEMORY_LIMIT', '512M' );

Step 4 – Save the file.

Method 3 – modify .htaccess

You can modify your PHP configuration also by using the .htacces file. Keep in mind that the .htaccess file may be hidden, so once you access your root directory using the FTP client, make sure you check the folder for the hidden files. 

To modify the file, follow these steps:

Step 1 – Open the file using the code editor;

Step 2 – Add the following values:

php_value memory_limit 512M
php_value max_execution_time 900
php_value max_input_time 900
php_value post_max_size 256M
php_value upload_max_filesize 720M

Step 3 – Save the file.

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' );

Here is a complete list of pages that are made faster with this optimization –

• Latest Blog Post
• Single Post
• All Archives (including blog archive, category archive, tab archive, author archive, pagination, and so on.)
• WooCommerce – Shop Page and Single Product Page
• Easy Digital Downloads (EDD) – Single Product Page
• LifterLMS – All Courses and Single Course Page
• LearnDash – All Courses and Single Course Page

Users those are starting to use Astra directly from this version, would get new speed improvements directly on their websites.

But existing users – those who are already using Astra and updating it to v3.3 – will not see these improvements directly on the website.

Why?

The main reason is not to disturb exiting websites’ layout, structure, and design. In the process of HTML and CSS optimization, we have merged some code and removed an extra one. If we implement this directly on existing websites some of the design might get affected by this. Any custom code written on removed HTML divs or CSS classes might not work.

So to avoid such issues, we haven’t implemented new code directly on existing websites.

But you can certainly get this optimizations on your wbesites with a simple filter code.

How?

Below is a custom code that you can use to apply HTML and CSS optimizations on your website.

But before using code –

1. Make sure you have Astra theme and Astra Pro updated to version 3.3
2. Take a backup of your website

Paste the following code in your child theme’s functions.php file.

add_filter( 'astra_apply_flex_based_css', '__return_true' );

Done!

This feature let users display custom layout inside Gutenberg page/post. Read about this in detail here.

Here we have listed few objections users might have with this update –

1. Can I display custom layout inside pages/posts built with other page builders like Elementor? [Example – I am an Elementor user and I wish to display a custom layout inside my Elementor pages.]

This is not possible at the moment. The custom layout can be displayed only inside pages built with the Gutenberg block editor.

You can design custom layouts with the block editor, Elementor, or Beaver Builder, but you can display it only on Gutenberg pages/posts.

2. Is there any plan to add support for other page builders?

The team does not have any plan for this as of now. You can keep track of our latest updates from the changelog, blog posts, Facebook group.