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
- 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.
- 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
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
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
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.