Starter Templates – Elementor Popup

Starter Templates – Elementor Popup

Starter Templates work great with Elementor. You can import single pages from any Strater Template and also pre-designed blocks with Elementor Popup.

Elementor Popup brings all Elementor Starter Templates and a stunning range of readymade blocks right inside your editor.

This document will show you how to import full-page templates and blocks directly from your Elementor editor.

Starter Templates Walkthrough Docs:

Getting Started With Starter Templates Starter Templates ImportingHow to Import A Complete Site With Starter Templates?How to Import Single Page With Starter Templates?Importing Gutenberg Pages, Patterns, and WireframesStarter Templates – Elementor Popup (currently reading)How to Fix Starter Template Importing IssuesBuilding Your Website With Starter TemplatesStarter Templates FAQs

Elementor Popup

Once you open the Elementor editor, you will notice a Starter Templates icon, as shown below. Clicking on the Starter Templates icon will open the Elementor Popup Library.

With Elementor Popup, you can preview and import any Page template. In fact, Page templates are the same Elementor templates you will find at Appearance > Starter Templates.

Also, you can install a large number of different blocks. To explain, Blocks are pre-designed elements, sections built with various purposes: about, team, testimonials, CTA, FAQ, services, etc. Further, blocks are available in two color modes – dark and light.

Import Templates with Elementor Popup

With Elementor Popup, you can directly import templates and blocks to your page or post. In addition, you can save each template or block, modify it, and use it later. You can use your saved templates and blocks as many times as you need on any page or post.

Import Page or Block

Importing process for both page templates and blocks is almost the same. To illustrate the process, we will show you how to import a page template:

Step 1 – Navigate to your page or post and start the Elementor editor. Here, click on the Starter Template icon to open the Library;

Step 2 – Next, you need to decide if you want to import Pages or Blocks. By default, the Library will show Pages first. To switch to Blocks Library, click on the appropriate tab at the top of the Library. Since we will be importing a Page template for our example, we will stay in the Pages Library.

Also, you can browse the Library, filter it, or use the search feature. You can filter both Pages and Blocks by category. In addition, Blocks Library has an option to filter Blocks by color mode (dark or light);

Step 3 – You can preview any page template or block. To preview Pages, you will need to click on the Starter Template first and click on the page you need. However, Blocks can be previewed directly by clicking on any of them;

Step 4 – Once you find the template/block you want to import to your post or page, click on the import button. 「Import Template」 or 「Import Blocks」 button is located on the top of the preview window;

Step 5 – Finally, you can adjust the imported template or block, to your needs. Simply click on any Elementor section, column, or widget, and edit it as usual. Save your changes by clicking the 「Publish」 button.

Importing 『Premium』 Page Template

If you』re using a free plugin and try importing a premium template with the 「Premium」 tag. Here, you might have seen the 「Get Access」 button instead of the importing options. This means that something is missing in your setup.

Firstly, premium templates are available only with Premium Starter Templates plugin. This plugin comes only with Essential Bundle or Growth Bundle.

Secondly, to import Premium templates, you also need to activate your Premium Starter Templates license. If you haven』t done this, you will see the 「Get Access」 button on your Premium templates. You can find more details on installing the plugin and activating the license here.

Save Page or Block

Same as with importing, the saving process is almost the same for Pages and Blocks. Below, we will be saving a Block as an example. Also, we』ll show you how to edit saved templates (Pages and Blocks) and add them to a page or post.

Saving Process

First, to save your Pages and Blocks, follow these steps:

Step 1 – Navigate to your page or post and start the Elementor editor. Here, same as with importing process, click on the Starter Template icon to open the Library;

Step 2 – Next, you need to decide if you want to save Pages or Blocks. Again, by default, the Library will show Pages first. Now, switch to Blocks Library by clicking on the 「Blocks」 tab. Likewise, you can browse the Library, filter it, or use the search feature;

Step 3 – You can preview any Page or Block in the Library. Once you find the page or block you want to save, click on the Save button. 「Save Template」 or 「Save Blocks」 button is located on the top of the preview window (next to the Import button).

