Framer multilingüe: cómo añadir idiomas a tu sitio de Framer (2026)
Framer es una de las formas más rápidas de pasar del diseño a un sitio web en vivo. Pero cuando necesitas llegar a visitantes en varios idiomas, tienes dos opciones distintas: la función integrada de Localización de Framer, o añadir traducción automática mediante una etiqueta de script. Esta guía cubre ambos enfoques: cómo funcionan, dónde encaja cada uno y cómo configurarlos mediante un flujo guiado.
La localización integrada de Framer
Framer tiene una función nativa de Localización disponible en la configuración del sitio. Una vez activada, añades variantes de locale a tu proyecto, por ejemplo inglés, francés y alemán, y Framer crea versiones por locale de cada página dentro del diseñador. Luego traduces el texto capa por capa, ya sea escribiendo directamente o importando contenido traducido.
La principal ventaja de Framer Localization es su estrecha integración con la plataforma. Las páginas traducidas se publican con rutas de URL con prefijo de locale de forma predeterminada (/fr/, /de/) y Framer gestiona el enrutamiento automáticamente. Las colecciones de Framer CMS pueden tener entradas específicas por locale, dándote control editorial completo por idioma.
Sin embargo, hay compensaciones importantes a considerar:
Requiere un plan Pro o superior
Framer Localization no está disponible en el plan gratuito. Necesitas un plan de pago de Framer para activarlo, lo que supone un coste adicional a considerar para proyectos pequeños o productos en etapa temprana.
Cada página debe mantenerse por locale
Añadir un nuevo idioma significa que cada página de tu proyecto de Framer gana una variante de locale que necesita contenido traducido. A medida que tu sitio crece — más páginas, más componentes, más elementos del CMS — la superficie de traducción crece proporcionalmente. Un sitio de cincuenta páginas en cinco idiomas significa doscientas cincuenta variantes de locale que mantener sincronizadas.
Los elementos del CMS deben duplicarse por locale
El contenido de Framer CMS — publicaciones de blog, casos de estudio, miembros del equipo — requiere una entrada separada por cada locale. Las publicaciones de blog traducidas son elementos de CMS distintos, no traducciones automáticas de la entrada del locale principal. Para sitios con mucho contenido, esto supone un compromiso editorial significativo.
Traducción automática con una etiqueta de script
Un widget de traducción basado en el DOM adopta un enfoque fundamentalmente diferente. En lugar de gestionar las traducciones dentro de Framer, traduce el sitio publicado automáticamente: observa el texto renderizado en el navegador y lo reemplaza por el idioma de destino en tiempo real.
Añades una única etiqueta de script en Framer mediante Site Settings → General → Custom Code → End of body. Desde ese momento, cada página, colección del CMS y componente queda cubierto sin cambios de diseño ni duplicación por locale.
Sin duplicación de diseño
Tu proyecto de Framer se mantiene exactamente igual. Añadir un nuevo idioma toma segundos en el panel de traducción: sin trabajo de diseño adicional, sin nuevas entradas de CMS, sin necesidad de volver a publicar.
Requiere acceso a Custom Code
Confirma que tu plan y espacio de trabajo actuales de Framer permiten Custom Code a nivel de sitio antes de elegir la ruta de etiqueta de script.
Usa el enrutamiento de Framer para el SEO multilingüe
La traducción general en tiempo de ejecución de Lingvit no inyecta hreflang ni crea URL de locale indexables en el lanzamiento. Usa las funciones de publicación de Framer para las URL de locale, los metadatos traducidos, las canónicas y el hreflang recíproco.
Traducción del lado del cliente
A diferencia de Framer Localization, las traducciones se aplican en el navegador en lugar de renderizarse en servidor por locale. Esta es la principal compensación: el HTML de origen es el mismo para todos los visitantes; el cambio de idioma ocurre al cargar. Para la mayoría de sitios de marketing y portafolios, esto no supone un inconveniente significativo.
Paso a paso: añade Lingvit a tu sitio de Framer
- 1
Crea un proyecto de Lingvit
Regístrate en app.lingvit.com, crea un nuevo proyecto e introduce el dominio de tu sitio de Framer. Copia la etiqueta de script desde la configuración del proyecto.
- 2
Abre la configuración de Custom Code de Framer
En Framer, ve a Site Settings → General → Custom Code y busca el campo End of body.
- 3
Pega la etiqueta de script
Pega el script de tu proyecto de Lingvit en el campo End of body. Se ve así:
<script src="https://cdn.lingvit.com/widget.bundle.js" data-project-id="YOUR_PROJECT_ID" defer ></script> - 4
Publica tu sitio de Framer
Haz clic en Publish en la barra de herramientas de Framer. El script ya está activo en tu sitio publicado.
- 5
Selecciona los idiomas en el panel de Lingvit
De vuelta en el panel de Lingvit, elige tus idiomas de destino. El selector de idioma aparece en tu sitio de Framer en vivo de inmediato. Las traducciones se generan al solicitarse por primera vez y se almacenan para su reutilización posterior. El tiempo de generación y entrega depende de la página, el navegador, la red y la respuesta del proveedor.
Framer CMS y la traducción
El contenido de Framer CMS —publicaciones de blog, casos de estudio, miembros del equipo, listados de productos— está vinculado dinámicamente a los elementos de la página. Cuando Framer renderiza una página de colección del CMS, los datos pasan a formar parte del DOM igual que cualquier otro texto de la página.
El enfoque de traducción automática observa el DOM renderizado en lugar de leer el modelo de datos interno de Framer. Esto significa que el texto vinculado al CMS se captura y traduce automáticamente, sin configuración adicional. Cada publicación de blog, cada elemento de colección, cada campo poblado dinámicamente queda incluido.
Con Framer Localization, en cambio, los elementos del CMS necesitan entradas duplicadas para cada locale. Una publicación de blog en inglés y francés requiere dos elementos de CMS: los escribes y mantienes ambos. Para equipos que publican con frecuencia, esta duplicación por locale se convierte en una sobrecarga editorial significativa.
¿Qué enfoque encaja en tu proyecto?
| Factor | Framer Localization | Traducción automática |
|---|---|---|
| Método de traducción | Manual (escribir o importar por locale) | Automático + revisiones editoriales |
| Tiempo de configuración | Horas a días | Configuración guiada de código personalizado |
| Plan de Framer requerido | Pro o superior | Starter en adelante |
| Gestión del CMS | Elementos duplicados por locale | Automática mediante observación del DOM |
| Renderizado | Renderizado en servidor por locale | Del lado del cliente al cargar |
| Añadir un nuevo idioma | Requiere trabajo de traducción por página | Un clic en el panel |
Desplázate horizontalmente para ver cada columna.
Elige Framer Localization si necesitas páginas multilingües totalmente renderizadas en servidor, requieres imágenes por locale o entradas de CMS específicas por locale, y ya tienes un plan Framer Pro con los recursos editoriales para mantener cada locale.
Elige la traducción automática si quieres lanzarte en varios idiomas rápidamente, sin duplicación de diseño ni sobrecarga de CMS por locale. Es especialmente adecuada para sitios de marketing, portafolios y páginas de destino de SaaS donde el tiempo de salida al mercado importa más que el enrutamiento de locale renderizado en servidor.
Preguntas frecuentes
- ¿Necesito un plan Framer Pro para la traducción automática?
- No, la inyección de Custom Code está disponible desde el plan Starter en adelante. No necesitas un plan Framer Pro para añadir un script de traducción mediante Custom Code.
- ¿Traduce las páginas de colección de Framer CMS?
- Sí, todo el contenido del DOM renderizado, incluido el contenido vinculado al CMS, se observa y se traduce. Como el widget de traducción lee la página después de que Framer la renderiza, los elementos de colección del CMS se capturan automáticamente sin ninguna configuración especial.
- ¿Entrará en conflicto con Framer Localization si ya lo tengo activado?
- Son sistemas independientes y pueden coexistir, aunque normalmente usarías uno u otro. Ejecutar ambos simultáneamente puede producir una interfaz de selector de idioma redundante y no se recomienda para un sitio en producción.
- ¿Gestiona el SEO de las páginas traducidas?
- No mediante el enrutamiento general en tiempo de ejecución de Lingvit en el lanzamiento. Usa las propias URL de locale y metadatos de Framer para páginas de idioma indexables; Lingvit puede traducir la experiencia renderizada en el navegador.
Guías relacionadas
Traduce tu sitio de Framer
Añade Lingvit a un sitio de Framer elegible mediante Custom Code. Planes de suscripción mensual disponibles.