Traducción web

Tutorial de Webflow: cómo crear una web multilingüe

Tutorial de Webflow: cómo crear una web multilingüe
Elizabeth Pokorny
Redactado por
Elizabeth Pokorny
Elizabeth Pokorny
Redactado por
Elizabeth Pokorny
Revisado
Elizabeth Pokorny
Revisado por
Actualizado el
23 de abril de 2024

Cuando se trata de crear un sitio web en Webflow, las posibilidades y la libertad son infinitas.

Y somos grandes amantes de la herramienta sin código Webflow por la flexibilidad que ha aportado a muchos de nuestros usuarios. Incluso hemos creado nuestro propio sitio web multilingüe Webflow con la ayuda de una agencia web, Finsweet, que puedes clonar libremente.

Además de ser muy flexible y fácil de usar, Webflow también ofrece una solución de localización nativa que le permite traducir el contenido de su sitio.

De manera que si estás preparado para convertir tu web de Webflow en una web multilingüe, con este tutorial sobre el selector de idioma de Webflow, te mostraremos cómo hacerlo paso a paso y, además, compartiremos algunas plantillas personalizadas que desde ya puedes clonar en tu web.

¿Webflow es compatible con varios idiomas?

En un mercado cada vez más globalizado, tener un sitio web multilingüe se está convirtiendo en una necesidad. Una encuesta realizada recientemente por CSA Research confirma que los sitios web que se dirigen a los usuarios en su lengua materna consiguen un mayor compromiso, prolongan las sesiones en el sitio y aumentan las conversiones. Las estadísticas muestran que el 60% rara vez o nunca compra en sitios web exclusivamente en inglés.

En este sentido, Webflow ha introducido recientemente funciones (esencialmente una vista previa gratuita de su solución nativa) que hacen posible que su sitio web sea multilingüe. Con estas nuevas herramientas, puedes diseñar, crear y personalizar sitios localizados directamente en Webflow Designer. Esto es lo que puedes hacer:

  • Construya sitios localizados visualmente.
  • Personaliza tus locales.
  • Traduzca automáticamente los contenidos de forma nativa.
  • Integraciones directas con sistemas de gestión de traducciones y API flexibles (costes adicionales).
  • Permita a los visitantes elegir su idioma preferido.

Gracias a estas funciones, Webflow puede localizarse para apoyar el contexto nativo de su contenido, pero también optimizarse completamente para abordar el valor SEO nativo del idioma al que elija traducir su sitio web. 

Localización manual de su sitio web

Si, por el contrario, decide optar por una alternativa manual, existen soluciones, como la creación de sitios web duplicados, que le proporcionarán la funcionalidad de forma manual.

Sin embargo, esta solución, que requiere mucho tiempo, le obligaría a crear páginas duplicadas o sitios web duplicados. El proceso consiste en duplicar los elementos de la colección utilizando páginas estáticas, pero esto significa que tendrás que gestionar varias páginas para cada idioma.

Pero tenga en cuenta que, cada vez que modifique el contenido original, tendrá que recurrir a un traductor profesional para que traduzca también las versiones en los otros idiomas. Y, si tienes varios idiomas, como francés, alemán, chino, etc., te darás cuenta enseguida de lo larga que puede llegar a ser esa tarea.

Por otro lado, tendrás que configurar manualmente subdominios o subdirectorios de idioma y añadir etiquetas hreflang al código fuente para que Google no identifique el contenido como duplicado. Estas son 2 funciones esenciales del SEO multilingüe que contribuirán a que tu sitio web se muestre en los resultados de los motores de búsqueda internacionales.

Funciones necesarias para ser multilingüe

Webflowofrece una solución de traducción completa, pero aún le faltan algunas funciones para que el multilingüismo sea aún más cómodo, como el SEO multilingüe, la localización de activos o medios y la redirección del idioma de los visitantes sin coste adicional. Ahí es donde entra Weglot. Weglot elimina por completo la complejidad de la traducción de sitios web al ofrecer un conjunto completo de funciones de gestión de la traducción que añaden más valor a su proyecto de traducción de sitios web, con una estructura de precios clara. 

