Astra 文档

Recommended Settings for Beaver Builder and the Astra Theme

When using the Beaver Builder 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 Beaver Builder without any restrictions.

The good thing about Astra is its inbuilt compatibility with Beaver Builder. When you design a new page with Beaver Builder, 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;

Step 6 – 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 Beaver Builder if you need full-width pages. This layout gives Beaver Builder full control over the container and gives you the freedom to design posts and pages the way you want.

To set this repeat steps 1 to 3 to 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 Beaver Builder. In this case, you can use our free 「Astra Bulk Edit」 plugin. Read more about it here.

Astra Meta Settings

Page meta settings are Astra Settings that appear on all individual pages and posts. Namely, these are page-specific settings that give you more control over individual page/post design. Further, you can override some global customizer settings for a particular page/post with these settings.

You can open the Astra Settings panel by clicking on the Astra icon in the Block editor toolbar on top:

Next, when you click on the Astra icon, the sidebar panel will open on the right side. Here, you will see the following options:

SidebarContent LayoutDisable SectionsDisable Primary HeaderDisable TitleDisable BreadcrumbDisable Featured ImageDisable Footer BarTransparent Header

Furthermore, page meta settings have higher priority than customizer settings. Therefore, your page meta settings will override customizer settings on each page or post.

To illustrate, let』s say you enabled a primary header on the entire website in the Customizer settings. Still, you wish to disable it only on the 「Contact」 page. Here, you can edit the 「Contact」 page and disable the primary header only for this page in Astra settings. Similarly, you can control other meta settings.

Note:

The Astra Settings are available as a separate sidebar panel since Astra Theme 3.7.4 version. If you』re running an older version of Astra Theme, you can find the Astra Settings panel in the right sidebar of the Block editor (Screenshot).

How to Pin/Unpin Sidebar Panel?

The above-mentioned Astra icon will be visible when the sidebar panel is pined to the Block editor toolbar. Thus, if you don』t see this icon, that means that the sidebar panel is unpinned.

Since it』s not mandatory to have your sidebar pinned, you can always access the sidebar panel through Block editor options. Therefore, to access your sidebar panel, please follow these steps:

Step 1 – Open editor on your page or post. Here, click on the three-dot menu in the toolbar to open editor options;

Step 2 – Scroll down to the 「Plugins」 section and click on the 「Astra Settings」 to open the sidebar panel;

Once you open the sidebar panel, you have the option to pin it to the toolbar:

Step 3 – Click on the 「star」 icon on the top of the sidebar panel. This will pin your sidebar panel to the toolbar allowing you to access it directly by clicking the Astra icon.

Yet, If you wish to unpin the sidebar panel at any time, just click on the 「star』 icon again.

Astra Settings with Astra Pro

Besides the default Astra themes settings mentioned above, you will see additional options when you activate Astra Pro:

Page HeaderSticky Header

With these options, you can add a particular Page Header layout for the specific page or post. To do this, click on the Page Header dropdown, and select the layout from the list. Also, you can enable or disable the sticky header on each page or post individually.

However, these Astra Pro options will display only when related addons are activated. You can activate these addons at Dashboard > Appearance > Astra Options.

In addition, you can bulk edit the page meta settings on multiple pages/posts. Check the 「How to Bulk Edit Astra Meta Settings on Multiple Pages & Posts at Once?」 article for more details.

Gutenberg Editor And Frontend UI Improvements With Astra (3.7.4)

Astra Theme version 3.7.4 brought interesting Gutenberg UI improvements for both Block editor and frontend user interface. 

This document will show you the changes we added and how to apply these improvements when you update your theme to 3.7.4.

Gutenberg UI Improvements Overview

We added Gutenberg UI improvements to several blocks as well as the whole Block editor:

Block layouts「Spacer」 block;「Pullquote」 block;「File」 block;Block edit controles;Block selection in the editor.

Let』s check out some details for each improvement:

Block layouts

We added layout compatibility for multiple blocks. The block layout now provides the following options:

Default Layout – a default boxed layout;Wide Layout – this layout will inherit the width of the container you set on your website;Full-width Layout – this layout will go edge-to-edge of the screen.

This layout is available for Group, Cover, Columns, Heading, and Media & Text blocks. This structure is available for these blocks even when they are nested. Check out this visual representation of improvement:

This improvement works both for the block editor and front end.

Spacer Block

The Spacer blocks were previously hard to notice. You would notice this block only when you clicked on it. Otherwise, the block stayed almost hidden.

We made the block improvements by adding a light background and by displaying its assigned height.

Pullquote Block

We added a quote icon for the Pullquote block both in the editor and in the front end. This is how the Pullquote Block looked like previously:

The improvements make the block more visible and emphasize that the block content is a quote.

File Block

Previously the File block didn』t have Style support which was improved in the mentioned update.

The style support is now available in the editor and the front-end as well.

Block Edit Controls

In previous versions, the block controls had a lighter color making them less visible.

