Cómo traducir tu sitio web de Webflow con IA

Webflow facilita el diseño de un sitio y su publicación con un clic. Traducir ese sitio es donde las cosas se ralentizan.

Las opciones comunes te piden duplicar páginas en carpetas de idiomas, copiar texto dentro y fuera de una herramienta de traducción, o configurar cada idioma manualmente en el Diseñador. Eso es mucho mantenimiento para un sitio que construiste para que requiera poco mantenimiento.

La traducción con IA elimina la mayor parte de ese trabajo. Agregas una línea de código a Webflow, eliges tus idiomas y los visitantes pueden leer tu sitio en su propio idioma. Y todo esto es posible en cuestión de minutos usando Universally.

En esta guía, te mostraré cómo traducir tu sitio web de Webflow usando IA.

¿Por qué traducir tu sitio web de Webflow?

Una página bien diseñada no puede hacer su trabajo si el visitante no puede leer el contenido. Si recibes tráfico de otros países, la traducción es lo que convierte esas visitas en lectores y clientes.

El problema es que las formas habituales de hacerlo en Webflow implican trabajo adicional:

• Duplicar páginas duplica tu mantenimiento. Con el método de carpetas, cada edición de una página en inglés debe repetirse en cada carpeta de idioma.
• La opción integrada añade configuración y costo. Webflow Localize es un complemento de pago, y configuras y traduces cada idioma dentro del Diseñador.
• Los sitios de clientes necesitan una respuesta rápida. Si creas sitios de Webflow para clientes, agregar un idioma no debería significar reestructurar el proyecto.

Una herramienta de traducción con IA que se encuentra fuera de tu proyecto Webflow evita los tres problemas, y ese es el enfoque que usaré en esta guía.

Traduce tu sitio web de Webflow con Universally

Universally es una herramienta de traducción de sitios web con IA que traduce tu sitio a más de 110 idiomas utilizando IA sensible al contexto. En Webflow, se conecta con una sola etiqueta de script en el código de encabezado de todo el sitio. No hay complementos que instalar ni páginas duplicadas que mantener.

La mejor parte es que las traducciones se aplican en el navegador del visitante en las mismas páginas, en las mismas URL, por lo que tu proyecto Webflow se mantiene exactamente como lo construiste.

Universally no se limita a Webflow. También funciona con WordPress, Framer, Squarespace, Lovable y varias otras plataformas. Puedes ver la lista completa en la página de Plataformas compatibles.

Esto es lo que obtienes en un sitio de Webflow:

• Una etiqueta de script: Pegas una sola línea en el código de encabezado de Webflow. Nada más en tu proyecto cambia.
• Tu diseño se mantiene intacto: Los diseños, las interacciones y las URL permanecen iguales en cada idioma.
• Selector de idioma integrado: Aparece en la esquina inferior derecha con banderas y nombres de idiomas, y los visitantes primerizos se emparejan con el idioma de su navegador.
• Más que texto del cuerpo: Los títulos de las páginas, el contenido meta y los atributos como el texto alternativo, los marcadores de posición y las etiquetas aria-labels también se traducen.
• Lanzamiento idioma por idioma: Cada idioma permanece oculto para los visitantes hasta que lo activas.
• Glosario y edición manual: En los planes de pago, puedes bloquear términos de marca y corregir cualquier línea traducida.

Universally tiene un plan gratuito con 1 sitio web, 1 idioma y 2,000 palabras traducidas. Eso es suficiente para probarlo en algunas páginas. Los planes de pago comienzan en $7.50/mes (facturados anualmente) y agregan más palabras e idiomas, además de reglas de glosario y el editor visual.

Paso 1: Crea un Proyecto Webflow en Universally

Para comenzar, regístrate para obtener una cuenta gratuita en el sitio web de Universally. Una vez que estés en el panel, haz clic en + Agregar Proyecto.

A continuación, deberás seleccionar la plataforma en la que se encuentra tu sitio web.

Continúa y, en 'Seleccionar tu tecnología', elige Webflow.

A continuación, ingresa el Dominio de tu sitio, como ejemplo.com, y dale a tu proyecto un Nombre de Proyecto.

Luego, confirma el Idioma de Origen, que es el idioma en el que está escrito tu sitio. Por defecto es Inglés (Estados Unidos). Verifica esto, porque un idioma de origen incorrecto te dará traducciones deficientes sin ningún mensaje de error.

Simplemente haz clic en Siguiente cuando hayas terminado.

Paso 2: Agrega el Script de Universally a Webflow

Universally ahora te muestra una etiqueta de script con la clave única de tu proyecto. Se ve así:

<script src="https://scripts.universally.com/p/YOUR_PUBLIC_KEY/s.js" async></script>

Haz clic en Copiar línea.

A continuación, puedes dirigirte a tu proyecto Webflow que deseas traducir.

Simplemente haz clic en el ícono de Webflow en la esquina superior izquierda y ve a Configuración del sitio.

Después de eso, puedes ir a Código personalizado » Código de encabezado y luego pegar el script.

Asegúrate de usar el campo de código de encabezado para todo el sitio en lugar de la configuración de código personalizado de una sola página. De esa manera, el script se carga en cada página de tu sitio.

Desde aquí, haz clic en Guardar cambios y luego Publica estos cambios en tu sitio.

Nota: El código personalizado en Webflow requiere un plan de sitio activo o un plan de Espacio de trabajo Básico, Crecimiento, Agencia o Freelancer. Si no ves el campo de código de encabezado, tu plan es lo primero que debes verificar.

Cuando eso esté hecho, regresa a Universally y haz clic en Verificar conexión.

