> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Translate a Blocks App

## Article: Translating Your App

## Article Link: https://dev.wix.com/docs/build-apps/develop-your-app/develop-an-app-with-blocks/deploy-and-manage-blocks-apps/translate-a-blocks-app.md

## Article Content:

# Translate a Blocks App

<blockquote class="caution">

**Editor compatibility**

Wix Blocks apps aren't supported in the Wix Harmony editor. Existing Blocks apps remain available for purchase on the Wix App Market for Wix Editor and Wix Studio sites. To learn more, see [About Wix Harmony and Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-harmony-and-blocks.md).

</blockquote>

When you translate a Blocks app, it is important to understand that Wix sites has two types of translations:

*   The live site language
*   The account (Editor) language.

For example, a developer might want to have German as their account (Editor) language, but the site they are developing is intended for Spanish speakers, so the site language will be Spanish. 

*   Panel texts and action button texts are translated into the default language of the account.
*   Live content that is intended for the app visitors, will be translatable to the site languages. 

### Set up your app for translation

The first step for translating your app is selecting the languages you'd like to be available. 

1.  Select **Multilingual** in the **App** section of the top menu. 
2.  Select the language you want to add in the popup that opens. 
3.  Click **Add Languages** and wait until the installation is successful. 

This adds the language to the language picker in your top menu. 

<div style="text-align:center">

![set up translation](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/13/e2fc8c65-67ad-443c-8a82-92f9b2e020e4/93877fdd-9a52-49a2-b174-dc647a0d0067.png)

</div>

### Translate your app elements

The second step, is translating user-interface elements, such as button, texts and so on.  

1.  Select one of the languages that you added in step 1. 

<div style="text-align:center">

![pick language](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/13/fb058e69-44e6-40b2-948e-b72808d1e6ea/99d5f673-e62c-43c7-b29d-4dbabdbb0bea.png)

</div>

1.  Click on the element you want to translate. A translation bar opens. Click **Done** only after completing the next step.

<div style="text-align:center">

![translation bar](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/13/bfd0e9fd-6dec-4a8b-96a8-ca5514f02b29/8967bf1d-e16a-457e-9c11-c9d37a596bff.png)

</div>

1.  Click **Edit Translation** and translate the text, or **Auto-translate** to get an automatic translation. 

<div style="text-align:center">

![translate an element](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/13/a07c33fc-ae59-4799-a556-ba2b28aa983c/c96c95d5-5e5a-44af-bc70-26b6868cce55.png)

</div>

Now, when your app is installed on a site that's translated to that language (for example, Spanish), these texts will appear in Spanish as well. 

<blockquote class="tip">

**Translate a custom panel** 
To translate custom panel texts, go to the **Panels** tab and follow the same procedure as translating your site elements.

</blockquote>

### Preview Your Translation

To preview your translation in **Preview** mode in Blocks:

1.  Click **Preview**.
2.  Select the widget language:

<div style="text-align:center">

![pick language in preview](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/05/13/39ac0c9e-cbe0-4407-82db-52f6fe94940d/a9fec09a-d13e-422a-a747-e2ec58337a04.png)

</div>