Con Weglot, puede traducir su sitio web Webflow en piloto automático con traducción automática integrada, sin esfuerzos de desarrollo y una rápida colaboración en la gestión de la traducción (un glosario, exclusiones de traducción, etc.) a través de 1 panel de control fácil de usar.

La eficaz solución de Weglot fue creada para traducir su sitio web Webflow , permitiéndole ser multilingüe en Webflow al instante para que pueda llegar rápidamente a un público global. Aparte de eso, Weglot también ofrece importantes beneficios de SEO, lo que le permite elegir entre subdirectorios o subdominios y añadir automáticamente etiquetas hreflang a su sitio, lo que desempeñará un papel crucial en la alineación de su sitio web con las mejores prácticas de SEO de Google para sitios web multilingües.

Por último, veamos los precios:

Webflow Tabla comparativa Weglot vs

Tutorial: Cómo añadir varios idiomas a Webflow

En términos sencillos, los pasos son los siguientes:

  1. Crea una cuenta de Weglot: desde aquí gestionarás todas las traducciones.
  2. Añade tu nombre de dominio, el idioma original de tu sitio y los idiomas que deseas incluir (Importante: si estás usando un nombre de dominio temporal de Webflow, utiliza esta integración o espera hasta haber adquirido un dominio personalizado antes de continuar).
  3. A continuación, configura tus registros DNS para crear tus subdirectorios o subdominios (puedes elegir entre ambas opciones con Weglot). Vaya a la cuenta de su proveedor de nombres de dominio y a la pestaña Registros DNS. Cree una nueva entrada - seleccione CNAME. Añada el código del idioma que está añadiendo en 'name' y en 'data' añada 'websites.weglot.com'. A continuación, haz clic en "Comprobar DNS".
  4. El último paso requiere que vayas a tu área de administración en Webflow, luego a: 'Configuración'; allí selecciona: 'Código personalizado'; después ve a la sección: ‘Código de la cabecera' y elige: 'Añadir código al final de la etiqueta head'. Copia y pega el fragmento de código HTML JavaScript de tu cuenta de Weglot.
  5. Guarda los cambios y publica clicando en el botón azul situado en la parte superior derecha.

Y ya está: su sitio Webflow es oficialmente multilingüe, lo que mejora la experiencia de usuario de su sitio para sus clientes internacionales.

Weglot detecta, traduce y muestra su sitio Webflow al instante. Te ofrecemos una primera capa de traducción automática mediante los principales proveedores DeepL, Google Translate y Microsoft (incluida en tu plan mensual), junto con un control de edición total para que edites las traducciones de tu sitio como quieras. Te damos la opción de dejarlas como están, añadir un equipo de traducción al proyecto o encargar una traducción profesional directamente en tu proyecto de Weglot.

Además, Weglot no se limita a traducir el contenido de tu web, sino que al mismo tiempo se encarga de esa otra tarea más compleja que es publicar el contenido una vez ya traducido traducido. Con subdirectorios de idioma o subdominios añadidos de manera automática, tu contenido se muestra sin necesidad de que intervenga tu equipo de desarrollo.

Weglot es una solución sencilla y rentable para traducir su sitio web. - Mike Robertson, Director de Operaciones de Ventas de Nikon

El selector de idioma de Webflow

Cuando recargues tu web en Webflow, verás que en la esquina inferior derecha de la página aparece un selector de idioma que se ha añadido automáticamente. Esta es su posición predeterminada cuando conectas tu cuenta de Weglot a tu sitio web.

El cambiador de idioma de Weglot es neutral en su apariencia. Sin embargo, puede realizar una serie de cambios sin código a su apariencia dentro de su Weglot Dashboard, incluyendo la adición de CSS personalizado.

