Wix Multilingüe: usar cajas multiestado para cambiar de LTR a RTL
6 min de lectura
Advertencia:
El SEO de tu sitio se verá afectado 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.
Antes de comenzar:
Asegúrate de haber agregado Wix Multilingüe a tu sitio y haber habilitado Velo by Wix.
- Ve al editor.
- Haz clic en Agregar
a la izquierda del editor. - Haz clic en Caja.
- Haz clic en Cajas multiestado.
- Arrastra la caja multiestado en blanco a la ubicación correspondiente en tu página.
- 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 el idioma principal, abre el panel Administrar estados para cambiar el nombre del estado actual. Llámalo "default" (predeterminado), con esa ortografía y sin mayúsculas (sin las comillas), para asegurarte de que el código que agregarás más adelante funcione correctamente.
- 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 "predeterminado" en la caja de texto y haz clic en Hecho.
Paso 3 | Duplica el estado y renómbralo
Después de crear el estado "default" en el panel Administrar estados, duplícalo y llama al nuevo estado "RTL". De manera similar al primer paso, es importante que lo llames "RTL", con esa ortografía y puntuación exactas, para que el código funcione como debería.
- 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 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 izquierda a derecha (LTR,) puedes cambiar el nombre del estado a LTR.
Nota:
Asegúrate de que el ID del elemento (enlace en inglés) sea idéntico en todas las partes del código. En los pasos anteriores, el ID de la caja que sirve de ejemplo es #statebox8.
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 el contenido. Luego, copia el fragmento de código en el código de tu página.
- 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 RTL.
- 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
- Copia el siguiente fragmento de código a continuación y pégalo en la pestaña Código de la página en el 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});
- 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
¿Te ha sido útil?
|