Como editar o menu no Criador de Sites com IA

Editar um menu significa alterar os itens que aparecem na barra de navegação, como os botões que levam o visitante para páginas: “Início”, “Sobre”, “Serviços” ou “Contato”.

Você pode adicionar, remover, renomear ou reorganizar esses itens - Caso queira criar um menu, consulte como fazer.

Confira abaixo como editar:

• Menu disponibilizado no layout do site
• Menu adicionado por você

Menu disponibilizado no layout do site

1No Editor do Criador de Sites com IA, clique no menu que deseja editar    

2Será exibida a barra de ferramentas com os recursos para edição. Abaixo selecione a opção que deseja e confira como fazer:

• Configurar botões - Para ajustar o tamanho, preenchimento, adicionar ícone ou informações
• Alterar fonte
• Alterar cor
• Adicionar link
• Alinhar os itens de menu - Alinhado à esquerda, direita, centralizado ou justificado
• Ordenar a posição dos itens de menu - Para mudar a ordem
• Definir o estilo - Através de CSS 
• Adicionar efeitos - Para criar movimentos e transições
• Duplicar um item de menu - Para incluir mais opções no menu principal
• Excluir um item de menu - Para remover apenas um elemento do menu
• Excluir um menu principal - Para remover toda a seção de menu

Configurar botões

1Na "Barra de ferramentas”, clique no ícone de cursor de ponteiro (Botão)

2Em seguida, clique na opção que deseja:

• Configurar o botão - ajustar o tamanho, largura, altura, preenchimento do item de menu com cor, definição da borda e espaçamento;
• Adicionar ícone - ao lado do item de menu incluir um ícone que o represente; 
• Adicionar tooltip (Dica de ferramenta) - adicionar uma pequena caixa de informação que será exibida quando o usuário passar o cursor do mouse sobre um elemento, sem clicar.

Configurar o botão

A) Tamanho - caso defina que o item de menu será exibido com preenchimento   ou contorno, é possível configurar o tamanho que será apresentado. Clique na opção que deseja:

• S - pequeno
• M - médio
• L - grande 
• Ícone de 3 pontos - para manualmente definir a altura e largura. Para isso, clique no botão branco e arraste na barra até chegar na opção que deseja

B) Preencher - defina como deseja que o item de menu seja exibido:

• Preenchido com cor - clique no ícone de círculo branco
• Contorno - clique no ícone de círculo vazio 
• Apenas o texto - o item de menu será exibido apenas com o nome, sem preenchimento ou contorno. Para isso, clique no ícone de X. 

C) Canto - ao definir o preenchimento ou o contorno, escolha se as bordas serão:

• Retas - cantos quadrados;
• Arredondadas - formato de "cápsula" ou "pílula";
• Manualmente definido - essa opção permite que você mesmo defina a intensidade dos cantos arredondados. Para isso, clique no ícone de 3 pontos, em seguida, clique no círculo branco e arraste na barra até chegar na opção que deseja;

D) Espaçamento - defina o quanto os itens de menu devem estar próximos ou afastados um do outro. Para isso, clique no círculo branco e arraste na barra até chegar na opção que deseja.

1Para salvar as alterações, clique em Atualização

Adicionar ícone

1Clique na aba Ícone

2Em seguida, clique no ícone de +

3Na tela que abrir, use o campo de busca para pesquisar pelo ícone que deseja - Navegue entre as abas disponíveis ou em “Personalizado”, caso tenha a imagem salva em seu dispositivo

4Para inserir o ícone junto ao item de menu, clique na opção encontrada

5Em seguida, defina:

• A) Posição - se o ícone deve ficar posicionado ao lado esquerdo ou direito do item de menu;
• B) Tamanho - clique no tamanho disponível que deseja ou para configurar manualmente, clique no ícone de 3 pontos e em seguida, clique no círculo branco e arraste na barra até chegar na opção que deseja;
• C) Espaçamento - defina o quão próximo o item de menu ficará do ícone. Para isso, clique no botão branco e arraste na barra até chegar na opção que deseja

6Para salvar as alterações, clique em Atualização

Adicionar tooltip (Dica de ferramenta)

1Clique na aba Tooltip

2Em seguida, clique no botão para ativar - Na cor “Azul” significa que está ativado

3No campo “Texto”, insira a informação que deseja apresentar

4Caso deseje que a informação seja mostrada com a ação de um clique em vez de ao passar o mouse, ative o botão Enable on Click (Habilitar ao clicar)     

5Para salvar as alterações, clique em Atualização

Alterar fonte

1Na "Barra de ferramentas”, clique no ícone de letra T (Fonte)

2Você pode escolher entre outra opção ou adicionar uma nova

3Em seguida defina o tamanho, altura, espaçamento e peso

4Para salvar as alterações, clique em Atualização

Alterar cor 

1Na "Barra de ferramentas”, clique no ícone de quadrado (Cores)

