Wix Multilingüe: usar cajas multiestado para cambiar de LTR a RTL
12 min de lectura
En este artículo
- Paso 1 | Agrega una caja multiestado en la versión del idioma principal de tu sitio
- Paso 2 | Cambia el nombre del estado actual
- Paso 3 | Duplica el estado y renómbralo
- Paso 4 | Ajusta la caja en el idioma secundario
Advertencia:
El SEO de tu sitio se verá afectado negativamente al agregar cajas multiestado, ya que los bots de los motores de búsqueda no pueden leer el contenido de las cajas.
Algunos idiomas, como el inglés, se escriben de izquierda a derecha (LTR), mientras que otros, como el hebreo, se escriben de derecha a izquierda (RTL). Si tu sitio multilingüe es compatible con ambos, puedes agregar cajas multiestado (enlace en inglés) que muestran contenido diferente según el idioma seleccionado. Esto te permite crear un "estado" diferente para cada idioma y adaptar el diseño individualmente.

Paso 1 | Agrega una caja multiestado en la versión del idioma principal de tu sitio
El primer paso es agregar una caja de varios estados en blanco al sitio en tu idioma principal. Agrega textos, imágenes, botones o cualquier elemento que necesites para diseñarla para ese idioma.
Editor de Wix
Editor de Wix Studio
Antes de comenzar:

Asegúrate de haber agregado Wix Multilingüe a tu sitio y de tener la codificación habilitada.

- Ve al editor.
- Haz clic en Agregar
a la izquierda del editor.
- Haz clic en Cuadro.
- Haz clic en Cajas multiestado.
- Arrastra la caja multiestado en blanco a la ubicación correspondiente en tu página.

- Cambia el ID predeterminado de la caja por un nombre significativo:
- Haz clic en Código de páginas
a la izquierda del editor.
- Haz clic en Home (Inicio).
- Haz clic en el icono Propiedades y eventos
en la pestaña del código de la página.
- Selecciona la caja multiestado.
- Ingresa un nombre descriptivo para la caja en el cuadro de texto de ID.
- Haz clic en Código de páginas

- Agrega elementos a la caja y diséñala como desees.
Paso 2 | Cambia el nombre del estado actual
Una vez que la caja esté lista en tu idioma principal, abre el panel Administrar estados para cambiar el nombre del estado actual. Llámalo "LTR", con esa ortografía y mayúsculas exactas (sin las comillas), para asegurarte de que el código que agregarás funcione correctamente.
Editor de Wix
Editor de Wix Studio
- Selecciona la caja multiestado.
- Haz clic en Administrar estados.
- Haz clic en el icono Más acciones
junto al nombre del estado actual.
- Selecciona Editar ID.
- Escribe "LTR" en el cuadro de texto y haz clic en Hecho.
Nota: Si tu idioma principal se escribe de derecha a izquierda, nombra el estado "RTL" en su lugar. - Haz clic en el icono Más acciones
junto a otros estados y selecciona Eliminar para eliminarlos.

Paso 3 | Duplica el estado y renómbralo
Después de crear el estado "LTR" en el panel Administrar estados, duplícalo y llama al nuevo "RTL". De manera similar al primer paso, es importante que lo llames exctamente "RTL", con esa ortografía y puntuación exactas, para que el código funcione como debería.
Editor de Wix
Editor de Wix Studio
- Selecciona la caja multiestado.
- Haz clic en Administrar estados.
- Haz clic en el icono Más acciones
junto al nombre del estado actual.
- Selecciona Duplicar.
- Haz clic en el icono Más acciones
junto al estado duplicado.
- Selecciona Editar ID.
- Escribe "RTL" en la caja de texto y haz clic en Hecho.
Nota: Si tu idioma secundario es de escribe de izquierda a derecha, cambia el nombre del estado a "LTR".

Paso 4 | Ajusta la caja en el idioma secundario
Ahora, tu caja multiestado está configurada y lista para ser traducida. Cambia a tu idioma RTL, cambia el estado a RTL y comienza a traducir tu contenido. Puedes reorganizar la ubicación de los elementos sin que esto afecte a su ubicación en el estado original. Luego, copia el fragmento de código en el código de tu página.
Editor de Wix
Editor de Wix Studio
- Haz clic en el menú desplegable Cambiar idiomas en la parte superior del editor.

- Selecciona el idioma RTL que deseas editar.
- Haz clic en el menú desplegable Caja multiestado y selecciona el estado correspondiente de la caja.

- Selecciona el elemento de la caja que deseas traducir:
- Texto: haz clic en Editar traducción o en Traducir automáticamente para traducir el texto. Luego, haz clic en el icono Cambiar la dirección del texto
en el panel Ajustes de texto para cambiar la dirección del texto.
- Imágenes: haz clic en Editar traducción y luego en Cambiar para elegir una imagen diferente para la versión RTL de tu sitio.
- Texto: haz clic en Editar traducción o en Traducir automáticamente para traducir el texto. Luego, haz clic en el icono Cambiar la dirección del texto

- Agrega el siguiente código en el panel de propiedades:
- Haz clic en Código de páginas
a la izquierda del editor.
- Haz clic en Home (Inicio).
- Haz clic en el icono Propiedades y eventos
en la pestaña del código de la página.
- Selecciona la caja multiestado.
- Copia el siguiente fragmento de código a continuación y pégalo en la parte superior del panel Código.
- Haz clic en Código de páginas
1import wixWindow from 'wix-window';
2const rtlLangs = ['he', 'ar', 'fa'];
- Agrega el siguiente código a la función onReady:
Importante:
- Asegúrate de reemplazar los ID del marcador de posición por el ID que creaste anteriormente.
- La función onReady se escribió para tu comodidad. Si ya tienes esta función, agrega solo el código dentro de la primera a la última llave { }.
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});

- Haz clic en Vista previa para probar tu caja multiestado.
- Cuando esté todo listo, publica tu sitio para implementar los cambios.
¿Te gustaría ver capacidades RTL adicionales?
Con Wix Multilingüe, puedes crear un sitio multilingüe con contenido de derecha a izquierda. En la actualidad, puedes personalizar algunos aspectos de tu sitio, como el menú, el texto y las imágenes, para que sean RTL por idioma (por ejemplo, para hebreo o árabe).
¿Qué funciones adicionales de RTL te gustaría ver en Wix Multilingüe? Contacta a Atención al Cliente con tus comentarios y sugerencias.