O puedes clonar uno de los muchos conmutadores de idioma personalizados que creamos con Finsweet, que puedes encontrar en nuestro Kit de interfaz de usuario multilingüeWebflow . También hemos lanzado recientemente un segundo conjunto de conmutadores de idiomas con Digidop.

He aquí un vistazo a los conmutadores de idiomas que hicimos con Finsweet:

webflow-tutorial-language-switcher

Sigue el videotutorial para ver cómo añadirlos:

Y aquí tienes un vistazo a los conmutadores de idiomas que hicimos con Digidop:

Ideas para el selector de idioma

Podemos dejar la teoría a un lado por un momento y echar un vistazo a las historias de éxito de empresas que utilizaron Weglot para añadir varios idiomas a su sitio web y personalizar sus conmutadores de idiomas.

Weglot

Página de inicio de Weglot

En primer lugar, sería un error por nuestra parte no mencionar nuestro propio sitio Webflow , Weglot 😉. No mentíamos cuando dijimos que éramos fans de Webflow, y eso se refleja en nuestra propia elección de utilizarlo para mostrar nuestra presencia global.

Personalizamos nuestro conmutador de idiomas para adaptarlo a nuestra nueva marca. Y como campeones de la localización de sitios web, elegimos el nombre del idioma nativo en el nuestro para garantizar que la experiencia de usuario sea clara para nuestros visitantes de sitios web en inglés, francés, alemán, italiano, español, japonés y neerlandés.  

i-Mesh

Página de inicio de imesh

El siguiente ejemplo proviene del creador de textiles i-Mesh, que lleva la personalización un paso más allá (lo que solo es posible si usas Webflow). 

Han añadido el conmutador de idiomas en la barra lateral izquierda, visible para todos los visitantes que se desplacen por la página. Y en lugar de utilizar el código o el nombre del idioma, han utilizado simplemente la mitad de la palabra, lo que complementa el estilo moderno y sencillo de su sitio web. 

Los cambiadores de idioma no tienen por qué ser complicados, e i-Mesh es un claro ejemplo de ello.  

Gran Azul

Página principal de bigblue

Este proveedor de servicios logísticos ha optado por algo ligeramente diferente, tanto en lo que se refiere a la posición como al diseño de su conmutador de idiomas. Está situado en el pie de página y cada idioma va acompañado de una bandera en el menú desplegable.

Aunque las banderas no son del gusto de todo el mundo, tienen su público, especialmente si estás haciendo negocios en los países que representan. 

(Es importante tener en cuenta cuándo no es recomendable utilizarlas. Por ejemplo: si quieres hacer negocios con países en los que se habla español y usas la bandera de España, ahuyentarás al público de Hispanoamérica). 

Al principio utilizaron la sutileza de un código de idioma. Pero luego incluyeron el nombre completo del idioma, además de una bandera en un desplegable, lo que hace que el conmutador de idiomas sea sutil pero llamativo al mismo tiempo.

Un sitio web multilingüe Webflow , al instante

Le hemos explicado el proceso multilingüe de Webflow de principio a fin y esperamos que haya encontrado la solución perfecta para hacer que su sitio web Webflow sea multilingüe.

Y para quienes estén interesados en personalizar su web, esperamos haberles reducido un poco la carga de trabajo gracias a la colaboración con Finsweet en el desarrollo de los 14 selectores de idioma diferentes que pueden incorporar a su web desde este mismo momento.

La traducción de un sitio web puede contribuir a aumentar tanto el tráfico como las conversiones de tu web, lo que te llevará a captar más clientes en nuevos mercados.

Los precios de Weglot empiezan a partir de 15 euros al mes, y puedes empezar tu prueba gratuita de 10 días para empezar a probarlo enseguida.

Descubrir weglot

¿Estás preparado para mostrar tu web en varios idiomas?

Prueba Weglot en tu web de forma gratuita (sin necesidad de tarjeta de crédito).

Blog de iconos

En este artículo, vamos a examinar:
Probar gratis