Wix Multilingual: Using Multi-State Boxes to Switch From LTR to RTL
4 min read
Warning:
Your site's SEO will be impacted by adding Multi State Boxes because bots cannot read their 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, add multi-state boxes that display different content based on the selected language. You can create a different "state" for each language and tailor the design individually.
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.
Before you begin:
Make sure you've added Wix Multilingual to your site and enabled Velo by Wix.
- Go to your editor.
- Click Add
on the left side of the Editor. - Click Box.
- Click Multi-State Boxes.
- Drag the Blank multi-state box to the relevant location on your page.
- 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 State panel to rename the current state. Call it "default", in that exact spelling and capitalization (without the quotation marks), to ensure the code you'll add functions properly.
- Select the multi-state box.
- Click Manage States.
- Click the Show More icon
next to the current state's name. Tip: The current state's default name is "State1". - Select Edit ID.
- Type "default" in the text box and click Done.
Step 3 | Duplicate the state and rename it
After creating the "default" state in the Manage States panel, duplicate it and call the new one "RTL". Similarly to the similar step, it's important that you call it RTL, in that exact spelling and punctuation, so the code works as it should.
- (In the Manage States panel) Click the Show More icon next to the "default" state.
- Select Duplicate State.
- Click the Show More icon next to the duplicate state.
- Select Edit ID.
- Type "RTL" in the text box and click Done.
Notes:
- In steps 3 and 4 of this article, you'll find that the duplicate state's name is RTL. If your secondary language is LTR, you can change the state's name to LTR instead.
- Make sure your multi-state box's element ID is identical in all parts of the code. In the steps above, the example box's ID is #statebox8.
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. Then, copy the code snippet (click below) to your page's code.
- Switch to your site's RTL language using the Switch Language panel.
- Select your multi-state box.
- Translate the content and design the box as you wish.
- Copy the following code snippet below and paste it in the Page Code section in the Editor.
1import wixWindow from 'wix-window';
2const RTLLangs = ['he','ar','fa'];
3$w.onReady(function () {
4 let lang = wixWindow.multilingual.currentLanguage;
5 //based on RTL
6 /////////////////////////////////////
7 if(RTLLangs.includes(lang)){
8 $w('#statebox8').changeState('RTL');
9 }
10 //based on exact match or default:
11 /////////////////////////////////////
12 let states = $w('#statebox8').states;
13 let foundStates = states.filter((state)=>{state.id === lang});
14 if(foundStates.length>0){
15 $w('#statebox8').changeState(foundStates[0]);
16 }
17 else{
18 $w('#statebox8').changeState('default');
19 }
20});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, 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?
|