Como usar: Editor de Componentes Webflow
- No Designer do Webflow, selecione uma seção ou componente e pressione Ctrl/⌘+C. Clique na área de colar aqui e pressione Ctrl/⌘+V.
- Clique em um elemento no Navigator para editar seu texto, link, imagem, tag, ID, atributos personalizados e classes. A pré-visualização atualiza conforme você digita.
- Em Classes, renomeie uma classe, edite seus estilos, adicione um prefixo a todas elas ou remova classes que nenhum elemento usa. Use Desfazer para voltar um passo.
- Para reutilizar, clique em Sugerir props (ou em Criar prop ao lado de um campo), dê nome às props e clique em Salvar na biblioteca. Da próxima vez, abra o componente em Sua biblioteca, preencha as props e copie.
- Clique em Copiar para o Webflow, abra o outro projeto, selecione onde o elemento deve ir e pressione Ctrl/⌘+V. Baixar .json guarda uma cópia para usar depois.
Copie componentes entre projetos do Webflow — e altere no caminho
O Webflow já permite copiar elementos de um projeto e colar em outro no mesmo navegador. O que ele não permite é alterar no meio do caminho: renomear classes que conflitam com o guia de estilos do outro projeto, trocar o texto, corrigir links que apontam para o site antigo ou remover partes que você não precisa. Este editor fica no meio. Ele lê os dados da área de transferência do Webflow, mostra tudo como o Designer mostra, deixa você editar e coloca de volta na área de transferência no mesmo formato.
- Navigator e propriedades — cada elemento com seu tipo, classes e texto. Edite textos, URLs de links e a opção “abrir em nova aba”, fontes e textos alternativos de imagens, níveis de títulos e tags de seção, o ID e os atributos personalizados, ou exclua um elemento com tudo o que tem dentro.
- Classes com seus estilos — renomeie qualquer classe, edite os estilos base, veja quais elementos a usam e remova as que ninguém usa. Os estilos de breakpoint e hover acompanham a classe.
- Prefixo de classe — adicione
acme-(ou qualquer prefixo) a todas as classes de uma vez, para que as classes coladas não se misturem nem sejam confundidas com as que já existem no outro projeto. - Props e biblioteca — marque como props os textos, links, imagens, ícones e alternâncias de mostrar/ocultar que mudam entre um uso e outro, salve o componente na sua biblioteca neste navegador e, da próxima vez, preencha só um formulário curto. As props acompanham o .json baixado; elas ficam de fora quando você copia para o Webflow, que cola apenas elementos simples.
- Pré-visualização ao vivo em largura de desktop, tablet e celular, montada a partir dos estilos das classes.
- Avisos para as partes que não se movem sem problemas: interações, componentes desvinculados ao copiar, vínculos de CMS removidos e imagens que estão na biblioteca de assets do projeto antigo.
- Nada é enviado — os dados ficam no seu navegador. Seu último componente fica guardado neste dispositivo, então recarregar a página não o apaga.
Webflow aberto em outro navegador? O Webflow Clipboard Bridge move elementos entre navegadores. Está criando algo novo a partir de código? Use HTML & CSS para Webflow ou SVG para Webflow. Confira os nomes das classes com o Verificador de Erros de Digitação em Classes.
Também pesquisado como: copiar componente webflow para outro projeto, webflow copiar e colar entre projetos, copiar seção webflow para outro site, editar clipboard webflow, prefixo de classe webflow, renomear classes webflow, biblioteca de componentes webflow, webflow components.
Ferramentas que combinam com: Editor de Componentes Webflow
- Gerador de Classes Webflow — Descreva uma seção com palavras simples — “hero com slogan, título, dois botões e uma imagem à direita” — e receba uma estrutura de classes consistente em Client-First, BEM ou kebab-case simples, pronta para copiar para o Webflow como elementos.
- Figma CSS para Webflow — Transforme a saída de “Copy as CSS” do Figma em valores organizados que você pode digitar direto no painel Style do Webflow.
- Redirecionamentos WordPress para Webflow — Ao migrar um site do WordPress para o Webflow, quase todas as URLs mudam: caminhos de posts com data, arquivos /category/, barras no final e slugs de páginas.
- Markdown para Rich Text do Webflow — Cole o Markdown, confira a prévia e copie como rich text formatado — títulos, listas, links e negrito chegam corretos no elemento Rich Text do Webflow.
Perguntas frequentes
Como copio uma seção de um projeto Webflow para outro?
Selecione a seção no Designer e pressione Ctrl/⌘+C, abra o outro projeto no mesmo navegador, selecione onde ela deve ir e pressione Ctrl/⌘+V. Para alterar antes, cole aqui no editor, edite e clique em Copiar para o Webflow antes de colar.
O que acontece com nomes de classes que já existem no outro projeto?
O Webflow associa as classes coladas às existentes pelo nome, então uma classe “button” colada pode herdar ou entrar em conflito com os estilos de botão do outro projeto. Adicione um prefixo aqui ou renomeie a classe para mantê-las separadas.
Interações e componentes vêm junto?
As interações estão nos dados da área de transferência e normalmente são coladas junto com os elementos, mas confira os gatilhos depois. Componentes são desvinculados ao serem copiados, então chegam como elementos simples; o editor informa quantos são.
As imagens vêm junto?
Imagens que estão na biblioteca de assets do projeto de origem são referenciadas por URL e normalmente são reenviadas pelo Webflow ao colar. Se alguma imagem falhar, troque a fonte aqui por uma URL que você controle.
Posso copiar um componente com suas propriedades para outro projeto?
Não pela área de transferência: o Webflow desvincula os componentes ao copiá-los e deixa as propriedades de fora. Aqui você pode recriar isso como props do devpack: preencha, copie e depois escolha Criar componente no outro projeto se quiser um componente do Webflow de novo. O recurso Libraries do Webflow compartilha componentes reais entre sites de um workspace, em planos que incluem essa função.
Onde fica guardada a minha biblioteca de componentes?
No armazenamento local deste navegador, apenas neste dispositivo. Use Baixar .json para guardar uma cópia de segurança ou levar um componente para outro computador, e abra o arquivo aqui para continuar.
Esta é uma ferramenta oficial do Webflow?
Não. O devpack é independente. Ele trabalha com os dados da área de transferência que o Designer cria quando você copia elementos, e o Webflow pode alterar esse formato a qualquer momento.
Posso instalar o Editor de Componentes Webflow como um aplicativo da web e usá-lo offline?
Sim. O Editor de Componentes Webflow é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.