Cómo usar: Editor de componentes de Webflow
- En el Designer de Webflow, selecciona una sección o componente y pulsa Ctrl/⌘+C. Haz clic en la zona de pegado de aquí y pulsa Ctrl/⌘+V.
- Haz clic en un elemento del Navigator para editar su texto, enlace, imagen, etiqueta, ID, atributos personalizados y clases. La vista previa se actualiza mientras escribes.
- En Clases, renombra una clase, edita sus estilos, añade un prefijo a todas o elimina las clases que no usa ningún elemento. Deshacer retrocede un paso.
- Para reutilizarlo, haz clic en Sugerir props (o en Crear prop junto a un campo), ponles nombre y pulsa Guardar en la biblioteca. La próxima vez, ábrelo desde Tu biblioteca, rellena las props y copia.
- Haz clic en Copiar a Webflow, abre el otro proyecto, selecciona dónde debe ir y pulsa Ctrl/⌘+V. Descargar .json guarda una copia para reutilizarla más adelante.
Copia componentes entre proyectos de Webflow y modifícalos por el camino
Webflow ya permite copiar elementos de un proyecto y pegarlos en otro en el mismo navegador. Lo que no permite es cambiarlos en medio: renombrar clases que chocan con la guía de estilos del otro proyecto, cambiar el texto, corregir enlaces que apuntan al sitio antiguo o quitar las partes que no necesitas. Este editor se sitúa en medio. Lee los datos del portapapeles de Webflow, los muestra como lo hace el Designer, te deja editarlos y los devuelve al portapapeles en el mismo formato.
- Navigator y propiedades: cada elemento con su tipo, clases y texto. Edita el texto, las URL de los enlaces y la opción de “abrir en una pestaña nueva”, las fuentes y textos alternativos de las imágenes, los niveles de encabezado y las etiquetas de sección, el ID y los atributos personalizados, o elimina un elemento con todo lo que contiene.
- Clases con sus estilos: renombra cualquier clase, edita sus estilos base, mira qué elementos la usan y elimina las que nadie usa. Los estilos de breakpoint y de hover viajan con la clase.
- Prefijo de clase: añade
acme-(o el prefijo que quieras) a todas las clases de una vez, para que las clases pegadas no se mezclen ni se confundan con las que ya existen en el otro proyecto. - Props y biblioteca: marca como props los textos, enlaces, imágenes, iconos y los interruptores de mostrar/ocultar que cambian entre usos, guarda el componente en tu biblioteca de este navegador y, la próxima vez, solo tendrás que rellenar un formulario corto. Las props viajan con el .json descargado; al copiar a Webflow no se incluyen, porque Webflow pega elementos simples.
- Vista previa en vivo con anchos de escritorio, tableta y móvil, creada a partir de los estilos de clase.
- Avisos para las partes que no se trasladan limpiamente: interacciones, componentes que estaban desvinculados al copiarlos, enlaces a CMS eliminados e imágenes que están en la biblioteca de recursos del proyecto antiguo.
- Nada se sube: los datos se quedan en tu navegador. Tu último componente se guarda en este dispositivo para que recargar la página no lo borre.
¿Tienes Webflow abierto en otro navegador? El Webflow Clipboard Bridge mueve elementos entre navegadores. ¿Vas a crear algo nuevo desde código? Usa HTML & CSS to Webflow o SVG to Webflow. Revisa los nombres de clase con el Class Name Typo Checker.
También se busca como: editor de componentes webflow, copiar componente webflow a otro proyecto, copiar y pegar webflow entre proyectos, copiar sección webflow a otro sitio, editar portapapeles webflow, prefijo de clase webflow, renombrar clases webflow, biblioteca de componentes webflow.
Herramientas que combinan con: Editor de componentes de Webflow
- Generador de nombres de clase — Describe una sección con tus propias palabras, por ejemplo “hero con eslogan, título, dos botones y una imagen a la derecha”, y obtén una estructura de clases coherente en Client-First, BEM o kebab-case simple, lista para copiar en Webflow como elementos.
- Figma CSS a Webflow — Convierte la salida de “Copy as CSS” de Figma en valores ordenados que puedes escribir directamente en el panel Style de Webflow.
- Redirecciones de WordPress a Webflow — Migrar un sitio de WordPress a Webflow cambia casi todas las URLs: rutas de blog con fecha, archivos /category/, barras finales y slugs de páginas.
- Markdown a Webflow Rich Text — Pega Markdown, revisa la vista previa y cópialo como texto con formato: títulos, listas, enlaces y negritas se pasan correctamente al elemento Rich Text de Webflow.
Preguntas frecuentes
¿Cómo copio una sección de un proyecto de Webflow a otro?
Selecciona la sección en el Designer y pulsa Ctrl/⌘+C, abre el otro proyecto en el mismo navegador, selecciona dónde debe ir y pulsa Ctrl/⌘+V. Si quieres cambiarla antes, pégala en este editor, edítala y haz clic en Copiar a Webflow antes de pegar.
¿Qué pasa con los nombres de clase que ya existen en el otro proyecto?
Webflow relaciona las clases pegadas con las existentes por nombre, así que una clase “button” pegada puede tomar o chocar con los estilos de botón del otro proyecto. Añade un prefijo aquí, o renombra la clase, para mantenerlas separadas.
¿Vienen las interacciones y los componentes?
Las interacciones están incluidas en los datos del portapapeles y normalmente se pegan junto con los elementos, pero revisa sus disparadores después. Los componentes se desvinculan al copiarlos, así que se pegan como elementos simples; el editor te indica cuántos son.
¿Vienen las imágenes?
Las imágenes que están en la biblioteca de recursos del proyecto de origen se referencian por URL y, normalmente, Webflow las vuelve a subir al pegar. Si una imagen falla, cambia aquí su origen por una URL que controles.
¿Puedo copiar un componente con sus propiedades a otro proyecto?
No a través del portapapeles: Webflow desvincula los componentes al copiarlos y deja fuera sus propiedades. Aquí puedes reconstruirlo como props de devpack: rellénalas, copia y, si quieres un componente de Webflow otra vez, elige Crear componente en el otro proyecto. La función Libraries de Webflow comparte componentes reales entre sitios de un workspace, en los planes que la incluyen.
¿Dónde se guarda mi biblioteca de componentes?
En el almacenamiento local de este navegador, solo en este dispositivo. Usa Descargar .json para tener una copia de seguridad o para llevar un componente a otro ordenador, y abre el archivo aquí para seguir trabajando con él.
¿Es esta una herramienta oficial de Webflow?
No. devpack es independiente. Funciona con los datos del portapapeles que genera el Designer al copiar elementos, y Webflow podría cambiarlos en cualquier momento.
¿Puedo instalar Editor de componentes de Webflow como aplicación web y utilizarla sin conexión?
Sí. Editor de componentes de Webflow es una aplicación web instalable (PWA): se instala desde el navegador, no se descarga desde una tienda de aplicaciones. Haz clic en «Instalar aplicación» en la parte superior de esta página en Chrome o Edge (Windows, macOS, Linux, ChromeOS) o, en Android, utiliza «Compartir» → «Añadir a la pantalla de inicio» en iPhone y iPad, o «Archivo» → «Añadir al Dock» en Safari 17+ en un Mac. A continuación, se abrirá en su propia ventana con su propio icono y, como se ejecuta íntegramente en tu navegador, seguirá funcionando sin conexión. Firefox en el ordenador de sobremesa no permite instalar aplicaciones web. Cómo funciona la instalación.