分类： 入门

How to Disable Title on Posts, Pages, or Other Post Types?

The title is the name of your post, page, or other post types you might have on your website. The title appears in the frontend and can be disabled with Astra Settings or with the custom code

Method 1 – Page/Post Astra Settings

Page/Post meta settings or Astra Settings are available for each individual post or page. Thus, using the Astra Settings you can decide for each post, page, or post type to disable the Title where needed. You can find these settings by accessing your post/page backend editor (e.g Dashboard > Posts > 「Edit」) – check the menu on the right side and scroll down to 「Astra Settings」:

If you wish to apply this setting to a larger number of pages or posts, then editing every page and updating the above setting can be time-consuming. In this case, you can use Astra Bulk Edit plugin. This will allow editing the above settings on multiple pages.

Method 2 – Custom Code

You can also do this using a custom code. This can be a great solution if you want to disable titles on all posts, pages, or other post types.

You can add the following custom code to the functions.php file of your Child Theme:

/**
* Disable title on all post types.
*/
function your_prefix_post_title() {
$post_types = array('page','post');

// bail early if the current post type if not the one we want to customize.
if ( ! in_array( get_post_type(), $post_types ) ) { return; }

// Disable title.
add_filter( 'astra_the_title_enabled', '__return_false' );
}
add_action( 'wp', 'your_prefix_post_title' );

If you don』t have your Child Theme installed, please check this article on how to do it. 

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

This code will remove titles on all of your pages and posts. You can apply this code only to pages, posts, any of your other post types, or all of them by modifying the bolded part of the code above. Here are the examples how this should look like:

To remove titles on all your posts only:

$post_types = array('post');

To remove titles on all your pages only:

$post_types = array('page');

To remove titles on all pages, posts and example custom post type. This is the example which you can use to add any other post types you want the above code to be applied:

$post_types = array('page','post','custom-type-1');

Creating Your Header and Footer With Astra or Elementor?

With the Astra Theme, you can always count on flexibility. Since version 3.0.0, the Astra Theme comes with the drag and drop Header Footer Builder included. It provides a great range of features so you can build your header and footer easier than ever before. 

Since the header and footer are separate website areas from your content, they can be edited independently. Thus, you can create your header and footer with Astra and still use Elementor for your content. On the other hand, you can design your whole website, including the header and footer, with Elementor only.

Whatever way you choose, this document will show you how to get the most out of Astra and Elementor combo.

Why Are Header & Footer Important?

The header and footer are the first and last sections of your website and thus very important. The header is the first thing visitors see on your website, and the footer is usually the last.

They are located on all (or most) website pages and posts containing branding, navigation, and other important information.

Hence, a well-designed header and footer are essential for excellent user experience, brand awareness, and conversion. 

How Does Astra Theme Work With Elementor?

The Astra Theme is fully compatible not only with free Elementor but also with Elementor Pro and its Theme Builder. In addition, when you start building a page with Elementor, Astra will automatically set all options perfectly for Elementor.

Firstly, It』s important to understand that you use the Elementor to add and design your page or post content. Secondly, a theme is the 「glue」 keeping your website together. The WordPress themes are a canvas for your website – a framework that gives it structure and sets basics.

Thus, the Astra Theme will help you quickly set your website layout, fonts, colors, sidebars, breadcrumbs, featured images, etc. Further, Astra will provide you with options to integrate with some third-party plugins you might need, like WooCommerce. In addition, it will give you options to customize WordPress (e.g., Blog Archive) or third-party plugin pages (e.g., Shop).

Also, since the free version of Elementor comes without the Theme Builder, you are limited to editing only content. At the same time, you can build your header and footer with Astra Theme for free, and without additional plugins.

Header Footer Builder and Elementor

In truth, designing a great header and footer can make a real difference for your website. Therefore, Astra Theme comes with Header Footer Builder already included and ready to use.

The header and footer created with Astra will be perfectly integrated with the content you add with Elementor. Since the free version of Elementor has no options for header and footer building, this will be your default option.

Furthermore, all of our Starter Templates for Elementor are created this way. When importing any Starter Template for Elementor, you』ll get a website where only content is created with Elementor. Header and footer will be built with Astra』s Header Footer Builder.  

Astra Header and Footer Builder

Step 1 – To build your header, navigate to Dashboard > Appearance > Customize > Header Builder. Similarly, to start building your footer, navigate to the Footer Builder option;

Step 2 – To build your header or footer just add, style, and drag different elements to the desired position. Further, you can individually set each element you added. All other Customizer settings will be applied automatically;

Step 3 – Next, design your header and footer responsively by switching the viewport (desktop, tablet, and mobile) and making adjustments. You can use different elements, positions them differently, and modify settings for each viewport;

Step 4 – Click the 「Publish」 button to save changes.

Once you have created your header and footer, you can add content to your pages and posts using Elementor. 

How To Create Header and Footer With Elementor (Free)?

Alternatively, you can choose to build your Header and Footer using Elementor. 

To do this, you will need to install the 「Elementor Header & Footer Builder」 plugin additionally. Then, you can and replace the default Astra header and footer with the ones created with Elementor. To illustrate, we』ll show you how to add the Elementor header for your entire website.

