Para configurar um Menu acesse o ícone de engrenagem do elemento para disponibilizar as possibilidades de configuração que veremos nesse tutorial.
Em caso de dúvidas sobre como adicionar um menu em suas páginas, acesse nosso tutorial sobre como funcionam as configurações gerais de elementos:
Ajustes
· Visibilidade
Nas configurações de ajustes é possível configurar a visibilidade de um Menu. Clicando no ícone que representa cada versão “Desktop | Tablet | Mobile” é possível ocultar ou mostrar o Menu em cada um desses dispositivos. Para voltar a mostrar o Menu que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.
· Inserir novos itens ao menu
1. Para inserir um texto personalizado nos menus, clique nos textos padrões: “Item 01, Item 02, Item 03 ou “New item” e adicione o texto conforme desejado.
2. Ao clicar no ícone de link será disponibilizada a possibilidade de configurar uma ação para cada menu, conforme abaixo:
- Nenhuma ação > O menu não terá nenhuma ação.
- Abrir link externo > Nessa opção poderá configurar uma URL externa para que quando o menu seja clicado o usuário seja direcionado para essa URL.
- Rolar Página > Esse recurso pode ser utilizado com a ação de rolar a página (âncora), selecionando na ação do menu o container/seção pela ID que configurou.
- Ir para página do funil > Nessa opção poderá escolher uma página do funil para qual deseja direcionar o usuário ao clicar no menu.
3. Para excluir um menu, clique no ícone de lixeira.
4. Para adicionar um menu, clique no botão +.
5. Para habilitar/desabilitar um menu no estilo hambúrguer (imagem abaixo) na versão mobile ative/desative a respectiva chave.:
Posição
Nas configurações de Posição é possível configurar a posição (esquerda, centro, direita) do menu clicando nos ícones que representam cada posição, direção (horizontal ou vertical), margem (topo) e espaçamento interno (topo, baixo, esquerda, direita), inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.
Estilo
Em estilo é possível habilitar/desabilitar uma borda de contorno nos itens de menu, para isso bastar ativar/desativar a chave.
Tipografia
· Cor do texto > Nas configurações de estilo é possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada.
· Fontes > Disponibilizamos centenas de tipos de fontes para você ter mais liberdade na criação dos menus.
· Tamanho da fonte > É possível ajustar inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Avançado
· Efeitos de movimento – Animação
Nas configurações avançadas é possível configurar efeitos de movimento/animação no elemento. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.
Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
Comportamento:
- Uma vez > o efeito de animação será apresentado apenas uma vez.
- Infinito > o efeito de animação irá ser apresentado enquanto o usuário estiver na página (loop).
Ativação:
- Animação de entrada > ao acessar a página o elemento começará a ter o efeito de animação selecionado.
- Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo elemento.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso no elemento, ou seja, o elemento irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.
· CSS Classes
Nas configurações avançadas é possível configurar CSS para o elemento. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.
É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.
Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels