Como criar um botão de menu suspenso usando o módulo de menu de largura total da Divi

Um botão de menu suspenso pode realmente ser útil ao projetar um site. Além do menu principal, existem áreas em um site que podem exigir um menu suspenso de subitens. Nós os vemos sendo usados ​​para coisas como categorias de postagens de blogs, listas e entradas de formulários. Mas eles podem até ser usados ​​para uma chamada à ação principal.

Neste tutorial, mostraremos como criar um botão de menu suspenso usando o módulo de menu de largura total do Divi. Para fazer isso, primeiro criaremos um menu no WordPress. Em seguida, usaremos o módulo de menu de largura total do Divi para exibir esse menu com estilos personalizados usando o construtor Divi e um pouco de CSS personalizado. O resultado é um botão de menu suspenso que é prático e elegante.

Vamos começar.

Espiada

Aqui está uma rápida olhada no botão do menu suspenso que construiremos neste tutorial.

Área de trabalho (o menu desce ao passar o mouse)

Tablet e telefone (o menu desce ao clicar)

Baixe o Layout GRATUITAMENTE

Para colocar suas mãos nos designs deste tutorial, primeiro você precisa fazer o download usando o botão abaixo. Para obter acesso ao download, você precisará se inscrever em nossa lista de e-mail Divi Daily usando o formulário abaixo. Como um novo assinante, você receberá ainda mais bondade Divi e um pacote Divi Layout grátis toda segunda-feira! Se você já está na lista, basta inserir seu endereço de e-mail abaixo e clicar em download. Você não será “reinscrito” nem receberá e-mails extras.

Baixe os arquivos

Download de graça

Junte-se ao Divi Newsletter e nós lhe enviaremos por e-mail uma cópia do último pacote de layout de página de destino Divi, além de toneladas de outros recursos, dicas e truques Divi incríveis e gratuitos. Acompanhe e você será um mestre Divi em nenhum momento. Se você já está inscrito basta digitar seu endereço de e-mail abaixo e clicar em download para acessar o pacote de layout.

DOWNLOAD

Você se inscreveu com sucesso. Por favor, verifique seu endereço de e-mail para confirmar sua assinatura e tenha acesso a pacotes de layout Divi semanais gratuitos!

Inscreva-se no nosso canal no Youtube

Para importar o layout para sua página, simplesmente extraia o arquivo zip e arraste o arquivo json para o Divi Builder. O CSS customizado foi adicionado a um módulo de código em uma seção separada na parte inferior do layout.

Vamos para o tutorial, vamos?

O que você precisa para começar

Para começar, se ainda não o fez, instale e ative o Divi Theme instalado (ou o Divi Builder Plugin se não estiver usando o Divi Theme). Estaremos usando o Divi builder no front end para projetar o botão do menu suspenso.

É isso!

Criando um Menu no WordPress

Antes de começarmos a construir o menu suspenso com o Divi Builder, devemos primeiro criar um menu WordPress que gostaríamos de usar para o módulo de menu de largura total. Para fazer isso, vá para o painel do WordPress e navegue até Aparência> Menus. Em seguida, crie um novo menu clicando no link criar um novo menu, inserindo um nome de menu e clicando no botão “Criar Menu”.

Por enquanto, você pode criar alguns links personalizados com “#” como um espaço reservado para url junto com o texto do link.

Estruture os itens de menu de forma que o item de menu da camada superior tenha o texto do link “Saiba mais” com três itens de submenu abaixo dele.

Depois disso, certifique-se de salvar o menu.

Como criar um botão de menu suspenso com o módulo de menu de largura total da Divi

Assim que o menu for criado, podemos começar a projetar o botão do menu suspenso com Divi. Para começar, crie uma nova página no WordPress e use o Divi Builder para editar a página no front end (construtor visual).

Depois disso, você terá uma tela em branco para começar a desenhar no Divi.

Criação do conteúdo simulado