You can install the plugin by navigating to Dashboard > Plugins > Add New. In the search bar on the top right, type in 「Elementor Header & Footer Builder」. Click on the 「Install」 button.

Create Template (Header or Footer)

Firstly, you need to create a new template (header or footer) and design it with Elementor. For this, you need both Elementor and Elementor Header & Footer Builder plugins activated.

Step 1 – Navigate to Dashboard > Appearance > Elementor Header & Footer Builder and click on the 「Add New」 button;

Step 2 – Give the template a name, and click on the 「Edit with Elementor」 button to start designing your template. Step 3 – Add your design and click on the 「Publish」 button to save it. Click on the Elementor menu and 「Exit to Dashboard」 to return to your template settings.

Add Template To Your Website

Now that your design is ready, you need to set up your template to display it on the front end:

Step 1 – Select the type of element you want to create: Header or Footer. For our example, we choose to create the header;

Step 2 – Add the display rules. For 「Display on」 choose 「Entire Website」, and for the 「User Roles」 select 「All」. Choosing these options will add this header or footer to all of your website』s pages and posts;

Step 3 – Click on the 「Publish」 / 「Update」 button to save changes.

Now you have set your Elementor header and footer. Keep in mind that adding individual widget settings in the Elementor editor, will overwrite any Customizer settings. To change this, you』ll need to edit the element. 

FAQs

How to Switch Between Astra and Elementor Header or Footer?There is no actual option to switch headers. Astra Theme does this automatically. When you add a header or a footer in Elementor, you will manage and design them using the Elementor settings. Astra Header Footer Builder settings will not reflect on these headers and footers.Contrary, if the Elementor header or footer is not present, the theme will switch to Astra』s Header Footer Builder. The default header and footer will then reflect all Header Footer Builder settings. 

How to Deactivate Header or Footer Added With 「Elementor Header & Footer Builder」 Plugin?If you added a header or footer using the 「Elementor Header & Footer Builder」 plugin to deactivate it, please follow these steps:Step 1 – Navigate to Dashboard > Appearance > Elementor Header & Footer Builder click 「Edit」 under the element name;Step 2 – Remove display conditions: click on the 「Display on」 dropdown and choose the 「Select」 option. Do the same for User Roles; Step 3 – Click on 「Update」 to save.Alternatively, you can delete the element or deactivate the whole plugin to achieve the same result.

How to Deactivate Header or Footer Added With Elementor Pro and Theme Builder?If you added a header or footer using the Elementor Pro and Theme Builder, these could be deactivated similarly – by removing the display conditions. To do this, follow these steps:Step 1 – Navigate to the Dashboard > Templates > Theme Builder and choose Header or Footer type depending on which element you want to edit. Click 「Edit」 under the element name;Step 2 – Remove display conditions: click on the small arrow icon next to the update button to open the menu. Click on the 「Display Conditions」 and remove any conditions you find:Step 3 – Click on 「Update」 to save.Alternatively, you can delete the element or deactivate the whole plugin to achieve the same result.

Why Do Customizer Settings 「Don』t Work」 With My Elementor Header or Footer?Astra Customizer Settings will apply to the theme default header and footer and to those elements in Elementor set to follow default settings (fonts, colors, etc.).Any settings you add in Elementor editor will overwrite the Astra Customizer settings.For example, let』s say you set 「Helvetica」 font in your Customizer global settings (Customize > Global > Typography > Base Typography). Next, navigate to Elementor settings and set 「Arial」 as the Primary Menu font for your Elementor header. In this case, the fonts will be applied in the following manner: – Helvetica will be applied to all text on your site which is not added using Elementor; – Helvetica will be applied to all text which is added using Elementor and set to 「Default」 font; – Arial font will be applied to the Primary Menu

Recommended Settings for Elementor and the Astra Theme

When using the Elementor page builder, it is recommended to use a Full-Width layout with Page Title and Sidebar disabled. That way, everything possible in the content area can be designed from Elementor without any restrictions.

The good thing about Astra is its inbuilt compatibility with Elementor. When you design a new page with Elementor, Astra automatically sets the Full-Width layout without Page Title and Sidebar. That way, users can immediately start creating their pages without making any additional settings. Here is a video that explains how this works:

Let us show you how to do this manually with step-by-step instructions:

Disable Sidebar and Title

Astra offers options to turn off Page / Post Title and Sidebar easily in the Astra Meta Settings.

Note:

Since Astra Theme 3.7.4 version Astra Settings are available as a separate sidebar panel. You can access Astra Settings by clicking on the Astra icon in the Block editor toolbar, or through editor options (three-dot menu). For more details, please check the 「Astra Meta Settings」 article.

Follow these steps to disable Sidebar and Title using Astra Settings:

Step 1 – Navigate to your Pages or Posts list from your Dashboard;

Step 2 – Click on 「Edit」 under the page or post name to open editor;

Step 3 – Open the 「Astra Settings」 panel;

Step 4 – Click on the 「Sidebar」 dropdown and select 「No sidebar」;

Step 5 – Under the 「Disable Sections」, check the 「Disable Title」 option; Update the page or post.

You will find the Astra Settings on every page and post, so you can modify the settings where needed.