Done! You successfully saved the Block. Further, you』ll find all your Pages and Blocks saved under the (Elementor) 「Templates」 menu option (Dashboard > Templates > Saved Templates).

Editing and Adding Templates to a Page or Post

The option to save templates allows you to edit Pages or Blocks, and use them multiple times. Thus, we will show you how to do that:Step 1 – Navigate to Dashboard > Templates > Saved Templates and find the template (Page or Block) you want to edit. Click on the 「Edit with Elementor」 button to start the editor;

Step 2 – Here, you can modify the template as any other Elementor design. Just click on any element to adjust or remove it. You can also add any other elements (sections, columns, widgets). When you finish, click on 「Update」 to save changes;

Step 3 – Finally, it』s time to import the template to your page or post. Accordingly, navigate to your page or post and click on the 「Edit with Elementor」 to start the editor. Now click on the 「Add Template From Library」 icon;

Step 4 – Lastly, switch to the 「My Templates」 tab, look for the template you saved, and click on 「import」;

Well done, your saved template is now imported. This way, you can use this template as many times as you need, anywhere on your site.

Previous: Importing Gutenberg Pages, Patterns, and Wireframes

Next: How to Fix Starter Template Importing Issues

How to Roll Back to A Previous Version of Astra?

How to Roll Back to A Previous Version of Astra?

This document will show you how to roll back your Astra theme or Astra Pro version in few simple clicks.

You can easily downgrade to the previous version with our Rollback feature, which is available since Astra Pro addon (plugin) version 3.6.1. 

Why Is the Rollback Feature Important?

Keeping your theme and plugins updated is essential. However, sometimes after the update, you might encounter some problems – for example, incompatibilities with some third-party plugins.

In this case, the option to roll back to a previous version of Astra can come in handy. Going back to the previous version ensures that your website will be fully functional while waiting for the solution.

Once the issue is fixed, you can update the theme or plugin again to the newest version.

How To Use Rollback Feature?

The rollback feature for both theme and plugin is available only for users with the Astra Pro license. Please make sure you have Astra Pro installed and activated. 

Note:

The Rollback is a premium feature and is not available with the free Astra theme.

To roll back your Astra theme or Astra Pro plugin, please follow these steps:Step 1 – Navigate to Dashboard > Appearance > Astra Options;

Step 2 – You will find the 「Rollback Version」 options in the right-side sidebar. Just scroll down to this section;

Step 3 – You will notice the separate options for Astra Theme and Astra Pro. Click on the appropriate dropdown menu, and select the desired version to which you want to roll back. Keep in mind that you』ll have a limited number of previous versions available. 

Step 4 – Click on the 「Rollback」 button and confirm the rollback in the popup window to start the process. It will replace the newest version with the required previous version.

That』s all. Once the rollback is done, your Astra theme or Astra Pro will be reverted to the previous version.

Fix Woocommerce Cart Becoming Transparent With Header Builder

Fix Woocommerce Cart Becoming Transparent With Header Builder

If you decided to switch from the old Astra header to a new Header Footer Builder, you might have noticed that your WooCommerce mini cart became transparent. 

Astra Theme version 3.6.7 came with the fix for this, but the fix is not applied automatically to existing websites. Learn how to apply it to your website.

Why Do I Need This Improvement?

The WooCommerce cart added to your old Astra header had the background set to white color by default. 

Switching to Astra』s Header Footer Builder caused the cart to become transparent.

Though Astra 3.6.7 update comes with the fix, this won』t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when the theme is updated. 

As mentioned, for the existing website, this fix needs to be activated by adding a filter. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don』t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_apply_background_to_outline_cart_builder_element', '__return_true' );

If you are not sure how to add this code, please check this article.

How to Install Astra Theme?

How to Install Astra Theme?

Astra is a free WordPress theme. Therefore, it can be installed and used like any other.

To install it on your site kindly follow the steps-

Login to your WordPress Dashboard.Go to Appearance > Themes > Add NewSearch for – AstraInstall AstraActivate it

