Configurar un selector de idioma en el sitio web de Bubble.io puede facilitar a los usuarios cambiar de idioma. Esta característica es especialmente valiosa para aplicaciones con una audiencia global, lo 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 amplios conocimientos de programación.
Para implementar un selector de idioma 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, discutiremos la configuración de un selector de idioma en Bubble.io con uno de los sitios web de servicio de traducción automática.
¿Por qué es importante un interruptor de idioma en el sitio web Bubble.io?
Agregar un conmutador de idioma en un sitio web no es sin razón. Aquí está por qué necesita configurar uno en un sitio web de Bubble .
- Facilita a los usuarios de otros países: Un conmutador de idioma permite a los usuarios internacionales ver el sitio web en su idioma nativo. Por ejemplo, un usuario español que visita una tienda en línea puede cambiar a español, lo que facilita la comprensión de los detalles del producto y la finalización de las compras. Los estudios de investigación de CSA muestran que 76% de los compradores en línea prefieren comprar productos cuando la información está disponible en su idioma, lo que destaca la importancia de esta función para la comodidad y accesibilidad del usuario.
- Optimizando el sitio web en los resultados de búsqueda de otros países: Con un conmutador de idioma, su sitio web Bubble.io puede posicionarse mejor en búsquedas en idiomas extranjeros. Por ejemplo, una versión en francés de su sitio tiene más probabilidades de aparecer en las búsquedas de Google en francés. Esta mayor visibilidad puede aumentar significativamente el tráfico internacional.
- Aumenta la conversión de ventas: Ofrecer contenido en varios idiomas puede impulsar las ventas. Una plataforma de cursos en línea que permita a los usuarios cambiar de idioma puede atraer a un público más amplio y aumentar las inscripciones. Este enfoque es eficaz porque los consumidores son más propensos a comprar en sitios web que proporcionan información en su idioma nativo, lo que impacta directamente en tus tasas de conversión.
- Mejora la interacción y la retención de los usuarios: Un selector de idioma puede mantener a los usuarios en tu sitio durante más tiempo. Por ejemplo, los usuarios que interactúan en su idioma preferido en una aplicación de redes sociales tienden a permanecer conectados más tiempo. Este aumento de la interacción es significativo, ya que los usuarios suelen pasar el doble de tiempo en sitios en su idioma nativo que en aquellos en un segundo idioma, lo que conduce a una mejor retención de usuarios.
Cómo configurar un selector de idioma en Bubble.io
Ahora que entendemos la importancia de cambiar de idioma en 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 se puede adaptar a las necesidades del usuario.
Sin embargo, no todos los servicios de traducción ofrecen conmutadores de idioma personalizables y fáciles de usar. Por lo tanto, elegir un servicio de traducción automática compatible con varios marcos y que proporcione funciones flexibles de cambio de idioma es muy importante.
Un servicio de traducción automática que cumple con estos criterios es Linguise. Linguise la traducción automática ofrece una función de cambio de idioma altamente personalizable y fácil de usar que se integra con CMS populares y constructores de sitios web 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 interruptores de idioma en su sitio web Bubble .
Aquí están los pasos para instalar Linguise en un sitio web Bubble.io y configurar el selector de idioma.
Paso 1: Registre una cuenta Linguise
Comienza creando una cuenta gratuita de Linguise y añadiendo el dominio de tu sitio web. Puedes aprovechar 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. Copia tu nombre de dominio, incluyendo “https://”, y selecciona “otro” como plataforma.
A continuación, selecciona tus idiomas de origen y destino.
Paso 2: Añadir DNS automáticamente usando Entri
Después de registrar su sitio web en el panel de Linguise , tendrá dos opciones de instalación.
Para agregar automáticamente el registro DNS, haz clic en “Conecta tu DNS automáticamente.” Esta función, llamada Entri, simplifica el proceso de instalación al gestionar los registros DNS por ti. Como alternativa, puedes copiar manualmente los registros DNS a tu 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 necesario y los registros DNS.
A continuación, haz clic en “Autorizar con [tu proveedor de dominio]” (por ejemplo, Cloudflare). Esta acción te redirige a la página de inicio de sesión de tu proveedor de dominio, donde puedes 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 todos los ajustes DNS han sido configurados con éxito. La función de traducción debería ser utilizable una vez que todas las entradas DNS se propaguen en su dominio, típicamente tomando de 20 a 30 minutos.
Para la instalación manual, puede seguir los pasos que se proporcionan a continuación.
Paso 3: Copiar registros DNS
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.domain.com o es.domain.com.
Copie estos elementos en la configuración DNS de Bubble.io.
A continuación, accede a tu gestor de dominios y navega hasta el área de configuración de DNS. Sigue las instrucciones para copiar:
- Un registro TXT para la verificación del dominio
- Uno o varios registros CNAME para los idiomas
Aquí hay ejemplos para cada tipo de registro (TXT y CNAME).
Una vez que hayas añadido todos tus registros, tu configuración debería verse así.
Paso 4: Verificar DNS
Después de añadir todos tus registros al DNS de tu dominio, haz clic en el botón “Comprobar configuración de DNS” para verificar la propagación del DNS.
La validación DNS suele tardar unos 30 minutos a 1 hora. Una vez completado, debería ver indicadores verdes junto a la lista DNS en el panel de control Linguise . Ya está casi listo para traducir su sitio web Bubble.io; solo queda enlazar al selector de idioma con banderas de países.
Paso 5: Habilite el conmutador de idioma
El selector de idioma es un popup 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 bandera aparecerá automáticamente en su sitio web público.
A continuación, ve al panel de tu sitio web Bubble . Haz clic en ‘Configuración’ en el menú de la barra lateral izquierda y selecciona “SEO / metatags.”
Desplázate hacia abajo hasta “Script/meta tags in header” en “Advanced Settings.” Pega el Linguise script que copiaste anteriormente, luego haz clic en ‘Guardar’ y publica tu sitio.
Paso 5: Configurar la pantalla principal
Para comenzar a configurar el selector de idioma, navegue hasta la “Configuración” > “Visualización de banderas de idioma” sección en el Linguise panel de control. En esta página, puede ajustar varias configuraciones
- Estilo de icono de bandera: Elija entre tres opciones: visualización lado a lado, menú desplegable o ventana emergente.
- Posición: Selecciona dónde aparecerá el selector de idioma en tu sitio. Hay disponibles varias opciones de posición; asegúrate de que sea fácilmente accesible para los visitantes.
Puede combinar la visualización de banderas y nombres de idiomas, banderas y abreviaturas de idiomas, o solo nombres de idiomas. Se recomienda usar tanto banderas como nombres de idiomas para facilitar el reconocimiento del usuario.
Paso 6: Establecer el diseño de la bandera
Después de configurar la pantalla principal, personalice aún más el diseño de las banderas que se mostrarán.
- Mostrar nombre del idioma: Puedes elegir mostrar el nombre del idioma basándote en el nombre del país o en el nombre del idioma en sí. Por ejemplo, podrías mostrar “French” o “Français.”
- Tipo de bandera inglesa: Esta opción es útil para idiomas con múltiples variaciones, como el inglés estadounidense o británico (y también se aplica al español, taiwanés, alemán y portugués).
- Estilo de bandera: Elija la forma del icono de bandera, ya sea redondo o rectangular.
Paso 7: Personalizar color y tamaño
Después de configurar el diseño de la bandera, puedes personalizar aún más el color y el tamaño de las banderas. Estos son los ajustes que puedes modificar:
- Radio del borde de la bandera: Personalice el radio en píxeles para el estilo de bandera rectangular.
- Color del nombre del idioma: Elija el color de texto predeterminado para mostrar el nombre del idioma.
- Color del idioma emergente: Establezca el color del texto del título del idioma en el área emergente o desplegable.
- Tamaño de la bandera: Ajuste el tamaño de los iconos de bandera.
- Color del nombre del idioma al pasar el ratón: Establezca el color del texto que aparece cuando el usuario pasa el ratón sobre el nombre del idioma.
- Color de hover del idioma emergente: Establezca el color del texto que aparece cuando el usuario pasa el cursor sobre el título del idioma en el área emergente o desplegable.
Paso 8: Configuración de la sombra de la caja de la bandera
Por último, puedes ajustar la configuración de la sombra del cuadro de las banderas. La primera opción te permite aplicar un efecto de sombra a cada icono de bandera que se muestra en tu sitio web. La siguiente opción controla el efecto de sombra cuando los usuarios pasan el ratón por encima de 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 su sitio web Bubble para verificar que la configuración se haya aplicado correctamente. Así es como aparecerá el selector de idioma.
Después de la configuración, puede ver cómo funciona el selector de idioma en su sitio web multilingüe Bubble .
A continuación, puede traducir el sitio web a otros idiomas como el español.
Mejores prácticas para optimizar el conmutador de idioma en Bubble.io
Después de configurar correctamente el conmutador de idioma en un sitio web multilingüe Bubble , es importante considerar consejos para optimizar el conmutador de idioma tanto para su sitio como para los visitantes.
Utilice un logotipo de bandera de idioma fácilmente identificable
Al implementar un conmutador de idioma en su sitio web Bubble.io, es crucial 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, un ícono de globo terráqueo se entiende universalmente para representar opciones de idioma. Alternativamente, podría usar banderas de países, pero tenga 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 icono de globo terráqueo junto al idioma seleccionado actualmente (por ejemplo, "EN") en la barra de navegación superior. Este enfoque simple pero efectivo permite a los usuarios localizar rápidamente las opciones de idioma independientemente de su configuración de idioma actual.
Incorporar nombres de idiomas junto a las banderas
Aunque las banderas pueden ser útiles, no deben usarse solas. Incluir el nombre del idioma en su escritura nativa junto a la bandera o icono proporciona claridad y evita posibles confusiones. Esto es especialmente importante para los idiomas hablados en varios países o regiones.
Ejemplo: El selector de idioma 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.
Coloque el botón del selector de idioma de manera reflexiva
La ubicación de su conmutador de idioma es fundamental para la accesibilidad del usuario. Las ubicaciones comunes incluyen la esquina superior derecha del encabezado, en el pie de página o dentro del menú de navegación principal. La clave es hacerlo fácilmente detectable sin saturar el área de contenido principal.
Ejemplo: En el sitio web tiffany.com, el conmutador de idioma está en la esquina inferior derecha de la página, siempre visible y accesible. Esta ubicación coherente garantiza que los usuarios puedan encontrar y utilizar rápidamente las opciones de idioma, independientemente de dónde se encuentren en el sitio
Diseña el selector de idioma para que sea responsivo
Asegúrese de que su conmutador de idioma funcione bien en todos los dispositivos, desde computadoras de escritorio hasta teléfonos inteligentes. En pantallas más pequeñas, es posible que deba adaptar el diseño, por ejemplo, utilizando 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 el móvil, se transforma en un menú desplegable compacto, lo que garantiza la usabilidad sin comprometer el diseño móvil.
Garantice que el selector de idioma sea coherente en todas las páginas
Mantenga el mismo diseño, funcionalidad y posición de su selector de idioma en todas las páginas de su sitio web Bubble.io. Esta consistencia 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 la página actual.
Ejemplo: El sitio web mantiene su selector de idioma de manera coherente en el pie de página en 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 de idioma fácilmente en cualquier momento durante su experiencia de navegación o compra.
Configura un selector de idioma en el sitio web multilingüe Bubble utilizando Linguise!
Ahora, ya entiende 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 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 Linguise cuenta, intégrela con su sitio web Bubble.io, y personalice el selector de idioma para mejorar la experiencia del usuario.