Full Width / Stretched Layout

From the various layout options that Astra offers, the 「Full Width / Stretched」 layout is the best for Elementor if you need full-width pages. This layout gives Elementor full control over the container and gives you the freedom to design posts and pages the way you want.

To set this navigate to 「Astra Settings」 on your page or post and set the Content Layout:

Step 1 – Navigate to your Pages or Posts list from your Dashboard;

Step 2 -Click on 「Edit」 under the page or post name to open editor;

Step 3 – Open the 「Astra Settings」 panel;

Step 4 – Click on the 「Content Layout」 dropdown and select 「Full Width / Stretched」; Update the page or post.

Migrating from other Theme to Astra?

If you』re switching to Astra Theme from some other theme, you might need to make these changes on a large number of pages or posts built with Elementor. In this case, you can use our free 「Astra Bulk Edit」 plugin. Read more about it here.

This Is Your Customizer

In some way, we could say that Customizer is the heart of the Astra theme and your website. This is where you will find many important website settings and special Astra options for 3rd party plugins like WooCommerce and LearnDash.

The Customizer settings provide you with the easiest way to customize your website and make it stand out. In this guide, we』ll cover the basics of using the Customizer and the options available with the Astra Theme.

Astra Theme Walkthrough Docs:

Astra Theme WalkthroughThis Is Your Customizer (currently reading)Style Your Website With Global SettingsBuild Your HeaderFind the Way With BreadcrumbsSet Up Your BlogAdd Your SidebarsBuild Your FooterHost Google Fonts Locally – Performance Is the KeySee Other Customizer OptionsHow To Build Quick Sites With Astra?Getting the Most Out of Astra Theme

Astra Options

Astra provides a dedicated settings page in your WordPress dashboard under Appearance > Astra Options.  You can manage all controls related to the Astra theme and Astra Pro Addon here.

The Astra theme comes with a list of additional plugins and options specifically made to expand the theme』s functionality. You can activate only the options you need, which results in better website performance. Once activated, these options and settings will be available in the Customizer.

Since version 3.0.0 the Astra theme comes with the Header and Footer Builder. You can choose to use the legacy (old) header and footer or the new Header and Footer Builder by using the switch available at Astra Options. You can find more details with an explanation of all options available in this article.

Working with the Customizer

Your Customizer is located at Dashboard > Appearance > Customize. 

On the top of the customizer in the left corner, you will find 「X」 icon which closes the Customizer. 

In the right corner, the 「Publish「 button is located. Notice here that when you make any changes, a small 「cog」 symbol will appear next to this button. Clicking on this symbol will give you options to publish, save the draft (and share a preview), or schedule the date when your new customizer settings will go live.

At the bottom, there is an option to hide the Customizer and see the website changes you made in full width. Also, here, you will find options to switch between desktop, tablet, and mobile simulators.

Switching your view allows you to see how your website will look on different devices. But, more importantly, it gives you the possibility of adjusting your Customizer settings for each view separately and make your website perfectly responsive.

Icons

Pencil – these icons are located on different elements in your Customizer preview. is a shortcut leading you directly to the Customizer settings for that element.

Back to default – these icons are located next to a certain option in the Customizer. Clicking on this icon will restore the default theme value for that option.

Responsive editing – these icons are located next to a certain option in the Customizer and they symbolize that responsive editing is available for this option. Clicking on it will circle between different views (desktop/tablet/mobile) allowing you to set separate values for each view.

Link Values Together – you can find these icons usually next to margin and padding options. Having this option active will sync all sides (top, right, bottom, left) to use the same value. To edit sides individually, deactivate this option. 

Unit icons – many values can be used with different units. When these icons are present, they allow you to choose which unit would you like to use. For example, using 20 PX (pixels) of padding will always add the same space on all screens. Switching it to 20% will add space which will adjust to the size of the screen/element being used. 

Previous: Astra Theme Walkthrough

Next: Style Your Website With Global Settings

How to Turn Astra Multilingual with WPML?

The Astra theme is 100% translation-ready and compatible with WPML. This document will help you create a multilingual website with the WPML plugin.

Since WPML is a premium plugin, please make sure you』ve purchased the WPML license before proceeding.

Add WPML

For translating your Astra-based website with WPML, you will need several plugins. 

Install and Activate plugins

Let』s see how you can download and install these plugins:

Step 1 – Login to your WPML account and download the following plugins from the 「Download」 section:

WPML Multilingual CMSString TranslationMedia Translation

Step 2 – Login to your website backend and navigate to Dashboard > Plugins > Add New > Upload Plugin. Choose the plugin .zip file and click the 「Install Now」 button to install a plugin. Install all mentioned plugins this way;

Step 3 – Activate all installed WPML plugins; 

Step 4 – When you activate the 「WPML Multilingual CMS」 plugin, you will see a notification in your Dashboard to start configuring WPML. You can click on the 「Configure WPML」 button on the notice or navigate to Dashboard > WPML > Setup. This will activate the Setup wizard.

Setup Wizard

The setup wizard will guide you through the whole multilanguage setup process and preparing your website for translation:

