Depois de
adicionar e configurar um dropdown, você pode adaptar seu design para que fique como você deseja. Altere a aparência e o alinhamento do contêiner e do menu para criar uma aparência personalizada para os clientes e fortalecer a marca.
Ajustar o layout dos dropdowns
Dependendo do tipo de menu (barra de navegação, hambúrguer, etc), diferentes configurações são exibidas no painel Layout. Você também pode adaptar o espaçamento e o alinhamento para se adequar à aparência do menu principal.
Para ajustar o layout dos dropdowns:
- Vá para o seu editor.
- Clique no ícone barra de menu/menu hambúrguer.
- (Menus hambúrguer) Clique em Editar menu para abrir o modo de edição e selecione o menu.
- Clique no ícone Layout
. - Selecione a aba Dropdown.
- Use as opções para ajustar o layout:
Escolha a largura do contêiner do dropdown e ajuste-o como quiser:
- Esticar: o contêiner do dropdown ocupa a largura total da tela. Você pode ajustar sua largura ao definir as margens (em px).
- Ajustar ao menu: o dropdown tem a mesma largura que o menu "pai" principal.
- Dimensionar conteúdo: o contêiner "abraça" os itens do dropdown. Você pode escolher se deseja alinhá-lo à esquerda, ao centro ou à direita do menu principal.
Exibição do item e número de colunas
- Exibição do item: selecione se os itens do menu dropdown ficam recolhidos ou sempre abertos.
- Número de colunas: escolha quantas colunas são exibidas no menu dropdown.
- Espaço acima do contêiner: aumente ou diminua o espaço entre o menu dropdown e o menu principal.
- Espaçamento: ajuste o espaço entre itens no menu dropdown. Se você adicionou subitens, você também pode alterar o espaço entre e acima deles.
- Espaço entre itens: insira o espaço horizontal e vertical entre itens do dropdown.
- Espaço entre subitens: aumente ou diminua o espaço entre os subitens.
- Espaço acima de subitens: defina o espaço acima dos subitens no menu.
Preenchimento, direção e alinhamento
- Preenchimento: personalize o espaço ao redor de cada parte do dropdown para que funcione para você:
- Preenchimento do item: diminua ou aumente o espaço ao redor dos itens do menu dropdown.
- Preenchimento do subitem: ajuste o espaço ao redor dos subitens no menu dropdown.
- Preenchimento do contêiner: deixe o espaço ao redor do contêiner dropdown do tamanho que desejar.
- Direção: escolha se os itens são lidos da esquerda para a direita ou da direita para a esquerda.
- Alinhamento: alinhe os itens e subitens dropdown à esquerda, à direita ou ao centro do contêiner.
Personalizar o design dos dropdowns
Você pode personalizar cada parte de um dropdown para complementar a aparência do menu principal, desde o contêiner até os itens e subitens. Escolha o preenchimento do background e do texto para reforçar a marca dos seus clientes e adicione bordas para destacar os dropdowns na página.
Você também pode personalizar o design de itens e subitens para estados separados (por exemplo: interativo, página atual).
Para personalizar o design dos dropdowns:
- Vá para o seu editor.
- Clique no ícone barra de menu/menu hambúrguer.
- (Menus hambúrguer) Clique em Editar menu para abrir o modo de edição e selecione o menu.
- Clique no ícone Abrir Inspetor
no canto superior direito do editor.
- Selecione o elemento que você deseja personalizar.
- Contêiner do dropdown
- Contêiner do menu dropdown
- Itens do dropdown
- Subitens do dropdown
- (Itens do dropdown/subitens do dropdown) Selecione o estado relevante: Normal, Interativo ou Página atual.
- Crie o design do dropdown usando as opções disponíveis:
- Background: altere a cor do background do dropdown ou adicione um gradiente chamativo. Você pode ajustar a opacidade e adicionar várias camadas para atender às suas necessidades de design.
- Bordas: ajuste a largura e a cor das bordas do contêiner do dropdown.
- Cantos: deixe os cantos do dropdown mais redondos ou retangulares ao ajustar o raio.
- Texto: ajuste o estilo e a formatação dos itens e subitens do dropdown.
- Sombra: adicione sombras ao dropdown e personalize seu ângulo, cor, distância e mais.
As alterações feitas em um dropdown são aplicadas a todos os dropdowns nesse menu. Quer criar algo mais exclusivo? Você pode "desanexar" dropdowns que adicionou aos menus de navegação horizontal para ter controle total do design.
Para desanexar e personalizar dropdowns individuais em menus horizontais:
- Clique no menu horizontal no seu editor.
- Clique em Gerenciar menu.
- Passe o mouse sobre o dropdown relevante e clique em Editar.
- Escolha como deseja personalizar o dropdown:
Ajustar o layout do contêiner
Ajuste a largura do contêiner que exibe os itens e elementos que você adicionou ao dropdown. Você também pode definir o espaço entre o contêiner e o menu principal.
- Selecione o contêiner do dropdown.
- Clique no ícone Layout .
- Clique na alavanca Editar somente este dropdown para ativá-la.
- Faça as alterações que desejar:
- Largura do contêiner: selecione uma opção na lista e ajuste como desejar:
- Esticar: o contêiner do dropdown ocupa a largura total da tela. Você pode diminuir sua largura ao ajustar as margens (em px).
- Ajustar ao menu: o contêiner do dropdown tem a mesma largura que o menu pai.
- Dimensionar conteúdo: o contêiner "abraça" os itens do dropdown. Você pode escolher se deseja alinhá-lo à esquerda, ao centro ou à direita do menu principal.
- Personalizado: defina a largura do contêiner ao mover as alças de arrastar em cada lado. Você pode escolher se deseja alinhá-lo à esquerda, ao centro ou à direita do menu principal.
- Espaço acima do contêiner: aumente ou diminua o espaço entre o contêiner dropdown e o menu principal.
Ajustar o layout do menu dropdown
Esse é o menu que exibe os itens que você adicionou ao dropdown. Você pode definir quantas colunas são exibidas, ajustar o espaçamento entre e ao redor do menu e escolher a direção e o alinhamento.
- Selecione o menu dropdown no contêiner.
- Clique no ícone Layout .
- Clique na alavanca Editar somente este dropdown para ativá-la.
- Faça as alterações que desejar:
- Número de colunas: escolha quantas colunas são exibidas no menu dropdown.
- Espaçamento: ajuste o espaço entre itens no menu dropdown. Se você adicionou subitens, você também pode alterar o espaço entre e acima deles.
- Espaço entre itens: insira o espaço horizontal e vertical entre itens do dropdown.
- Espaço entre subitens: aumente ou diminua o espaço entre os subitens.
- Espaço acima de subitens: defina o espaço acima dos subitens no menu.
- Preenchimento: personalize o espaço ao redor de cada parte do dropdown para que funcione para você:
- Preenchimento do item: diminua ou aumente o espaço ao redor dos itens do menu dropdown.
- Preenchimento do subitem: ajuste o espaço ao redor dos subitens no menu dropdown.
- Preenchimento do contêiner: deixe o espaço ao redor do contêiner dropdown do tamanho que desejar.
- Direção: altere a direção do texto do item (esquerda para a direita ou direita para a esquerda).
- Alinhamento: alinhe os itens e subitens dropdown à esquerda, à direita ou ao centro do contêiner.
Personalizar o design do contêiner
Personalize o preenchimento do background e o raio do contêiner que exibe os itens e elementos que você adicionou ao dropdown. Você também pode adicionar e ajustar bordas e sombras para destacá-lo à página.
- Selecione o contêiner do dropdown.
- Clique ícone Abrir Inspetor ou no canto superior direito do editor.
- Role para baixo até Design.
- Clique na alavanca Editar somente este dropdown para ativá-la.
- Faça as alterações que desejar:
- Background: altere a cor do contêiner do dropdown ou adicione um gradiente chamativo. Você pode ajustar a opacidade e adicionar várias camadas para atender às suas necessidades de design.
- Bordas: ajuste a largura e a cor das bordas do contêiner do dropdown.
- Cantos: deixe os cantos do contêiner dropdown mais redondos ou retangulares ao ajustar o raio.
- Sombra: adicione sombras ao contêiner dropdown e personalize seu ângulo, cor, distância e mais.
Personalizar o design do menu
Personalize o menu que exibe os itens do dropdown. Você pode ajustar o design do contêiner e ajustar os itens e subitens para cada estado para criar uma aparência personalizada.
- Selecione o menu dropdown no contêiner.
- Clique no ícone Abrir inspetor no canto superior direito do editor.
- Role para baixo até Design.
- Clique na alavanca Editar somente este dropdown para ativá-la.
- Selecione o elemento que você deseja personalizar.
- Itens do dropdown
- Contêiner do menu dropdown
- Subitens do dropdown
- (Itens do dropdown/subitens do dropdown) Selecione o estado relevante: Normal, Interativo ou Selecionado.
- Faça as alterações que desejar:
- Background: altere a cor do background ou adicione um gradiente chamativo. Você pode ajustar a opacidade e adicionar várias camadas para atender às suas necessidades de design.
- Texto: ajuste o estilo e a formatação dos itens e subitens do menu dropdown.
- Borda: adicione e ajuste bordas ao redor do contêiner do menu.
- Cantos: deixe os cantos do contêiner do menu mais redondos ou retangulares ao ajustar o raio.
- Sombra: adicione sombras ao contêiner do menu e personalize seu ângulo, cor, distância e mais.