Universally carga tu página de inicio y confirma que el script está en su lugar.

Consejo profesional: Si la verificación falla, asegúrate de haber publicado después de guardar. Los cambios no publicados en Webflow no incluyen el script, y la verificación solo mira tu página de inicio.

Paso 3: Elige tus Idiomas y Lanza

Una vez confirmada la conexión, puedes elegir los idiomas que deseas ofrecer.

Continúa y haz clic en Agregar idioma.

A continuación, puedes hacer clic en el menú desplegable y seleccionar entre más de 110 idiomas.

Después de seleccionar un idioma, puedes seleccionar una Región y un Formato de URL.

Cuando hayas terminado, simplemente haz clic en Agregar idioma.

¡Eso es todo! Tu sitio web de Webflow ahora se traducirá automáticamente a los idiomas que agregaste.

Para deshabilitar un idioma, puedes desactivar el interruptor En vivo junto a él.

Esto es útil si estás trabajando en el sitio de un cliente. Puedes instalar el script con anticipación, revisar las páginas traducidas y activar cada idioma en vivo una vez que el cliente dé su aprobación. Si un mercado no está listo, desactiva su interruptor y las traducciones guardadas permanecerán donde están.

Ahora, si deseas agregar más idiomas, continúa y repite este paso.

Paso 4: Prueba tu Sitio Webflow Traducido

Para comprobar que todo funciona, abre tu sitio publicado en una ventana de navegador privada, para que no veas una versión en caché.

Deberías ver el selector de idioma en la esquina inferior derecha. Elige tu nuevo idioma y el texto de la página se cambiará.

La primera carga en un nuevo idioma puede tardar un momento mientras la página se traduce. Después de eso, las traducciones se almacenan en caché, por lo que las visitas repetidas se cargan sin esperas.

Extra: Ajusta tus Traducciones de Webflow

La traducción automática te lleva la mayor parte del camino. Estas tres configuraciones ayudan con el resto.

• Edita cualquier línea traducida. En un plan de pago de Universally, abre el Editor Visual desde la barra lateral de tu proyecto, filtra por idioma y haz clic en el texto que deseas cambiar. Esto es realmente útil si quieres asegurarte de que tu sitio se vea visualmente impresionante mientras conservas el contenido traducido.
• Mantén la coherencia de los términos de la marca. Las reglas del glosario indican a la IA que mantenga palabras como los nombres de tu marca o producto sin traducir, o que siempre traduzca un término de cierta manera. Nuestra guía sobre cómo configurar un glosario de traducción lo explica. Las reglas funcionan de la misma manera en Webflow.
• Deja parte del contenido sin traducir. Ve a Reglas de traducción y agrega los elementos que deseas omitir en el campo Selectores CSS de exclusión, uno por línea, como .pricing-table o #code-examples. También puedes agregar translate="no" a un elemento en Webflow. Ten en cuenta que la configuración Excluir páginas no se aplica a los sitios de Webflow, por lo que los selectores CSS son la solución. Para más detalles, consulta nuestra documentación sobre selectores CSS de inclusión y exclusión.

Preguntas frecuentes sobre la traducción de un sitio web de Webflow

¿Necesito un plan de pago de Webflow para usar Universally?

Universally necesita la función de código personalizado de Webflow, que requiere un plan de sitio activo o un plan de espacio de trabajo Core, Growth, Agency o Freelancer. El lado de Universally puede comenzar con el plan gratuito, que cubre 1 sitio web, 1 idioma y 2000 palabras traducidas.

¿En qué se diferencia Universally de Webflow Localize?

Webflow Localize es la función de localización integrada de Webflow, donde configuras cada idioma y administras su contenido dentro del Diseñador. Universally funciona desde fuera de tu proyecto con una etiqueta de script y traduce páginas bajo demanda con IA.

¿Afectará la traducción de mi sitio Webflow a mi SEO?

Tus clasificaciones existentes se mantienen igual, porque tus URL y páginas de origen no cambian. Los motores de búsqueda siguen viendo tu contenido en el idioma original. Eso también significa que las versiones traducidas no se indexan por separado, y Universally no agrega etiquetas hreflang en los sitios de Webflow.

¿Universally traduce el contenido CMS de Webflow?

Universally traduce el texto en el HTML de tu página publicada, lo que incluye el contenido CMS que Webflow renderiza en la página. El texto que JavaScript agrega después de que la página se carga, como algunos widgets de terceros, puede permanecer en el idioma original.

¿Puedo editar las traducciones de IA?

Cada traducción se puede editar en un plan de pago. Abre la pantalla Traducciones en tu proyecto, busca la línea y haz clic en ella para editar. Tu cambio reemplaza la versión de IA y se marca como Verificado. Universally conserva las últimas 50 versiones de cada traducción, por lo que puedes restaurar una anterior.

¿Qué no traducirá Universally en un sitio de Webflow?

Algunas cosas permanecen en tu idioma original. Estas incluyen páginas protegidas con contraseña, texto agregado por JavaScript después de que la página se carga y datos estructurados JSON-LD. También hay un límite de aproximadamente 2000 cadenas de texto por página, que la mayoría de las páginas no alcanzarán.

Una vez que el script esté instalado y tu primer idioma esté en vivo, agregar otro mercado tomará un par de clics.

Espero que este artículo te haya ayudado a aprender cómo traducir tu sitio web de Webflow usando IA. También puedes consultar nuestra guía sobre cómo configurar un glosario de traducción y cómo traducir páginas de pago de WooCommerce.

Comienza a traducir tu sitio de Webflow gratis.