devpack
EnglishEspañolPortuguêsBahasa IndonesiaFrançaisРусскийDeutschTiếng Việt
Auditoria do site

Colar SVG e HTML no Webflow — Extensão gratuita devpack

Copie SVG, HTML ou parte de qualquer página web, pressione Ctrl+V (⌘+V no Mac) no Webflow Designer e ele vira elementos nativos do Webflow. Grátis, sem conta, e tudo roda no seu dispositivo.

Adicionar ao ChromeAdicionar ao Firefox

Edge, Brave, Opera, Vivaldi e Arc instalam a extensão pela Chrome Web Store.

SVG como elementos reaisÍcones do Figma (“Copy as SVG”), sites de ícones, código ou um arquivo .svg viram elementos Custom Element de svg e path que você pode estilizar, ou um Code Embed.
HTML como elementos nativosAs classes são mantidas, e o CSS dentro de <style> vira classes do Webflow com breakpoints, estados de hover e combo classes.
Qualquer página webO conteúdo copiado vira Headings, Paragraphs, Lists, Links e Images, sem os estilos da página.
Biblioteca de componentesSalve os elementos copiados no Designer e cole de novo com novos textos, links e imagens.
PrivadaNenhuma requisição de rede e nenhum analytics. A única permissão é o armazenamento.
GrátisSem conta, sem limites, sem anúncios.

Como usar

  1. Adicione a extensão ao seu navegador.
  2. Copie um SVG, código HTML ou parte de uma página web.
  3. No Webflow Designer, selecione onde deve ir e pressione Ctrl+V (⌘+V no Mac).

Colagens em campos de texto e editores de código, e elementos reais do Webflow ou texto simples, são deixados de lado, então copiar e colar normal continua funcionando.

Biblioteca de componentes

Copie elementos no Designer e clique em Save to devpack, ou pressione Alt+Shift+L para abrir a biblioteca. Escolha um componente, preencha os textos, links, imagens e ícones, e clique em Paste into Designer. Você escolhe quais partes são editáveis no Webflow Component Editor, e os dois mostram a mesma biblioteca.

Configurações

  • Ative ou desative.
  • Escolha o que converter: SVG, código HTML, conteúdo de páginas web.
  • Para SVG: elementos nativos ou um Code Embed, nome de classe, tamanho e currentColor.
  • Calibrar: cole um Custom Element copiado nas configurações para que a extensão aprenda o formato atual do Webflow.
NavegadorInstalar pela
Chrome, Microsoft Edge, Brave, Opera, Vivaldi, ArcChrome Web Store
FirefoxFirefox Add-ons (pressione Ctrl/⌘+V duas vezes: a primeira colagem coloca os elementos convertidos na sua área de transferência)

Sem precisar instalar

As mesmas conversões rodam no devpack.app: SVG to Webflow, HTML & CSS to Webflow e o Webflow Clipboard Bridge. Converta, clique em Copy e cole no Designer. Veja todas as ferramentas do Webflow.

Privacidade

A extensão roda apenas nas páginas do Webflow Designer e no devpack.app. Ela lê a área de transferência em uma colagem no Designer para verificar se há SVG ou HTML, converte no seu dispositivo e nunca envia sua área de transferência, seus designs ou sua atividade de navegação para lugar nenhum. Os detalhes estão na política de privacidade.

Perguntas

A extensão é grátis? Sim. É gratuita, não precisa de conta e não tem limites.

Por que preciso colar duas vezes no Firefox? O Firefox não permite que extensões entreguem conteúdo convertido diretamente à página. O primeiro Ctrl+V coloca os elementos convertidos do Webflow na sua área de transferência; o segundo os cola.

Posso usar sem instalar nada? Sim: use a ferramenta SVG to Webflow ou HTML & CSS to Webflow, clique em Copy e cole no Designer.