Step 1 – The first wizard option, 「Languages」, is where you will add the languages you need. Choose your 「Default language」. This is your primary language for your existing website content;

Next, you need to add all other languages you wish to translate your website to by clicking on the 「+」 icon. If you can』t find your language in the dropdown list, you can create a custom language.For our example, we will use English (default), German and French languages:

Once you have added all languages, click on 「Continue」;

Step 2 – In the next step, 「URL Format」, you need to decide what will your URLs for different languages look like – different directories, different domains, or with added parameters;

Step 3 – On the third step (「Register WPML」) you need to add your 「Site key」. You can find this by clicking on 「Get a key for this site」. You will be transferred to the 「Sites」 page on the WPML website.Also, you do this manually by going to your WPML account. Log in, navigate to 「My Account」, and click on 「Register WPML on your sites」 (Account > Sites). 

On the 「Sites」 page, click on the 「Add new site」 button. You will be asked to add your website URL and confirm if this is a development or production website. Once you click on 「Finish」, you will see a code – copy this code to the wizard field on your website. Click 「Continue」 to move to the next step;

Step 4 – At the fourth step, you should decide how you want to translate your website. You need to select if you want WPML to automatically create versions in all languages for all of your posts, pages, etc. (「Translate Everything」), or do you want to choose what to translate (「Translate Some」).

If you choose 「Translate Some」, you will also need to decide who will be allowed to do translations on the website. You can choose to allow it only for the administrator (「Only myself」) or to allow this for more users on your website (「Individual translators」). 

You can also decide to use (paid) professional translation services through WPML (「A Professional Translation Service」), and you can combine this with the 「Individual Translators」 option, as both can be active and you can choose who will be translating which content.

If you』re creating a website for a client, you can also set a 「Translation Manager」 to choose the options and assign the translators.

For our example, we choose 「Translate Some」 and 「Only myself」 options.

Step 5 – 「Support」 is the step where you can opt-in to share your theme and plugins information with WPML to get faster support and compatibility alerts. For our example, we decided not to share this information;

Step 6 – If you』re running some third-party plugins like WooCoomerce or WPForms, the next step (「Plugins」) will recommend WPML components for these plugins (if any). If you need these to be multilingual too, we recommend you add these components.

To install and activate these components (plugins), mark them in the list and click 「Install and Activate」. Otherwise, click on 「Skip」 to move to the last step;

Step 7 – For the last step, 「Finish」, WPML will add a language switcher to the bottom of your footer. You can edit or disable this one, and enable other language switchers by navigating to Dashboard > WPML > Languages.

Note

If you have Astra Pro installed, you can use the 「Language Switcher」 element in the Header and Footer Builder and do all the settings in the Customizer.

WPML plugin is now set, and additional languages were added to your website. Now you need to translate your content, media, and options.  

Media Translation Setup

Once you finish your WPML setup, you will see the notification to finish the Media Translation Setup. You can do this by clicking on the link in the notification or by navigating to Dashboard > WMPL > Media Translation. 

Once you navigate to this page, click on the 「Finish setup」 button. This will load all of your website media and automatically copy the media name from the original language. 

That』s it – your media translations are set. 

In addition, if you wish to edit translations for your media at any time, you can click on the translation (pencil) icon for any media files in the list. Here, you will see the following settings:

Translate the file nameUse a different file – this can be used for example if you have a logo or images with translatable text

These additional settings are not obligatory, and you do them at any time for any media file.

Translating Pages, Posts, and Post Types in Astra

When you translate pages or posts with WPML, you get linked versions of pages or posts where each version is assigned a language. 

We will show you how to create the translated version of your page in just a couple of steps:

Step 1 – Navigate to Dashboard > Pages and check the column next to the page titles in the pages list. You will notice the WPML language options for each page. All pages are in your default language, and the column contains flags of the other language available.

Step 2 – To create a page version in another language, just click on the 「+」 icon in the desired language column. This will open an Advanced Translation Editor that will allow line-by-line translation. 

By default, the editor will display content in 「dual」 mode, showing the original content and translation fields on the other side. 

We decided to add a French version of the page in our example:

Step 3 – To translate a line of the content, you need to click on the matching translation field for each line and provide the translation. Once you have added all translations, click on 「Complete」 to create the translated page.

Keep in mind that you will not be able to click the 「Complete」 button until you provide all translations. If you need to pause translating, just click on the 「Back to list」 button. This will save you current progress and take you back to the page list. To mark the translation in progress, you will notice that the 「+」 icon changed to the 「cogs」 icon. You can resume translating the page any time you want by clicking this icon.

Once you complete your translation and click the 「Complete」 button, the translated version of your page will be automatically added and linked with the original. The page list shows that existing translated versions are represented by a 「pencil」 icon instead of a 「+」 icon to mark that the translation exists.

When it comes to the page content, your designs will be automatically copied, and original content will be replaced with the translated content:

Great, you just created your page translation.Now you can repeat these steps for all pages and languages. You can also translate all of your posts and custom post types this way.

Translating Menus and adding a Language Switcher to the Header

Now that we have translated all pages and posts, it』s time to translate the menus and manage your Language Switcher settings so website visitors can choose the language they want.