The block edit controls are more visible now, as we gave them a darker color.

Block Selection

Before improvements, it was not easy to tell what space is some block taking and where to click to start editing it.

The improvement now allows you to see each block and its borders by simply hovering over it with a mouse.

How To Get These Impovements?

For all new websites, Gutenberg UI improvements will be applied automatically when the theme is updated. 

As these improvements can reflect on the front end, you』ll need to activate changes by adding a filter for existing websites. This way, you can check how these changes apply to your website and make any adjustments if needed. 

To apply the improvements to your website, add the following filter to the functions.php file of your Child Theme:

// Filter to enable Astra 3.7.4 Gutenberg UI improvements
add_filter( 'astra_get_option_improve-gb-editor-ui', '__return_true' );

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.

Replace Deprecated Astra Theme and Astra Pro Hooks

Following Astra Theme 3.7.4 and Astra Pro 3.6.2 updates, we deprecated a significant number of functions, filters, and actions. Thus, some of the Astra hooks you might have added to your website should be updated.

Therefore, this document will help you replace these hooks on your website. Please use the lists below to update your code.

Deprecated Astra Hooks and Their Replacements

In short, further down, you will find lists of functions, filters, and actions. Accordingly, please update hooks if you added any filters, actions, or other functions to your website.

Astra Theme 3.7.4 and Astra Pro 3.6.2 versions are still compatible with old codes to avoid any issues. Although your website will still work well after the update, you should replace deprecated hooks with the replacements below.

Further, to help you with these updates, we added backend notifications:

Hence, you can do this by replacing deprecated hooks in your code with the replacements from the lists. This way, your website will remain fully functional and compatible with future updates.

ActionsFiltersFunctions

Deprecated actionReplacementastra_get_css_filesastra_addon_get_css_filesastra_get_css_filesastra_addon_get_js_filesastra_after_render_jsastra_addon_after_render_jsasta_register_admin_menu astra_register_admin_menu

Deprecated filterReplacementastra_bb_render_content_by_idastra_addon_bb_render_content_by_idastra_get_assets_uploads_dirastra_addon_get_assets_uploads_dirastra_pro_show_brandingastra_addon_show_brandingastra_dynamic_cssastra_addon_dynamic_cssastra_add_css_fileastra_addon_add_css_fileastra_add_js_fileastra_addon_add_js_fileastra_add_dependent_js_fileastra_addon_add_dependent_js_fileastra_render_cssastra_addon_render_cssastra_render_jsastra_addon_render_jsastra_languages_directoryastra_addon_languages_directoryastra_ext_default_addonsastra_addon_ext_default_addonsastra_get_addonsastra_addon_get_addonsastra_ext_enabled_extensionsastra_addon_enabled_extensionsastra_custom_404_optionsastra_addon_custom_404_optionsastra_cache_asset_query_varastra_addon_cache_asset_query_varastra_cache_asset_typeastra_addon_cache_asset_typeastra_load_dynamic_css_inlineastra_addon_load_dynamic_css_inlineastra_flags_svgastra_addon_flags_svgastra_display_on_listastra_addon_display_on_listastra_location_rule_post_typesastra_addon_location_rule_post_typesastra_user_roles_listastra_addon_user_roles_listastra_target_page_settingsastra_addon_target_page_settingsastra_get_display_posts_by_conditionsastra_addon_get_display_posts_by_conditionsastra_meta_args_post_by_conditionastra_addon_meta_args_post_by_conditionastra_pro_white_label_add_formastra_addon_white_label_add_formast_footer_bar_displayastra_footer_bar_displayast_main_header_displayastra_main_header_displaysecondary_submenu_border_classastra_secondary_submenu_border_classgtn_image_group_css_compastra_gutenberg_image_group_style_supportast_footer_sml_layoutastra_footer_sml_layoutprimary_submenu_border_classastra_primary_submenu_border_class