2Você pode escolher aplicar a cor somente no texto ou uma diferente para quando passar com o cursor do mouse. 

Para isso, ao lado do quadrante de recursos, clique na opção que deseja:

• Círculo azul - cor para o texto;
• Ícone de cursor de ponteiro - alterar a cor ao passar o cursor do mouse.

3Em seguida, clique na aba que deseja configurar: 

• Bg (Background) - a cor de fundo do botão;
• Texto - a cor que é exibida no nome do item de menu;
• Contorno - a cor e efeito ao redor do botão;
• Sombra - efeito ao redor do botão, para dar profundidade ou realce visual.

4Para definir as cores, você pode usar os recursos:

• A) Área de seleção de cor principal (quadrado grande no centro) - clique e arraste o círculo branco para clarear, escurecer ou ajustar a intensidade da cor - O fundo desse quadrado muda com base na barra de cor ao lado (vertical);
• B) Barra vertical de cores (à direita) - para escolher a cor base (vermelho, verde, azul, etc.). Serve para trocar rapidamente entre tonalidades, como de amarelo para azul - Depois de escolher aqui, você refina no quadrado ao lado;
• C) Paleta de cores pré-definidas (parte inferior) - são cores rápidas ou usadas recentemente. Clique na que deseja para aplicar rapidamente ao seu elemento;
• D) Campo de cor em hexadecimal - você pode colar o código da cor - Por exemplo: #ffffff para branco, #000000 para preto.

5De acordo com a aba escolhida, tem alguns recursos distintos: 

Bg (Background) - configuração de gradiente:

A) Controle de gradiente - funcionalidade que pode ser aplicada na cor de fundo do botão - Clique nos círculos e arraste para mudar as cores e a direção do efeito;

B) Tipo de preenchimento do gradiente - escolha entre as opções:

• Linear - a transição da cor vai de um lado ao outro;
• Radial - para um efeito circular.

C) Ângulo do gradiente - defina a direção do gradiente, para controlar como as cores se misturam:

• 90° - da esquerda para a direita
• 180° - de cima para baixo
• 45° - diagonal, e assim por diante.

Contorno:

A) Tipo de contorno (ícone no canto superior esquerdo do quadrado grande) - escolha entre sólido, tracejado, pontilhado, entre outros;

B) Tamanho do contorno - defina a espessura da borda. Você pode aumentar ou diminuir para deixar o contorno mais fino ou mais grosso.

Sombra:

A) Parâmetros da sombra - são os ajustes que definem como a sombra de um texto ou objeto vai aparecer. Eles controlam a posição, intensidade e aparência da sombra.

6Para salvar as alterações, clique em Atualização

Ordenar a posição dos itens de menu

1Na "Barra de ferramentas”, clique no ícone de setas (Mover para direita ou esquerda) 

2 cada clique, a seta da esquerda move o item de menu para as primeiras posições e a seta da esquerda para as últimas

3Para salvar as alterações, clique em Atualização

Definir o estilo - Através de CSS   

Defina como os elementos vão aparecer na tela (cores, tamanhos, fontes, espaçamentos, sombras, bordas, etc.) com código CSS (Cascading Style Sheets).

É necessário que você tenha os códigos que deseja aplicar.

1Na "Barra de ferramentas”, clique no ícone de engrenagem (Configurações)

2Em “Estilo”, configure o CSS 

3Para salvar as alterações, clique em Atualização

Adicionar efeitos  

1Na "Barra de ferramentas”, clique no ícone de engrenagem (Configurações)

2Na tela que abrir, clique na aba Efeitos

3Em seguida, clique no efeito que deseja aplicar

4Em “Estilo”, escolha o estilo do movimento de entrada ou saída - Se o efeito for aplicado direto e fechar essa tela, acesse novamente para configurar estes outros recursos

5Para aplicar a duração do efeito, clique no círculo branco e arraste na barra até chegar na opção que deseja  

6Para salvar as alterações, clique em Atualização

Duplicar um item de menu  

1Na "Barra de ferramentas”, clique no ícone de documentos sobrepostos (Duplicado)

2Em seguida, edite as informações como deseja

3Para salvar as alterações, clique em Atualização

Excluir um item de menu

Essa ação é para remover apenas um item do menu principal - Após excluir e salvar, não é possível voltar e restaurar.  

1Na "Barra de ferramentas”, clique no ícone de lixeira (Excluir)

2Para salvar as alterações, clique em Atualização

Excluir um menu principal 

Essa ação remove todo o menu principal, incluindo todos os itens que ele contém - Após excluir e salvar, não é possível voltar e restaurar.

1No menu que deseja remover, passe o cursor do mouse e na margem que será exibida, no canto superior direito, clique no ícone de seta

2Na barra de ferramentas que abrir, clique no ícone de lixeira (Excluir)

3Para salvar as alterações, clique em Atualização