Before editing your menus, please check if activating the WPML plugin affected any of your permalinks or your menu locations in any way, and correct this.

Translate Primary (or any other) Menu

Now let』s see how you can set your menus for each of the languages added. The menus can be translated similarly as pages or posts. Here, we』ll show you how to translate your Primary Menu:

Step 1 – Navigate to Dashboard > Appearance > Menus and select your Primary Menu. Your primary menu will be set for your default language. In our case, this will be English. On the upper right corner of the 「Menu Structure」 section, you will notice the translation options similar to those you used for translating pages:

Step 2 – To start translating your menu, click on the language translation option. We choose to translate the menu in our example to the French language;

Step 3 – Start by giving your translated menu a name (we used 「Primary Menu – French」). You will notice that the language and the original menu you』re translating are already selected. Click on the 「Create Menu」 button to create the translation;

Step 4 – Once your menu translation is created, you can add menu items. Keep in mind that you will see only translated pages and posts in your item list. Pages and posts that have not been translated to the language of the menu you』re editing will not be available.

Step 5 – Once you add the appropriate language versions of pages, posts, and other items to the translated menu, click on 「Save Menu」 to save the changes you made.

You can translate your other menus this way too.

Managing the Language Switcher

Our final step here is to manage the Language Switcher and add it to the desired location. WPML provides its own out-of-the-box Language Switcher that can be added to your menus, widgets, and footer. 

You can add Language Switcher and manage all its settings at Dashboard > WPML > Languages. Here you will find two groups of settings:

Global 「Language Switcher options」 applied to all language switchers on your website,Individual settings for each of the language switchers added to your website

In global 「Language Switcher options」, you will find the following settings:

Order of languages: set the order in which available languages will be shown in the switcher;How to handle languages without translation: chose if you want to with the content without translation – skip it or link it to the home page in selected language;Preserve URL arguments: if you use any of the plugins that need URL arguments to function properly, add these here to keep them when switching languages;Additional CSS: you can use this option to add styling to your Language Switchers using CSS;

Individual settings can be applied to each of the language switchers in different language switcher sections. These sections are:

Menu language switcher;Widget language switcher;Footer language switcher;Link to translation of posts.

Adding A Language Switcher

As an example of how to edit these settings and add the language switcher, we』ll be adding the Language Switcher to the Primary Menu. Please follow these steps:Step 1 – Navigate to Dashboard > WPML > Languages and scroll down to the 「Menu language switcher」 section. Click on the 「Add a new language switcher to a menu」 button. This will open a popup for adding a new menu language switcher;

Step 2 – Choose to which of your menus you would like to add this language switcher. We will choose the 「Primary Menu」 here;

Step 3 – Select if you want to show the languages as a dropdown menu or the list of languages;

Step 4 – Decide how the languages should be represented: by the flag, native language name, or the name in the current language. Also, here you can select if you want to show or hide the 「current language」 option;

Step 5 – In the end, set the language switcher colors. Click save to add your Language Switcher:

Great job, your multilingual website is ready for visitors.

Other WPML Settings

In addition, at Dashboard > WPML, you can find a lot of additional settings for your multilingual website.For more details, or help and assistance working the WPML plugin, you can check the official WPML documentation.

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 Turn Astra Website Multilingual with TranslatePress?

If you』re looking for a simple, free way to translate your Astra website, you can use the TranslatePress plugin. TranslatePress lets you use a visual translation editor to translate 100% of your Astra site』s content, along with your regular WordPress content and content from any plugins that you』re using.

This document will show you how to make your Astra website multilingual with TranslatePress for free.

Setup

Firstly, to translate your Astra-based website with the TranslatePress free plugin, you must install it from WordPress.org. Please follow these steps:

Step 1 – Navigate to Dashboard > Plugins > Add New, and search for 「TranslatePress」 using the search bar in the top-right corner;

Step 2 – Next, click the Install Now button to install the TranslatePress plugin;

Step 3 – Once the install process finishes, click the Activate button to activate the plugin.

Choose Languages in TranslatePress

Once you』ve activated the TranslatePress plugin, you can choose the languages you want to use on your site.

Step 4 – Navigate to Dashboard > Settings > TranslatePress to open the TranslatePress settings area;

Step 5 – To begin with, set the Default Language. This will be the language in which your current site content is written. Though TranslatePress should automatically detect this language, you should verify that it』s correctly selected;

Step 6 – Further, use the 「All Languages」 option to add one or more languages you wish to translate your site』s content to. Use the dropdown menu to choose a language and click the 「Add」 button to add it to your site.

The free version of TranslatePress lets you add one new language (two languages total). To add more languages, you』ll need to purchase the premium version, which supports unlimited languages.

In our example, we』ll use English as the default language and add Spanish as the new language on our website:

Once you』ve added your languages, make sure to click Save Changes.

Now, TranslatePress is all set if you plan on doing the translations on your website manually. Hence, you can start translating your website content, menus, and other areas. On the other hand, if you would like to use 「Automatic Translations」, please check out the next section.

Set Up Automatic Translation (Optional)

This section is entirely optional. Nevertheless, if you want to save time while translating your content, TranslatePress supports automatic machine translation. Furthermore, you can set automatic translations with either Google Translate or DeepL translation engines.

