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.
- Aumentar la conversión de ventas: Ofrecer contenido en varios idiomas puede impulsar las ventas. Una plataforma de cursos en línea que permite 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 ofrecen información en su idioma nativo, lo que impacta directamente en las tasas de conversión.
- Mejora la interacción y la retención de usuarios: Un selector de idiomas puede mantener a los usuarios en su sitio web durante más tiempo. Por ejemplo, los usuarios que interactúan en su idioma preferido en una red social tienden a permanecer más tiempo conectados. Este aumento de la interacción es significativo, ya que los usuarios suelen pasar el doble de tiempo en sitios web en su lengua materna que en aquellos en un segundo idioma, lo que se traduce en una mayor 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
Empieza creando una cuenta 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á registrar su dominio para autorizar la traducción. Copie el nombre de su dominio, incluyendo "https://", y seleccione "otra" como plataforma.
A continuación, seleccione el idioma de origen y el de destino.
Paso 2: Agregar DNS automáticamente usando Entri
Después de registrar su sitio web en el panel de Linguise , tendrá dos opciones de instalación.
Para añadir automáticamente los registros DNS, haga clic en "Conectar su DNS automáticamente". Esta función, llamada Entri, simplifica el proceso de instalación al gestionar los registros DNS. También 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 necesario y los registros DNS.
A continuación, haga clic en “Autorizar con [su proveedor de dominio]” (p. ej., 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 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 indican 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, acceda a su administrador de dominios y navegue hasta el área de configuración de DNS. Siga 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 haya agregado todos sus registros, su configuración debería verse así.
Paso 4: Verificar DNS
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 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, vaya a su panel del sitio web Bubble. Haga clic en ‘Ajustes’ en el menú lateral izquierdo y seleccione “SEO / metatags.”
Desplázate hacia abajo hasta "Script/metaetiquetas en el encabezado" en "Configuración avanzada". Pega el Linguise que copiaste anteriormente, 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” > “Mostrar 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: Seleccione dónde aparecerá el selector de idioma en su sitio. Hay varias opciones de posición disponibles; asegúrese 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.
- Nombre del idioma para mostrar: Puede elegir mostrar el nombre del idioma según el nombre del país o el nombre del idioma en sí. Por ejemplo, podría mostrar "Francés" 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. Puedes ajustar los siguientes ajustes:
- 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
Finalmente, puedes ajustar la configuración de la sombra del cuadro de bandera. 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 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 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 (p. ej., "EN") en la barra de navegación superior. Este método, sencillo pero eficaz, permite a los usuarios encontrar rápidamente las opciones de idioma, independientemente de su configuración.
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 "Inglés (EE. UU.)" 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:
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 idioma 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.
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.
