devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Auditoría web

Pegar SVG y HTML en Webflow: extensión gratis de devpack

Copia SVG, HTML o parte de cualquier página web, pulsa Ctrl+V (⌘+V en Mac) en el Webflow Designer y se convertirá en elementos nativos de Webflow. Es gratis, no requiere cuenta y todo se ejecuta en tu dispositivo.

Añadir a ChromeAñadir a Firefox

Edge, Brave, Opera, Vivaldi y Arc la instalan desde la Chrome Web Store.

SVG como elementos realesIconos de Figma (“Copy as SVG”), sitios de iconos, código o un archivo .svg se convierten en Custom Elements de svg y path que puedes dar estilo, o en un Code Embed.
HTML como elementos nativosLas clases se mantienen, y el CSS dentro de <style> se convierte en clases de Webflow con breakpoints, estados hover y combo classes.
Cualquier página webEl contenido copiado se convierte en Headings, Paragraphs, Lists, Links e Images, sin los estilos de la página.
Biblioteca de componentesGuarda los elementos que copies en el Designer y pégalos de nuevo con texto, enlaces e imágenes nuevos.
PrivadaSin peticiones de red ni analíticas. El único permiso es el almacenamiento.
GratisSin cuenta, sin límites y sin anuncios.

Cómo usarla

  1. Añade la extensión a tu navegador.
  2. Copia un SVG, un código HTML o parte de una página web.
  3. En el Webflow Designer, selecciona dónde debe ir y pulsa Ctrl+V (⌘+V en Mac).

Los pegados en campos de texto y editores de código, así como los elementos de Webflow reales y el texto plano, no se tocan, así que el copiar y pegar normal sigue funcionando.

Biblioteca de componentes

Copia elementos en el Designer y haz clic en Save to devpack, o pulsa Alt+Shift+L para abrir la biblioteca. Elige un componente, rellena su texto, enlaces, imágenes e iconos, y haz clic en Paste into Designer. Tú decides qué partes son editables en el Webflow Component Editor, y ambos muestran la misma biblioteca.

Ajustes

  • Actívala o desactívala.
  • Elige qué convertir: SVG, código HTML o contenido de páginas web.
  • Para SVG: elementos nativos o un Code Embed, nombre de clase, tamaño y currentColor.
  • Calibrar: pega un Custom Element copiado en los ajustes para que la extensión aprenda el formato actual de Webflow.
NavegadorInstalar desde
Chrome, Microsoft Edge, Brave, Opera, Vivaldi, ArcChrome Web Store
FirefoxFirefox Add-ons (pulsa Ctrl/⌘+V dos veces: el primer pegado deja los elementos convertidos en tu portapapeles)

Sin instalar nada

Los mismos convertidores funcionan en devpack.app: SVG a Webflow, HTML y CSS a Webflow y el Webflow Clipboard Bridge. Convierte, haz clic en Copy y pega en el Designer. Consulta todas las herramientas de Webflow.

Privacidad

La extensión solo se ejecuta en las páginas del Webflow Designer y en devpack.app. Lee el portapapeles de un pegado en el Designer para detectar SVG o HTML, lo convierte en tu dispositivo y nunca envía tu portapapeles, diseños ni actividad de navegación a ningún sitio. Los detalles están en la política de privacidad.

Preguntas

¿La extensión es gratis? Sí. Es gratuita, no necesita cuenta y no tiene límites.

¿Por qué tengo que pegar dos veces en Firefox? Firefox no permite que las extensiones entreguen el contenido convertido directamente a la página. El primer Ctrl+V deja los elementos de Webflow convertidos en tu portapapeles; el segundo los pega.

¿Puedo usarla sin instalar nada? Sí: usa la herramienta SVG a Webflow o HTML y CSS a Webflow, haz clic en Copy y pega en el Designer.