The TranslatePress will automatically translate all of your site』s content using the service you』ve chosen. However, you』ll still be able to edit those automatic translations manually, if needed.

If you decide to use automatic translations, please continue the setup process following these steps:

Step 7 – Switch to the 「Automatic Translation」 tab in the TranslatePress settings area;

Step 8 – Click on the 「Enable Automatic Translation」 dropdown and select 「Yes」 to expand the automatic translation settings;

Step 9 – Next, choose your automatic translation engine. The free version of TranslatePress supports Google Translate API. On the contrary, you』ll need a premium version of TranslatePress to use DeepL;

Step 10 – Generate a translation service API key for your selected translation engine. Further, the following TranslatePress documents show how you can get the Google Translate API key or the DeepL API key;

Step 11 – Now, add the API key to the TranslatePress settings area to finish the automatic translations setup;

Step 12 – You can also limit your machine translation service usage with the 「Limit machine translation/characters per day」 option. This is optional, but it helps you control your budget.

Make sure to click Save Changes when you』re done.

NoteTranslatePress does not charge you anything to use machine translation. On the other hand, you may need to pay for the Google Translate API or the DeepL API if you exceed the usage limit on their free tiers. Both Google Translate and DeepL let you translate up to 500,000 characters per month for free.

Translating Pages, Posts, and Post Types with TranslatePress

Following the setup, it』s time to start translating your website. Most importantly, you can translate all of your content with the TranslatePress visual translation editor. It works a lot like the WordPress Theme Customizer that you use to customize the Astra theme. Similarly, the translation editor can be accessed on the front-end.

Now, let』s show you how to translate your website in a few simple steps:

Step 1 – To start, navigate to the front-end of your site, and open the post or page you want to translate;

Step 2 – Click the Translate Page option on the WordPress toolbar to open the TranslatePress editor;

Step 3 – Choose an element to translate by hovering your mouse over it and clicking the pencil icon. This will open the translation sidebar for that element. You can translate any text or image on your site』s preview. Also, you can select a specific string to translate from the strings dropdown;

Step 4 – Next, you can add or edit content translation using the sidebar. Here, just add translated content in the empty translation field If you』re manually translating your site from scratch. In contrast, if you used automatic translation, the translation field will already contain the translated content you can modify;

Step 5 – Save your translation by clicking the 「Save translation」 button. Alternatively, you can use the keyboard shortcut – 「Ctrl + S」 on Windows or 「Cmd + S」 on Mac;

Step 6 – Translate all of the content on the page in the same way;

Step 7 – Repeat the process to translate the rest of your posts, pages, and custom post types.

Translating Images

In addition to translating all of the text content on your page, you can also 「translate」 images. Translating an image means that you can set a different image file to use for each language.

To translate and image, follow these steps:

Step 1 – Acces the TranlsatePress Editor;

Step 2 – Click on the image you want to translate;

Step 3 – In the translation field, add the URL of the image you wish to display for each language and save changes.

Again, you can save time by setting up the automatic translation at any point. This way, your remaining content would be automatically translated.

Translating Menus, Widgets, and Other Areas of Your Site With TranslatePress

Likewise, you can use the same approach to translate your site』s menus, widgets, and other non-editor content.

Though we』ll focus on translating menu items in this example, you can apply the same principles to other parts of your site. In the same way, you can translate content from any plugins that you might be using.

To translate each menu item, you can follow these steps:

Step 1 – Open the TranslatePress editor for any piece of content. That includes the menu, widget, or other details you want to translate.

Step 2 – Select the menu item you want to translate by hovering over it and clicking the pencil icon.

Step 3 – Add or edit the translation using the sidebar:

Once you translate the menu item, that translation will automatically be used for all instances of your menu. There』s no need to translate menu items on each page manually.

Adding a Language Switcher With TranslatePress

By default, TranslatePress adds a floating language switcher to the bottom-right corner of your site. The language switcher allows your visitors to choose their preferred language.

However, you can configure it and change the language switcher location and behavior.

Configuring the Floating Language Switcher

Step 1 – Navigate to Settings > TranslatePress. Scroll down to the Language Switcher settings. Here, you can modify or deactivate the floating language switcher;

Step 2 – Use the Floating language section settings to adjust the placement and color scheme of the floating language switcher. Also, choose whether to display country flags, the language name, or both.

Further, you can disable the default language switcher by unchecking the Floating language selection box.

Alternatively, you can add the language switcher to a menu or use a shortcode anywhere on your site.

Adding a Language Switcher to Your Menu

If you want to add a language switcher to your menu, you can set it up in the following manner:

Step 1 – Navigate to Settings > TranslatePress and scroll down to the Language Switcher settings.

Step 2 – Use the Menu item dropdown menu to set how you want your language switcher to look. You can choose to show language names, show/hide country flags, and more.

Step 3 – Next, navigate to Appearance > Menus and select the navigation menu to add the language switcher.

Step 4 – Locate the Language Switcher option in the Add menu items column on the left side of the interface.

Step 5 – Add the Current language option as a top-level menu item. Expand it to adjust its position within your menu.

Step 6 – Finally, add the individual languages as sub-menu items to enable website users to switch between languages.

