Visão geral dos componentes - Ajuda do Webflow

Use componentes para gerenciar layouts e conteúdos recorrentes de forma mais eficiente em todo o seu site.

Os componentes dão a você o poder de criar blocos personalizáveis a partir de elementos e elementos filhos para manter um fluxo de trabalho de design consistente, eficiente e escalável. Você pode reutilizar esses blocos em todo o seu site e modificá-los em um único lugar para evitar revisar individualmente cada layout recorrente.

Como criar um componente

Você pode criar componentes visualmente no Webflow ou importar componentes existentes de uma base de código externa com o DevLink. Esta seção está focada no desenvolvimento visual.

Você pode criar um componente a partir de um elemento ou grupo de elementos e escolher se cada instância é idêntica em todo o seu site ou permite alterações em seu conteúdo, layout ou estilo:

• Conteúdo e design idênticos por instância — crie um componente para layouts recorrentes (por exemplo, barras de navegação e rodapés) para reutilizar em todo o seu site. Quaisquer alterações no conteúdo ou design atualizam automaticamente todas as instâncias do componente.
• Conteúdo único por instância — crie um componente com um layout e design consistentes, mas permita que cada instância tenha conteúdo diferente (por exemplo, um layout de seção de destaque que pode ter texto, imagens ou vídeos únicos por instância) usando propriedades e slots de componente.
• Diferentes variantes de estilo por instância — crie um componente com opções de estilo e layout predefinidas (por exemplo, botões sólidos e contornados, ou layouts de cartão horizontais e verticais). As variantes de estilo de componente permitem personalizar o design de cada instância sem precisar criar componentes separados.

Para criar um componente:

1. Selecione o elemento que você deseja transformar em um componente
2. Abra o painel de Componentes, painel de Estilo ou painel de Configurações de Elemento
3. Clique no ícone “criar componente” no topo do painel
4. Dê um nome e uma descrição opcional ao seu componente e clique em Criar

Você também pode duplicar um componente existente selecionando o componente, clicando nos "três pontos" de mais opções e escolhendo Duplicar.

Você estará dentro do componente principal após criar um componente — o que significa que qualquer alteração no componente principal será atualizada em todas as instâncias desse componente. A qualquer momento, você pode entrar no componente principal em qualquer instância de componente por:

• Dando um duplo clique na instância do componente
• Clicando com o botão direito na instância e clicando em Editar componente
• Selecionando a instância e clicando no ícone de "lápis" no rótulo
• Selecionando a instância e clicando no ícone de "chave inglesa" no canto superior direito do painel direito

Saiba mais sobre como editar o componente principal.

Como usar e reutilizar um componente

Depois de criar um componente, você pode reutilizá-lo em qualquer lugar do seu site:

1. Abra o painel de Componentes
2. Passe o mouse sobre um componente para ver uma pré-visualização
3. Clique e arraste o componente desejado para qualquer página do seu site
4. Solte a instância do componente diretamente na tela ou no Navegador

Quando você seleciona uma instância de componente, verá que ela está destacada e contornada em verde. Abra o painel de Componentes para ver quantas vezes cada um dos seus componentes foi usado no seu site.

Para visualizar a hierarquia de elementos de um componente no painel Navegador, mantenha pressionado Option + duplo clique (no Mac) ou mantenha pressionado Alt + duplo clique (no Windows) no componente, ou clique no ícone "editar componente principal". Você só poderá ver a hierarquia de elementos do componente a partir do componente principal (não dentro de uma instância de componente).

Como editar um componente

Vamos explorar as várias maneiras de interagir e editar um componente:

• Editar o componente principal
• Propriedades, slots e variantes de estilo do componente
• Criar variantes de estilo do componente
• Gerenciar a propriedade de variante
• Alterar a variante de uma instância de componente
• Reordenar, renomear, duplicar ou excluir variantes de estilo do componente
• Sair do componente principal
• Editar componentes no Editor
• Alterar o nome ou descrição de um componente
• Agrupar componentes
• Excluir um componente

Editar o componente principal

Para fazer as mesmas alterações em todas as instâncias de um componente, você precisará editar o componente principal. Você pode editar o componente principal em qualquer instância de componente por:

• Dando um duplo clique na instância do componente na tela
• Mantendo pressionado Option + duplo clique (Mac) ou Alt + duplo clique (Windows) na instância no Navegador
• Clicando com o botão direito na instância e clicando em Editar componente
• Selecionando a instância e clicando no ícone “editar componente” no rótulo
• Selecionando a instância e clicando no ícone “editar componente” no topo do painel direito

Edições no componente principal afetarão todas as instâncias do componente (a menos que essa instância tenha propriedades de componente aplicadas a elementos específicos dentro do componente). Ao editar o componente principal, você pode alterar a estrutura e a ordem dos elementos para afetar simultaneamente todas as instâncias de componentes no seu site.

Propriedades, slots e variantes de estilo do componente

Propriedades do componente (props), slots e variantes de estilo permitem criar configurações únicas em cada instância de um componente:

• Props — conecte configurações de elementos individuais no componente principal (por exemplo, texto, links, imagens ou vídeos) aos props. Isso permite personalizar essas configurações em cada instância sem alterar a estrutura ou design geral do componente. Props também podem ser conectados a campos do CMS para puxar dinamicamente conteúdo das suas Coleções CMS.
• Slots — slots são elementos que você pode colocar em componentes existentes que atuam como espaços reservados para outros componentes. Isso permite construir componentes de forma modular, onde cada instância pode incluir diferentes componentes no slot.
• Variantes de estilo — definem várias opções de design para um único componente, permitindo adaptar sua aparência para diferentes casos de uso. Por exemplo, você pode oferecer variantes de estilo como botões sólidos ou contornados, ou layouts de cartão horizontal e vertical.

Criar variantes de estilo de componente

Você pode criar variantes de um componente com diferentes layouts, cores, estilos de fonte etc. (por exemplo, botões sólidos ou contornados, ou layouts de cartão horizontal e vertical) e escolher qual variante usar em cada instância do seu componente em todo o seu site.

Para criar uma variante de estilo de componente:

1. Edite o componente principal
2. Vá para o painel de Estilo
3. Clique no ícone de “variantes de componente” no seletor de Estilo
4. Clique no ícone de “mais”
5. Dê um nome único à variante
6. Pressione Enter/Return para confirmar

Gerenciar a propriedade de variante

Quando você cria uma variante de estilo de componente, uma propriedade de variante é criada automaticamente para esse componente. Você pode alterar o nome da propriedade de variante, adicioná-la a um grupo de propriedades e definir uma variante padrão para o componente no painel de Propriedades.

Para alterar o nome da propriedade de variante:

1. Edite o componente principal
2. Vá para o painel de Propriedades
3. Clique na propriedade de Variante
4. Insira um nome de propriedade único
5. Pressione Enter/Return para confirmar

Para adicionar a propriedade de variante a um grupo de propriedades:

1. Edite o componente principal
2. Vá para o painel de Propriedades
3. Clique na propriedade de Variante
4. Selecione um grupo ou insira um nome único para criar um novo grupo
5. Clique em Criar ou pressione Enter/Return para confirmar

Definir uma variante padrão para um componente:

1. Edite o componente principal
2. Vá para o painel de Propriedades
3. Clique na propriedade de Variante
4. Escolha uma variante no menu suspenso de Padrões

Alterar a variante de uma instância de componente

Assim como outras propriedades de componente, você pode escolher a variante de estilo para cada instância de um componente. Para alterar a variante de uma instância de componente:

1. Clique uma vez no componente para abrir o painel de Propriedades
2. Escolha a variante para esta instância no menu suspenso de Variantes

Reordenar, renomear, duplicar ou excluir variantes de estilo de componente

No modo de design, você pode gerenciar variantes de estilo de componente (reordenar, renomear, duplicar ou excluir variantes).

Para reordenar as variantes de um componente:

1. Edite o componente principal
2. Vá para o painel de Estilo
3. Clique no ícone de “variantes de componente” no seletor de Estilo
4. Clique e arraste uma variante para movê-la para uma nova posição

Para renomear uma variante:

1. Edite o componente principal
2. Vá para o painel de Estilo
3. Clique no ícone de “variantes de componente” no seletor de Estilo
4. Passe o mouse sobre a variante e clique no ícone de “mais opções”
5. Clique em Renomear
6. Insira um novo nome de variante exclusivo
7. Pressione Enter/Return para confirmar