Primeiro, adicione uma linha de uma coluna à seção regular padrão.

Adicionar Módulo de Texto

Em seguida, adicione um módulo de texto à linha com o seguinte conteúdo:

<h1>Dropdown Menu Button</h1>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

Depois disso, atualize as configurações de design da seguinte forma:

Preenchimento de seção

Em seguida, atualize a configuração da seção com o seguinte:

• Preenchimento: 0px inferior

Espaçamento de linha e borda

Depois que o preenchimento da seção for atualizado, abra as configurações de linha e forneça à linha algum preenchimento e uma leve borda.

• Preenchimento: 10vw superior, 10vw inferior, 5vw esquerdo, 5vw direito
• Largura da borda: 1px

Criação do botão do menu suspenso

Para criar o botão do menu suspenso, usaremos um módulo de menu de largura total. Isso nos permitirá adicionar o menu que criamos anteriormente.

Adicionando o Menu Fullwidth

Para criar o módulo de menu de largura total, adicione uma nova seção de largura total sob a seção regular atual.

Em seguida, adicione um módulo de menu de largura total à linha.

No pop-up de configurações do menu de largura total (abaixo do conteúdo), use o menu suspenso para selecionar o menu que deseja exibir. Este deve ser o mesmo menu que criamos anteriormente, denominado “menu do botão suspenso”.

Em seguida, retire a cor de fundo branca padrão para o menu.

Depois de adicionar o menu com o módulo de menu de largura total, salve as configurações. Voltaremos a este módulo em breve para finalizar o design. Mas, por enquanto, adicionaremos um plano de fundo à seção de largura total.

Atualizar design de seção de largura total

Abra as configurações da seção de largura total e atualize o seguinte:

• Cor do gradiente de fundo à esquerda: # 0047d6
• Cor certa do gradiente de fundo: # 45b2ff

• Largura máxima: 240px
• Alinhamento da seção: centro

Estou definindo a largura máxima da seção para 240px porque isso corresponderá à largura da largura padrão do menu suspenso em Divi. Também é um bom tamanho para um botão no desktop e no celular.

• Cantos arredondados: 5px

Na guia avançada, adicione a seguinte classe CSS, estouro e índice Z.

• Classe CSS: botão suspenso
• Excesso horizontal: visível
• Excesso vertical: visível
• Índice Z: 14

A classe CSS é necessária para que possamos direcionar nosso CSS externo para esta seção somente mais tarde. O estouro precisa ser definido como visível para que possamos ver o menu suspenso. E o Z Index ajudará a manter o menu suspenso no topo de qualquer outro conteúdo da página.

Projete o menu Fulwidth

Agora estamos prontos para projetar o módulo de menu fullwidth. Abra as configurações do módulo de menu de largura total e atualize o seguinte:

• Faça os links do menu em largura total: SIM
• Cor do texto do menu suspenso: #ffffff
• Cor do texto do menu móvel: #ffffff
• Alinhamento de Texto: Centro
• Cor de fundo do menu suspenso: # 45b2ff
• Cor da linha do menu suspenso: #ffffff
• Cor de fundo do menu móvel: # 45b2ff

• Fonte do menu: Encode Sans Semi Condensed
• Peso da fonte do menu: Semi negrito
• Cor do texto do menu: #ffffff
• Tamanho do texto do menu: 16px
• Espaçamento entre letras do menu: 2px
• Animação do menu suspenso: expandir

Posicionando o botão suspenso

Para que o botão se sobreponha à borda inferior, precisamos adicionar uma margem superior negativa exatamente a metade da altura do botão.

• Margem: -40,5px no topo

Quase lá

Aqui está o resultado até agora ...

Como você pode ver, o espaço de foco ainda não ocupa toda a área do botão e o menu suspenso ainda está à direita. Para corrigir isso, podemos adicionar algum CSS personalizado.

Adicionando CSS Personalizado

Antes de adicionar o CSS personalizado, certifique-se de adicionar o “botão suspenso” do ID CSS à seção de largura total (não ao módulo).

Sem o CSS ID, o CSS abaixo não funcionará.

Para adicionar o CSS personalizado, abra as configurações da página e cole o código a seguir na área de entrada do CSS personalizado.

.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav > ul {
  padding-top: 0px !important;
}

.dropdown-button .fullwidth-menu li > a {
  padding-bottom: 0px;
  line-height: 81px;
}

.dropdown-button .fullwidth-menu li li a {
  padding: 6px 0px;
  line-height: 1.6em;
}

.dropdown-button .et_mobile_menu li a:hover, .nav ul li a:hover, .dropdown-button .fullwidth-menu a:hover {
  opacity: 1;
}

.dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {
  padding: 0 0 !important;
}

.dropdown-button .fullwidth-menu li {
  display: block;
}

.dropdown-button .fullwidth-menu .menu-item-has-children > a:first-child:after {  
  right: 20px;
}

aqui está o resultado final

Personalizando o Menu no Celular

Neste momento, o menu irá recorrer à versão móvel com o ícone de hambúrguer clicável que alterna o menu móvel aberto e fechado. Aqui está o que parece.

Para corrigir o menu de forma que corresponda à versão do desktop, precisamos adicionar algum CSS personalizado. Abra as configurações de página e adicione o seguinte CSS personalizado sob o css que adicionamos atualmente.

@media (max-width: 981px){
  .dropdown-button .et_pb_fullwidth_menu .et_pb_row {
    width: 100%;
    }
  .dropdown-button .mobile_menu_bar {
    height: 81px;
  }
  .dropdown-button .mobile_menu_bar:before {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #ffffff!important;
    letter-spacing: 2px !important;
    content: "Learn More";
    line-height: 81px;
    top: 0px;
}
  .dropdown-button .mobile_menu_bar:after{
    position: absolute;
    line-height: 81px;
    font-family: ETmodules;
    font-size: 20px;
    font-weight: 800;
    content: "3";
    padding-left: 20px;
    color: #ffffff;
}   
  .dropdown-button .et_first_mobile_item > a {
    display: none;
  }

}

O CSS acima faz com que a área clicável ocupe toda a largura e altura da seção / botão. Ele também substitui o ícone de hambúrguer por algum texto e um ícone de seta que corresponde à versão para desktop. Isso é feito usando os pseudo-elementos: before e: after. Dessa forma, conseguimos manter a funcionalidade padrão do menu móvel no lugar.

No momento, o conteúdo de texto para o botão suspenso do celular diz “Saiba mais”. Mas podemos mudar isso atualizando a seguinte linha de CSS sob o: antes do pseudo-elemento para a barra de menu móvel:

content: "Learn More";

Por exemplo, se você quiser que leia “Menu”, altere a linha do CSS para o seguinte:

content: "Menu";

Resultado final

Aqui está o resultado final.

Área de trabalho (o menu desce ao passar o mouse)

Tablet e telefone (o menu desce ao clicar)

Subitens adicionais

E você também pode adicionar itens de submenu! Basta atualizar o menu na página do editor de menu e está tudo pronto.

Pensamentos finais

A criação de um botão de menu suspenso usando o módulo de menu de largura total do Divi envolve algumas etapas principais. Primeiro, criamos o menu no WordPress que queremos incluir no módulo. Em seguida, usamos o construtor Divi para ee estilizar o módulo de menu de largura total de acordo com o nosso gosto. Em seguida, adicionamos CSS customizado para aprimorar o design no desktop e no celular. O resultado é um menu suspenso bonito (e útil) que é implantado ao passar o mouse para desktop e ao clicar para celular. Com sorte, você descobrirá que este é um acréscimo útil à sua caixa de ferramentas de design.

Estou ansioso para ouvir de você nos comentários.

Saúde!