Step 7 – Click Save Menu to save your changes.

Manually Placing a Language Switcher With a Shortcode

If you want to place the language switcher in any other area of your site, you can use the shortcode. For example, you can add it to a sidebar widget or your footer like we did:

Step 1 – Navigate to Settings > TranslatePress and scroll down to the Language Switcher settings.

Step 2 – Use the Shortcode dropdown menu to choose how you want your language switcher to look.

Step 3 – Add the [language-switcher] shortcode to your desired location. In our example, we added the language switcher shortcode to the HTML element in Astra Footer Builder:

Other TranslatePress Settings and Features

So far, we have covered most of the options available with TranslatePress. However, if you navigate to the Settings > TranslatePress and choose the Advanced tab, you will find several additional options.

Though most users won』t need to edit any of the advanced settings, here you can set how your translation works. For example, you can exclude a specific text from automatic translation.

You can also access the add-ons with the premium version of TranslatePress. The most notable is the SEO Pack add-on. It lets you translate your URL slugs, SEO titles, meta descriptions, image alt text, and other essential SEO details.

Besides, you can find other premium add-ons for the following features:

Automatic user language detection – option lets you automatically redirect users to their preferred languages based on their chosen browser language or physical locations.
Translator accounts – this lets you create dedicated user accounts for translators. It』s helpful if you』re working with freelance translators or translation services.
Browse as user role – this lets you add role-specific translations for different types of users. This is especially useful for membership sites where different types of users might need to see different content.
Navigation based on language – option lets you create completely different navigation menus based on a user』s chosen language. With the free version, you can only translate the same set of menu items to different languages.

For more details, help, and assistance with the TranslatePress plugin, you can check the official TranslatePress documentation. The TranslatePress team also maintains their guide on translating the Astra theme – which you can find here.

How to Fix Starter Template Importing Issues

So, you tried to import the Starter Template, but the import failed? In this case, you might have seen a popup that says – 「Import Process Interrupted」. Here, most of the time the issues are related to your server settings and resources. Since this can happen for more than one reason, it』s not easy to know the exact issue straight away. Thus, in this document, we will explain the most common issues and how you can solve themthem.

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 PopupHow to Fix Starter Template Importing Issues (currently reading)Building Your Website With Starter TemplatesStarter Templates FAQs

Let』s Understand Importing Fundamentals

All starter templates are stored on our server (websitedemos.net). When you choose a template you would like to import, the Starter Template plugin connects to our server and imports the files to your website. This process has a specified flow which includes a connection request being sent from your server and receiving back the template data with a reply from our server.

The connection request flow looks like this:

Now, you understand the basics of how the import process. Therefore, let』s explore some common issues that we have seen in the import process.

Importing Issues

These are the most common reasons your Starter Template import can fail: 

500 / 502 / Any 5XX Error

5XX error can happen for more than one reason. Namely, this error is mostly related to the available server resources or caused by one of your installed plugins. Thus, you would need to check your plugins or update the PHP configuration on your server.

Please check this article on how to fix the error which says: 500 – Internal Server Error

Connection Timeout

As previously described, importing a template to your website will require the template files to be transferred from our server. The Starter Templates plugin on your website will initiate a connection request to do this. If this complete flow for this request is not successful in a specific time, it will fail, and you will get this error like this: WP_Error – cURL error 28: Operation timed out after 30001 milliseconds with 0 bytes received.

Please check this article for understanding how to fix it.

Blocked Request 

As mentioned, there needs to be communication between your server and ours for the template to be imported. Sometimes it happens that the connection request coming from your server gets blocked. If this is the case, you will see the following error: WP_Error – User has blocked requests through HTTP.

Please check this article on how to fix this error.

XML file storing issue 

To import the template content, WordPress needs to store an XML file in the /wp-content/ folder. This issue could be related to your host offloading /wp-content/ folder to a third-party server. In this case, you might see an error that says something like this: Looks like your host could not store XML file in /wp-content/ folder.

Please check this article on how to fix this error.

Other issues

In case your starter template import process is interrupted for any other reason, or the solutions above don』t help, please open a Support ticket. Our support team will have to inspect your issue and help you find the solution. Please do have in mind that most of the issues you can face with Starter Template imports are server-related.

Since our Support team can』t access your server settings, we will point you to the root of the problem. Further, you will have to make modifications to your server yourself or by contacting your hosting company.

Previous: Starter Templates – Elementor Popup

Next: Building Your Website With Starter Templates

How to Add Breadcrumbs in WordPress Website with Astra

Astra is a popular WordPress theme that offers a built-in breadcrumb feature. The theme also offers various customizations with dedicated colors and typography options.

How to Enable Breadcrumbs?

To enable breadcrumbs you just need to have the Astra theme installed and activated. To explore the settings, from the WordPress dashboard navigate to Appearance > Customize > Breadcrumb.

In this article, we』ll see –

Breadcrumb Settings in AstraDisplay Breadcrumbs Anywhere with ShortcodeSupport for third party plugins

Breadcrumb Settings in Astra

Below are the available settings for Breadcrumb

