---
url: "/pt/weblify/build/site-builder.md"
description: "Crie páginas do Weblify a partir de templates, seções, elementos e estruturas básicas de layout responsivo."
---

# Criar um site no Figma

> Crie páginas do Weblify a partir de templates, seções, elementos e estruturas básicas de layout responsivo.

As abas **Add**, **Navigator** e **Style** do Weblify criam e editam páginas de sites como camadas editáveis do Figma. As camadas geradas guardam os metadados do Weblify para que o plugin possa pré-visualizá-las, auditá-las e exportá-las como um site estático.

## Começar uma página {#start-a-page}

1. Abra a aba **Navigator**, insira um nome em **New page name** e selecione **Add page**. Ou abra a aba **Add**, escolha **Templates** e selecione um template para adicioná-lo como uma nova página com o nome do template.
2. Selecione a página gerada no canvas do Figma, ou selecione-a em **Navigator**, antes de adicionar conteúdo.

Se nada estiver selecionado, o Weblify usa a primeira página do Weblify que encontrar ou cria uma página chamada **Home**. A linha abaixo dos filtros na aba **Add** mostra onde o novo conteúdo será inserido.

## Adicionar seções e elementos {#add-sections-and-elements}

A aba **Add** é uma única biblioteca com busca. Use os filtros **Templates**, **Sections**, **Elements** e **Layouts** ou pesquise pelo nome. Use **Sections** para áreas completas da página, como navegação, hero, conteúdo, preços, formulários e rodapés. Use **Elements** para componentes individuais. Selecione um item para inseri-lo.

Selecione uma página, seção ou coluna do Weblify antes de inserir um item. Assim, o Weblify tem um pai previsível e a estrutura exportada continua intacta.

Marque um item com estrela para adicioná-lo a **Favourites**. Para reutilizar uma das suas próprias seções, abra o menu **⋯** dela em **Navigator** e escolha **Save to My sections**; ela passa a aparecer em **My sections** na aba **Add**.

## Editar a estrutura {#edit-the-structure}

A aba **Navigator** lista suas páginas e as seções da página atual. Você pode:

- Adicionar páginas, arrastar páginas e seções para reordená-las e usar o menu **⋯** para renomear, duplicar, ocultar ou excluir essas páginas e seções, ou para definir a página inicial.
- Selecionar o botão **⚙** ao lado de uma página para editar a URL e os metadados de busca dela e, em seguida, selecionar **Save page**.
- Usar o menu **⋯** de uma seção para mostrá-la em todas as páginas como cabeçalho ou rodapé.

Os metadados da página incluem o título, a descrição, a URL canônica, os campos de compartilhamento em redes sociais, o favicon, o tipo de card do Twitter e a configuração para mecanismos de busca.

Para configurar como uma seção, linha, grade ou coluna selecionada se adapta em tablets e celulares, abra a aba **Style** e expanda **Responsive**.

## Aplicar estilos e imagens {#apply-styles-and-images}

Abra a aba **Style** e expanda **Brand styles** para revisar os temas, as cores, a tipografia e o arredondamento dos cantos usados pelo conteúdo gerado. Expanda **Images** para listar as imagens de placeholder e substituí-las por URLs de imagens reais antes da exportação.

Abra a aba **Preview** para conferir o site atual sem sair do plugin.