Help Center
    Help Center
  1. Creating your site
  2. Creating a multilingual site
  3. Translating your site
    4. Wix Multilingual: Using Multi-State Boxes to Switch From LTR to RTL

Wix Multilingual: Using Multi-State Boxes to Switch From LTR to RTL

11 min read
Warning:
Your site's SEO will be negatively impacted by adding multi-state boxes because search engine bots cannot read the boxes' content. 
Some languages like English are written from left-to-right (LTR), while others like Hebrew are written from right-to-left (RTL). If your multilingual site supports both types, you can add multi-state boxes that display different content based on the selected language. This allows you to create a different 'state' for each language and tailor the design individually. 
A screenshot from a live Wix site using multi state boxes

Step 1 | Add a multi-state box in your site's main language version

The first step is adding a blank multi-state box to your site in your main language. Design it for that language, adding text, images, buttons or any element you need. 
Wix Editor
Studio Editor
Before you begin:
Make sure you've added Wix Multilingual to your site and enabled coding. 

  1. Go to your editor.
  2. Click Add  on the left side of your editor. 
  3. Click Box.
  4. Click Multi-State Boxes.
  5. Drag the Blank multi-state box to the relevant location on your page. 
A screenshot from a Wix site adding multi state boxes
  1. Change your box's default ID to a meaningful name:
    1. Click Page Code  on the left side of your editor.
    2. Click Home.
    3. Click the Properties Panel icon  in the page code tab.
    4. Select your multi-state box.
    5. Enter a meaningful name for your box in the ID text box.
A screenshot from a Wix site of multi state boxes
  1. Add elements to the box and design it as you wish.  

Step 2 | Change the current state's name

Once your box is ready in your main language, open the Manage States panel to rename the current state. Call it "LTR", in that exact spelling and capitalization (without the quotation marks), to ensure the code you'll add functions properly.  
Wix Editor
Studio Editor
  1. Select your multi-state box.
  2. Click Manage States. 
  3. Click the More Actions icon  next to the current state's name.
  4. Select Edit ID.
  5. Type "LTR" in the text box and click Done. 
    Note: If your primary language is RTL, name the state RTL instead.   
  6. Click the More Actions icon  next to other states and select Delete to remove them. 
A screenshot from a Wix site using multi state boxes

Step 3 | Duplicate the state and rename it

After creating the "LTR" state in the Manage States panel, duplicate it and call the new one "RTL". Similarly to the first step, it's important that you call it "RTL", in that exact spelling and punctuation, so the code works as it should. 
Wix Editor
Studio Editor
  1. Select your multi-state box.
  2. Click Manage States. 
  3. Click the More Actions icon  next to the current state's name.
  4. Select Duplicate.
  5. Click the More Actions icon next to the duplicate state. 
  6. Select Edit ID.
  7. Type "RTL" in the text box and click Done. 
    Note: If your secondary language is LTR, change the state's name to LTR instead.   
A screenshot from a Wix site using multi state boxes

Step 4 | Adjust your box in the secondary language

Now, your multi-state box is set up and ready for translation. Switch to your RTL language, change the state to RTL and start localizing your content. You can reorganize the placement of the elements without affecting their placement in the original state. Then, copy the code snippet to your page's code. 
Wix Editor
Studio Editor
  1. Click the Switch languages drop-down menu at the top of the editor. 
A screenshot of clicking the Switch Languages drop-down at the top of the Wix Editor.
  1. Select the RTL language you want to edit. 
  2. Click the multi-state box drop-down and select the relevant state of the box. 
A screenshot from a Wix site using multi state boxes
  1. Select the element in the box that you want to translate:
    • Text: Click Edit Translation or Auto-translate to translate the text. Then, click the Change text direction icon  in the Text Settings panel to switch the text direction.
    • Images: Click Edit Translation, then click Change to choose a different image for the RTL version of your site.
A screenshot from a Wix site using multi state boxes
  1. Add the following code in the properties panel:
    1. Click Page Code  on the left side of your editor.
    2. Click Home.
    3. Click the Properties Panel icon  in the page code tab.
    4. Select your multi-state box.
    5. Copy the following code snippet below and paste it at the top of the coding panel.
1import wixWindow from 'wix-window';
2const rtlLangs = ['he', 'ar', 'fa'];
  1. Add the following code to your onReady function:
Important:
  • Be sure to replace the placeholder IDs with the ID you created earlier.
  • The onReady function is written for your convenience, if you already have this function, add only the code within the first to last braces { }.
1$w.onReady(function () {
2    let lang = wixWindow.multilingual.currentLanguage;
3
4    if (rtlLangs.includes(lang)) {
5        $w('#myBoxID').changeState('RTL');
6    }
7   else {
8        $w('#myBoxID').changeState('LTR');
9    }
10});
A screenshot of the Wix editor code panel
  1. Click Preview to test your multi state box.
  2. Publish your site when you are ready to make the changes go live.
Would you like to see additional RTL capabilities?
With Wix Multilingual, you can create a multilingual site with right-to-left content. Currently, you can customize some aspects of your site like the menu, text, and images to be RTL per language (e.g., Hebrew, Arabic).

What additional RTL capabilities would you like to see in Wix Multilingual? Contact Customer Care with your feedback and suggestions

Did this help?

|
In this article
  • Step 1 | Add a multi-state box in your site's main language version
  • Step 2 | Change the current state's name
  • Step 3 | Duplicate the state and rename it
  • Step 4 | Adjust your box in the secondary language

Hire a Professional

Get matched with a Wix Partner who can help you reach your site goals.
Get Matched