Note: If you need the zip file of Astra theme, you can download it from the WordPress Repository here.

Looking for help to install the Astra Pro (Addon) Plugin? Read the article here.

Modify Your PHP Configuration

Modify Your PHP Configuration

Occasionally, you might need to modify your website』s PHP configuration. You will be able to solve some issues or make your website work better. Also, some plugins you would like to add to your website might require more resources. This document shows you how to do 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 = 512Mmax_execution_time = 900max_input_time = 900post_max_size = 256Mupload_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:

Add your FTP access data to FileZillas』 Site Manager;Connect to your server;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.

Note

Some servers will require a restart (Apache or Nginx) for php.ini changes to take effect. Also, depending on your server configuration, you』ll need to restart the PHP-FPM server process too. If you』re not sure how to do this, please get in touch with your hosting provider.

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.

How to Change the Heading Tag for the Related Posts Title?

How to Change the Heading Tag for the Related Posts Title?

If you have enabled related posts on your Blog posts, you might have noticed that the Related Posts Title has the

heading tag assigned by default.

You can modify this tag to any other HTML tag by adding a filter to the functions.php file of your Astra Child Theme. If you don』t have a Child Theme installed and activated on your website, please check this article on how to do this. 

How Can I Do This?

You can use the filter below to change the tag for the Related Posts Title to any other tag. Please follow these steps:

Step 1 – Navigate to Dashboard > Appearance > Theme Editor and select the Child Theme;

Step 2 – Add the filter below to the functions.php file of your Child Theme. You can check this article on adding code to your Child Theme to help you out;

// Filter for changing related posts title heading tag.
add_filter( 'astra_related_posts_title', 'update_related_posts_title_markup', 10, 1 );
function update_related_posts_title_markup( $markup ) {
$markup = '

';
return $markup;
}

Step 3 – The filter will change the default

tag to

tag. Update this by replacing

in the code with any heading tag needed. Click the 「Update File」 button to apply changes.

Note:

Please keep in mind that you need to replace the h4 tag with your needed tag in both places within the code to make this work – one is the opening tag, and the other one is the closing tag (just like we have used

in both places in the code above).

Default Tag

Heading Tag after adding the Filter

Usage Tracking

Usage Tracking

We are committed to making our products better every day and it isn』t possible without the help of our users like you. 

By allowing to collect non-personal information about your website and server configuration, you can help us understand different possibilities and test our products better. 

We thank you in advance for enabling this option

What Exactly Do We Track? 

We will anonymously track the following parameters – 

List of active pluginsActive themeProducts by Brainstorm ForceThe version of Curl SSLVersion of CurlURL of the WebsiteIf site is using external object cache?Is GD extension available?BSF Updater VersionIs Imagik Extension availableIf a website is WordPress Multisite installationWhether SSL certificate is installedIf the wp-content directory is writable?The MYSQL versionThe PHP ini setting – php_max_execution_timeThe PHP ini setting – php_max_input_varsThe PHP ini setting – php_memory_limitThe PHP ini setting – php_osThe PHP ini setting – php_post_max_sizeThe php_versionThe server softwareWordPress LanguageTimezone set in WordPressWhether wp_debug is enabledWhether wp_debug_display is enabledThe version of WordPress installedIf the xmlreader existsIf zip_installed is enabledIs script_debug enabled?

By collecting this non-personal information, we develop better, more compatible software and serve our customers better.

How to Enable/Disable Usage Tracking? 

You will see an admin notice that will allow you to enable usage tracking.

You can manually allow tracking anytime from Settings > General > Usage Tracking. Tick the checkbox and save the changes. In case you wish to disable it, you can hit the same checkbox.

How to Translate Categories, Tags, and Astra Strings with Polylang

How to Translate Categories, Tags, and Astra Strings with Polylang

With Polylang, you can manually translate post categories, tags, and strings added with Astra. This document will show you how to do this.

Before we start, you will need to install the Polylang plugin on your website and do the setup. If you need help turning your Astra website multilingual with Polylang, please check this article.

How To Translate Post Categories and Tags?