Deprecated functionReplacementastra_get_supported_posts                                      astra_addon_get_supported_postsastra_rgba2hexastra_addon_rgba2hexastra_check_is_hexastra_addon_check_is_hexis_support_swap_mobile_below_header_sectionsastra_addon_swap_mobile_below_header_sectionsis_astra_theme_3_5_0_versionastra_addon_check_theme_3_5_0_versionsticky_header_default_site_title_tagline_css_compastra_addon_sticky_site_title_tagline_css_compis_support_swap_mobile_above_header_sectionsastra_addon_support_swap_mobile_above_header_sectionsastra_return_content_layout_page_builderastra_addon_return_content_layout_page_builderastra_return_page_layout_no_sidebarastra_addon_return_page_layout_no_sidebarastra_pro_is_emp_endpointastra_addon_is_amp_endpointis_astra_breadcrumb_trailastra_addon_is_breadcrumb_trailastra_breadcrumb_shortcodeastra_addon_breadcrumb_shortcodeastra_get_templateastra_addon_get_templateastra_locate_templateastra_addon_locate_templateastra_ext_adv_search_dynamic_cssastra_addon_adv_search_dynamic_cssastra_ext_advanced_search_dynamic_cssastra_addon_advanced_search_dynamic_cssastra_ext_header_builder_sections_colors_dynamic_cssastra_addon_header_builder_sections_colors_dynamic_cssastra_ext_header_sections_colors_dynamic_cssastra_addon_header_sections_colors_dynamic_cssastra_ldrv3_dynamic_cssastra_addon_ldrv3_dynamic_cssastra_learndash_dynamic_cssastra_addon_learndash_dynamic_cssastra_ext_mobile_above_header_dynamic_cssastra_addon_mobile_above_header_dynamic_cssastra_ext_mobile_below_header_dynamic_cssastra_addon_mobile_below_header_dynamic_cssastra_ext_mobile_header_colors_background_dynamic_cssastra_addon_mobile_header_colors_background_dynamic_cssastra_ext_mobile_header_spacing_dynamic_cssastra_addon_mobile_header_spacing_dynamic_cssastra_ext_mobile_header_dynamic_cssastra_addon_mobile_header_dynamic_cssastra_ext_mega_menu_dynamic_cssastra_addon_mega_menu_dynamic_cssastra_ext_scroll_to_top_dynamic_cssastra_addon_scroll_to_top_dynamic_cssastra_ext_fb_button_dynamic_cssastra_addon_footer_button_dynamic_cssastra_fb_divider_dynamic_cssastra_addon_footer_divider_dynamic_cssastra_fb_lang_switcher_dynamic_cssastra_addon_footer_lang_switcher_dynamic_cssastra_footer_social_dynamic_cssastra_addon_footer_social_dynamic_cssastra_ext_hb_button_dynamic_cssastra_addon_header_button_dynamic_cssastra_hb_divider_dynamic_cssastra_addon_header_divider_dynamic_cssastra_hb_lang_switcher_dynamic_cssastra_addon_header_lang_switcher_dynamic_cssastra_ext_hb_menu_dynamic_cssastra_addon_header_menu_dynamic_cssastra_header_social_dynamic_cssastra_addon_header_social_dynamic_css

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 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 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.

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

How to Setup Custom Adobe Fonts (Typekit) Plugin?

Have you installed the Custom Adobe Fonts (Typekit) plugin and facing difficulties setting it up? 

Custom Adobe Fonts (Typekit) is a free plugin that helps you embed Adobe fonts into your WordPress website. You can install it from the WordPress repository by navigating to Dashboard > Plugins > Add New.

Now, let us help you with the setup:

Step 1: Once the plugin is installed and activated, you will need the Project ID to fetch the Adobe fonts from the web projects.

Step 2: Get the Project ID. You can follow the instructions up to Step 4 in this article.

Step 3: Next, paste the Project ID, for which you will need to navigate to WordPress Dashboard > Appearance > Adobe Fonts > Project ID and get all the fonts.

Go ahead and add more fonts to the respective project and refresh the Project. This will fetch other font families too.

Note: If you are using the Astra theme, then start using fonts from the customizer.You can also select Font Family from Appearance -> Adobe Fonts and start using it in your custom CSS.

How To Improve CLS For the SVG Logo?

Cumulative Layout Shift (CLS) is an important metric related to the website』s visual stability. More precisely, this metric tracks unexpected layout shifts that users experience on your website. This document will show you how to improve the CLS score if you』re using the SVG logo for your website.

When you add a logo image in the .png and .jpg formats to your website, the logo height will be added automatically based on the logo width. Contrary to this, if you upload the SVG image, WordPress will only set the logo width but not height.

As a result, some logo shrinking is possible, which can cause an unexpected layout shift in the header section. Astra Theme version 3.6.0 improved the way SVG logo images are handled, which prevents unexpected shifts. Hence, this change can help improve the overall CLS score. 

How Did We Improve This?

To improve this, we added some JavaScript code that will automatically calculate the height for the SVG logo once it』s imported to your website. After that. the height will be calculated based on the logo width you set in the customizer. You can find more details about this in our Blog article.

This SVG logo improvement will be reflecting on a standard and transparent header. This issue was not present with the sticky header logo.

How To Fix This?

For all new websites, the SVG logo improvement will be applied automatically. Once you upload the SVG logo and set the logo width, the height will be automatically calculated and saved. On the other hand, if you already have a website with an SVG logo, you』ll need to make some minor changes.

We didn』t apply this improvement to existing websites to avoid any potential issues that could have appeared. In some cases, applying this improvement automatically to logos already in use could result in unwanted changes.

To apply this improvement to your website, please follow these steps:

Step 1 – Navigate to Customizer > Header > 「Site Identity & Logo」 widget;

Step 2 – Update/edit the logo width value

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

Based on the width you just updated, the logo height will be automatically calculated and saved in customizer settings. This will apply improvements to the SVG logo used on your website.