Editor do Wix Studio: personalizar dropdowns em um menu
8 min de leitura
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.
Antes de começar:
Os dropdowns só podem ser adicionados a partir de novos menus no Editor do Wix Studio. Se você tiver a experiência de menu anterior, você pode criar submenus e adicionar mega menus.
Neste artigo, confira:
Ajustar o layout dos dropdowns
Dependendo do tipo de menu (barra de navegação, hambúrguer, etc), você pode usar o painel Layout para definir a exibição ou a largura do dropdown. 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 botão de menu/menu.
- (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:
- Largura do contêiner: escolha a largura do contêiner do dropdown e ajuste-o como desejar:
- 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: selecione se os itens do menu dropdown ficam recolhidos ou sempre abertos.
- Espaço acima do contêiner: aumente ou diminua o espaço entre o menu dropdown e o menu principal.
- 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.
- Alinhamento: alinhe os itens e subitens dropdown à esquerda, à direita ou ao centro do contêiner.
- Largura do contêiner: escolha a largura do contêiner do dropdown e ajuste-o como desejar:
Observação:
As opções exibidas dependem do tipo de menu (barra de navegação ou hambúrguer) e da orientação (horizontal ou vertical) escolhida.
Personalizar o design dos dropdowns
Você pode personalizar cada parte de um dropdown para complementar a aparência do menu principal, desde os contêineres até os itens e subitens.
Para personalizar o design dos dropdowns:
- Vá para o seu editor.
- Clique no botão de menu/menu.
- (Menus hambúrguer) Clique em Editar menu para abrir o modo de edição e selecione o menu.
- Clique na seta Abrir inspetor
no canto superior direito do editor. - Role para baixo até Design.
- 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 Selecionado.
- 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.
Qual é a diferença entre os contêineres?
- Contêiner do dropdown: exibe todos os elementos e menus que você adicionou ao item dropdown.
- Contêiner do menu dropdown: exibe apenas itens do menu dropdown. Ele está aninhado dentro do contêiner do dropdown.
Fazer o design dos dropdowns individualmente
As alterações feitas no design e no layout de um dropdown se aplicam a todos os dropdowns em um menu. No entanto, você pode "desconectar" dropdowns em um menu de barra de navegação horizontal para personalizá-los separadamente.
Observação:
Essa opção não está disponível nos menus hambúrguer e na barra de navegação vertical.
Para destacar e personalizar dropdowns individuais:
- 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
Ajustar o layout do menu dropdown
Personalizar o design do contêiner
Personalizar o design do menu
Observação:
As alavancas Editar somente este dropdown no painel Inspetor e Layout estão conectadas, o que significa que desativar/ativar uma alavanca automaticamente desativa/ativa a outra.
Esse artigo foi útil?
|