Para duplicar uma variante:

1. Edite o componente principal
2. Vá para o painel de Estilo
3. Clique no ícone de “variantes de componente” no seletor de Estilo
4. Passe o mouse sobre a variante e clique no ícone de “mais opções”
5. Clique em Duplicar
6. Insira um novo nome de variante exclusivo
7. Pressione Enter/Return para confirmar

Para excluir uma variante:

1. Edite o componente principal
2. Vá para o painel de Estilo
3. Clique no ícone de “variantes de componente” no seletor de Estilo
4. Passe o mouse sobre a variante e clique no ícone de “mais opções”
5. Clique em Excluir
6. Clique em Excluir no modal pop-up para confirmar

Sair do componente principal

Depois de terminar de editar o componente principal, você pode sair do componente principal:

• Clicando na seta “voltar” no canto superior esquerdo do Designer
• Clicando fora do componente na tela
• Pressionando Escape no teclado

Editar componentes no Editor

Se você convidou editores de conteúdo para atualizar o conteúdo do seu site no Editor, quaisquer alterações que eles façam em elementos de componentes que não são modificados com uma propriedade de componente e são consistentes em todas as instâncias, serão aplicadas a todas as outras instâncias.

Alternativamente, se o editor de conteúdo fizer alterações em elementos de componentes que são modificados por meio de uma propriedade de componente, essas alterações serão aplicadas apenas à instância do componente que estão editando.

Alterar o nome ou descrição de um componente

Para alterar o nome ou descrição de um componente:

1. Abra o painel de Componentes
2. Passe o mouse sobre o nome de um componente e clique nos pontos de “mais opções” que aparecem
3. Clique em Editar configurações
4. Faça suas alterações e Salve

Renomear uma instância de componente

Você pode renomear instâncias individuais de componentes para torná-las mais fáceis de identificar — isso é especialmente útil ao reutilizar o mesmo componente várias vezes em uma página.

Para renomear uma instância de componente:

• No Navegador ou no topo do painel direito:

1. Clique duas vezes no nome do componente
2. Digite o novo nome
3. Pressione Enter ou clique fora para salvar seu nome personalizado

• Na tela:

1. Clique com o botão direito na instância do componente
2. Clique em Renomear
3. Digite o novo nome
4. Pressione Enter ou clique fora para salvar seu nome personalizado

Para redefinir o nome de volta ao nome original do componente, exclua o nome personalizado durante a renomeação ou clique com o botão direito na instância no Navegador ou na tela e clique em Redefinir nome.

Agrupar componentes

Para organizar seus componentes em grupos:

1. Abra o painel de Componentes
2. Passe o mouse sobre o nome de um componente e clique nos pontos de “mais opções” que aparecem
3. Escolha Editar configurações
4. Escolha um grupo existente no menu suspenso Grupo, ou digite para criar um novo grupo

Para renomear ou desagrupar um grupo de componentes, passe o mouse sobre o título do grupo e clique nos três pontos de "mais opções".

Excluir um componente

Para excluir completamente um componente:

1. Remova ou desvincule todas as instâncias do componente do seu site
2. Abra o painel de Componentes
3. Passe o mouse sobre o nome de um componente e clique nos três pontos de "mais opções" que aparecem
4. Escolha Editar configurações
5. Clique em Excluir e confirme

Como desvincular uma instância de componente de seu componente principal

Para desvincular uma instância de componente e fazer alterações nela independentemente do componente principal:

1. Clique com o botão direito em qualquer elemento de componente na instância que você deseja desvincular
2. Clique em Desvincular instância

Uma vez desvinculada, se você editar qualquer outra instância vinculada desse componente em seu design, ela não alterará a instância desvinculada.

Compartilhando componentes entre sites com Bibliotecas

Você pode compartilhar componentes nativos e de código entre sites em um Workspace com Bibliotecas. Isso pode acelerar seu fluxo de trabalho e aprimorar seu sistema de design, fornecendo um único local para atualizar componentes usados em vários sites no seu Workspace.

Voltar para a ajuda do webflow