Painel de elementos

O painel de elementos é onde você adiciona itens à sua página. Clique em Elementos no topo da barra lateral esquerda para abri-lo. Ele tem três abas: Elementos, Layouts e Componentes.

Arraste qualquer item do painel para a área de edição para adicioná-lo. Ele fica onde você soltar.

Elementos

A aba Elementos tem blocos individuais, agrupados em seções que você pode abrir e fechar.

Seção	Elementos
Essenciais	Botão, Campo de entrada, Título, Parágrafo, Contêiner, Cartão
Layout e navegação	Menu, Barra lateral, Grade, Colunas, Linhas, Abas, Trilha de navegação, Separador
Formulários e campos	Formulário, Área de texto, Lista de seleção, Caixa de seleção, Interruptor, Botão de opção, Seletor de data, Barra de pesquisa, Envio de arquivo, Controle deslizante
Exibição de dados	Tabela, Lista, Selo, Linha do tempo, Cartão de preços
Feedback e status	Alerta, Modal, Acordeão
Mídia	Imagem, Vídeo, YouTube, Vimeo, Áudio, Ícone
Avançado	Texto formatado, Carrossel
Integrações	Stripe, Google Maps, Calendly, Typeform

Layouts

A aba Layouts tem seções prontas. Cada cartão mostra um esboço simples da estrutura da seção, para você escolher pelo formato. Arraste um deles para sua página, geralmente entre duas seções existentes.

Grupo	Layouts
Seção principal	Centralizado, Layout dividido, Simples, Alinhado à esquerda, Dividido invertido, Com recursos
Recursos	Cartões em grade, Grade de ícones, Lista de verificação, Dividido com imagem, Grade simples, Etapas alternadas
Estatísticas	Simples com 4 colunas, Fundo azul, Cartões com borda, Grande com descrições, Dividido com imagem, Minimalista com 3 colunas
Chamada para ação	Caixa com borda, Banner com estatísticas, Sobreposição em imagem
Preços	Planos em 3 colunas, Mensal vs. anual, Plano único
Depoimentos	Grade de 3 colunas, Citação em destaque, Cartões em 2 colunas
Contato	Formulário com informações, Simples centralizado
Rodapé	Várias colunas, Simples centralizado

Como os itens se adaptam à sua página

Os elementos e layouts não entram com um estilo genérico. O WebTwizz adapta cada item ao seu site antes de adicioná-lo:

• Seu visual. Usa as cores, fontes, botões, cartões e espaçamentos que sua página já tem.
• O local que você escolheu. Ajusta o tamanho ao local onde você soltou o item, como uma célula de uma grade ou uma coluna de uma linha.
• Suas páginas e seu conteúdo. Um Menu ou uma Barra lateral é criado com base no seu site: o nome da sua marca, suas páginas e os links que já estão no cabeçalho. Um layout mantém a organização que você escolheu, e seus itens podem vir de conteúdo que seu site já tem. Abas, Acordeão e Carrossel usam seu conteúdo sempre que possível. O Google Maps mostra seu endereço quando o site menciona um.
• O cartão ao lado. Solte um Cartão ou Botão ao lado de um que você já tem, e o novo será criado da mesma forma, com conteúdo próprio.
• Textos e imagens para seu site. Textos provisórios, fotos e ícones são escritos ou escolhidos para seu site logo após você soltar o item.

Um Menu assume o formato do local onde você o solta: um cabeçalho completo no topo da página, uma linha de links dentro de um cabeçalho ou uma coluna de links em um rodapé. Uma Barra lateral solta diretamente na página fica ao lado do conteúdo, com links para suas páginas (ou para as seções de um site de página única), e vira um botão de menu em celulares. Se seu site já tiver um cabeçalho e você soltar um novo, um aviso informa isso, para você excluir o que não quiser.

Desfazer (⌘Z / Ctrl+Z) remove o item adicionado e o conteúdo preenchido em uma única etapa.

Componentes

Componentes são as partes reutilizáveis do seu site, como uma barra de navegação, um cartão de preços ou um rodapé. A aba Componentes lista todos os arquivos de componentes na pasta de componentes do seu projeto, exceto os pequenos blocos que ficam em uma pasta ui.

Cada linha mostra o nome do componente e seu arquivo, por exemplo, Button.tsx. Use Pesquisar componentes para filtrar a lista. Arraste um componente para a área de edição para usá-lo. Todas as cópias no seu site apontam para o mesmo componente, então uma alteração nele aparece em todos os lugares onde ele é usado.

Se seu projeto ainda não tiver nenhum, a aba mostra Nenhum componente.

Criar um componente

Clique com o botão direito em qualquer elemento na área de edição ou no painel de camadas e escolha Converter em componente, ou pressione ⌘⇧K / Ctrl+Shift+K.

Na janela Criar componente, digite um nome e clique em Criar. Os nomes usam apenas letras e números, e a primeira letra fica maiúscula automaticamente. O elemento é movido para seu próprio arquivo de componente, e a página passa a usar o novo componente no lugar dele.

Converter em componente não aparece para um elemento que já é um componente.

Renomear e excluir componentes

Clique com o botão direito em um componente na aba Componentes e escolha Renomear ou Excluir.

Excluir fica indisponível enquanto o componente estiver em uso em qualquer lugar do seu site.

Enquanto a IA trabalha

O painel fica coberto por um aviso de A IA está editando enquanto a IA altera seu site, para que suas edições não entrem em conflito com as dela. Ele é liberado assim que a IA termina.