Position: This option allows you to choose a location to display breadcrumbs. Choose where you wish to display them. Current, you can choose to display it inside the header, after the header or before the title.Separator: You can set custom separators between breadcrumb links. Disable Breadcrumb on specific pages/post: You will see a list of pages and posts where you can disable breadcrumbs. These include categories, archive pages, 404 pages, etc. (You can disable breadcrumbs on individual pages and posts through the post meta settings)Alignment: You can select the alignment to display your breadcrumbSpacing: Adjust the spacing from all sides

Color and Typography options for Breadcrumb

By default, breadcrumbs will inherit the color and typography from the theme. But in case you wish to highlight them with different colors and typography, you have dedicated options for Breadcrumbs. In the Customizer, navigate to – Customize > Breadcrumb > Typography

Display Breadcrumbs Anywhere!

Currently, Astra lets you display breadcrumbs in three places only – inside the header, after the header, before title.

What if you want to display it anywhere on the page or post? You can do that using a shortcode.

Paste this shortcode anywhere in any custom layout, text, or HTML block on your website and see the breadcrumb appear there – [astra_breadcrumb]

Support for third-party plugins

Along with the built-in breadcrumb feature, Astra also supports breadcrumbs from the following external plugins –

Yoast SEOBreadcrumb NavXTRank MathSEOPress PRO

You can turn off Astra』s default options and use breadcrumbs from the above plugins. Although the breadcrumbs are fetched from the above plugins, you can still manage the styling such as colors and typography through Astra.

How to Set External Plugin Breadcrumbs with Astra?

1. With Yoast SEO Plugin:

Install and Activate the Yoast SEO PluginActivate Breadcrumb for Yoast SEO Plugin from WordPress Dashboard > SEO > Search Appearance > Breadcrumbs > Enable BreadcrumbsYou will see an option in the Customizer > Layout > Breadcrumb > Breadcrumb Source. Select Yoast SEO Breadcrumb. Now the Yoast SEO Breadcrumb markup should start appearing on the pages instead of the default Astra Breadcrumb.All Color and Typography options from the customizer will override the styling of Yoast SEO Breadcrumb.All options to disable breadcrumb on specific locations will also work with the Yoast SEO plugin.

Yoast Backend Settings:

Yoast Option in the Customizer:

2. With Breadcrumb NavXT Plugin

Install and Activate the Breadcrumb NavXT PluginYou will see an option in the Customizer > Breadcrumb > Breadcrumb Source. Select Breadcrumb NavXT. Now Breadcrumb NavXT markup will start appearing on the pages instead of the default Astra Breadcrumb.All Color and Typography options from the customizer will override the styling of Breadcrumb NavXT. All options to disable breadcrumb on specific locations will also work with the Breadcrumb NavXT plugin.

3. With Rank Math Plugin

Install and Activate the Rank Math PluginSet Breadcrumbs through Dashboard > Rank Math > General Settings > Breadcrumbs You will see an option in the Customizer > Breadcrumb > Breadcrumb Source. Select Rank Math. Now Rank Math markup will start appearing on the pages instead of the default Astra Breadcrumb.All Color and Typography options from the customizer will override the styling of Rank Math. All options to disable breadcrumb on specific locations will also work with the Rank Math plugin.

4. With SEOPress (PRO) Plugin:

Install and Activate both the SEOPress free and PRO PluginsActivate Breadcrumbs for SEOPress Plugin by navigating to WordPress Dashboard > SEO > PRO > Breadcrumbs. Here, follow these steps:Step 1 – Enable Breadcrumbs;Step 2 – Enable HTML Breadcrumbs;Step 3 – Optionally, you can set the text to be shown before the Breadcrumbs by adding it to the 「Display a text before the breadcrumbs」 field;Step 4 – Click on the 「Save changes」 button to activate the SEOPress Breadcrumbs.Navigate next to Customizer > Layout > Breadcrumb > Breadcrumb Source. Here, select the 「SEOPress」 option.Now the SEOPress Breadcrumb markup should start appearing on the pages instead of the default Astra Breadcrumb.All options to disable breadcrumb on specific locations will also work with the SEOPress plugin, and some additional settings will be also available at Dashboard > SEO > PRO > Breadcrumbs.

SEOPress – Enable Breadcrumbs:

SEOPress – Enable HTML Breadcrumbs:

SEOPress Option in the Customizer:

How to Activate Astra Pro Addon License?

Astra Pro Addon is a plugin that extends the free Astra theme and adds more features to it.

Note: Make sure you have the Astra Pro Addon (plugin) installed and activated before starting the license activation. Here』s an article on how to install and activate the Astra Pro Addon if you need further details on this.

To activate your Astra Pro Addon please follow these steps:

Step 1 – Please visit our Store to get your license key. Please log in and navigate to the Account > Licenses page. Copy your Astra Pro license key:

Step 2 – Navigate to Dashboard > Appearance > Astra Options

Step 3 – Copy your Astra Pro license key to the Astra Pro License section. Click the 「Activate License」 button.

Note:

The 「License」 section will not be visible if the Astra Pro plugin is not activated. If you don』t see this section, please navigate to Dashboard > Plugins and click on 「Activate」 under the Astra Pro plugin line.

That』s it. Your Astra Pro license is now activated.