Similar to translating posts or pages, you can translate post categories and tags.

We will show you how to translate a category using Polylang as an example.

Please follow these steps:Step 1 – Navigate to Dashboard > Posts > Categories;

Step 2 – In the category list, find the category you wish to translate. You will see Polylang translation options on the right side of each category. There will be columns for each available language translation. Flags mark the language of the original category (most often default language). Languages without translations are marked with the 「+」 icon; 

Step 3 – Start translating the category by clicking on the 「+」 icon for the desired language. This will open the category editor;

Step 4 – To translate the category, add your translation to the 「Name」 field;

Step 5 – Click on the 「Add New Category」. This will create a new category linked as a translation to your original category. You will also notice that the 「+」 icon changed to the 「pencil」 icon to mark the existing translation;

Step 6 – Repeat steps 3 to 5 for each of the available languages.

Similarly to these steps, you can also translate any other category and your tags.

How To Translate Astra Strings?

In this article, as an example, we will show you how to translate Astra Theme custom texts. You can follow a similar method for translating any other string in Astra.

We added a Button Header element to the Primary Header and added the label 「Register」. We will add a translation for this label using Polylang string translations.

Please follow these steps:

Step 1 – From the WordPress dashboard, navigate to Dashboard > Polylang > Strings translation page;

Step 2 – Browse the string list and find the string you wish to translate. You can also use the search bar on the top right side of the page. You can type in any term (e.g., 「astra」) to sort the list to related strings only;

Step 3 – We searched for the term 「register」 and found our button string. On the right side of that string line, you will see the Polylang translation fields for each available language;

Step 4 – To translate the string to any language, just click the appropriate translation field and add your translation.

Step 5 – Scroll down and click on the 「Save Changes」 button once you』re done.

You can repeat this process for each string and language.

Now, that you know how to translate categories, tags, and strings with Polylang, you can make your Astra website entirely multilingual.

Plugin Installation Failed – Multisite

Plugin Installation Failed – Multisite

Starter Templates are built with the free version of page builders and some other plugins. While importing a template, if these required plugins are not available on your website, they will be automatically installed.

In case, the automatic plugin installation process fails, you will see a popup showing an error – 「Plugin Installation Failed「

If you are on a single site, refer this document here.

In case you are on multisite, here is what you can do –

If your user profile has access to install plugins, Starter Templates plugins will automatically do work for you.

But in case your use profile does not access, you would need to contact your website administrator and ask them to install required plugin for your starter templates.

How To Fix Not Being Able To Edit Submenu Colors, Above and Below Header?

How To Fix Not Being Able To Edit Submenu Colors, Above and Below Header?

Did you experience not being able to edit Submenu Colors with Header Footer Builder, or Above and Below headers you added using the Page Header module?

Astra Pro Addon version 3.5.7 corrects this, but the fix is not applied automatically to existing websites. Learn how to solve this. 

Why Do I Need This Improvement?

Before the Astra theme』s version 3.0 and Header Footer Builder that came with it, the 「Header Section」 module as part of the Astra Pro was providing some advanced options for the old Astra Header (like Swapping section positions on mobile, some typo options, or color options, etc.). 

The reason for this is that the Header Footer Builder was still dependant on the 「Header Section」 module for the users who switched from the old header versions. Thus, when this module was not activated in Astra Options the mentioned issues were appearing.

Though Astra Pro 3.5.7 update removed this dependency completely, this change won』t be applied automatically to your website to avoid unwanted effects on your existing websites.

How To Fix This?

For all new websites, this fix will be applied automatically when you update the plugin (Astra Pro). 

For the existing website, this improvement needs to be activated by adding a filter after updating the plugin. This was done to allow you to check how these changes apply to your website and make any changes if needed. 

To apply the improvement to your existing website, you would need to add a filter to the functions.php file of your Child Theme. If you don』t have your Child Theme installed, please check this article on how to do it. Please add the following filter:

add_filter( 'astra_remove_header_sections_dependency', '__return_true' );

If you are not sure how to add this code, please check this article.