Configurar un selector de idiomas en el Bubble.io puede facilitar que los usuarios cambien de idioma. Esta característica es particularmente valiosa para aplicaciones con una audiencia global, ya que permite a los usuarios interactuar con la plataforma en su idioma preferido. Bubble.io, una popular plataforma de desarrollo sin código, ofrece capacidades de localización integradas que permiten a los desarrolladores crear aplicaciones multilingües sin grandes conocimientos de codificación.
Para implementar un selector de idiomas en Bubble.io, los desarrolladores normalmente comienzan definiendo los idiomas que desean admitir en la configuración de la aplicación. Luego crean un elemento desplegable o de botón con el que los usuarios pueden interactuar para cambiar el idioma. En este artículo, analizaremos la configuración de un selector de idiomas en Bubble.io con uno de los sitios web de servicios de traducción automática.
Agregar un selector de idiomas en un sitio web no es sin razón. A continuación le explicamos por qué necesita configurar uno en un sitio web de Bubble.
Ahora que entendemos la importancia de cambiar de idioma en los sitios web multilingües de Bubble.io, analicemos cómo implementarlo. Los servicios de traducción de sitios web suelen ofrecer esta función, que puede adaptarse a las necesidades del usuario.
Sin embargo, no todos los servicios de traducción ofrecen selectores de idiomas fáciles de usar y personalizables. Por lo tanto, es muy importante elegir un servicio de traducción automática compatible con varios marcos y que proporcione funciones flexibles de cambio de idioma.
Un servicio de traducción automática que cumple con estos criterios es Linguise . Linguise ofrece una función de cambio de idioma altamente personalizable y fácil de usar que se integra con CMS y creadores web populares como Bubble.io.
Linguise proporciona una integración perfecta con Bubble, lo que permite a los desarrolladores incorporar fácilmente el cambio de idioma en sus aplicaciones multilingües. Al aprovechar las funciones avanzadas y la interfaz fácil de usar de Linguise, puede simplificar la configuración y el mantenimiento de los selectores de idiomas en su sitio web Bubble.
Estos son los pasos para instalar Linguise en un sitio web Bubble.io y configurar el selector de idiomas.
Comience cuenta Linguise gratuita y agregando el dominio de su sitio web. Puede utilizar la prueba gratuita de 30 días antes de elegir un plan de suscripción.
Luego, deberás registrar tu dominio para autorizar la traducción. Copie su nombre de dominio, incluido "https://", y seleccione "otro" como plataforma.
A continuación, seleccione sus idiomas de origen y de destino.
Después de registrar su sitio web en el panel Linguise , tendrá dos opciones de instalación.
Para agregar registros DNS automáticamente, haga clic en "Conectar su DNS automáticamente". Esta función, llamada Entri, simplifica el proceso de instalación al administrar los registros DNS por usted. Alternativamente, puede copiar manualmente los registros DNS a su proveedor de dominio.
Al hacer clic en el botón, Entri analiza la URL de su sitio web registrado y examina sus registros DNS públicos, identificando el proveedor y los registros DNS necesarios.
A continuación, haga clic en "Autorizar con [su proveedor de dominio]" (por ejemplo, Cloudflare). Esta acción lo redirige a la página de inicio de sesión de su proveedor de dominio, donde puede iniciar sesión y continuar.
Una vez que haya iniciado sesión, Entri agregará automáticamente los registros DNS apropiados (un DNS por idioma y un DNS TXT para la clave de validación) a su dominio.
Después de la autorización, Entri le notificará que todas las configuraciones de DNS se han configurado correctamente. La función de traducción debería poder utilizarse una vez que todas las entradas DNS se propaguen en su dominio, lo que suele tardar entre 20 y 30 minutos.
Para la instalación manual, puede seguir los pasos que se indican a continuación.
Para la instalación manual, será redirigido a una pantalla que muestra los registros DNS necesarios para configurar sus páginas multilingües, como fr.dominio.com o es.dominio.com.
Copie estos elementos a su configuración DNS de Bubble.io.
A continuación, acceda a su administrador de dominio y navegue hasta el área de configuración de DNS. Siga las instrucciones para copiar:
A continuación se muestran ejemplos para cada tipo de registro (TXT y CNAME).
Una vez que haya agregado todos sus registros, su configuración debería verse así.
Después de agregar todos sus registros al DNS de su dominio, haga clic en el botón "Verificar configuración de DNS" para verificar la propagación de DNS.
La validación de DNS suele tardar entre 30 minutos y 1 hora. Una vez completado, debería ver indicadores verdes junto a la lista de DNS en el panel de Linguise . Estás casi listo para traducir tu sitio web Bubble.io; todo lo que queda es vincularse al selector de idiomas con banderas de países.
El selector de idioma es una ventana emergente de bandera que permite a los usuarios seleccionar su idioma preferido. Para implementarlo, copie el código proporcionado al final del proceso de registro del dominio o dentro de la configuración del dominio en el encabezado de las páginas de su sitio Bubble.io. El selector de idioma de la bandera aparecerá automáticamente en su sitio web público.
A continuación, vaya al panel de su sitio web Bubble. Haga clic en "Configuración" en el menú de la barra lateral izquierda y seleccione "SEO/metaetiquetas".
Desplácese hacia abajo hasta "Script/metaetiquetas en el encabezado" en "Configuración avanzada". Pegue el Linguise que copió anteriormente, luego haga clic en "Guardar" y publique su sitio.
Para comenzar a configurar el selector de idiomas, navegue hasta la "Configuración" > "Visualización de indicadores de idioma" en el Linguise . En esta página, puede ajustar varias configuraciones
Puede combinar la visualización de banderas y nombres de idiomas, banderas y abreviaturas de idiomas, o simplemente nombres de idiomas. Se recomienda utilizar banderas y nombres de idiomas para facilitar el reconocimiento del usuario.
Después de configurar la pantalla principal, personalice aún más el diseño de las banderas que se mostrarán.
Después de configurar el diseño de las banderas, puede personalizar aún más el color y el tamaño de las banderas. Estas son las configuraciones que puedes ajustar:
Finalmente, puede ajustar la configuración de sombra del cuadro de bandera. La primera opción le permite aplicar un efecto de sombra a cada ícono de bandera que se muestra en su sitio web. La siguiente opción controla el efecto de sombra cuando los usuarios pasan el mouse sobre las banderas de idioma.
Una vez que haya realizado todos los ajustes deseados, haga clic en el botón Guardar para aplicar los cambios de personalización. Luego, visite el sitio web de Bubble para verificar que la configuración se haya aplicado correctamente. Así aparecerá el selector de idiomas.
Después de la configuración, podrá ver cómo funciona el selector de idiomas en su sitio web multilingüe Bubble.
A continuación, podrás traducir el sitio web a otros idiomas como el español.
Después de configurar con éxito el selector de idiomas en un sitio web multilingüe de Bubble, es importante considerar algunos consejos para optimizar el selector de idiomas tanto para su sitio como para los visitantes.
Al implementar un selector de idioma en su sitio web Bubble.io, es fundamental utilizar banderas o íconos de idioma fácilmente reconocibles. Estas señales visuales ayudan a los usuarios a identificar y seleccionar rápidamente su idioma preferido. Por ejemplo, se entiende universalmente que un ícono de globo terráqueo representa opciones de idioma. Alternativamente, puedes usar banderas de países, pero ten en cuenta que esto a veces puede ser problemático ya que los idiomas no siempre están vinculados a un solo país.
Ejemplo: el sitio web de Amazon utiliza un pequeño ícono de globo terráqueo al lado del idioma seleccionado actualmente (por ejemplo, “EN”) en la barra de navegación superior. Este enfoque simple pero eficaz permite a los usuarios localizar rápidamente las opciones de idioma independientemente de su configuración de idioma actual.
Si bien las banderas pueden resultar útiles, no deben usarse solas. Incluir el nombre del idioma en su escritura nativa junto con la bandera o el ícono proporciona claridad y evita posibles confusiones. Esto es particularmente importante para los idiomas que se hablan en varios países o regiones.
Ejemplo: el selector de idiomas en el sitio web de Airbnb muestra el nombre del idioma y la bandera del país. Por ejemplo, muestra "English (US)" con la bandera de EE. UU. y "Français" con la bandera francesa. Esta combinación garantiza que los usuarios puedan identificar con precisión su opción de idioma preferida.
La ubicación de su selector de idiomas es fundamental para la accesibilidad del usuario. Las ubicaciones comunes incluyen la esquina superior derecha del encabezado, el pie de página o dentro del menú de navegación principal. La clave es hacerlo fácilmente reconocible sin saturar el área de contenido principal.
Ejemplo: en el sitio web tiffany.com, el selector de idioma está en la esquina inferior derecha de la página, siempre visible y accesible. Esta ubicación consistente garantiza que los usuarios puedan encontrar y utilizar rápidamente las opciones de idioma independientemente de dónde se encuentren en el sitio.
Asegúrese de que su selector de idiomas funcione bien en todos los dispositivos, desde computadoras de escritorio hasta teléfonos inteligentes. En pantallas más pequeñas, es posible que necesites adaptar el diseño, por ejemplo, usando un menú desplegable en lugar de una lista horizontal de opciones.
Ejemplo: el selector de idiomas del sitio web de la UNESCO se adapta perfectamente a todos los dispositivos. En el escritorio, aparece como una lista horizontal en el encabezado. En dispositivos móviles, se transforma en un menú desplegable compacto, lo que garantiza la usabilidad sin comprometer el diseño móvil.
Mantenga el mismo diseño, funcionalidad y posición de su selector de idiomas en todas las páginas de su sitio web Bubble.io. Esta coherencia ayuda a los usuarios a navegar por su sitio de manera más eficiente, ya que saben exactamente dónde encontrar las opciones de idioma independientemente de su página actual.
Ejemplo: el sitio web mantiene su selector de idiomas de manera consistente en el pie de página de todas las páginas, desde la página de inicio hasta las páginas de productos y el proceso de pago. Esta coherencia garantiza que los usuarios puedan cambiar fácilmente de idioma en cualquier momento durante su experiencia de navegación o compra.
Ahora ya sabes cómo seleccionar el idioma para el sitio web multilingüe Bubble.io. Leer el selector de idioma puede proporcionar varios beneficios y conducir aún más a una optimización basada en los puntos mencionados anteriormente.
Optimizar el selector de idioma de manera efectiva puede mejorar significativamente la experiencia del usuario. Regístrese para obtener una cuenta Linguise intégrela con su sitio web Bubble.io y personalice el selector de idioma para mejorar la experiencia del usuario.
¡Recibe noticias sobre traducción automática de sitios web, SEO internacional y más!
¡No te vayas sin compartir tu correo electrónico!
No podemos garantizar que gane la lotería, pero podemos prometerle algunas noticias informativas interesantes sobre la traducción y descuentos ocasionales.
