How To Translate Site Builder With WPML?

Site Builder is a premium feature available with the Astra Pro Addon plugin.

To use these features, you must have the Astra theme with the Astra Pro Addon installed on your website.

WPML and Site Builder

Note: Before we start, ensure that you’ve added WPML to your Astra site and made it multilingual. Check this article for more details.

Now, we need to make sure that the option to translate the Site Builder with WPML is active. Follow the steps below to activate this option:

Step 1: Log in to your WordPress dashboard and navigate to WPML > Settings.

Step 2: Next, scroll down to reach the “Post Types Translation” section.

Step 3: Select Site Builder (astra-advanced-hook) to be Translatable.

Here you have options to show items only if there is a translation available in the selected language or to show content in the default language (fallback option). Choose the option that suits you better and click the “Save” button to apply changes.

This will enable all Site Builder layouts to be translated with WPML. You will find the translation options in your Site Builder list.

Translating The Site Builder

Now that this option is activated, let’s show you how to translate your Site Builder content.

Step 1: Navigate to Astra > Site Builder and switch to the table view.

Note: The translation options are also available under individual Site Builder layouts. We switched to Table View for better and quicker access to WPML options.

You will notice the WPML language options for each Site Builder layout. Layouts are set to your default language, and the column contains flags of the other languages available.

These are the languages that you selected while setting up the WPML plugin. To see options for different languages, you’ll have to change them from your WPML settings.

Step 2: To create a version of the Site Builder title 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 on one side and translation fields on the other side. 

We decided to add a French version of the layout 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 added all translations, click “Complete Translation” to create the translated page.

Managing Translations

Keep in mind that you will not be able to click the “Complete Translation” button until you provided all translations. If you need to pause translating, just click on the “Back to list” button.

This will save your current progress and take you back to the Site Builder list. To mark the translation in progress, you will notice that the “+” icon changed to the “cogs” icon. You can resume translating the layout any time you want by clicking this icon.

Once you complete your translation and click the “Complete Translation” button, the translated version of your Site Builder will be automatically added and linked with the original.

In the layouts list, you will see that existing translated versions are represented by a “pencil” icon instead of a “+” icon to mark that the translation exists. You can always edit the translations if you want.

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

Great, you just created your first Site Builder translation! You can repeat these steps for any layout you want to translate.

And for any doubts, feel free to reach out to our support team. We’re always here to help!