Índice
Localización en Webflow: Una guía para crear sitios web multilingües
Webflow introdujo soporte de localización nativo, lo que permite a diseñadores y profesionales de marketing crear sitios web multilingües directamente desde el Webflow Designer. Esta función elimina la necesidad de plugins de traducción de terceros o de duplicar proyectos completos para cada idioma.
Esta guía explica cómo funciona la localización en Webflow, sus capacidades y limitaciones, el manejo del SEO y cómo encaja en un flujo de trabajo de localización más amplio.
Cómo funciona la localización en Webflow
La función de localización de Webflow utiliza un sistema basado en locales, donde se define un locale primario (el idioma de origen) y se agregan locales secundarios para cada idioma adicional.
Conceptos clave
- Locale primario — Tu idioma predeterminado. Todo el contenido se crea primero en el locale primario.
- Locales secundarios — Idiomas adicionales. Cada locale secundario puede reemplazar cualquier texto, imagen o visibilidad de elementos del locale primario.
- Subcarpetas de locale — Webflow genera URLs con prefijos de locale:
example.com/fr/about,example.com/de/about. - Selector de locale — Un componente integrado que permite a los visitantes cambiar de idioma.
Configuración de locales
- Abre la configuración de tu proyecto en Webflow
- Ve a la pestaña Locales
- Agrega locales secundarios seleccionando un idioma y una región
- Configura los nombres para mostrar y los prefijos de URL para cada locale
Webflow admite una amplia variedad de combinaciones idioma-región siguiendo los estándares BCP 47 (por ejemplo, en-US, fr-FR, pt-BR).
Traducción de contenido
Contenido estático
Para el contenido estático de páginas (encabezados, párrafos, botones), Webflow ofrece una experiencia de edición en contexto:
- Cambia a un locale secundario usando el selector de locale en el Designer
- Haz clic en cualquier elemento de texto — el texto del locale primario aparece como referencia
- Introduce el texto traducido directamente en el Designer
- El formato visual y los estilos se mantienen consistentes entre locales
Este enfoque en línea significa que diseñadores y traductores pueden ver exactamente cómo aparecerá el texto traducido en el diseño final, detectando de inmediato problemas de desbordamiento o de maquetación.
Contenido de CMS
Las colecciones del CMS de Webflow admiten contenido por locale:
- Cada campo del CMS puede tener valores específicos por locale
- Las páginas de colección generan automáticamente URLs con prefijo de locale
- Los campos de texto enriquecido, imágenes y otros tipos de campos son todos localizables
- Los campos de referencia y de referencia múltiple pueden localizarse para apuntar a contenido relacionado apropiado para cada locale
Por ejemplo, una colección de entradas de blog puede tener títulos, cuerpo de contenido e imágenes destacadas diferentes para cada locale, compartiendo la misma estructura de slug.
Elementos que puedes localizar
- Contenido de texto — Cualquier elemento de texto (encabezados, párrafos, enlaces, botones)
- Imágenes y texto alternativo — Intercambia imágenes por locale (útil para capturas de pantalla con interfaz localizada)
- Visibilidad de elementos — Muestra u oculta elementos específicos por locale
- URLs de enlaces — Cambia los destinos de los enlaces por locale (por ejemplo, documentación específica por locale)
- Campos de formulario — Localiza el texto de marcador de posición y las etiquetas
- Contenido de CMS — Todos los tipos de campos del CMS admiten valores por locale
Elementos compartidos
- Diseño y estructura — El diseño de página se comparte entre todos los locales
- Estilos y clases — El CSS es global
- Interacciones y animaciones — Los disparadores y animaciones se aplican a todos los locales
- Código personalizado — Los scripts embebidos se comparten (debes gestionar tú mismo la detección de idioma)
SEO y gestión multilingüe
La función de localización de Webflow gestiona automáticamente varios requisitos de SEO.
Etiquetas hreflang
Webflow genera automáticamente etiquetas hreflang en el <head> de cada página:
<link rel="alternate" hreflang="en" href="https://example.com/about" /> <link rel="alternate" hreflang="fr" href="https://example.com/fr/about" /> <link rel="alternate" hreflang="de" href="https://example.com/de/about" /> <link rel="alternate" hreflang="x-default" href="https://example.com/about" />
Estas etiquetas indican a los motores de búsqueda qué versión de idioma mostrar a los usuarios en diferentes regiones.
Sitemap
El sitemap.xml generado incluye todas las variaciones de locale de cada página, ayudando a los motores de búsqueda a descubrir e indexar todas las versiones de idioma.
Metaetiquetas por locale
Puedes establecer valores específicos por locale para:
- Título de página (
<title>) - Meta descripción
- Título y descripción de Open Graph
- Imagen de Open Graph
Esto garantiza que cada locale tenga metadatos correctamente optimizados para motores de búsqueda y redes sociales.
Limitaciones
Sin traducción automática
Webflow no incluye traducción automática integrada. Todas las traducciones deben introducirse manualmente a través del Designer o importarse mediante la API de Webflow. Esta es una decisión de diseño deliberada que prioriza la calidad, pero significa que el esfuerzo de traducción inicial recae completamente en el usuario.
Restricciones de maquetación
Dado que todos los locales comparten el mismo diseño, el texto que es significativamente más largo o más corto en ciertos idiomas puede causar problemas de maquetación. El texto en alemán suele ser un 30-40% más largo que en inglés; el texto en chino y japonés puede ser más compacto. Prueba los diseños con tu idioma de destino más largo para asegurarte de que los contenedores gestionen el desbordamiento correctamente.
Sin pluralización ni variables
La localización de Webflow no admite ICU MessageFormat, reglas de pluralización ni interpolación de variables. Cada variante de texto debe ser una cadena separada y completa. Para contenido dinámico que depende de conteos o datos del usuario, se necesitaría JavaScript personalizado.
Operaciones masivas solo mediante API
No existe importación/exportación masiva integrada para traducciones en el Webflow Designer. Para sitios grandes con cientos de páginas, traducir manualmente a través del editor visual requiere mucho tiempo. La API de Webflow admite la gestión programática de contenido, lo que permite la integración con herramientas de traducción externas.
Integración con un TMS externo
Para equipos que gestionan traducciones a gran escala, integrar Webflow con un sistema de gestión de traducciones (TMS) a través de la API permite:
- Exportar — Extraer el contenido en el idioma de origen de Webflow mediante la API del CMS
- Traducir — Los traductores profesionales trabajan en el TMS con memoria de traducción, glosarios y contexto
- Importar — Enviar de vuelta las traducciones completadas a Webflow mediante la API
Este flujo de trabajo es especialmente valioso para:
- Sitios con más de 50 páginas o elementos del CMS
- Equipos que trabajan con traductores profesionales o agencias
- Organizaciones que necesitan memoria de traducción para mantener la coherencia
- Proyectos que requieren gestión de terminología entre Webflow y otras plataformas
Mejores prácticas
Diseña para el idioma más largo
Al crear diseños, ten en cuenta la expansión del texto. Un contenedor que encaja «Sign Up» en inglés debe poder alojar «Registrieren» en alemán o «Inscription» en francés. Usa contenedores flexibles (flexbox, altura automática) en lugar de dimensiones fijas.
Usa el CMS para contenido repetido
Si el mismo texto traducido aparece en varias páginas (testimonios, descripciones de funciones, preguntas frecuentes), guárdalo en una colección del CMS. Así lo traduces una sola vez y se actualiza en todas partes, en lugar de traducir el mismo texto en cada página.
Planifica la estructura de locales con anticipación
Agregar localización a un sitio Webflow existente es posible, pero planificarlo desde el principio es más sencillo. Ten en cuenta la estructura de URLs, la ubicación del selector de locale y el comportamiento de respaldo antes de comenzar a construir.
Localiza las imágenes con texto
Si tus imágenes contienen texto (banners hero, infografías, prueba social), crea versiones específicas por locale. El intercambio de imágenes por locale en Webflow hace que esto sea sencillo.
Preguntas frecuentes
¿Cuánto cuesta la localización en Webflow?
La localización en Webflow está disponible en planes específicos de Workspace. El número de locales incluidos varía según el nivel de plan. Consulta la página de precios actualizada de Webflow para obtener los últimos detalles.
¿Puedo usar subdominios en lugar de subcarpetas?
La localización nativa de Webflow utiliza URLs basadas en subcarpetas (/fr/, /de/). La localización basada en subdominios (fr.example.com) requiere una configuración diferente mediante proyectos Webflow separados o alojamiento personalizado.
¿Funciona la localización de Webflow con Webflow Ecommerce?
A partir de 2025, la función de localización de Webflow tiene soporte limitado para Ecommerce. El contenido de productos puede localizarse, pero los precios, el proceso de pago y los correos electrónicos transaccionales tienen restricciones. Consulta la documentación de Webflow para conocer el estado actual de la localización de Ecommerce.
¿Cómo gestiono los idiomas de derecha a izquierda (RTL)?
Webflow admite la dirección de texto RTL a través de la configuración de locales. Cuando un usuario ve un locale RTL, la alineación del texto y la dirección de lectura se ajustan. Sin embargo, el espejado completo del diseño (dirección de flexbox, posiciones de márgenes) puede requerir anulaciones de CSS personalizadas.
