Criando o menu suspenso de temas elegantes avançados com o Divi's Theme Builder

Desde que o Divi's Theme Builder foi lançado, a maneira como projetamos cabeçalhos e rodapés em nossos sites com Divi se tornou mais fácil do que nunca. Tudo pode ser personalizado e você pode obter o menu exato que você tem em mente, sem nunca ter que sair do ambiente Divi intuitivo. Agora, em um determinado ponto, você pode ter encontrado o menu suspenso Elegant Themes em nosso site. Este menu suspenso é um tipo mais avançado de megamenu que combina de forma criativa ícones, texto e CTAs. Isso permite que os visitantes naveguem visualmente pelos diferentes produtos fornecidos. Isso também se traduz em um belo menu aninhado em tamanhos de tela menores.

Neste tutorial, vamos mostrar como recriar este menu suspenso de Elegant Themes avançado dentro do Divi's Theme Builder. Vamos combinar o melhor dos dois mundos; usaremos os elementos Divi integrados para criar a base de nossos menus suspensos e combiná-los com algum código que os coloque dentro do menu do WordPress. Você também poderá baixar o arquivo JSON gratuitamente!

Vamos lá.

Antevisão

Antes de mergulharmos no tutorial, vamos dar uma olhada rápida no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Baixe GRATUITAMENTE o layout do cabeçalho do menu suspenso de temas elegantes avançados

Para colocar suas mãos no layout de cabeçalho gratuito, 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!

Como fazer upload do arquivo JSON

Descompacte a pasta compactada que você conseguiu baixar acima. Em seguida, navegue até seu site WordPress> Divi> Divi Library e faça o upload do JSON.

Assim que seu layout for salvo na Biblioteca Divi, você pode navegar até o Divi Theme Builder e importar o layout salvo clicando em 'Adicionar Cabeçalho Global' ou 'Adicionar Cabeçalho Personalizado' e selecionando 'Construir Cabeçalho Global / Personalizado'. Vá para a guia 'Seus layouts salvos' na Biblioteca Divi, selecione o layout que você carregou na etapa anterior e salve todas as alterações do Divi Theme Builder.

Para ter um menu funcional logo de cara, você precisará passar pela primeira parte deste tutorial abaixo; adicionar as classes CSS aos itens de menu em um nível individual. Você também precisará habilitar uma das classes CSS dentro do Módulo de Código, conforme mostrado na parte 5 deste tutorial.

1. Adicionar classes CSS aos itens do menu

Vá para Menus na Aparência

A primeira parte deste tutorial se concentra na configuração dos itens de menu do WordPress com as classes CSS adequadas. Para fazer isso, navegue até o painel do WordPress> Menus> Crie um novo menu ou abra um existente.

Habilitar opção de classe CSS

Então, no canto superior direito da tela, você notará as 'Opções de tela'. Alterne esta opção e ative 'Classes CSS' nas propriedades avançadas do menu. Isso nos permitirá adicionar classes CSS a itens de menu específicos em um nível individual.

Adicionar classes CSS consecutivas a itens de menu que precisam de uma lista suspensa

Ao longo deste tutorial, criaremos três menus suspensos diferentes e atribuiremos cada um deles a um item de menu específico. Para dar continuidade a esse processo, precisaremos atribuir duas classes CSS diferentes aos três itens de menu que desejamos conter em um menu suspenso.

• Primeiro item de menu ao qual você deseja atribuir uma lista suspensa: primeiro nível primeiro nível-1
• Segundo item de menu ao qual você deseja atribuir uma lista suspensa: primeiro nível primeiro nível-2
• Terceiro item de menu ao qual você deseja atribuir uma lista suspensa: primeiro nível primeiro nível-3

2. Crie um cabeçalho personalizado com o Divi's Theme Builder

Vá para Divi Theme Builder

Uma vez que as classes CSS do item de menu estão no lugar, é hora de mudar para Divi. Vá para o Divi Theme Builder e selecione 'Add Global / Custom Header'.

Comece a construir o cabeçalho global

Em seguida, selecione 'Build Global Header' para ser redirecionado ao editor de modelos.

Configurações da seção

Cor de fundo

Dentro do modelo, você notará uma seção. Abra essa seção e mude a cor de fundo.

• Cor de fundo: #ffffff

Espaçamento

Em seguida, remova todo o preenchimento padrão das seções superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Sombra da caixa

E inclua também uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 0 px
• Força do desfoque de sombra da caixa: 30 px
• Cor da sombra: rgba (103,151,255,0,17)

Adicionar nova linha

Estrutura da Coluna

Continue adicionando uma primeira linha à seção usando a seguinte estrutura de coluna:

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento da seguinte forma:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura máxima: 1440 px

Espaçamento

Altere os valores de preenchimento superior e inferior nas configurações de espaçamento a seguir.

• Enchimento superior: 10 px
• Preenchimento inferior: 10 px

Adicionar Módulo de Menu à Linha

Selecione o menu

Em seguida, adicione um Módulo de Menu à coluna de sua linha e selecione o menu WordPress que você modificou na primeira parte deste tutorial.

Carregar logotipo

Faça upload de um logotipo a seguir.

Configurações de texto do menu

Vá para a guia de design e altere as configurações de texto do menu de acordo:

• Fonte do Menu: Lato
• Peso da fonte do menu: negrito
• Estilo da fonte do menu: maiúscula
• Cor do texto do menu: rgba (32,41,47,0,62)
• Tamanho do texto do menu: 13px
• Espaçamento entre letras do menu: 3px
• Alinhamento de Texto: Direito

Configurações do menu suspenso

Faça algumas alterações nas configurações do menu suspenso a seguir.

• Cor de fundo do menu suspenso: #ffffff
• Cor da linha do menu suspenso: rgba (0,0,0,0)
• Cor do texto do menu suspenso: # 000000
• Cor de fundo do menu móvel: # f2f4f5
• Cor do texto do menu móvel: # 000000

Configurações de ícone

Bem como as configurações dos ícones.

• Cor do ícone do carrinho de compras: # 000000
• Cor do ícone de pesquisa: # 000000
• Cor do ícone do menu de hambúrguer: # ff4a9e

Dimensionamento

E conclua as configurações do módulo atribuindo uma altura máxima do logotipo às configurações de dimensionamento.

• Altura máxima do logotipo: 64 px

3. Crie elementos suspensos

Adicionar nova linha à seção

Estrutura da coluna (número correspondente de menus suspensos necessários)

Depois que o menu padrão estiver pronto, é hora de criar os menus suspensos. Para fazer isso, adicionaremos uma nova linha contendo três colunas de tamanhos iguais. O número de colunas corresponde ao número de menus suspensos que criaremos.

Dimensionamento

Sem adicionar nenhum módulo ainda, abra as configurações de linha e modifique as configurações de dimensionamento de acordo:

• Usar largura de calha personalizada: Sim
• Largura da calha: 1
• Largura: 86%
• Largura máxima: nenhuma

Espaçamento

Em seguida, remova todo o preenchimento padrão superior e inferior.

• Preenchimento superior: 0 px
• Preenchimento inferior: 0 px

Classe CSS

E atribua uma classe CSS à linha.

• Classe CSS: dropdown-menu-row

Todas as classes CSS da coluna

Depois de concluir as configurações gerais de linha, abra cada coluna individualmente e atribua a seguinte classe CSS:

• Classe CSS: dropdown-menu-column

Adicione o Módulo Blurb # 1 à Coluna 1

Adicionar conteúdo

É hora de adicionar módulos! Começaremos criando o primeiro menu suspenso na primeira coluna. Para exibir todos os produtos diferentes, usaremos o Módulo Blurb da Divi. Adicione algum conteúdo de sua escolha.

Selecione o ícone

Em seguida, selecione um ícone correspondente.

Adicionar Link

Adicione um link para o módulo também.

Configurações de ícone

Vá para a guia de design e defina o estilo das configurações do ícone da seguinte maneira:

• Cor do ícone: # 8f42ec
• Posicionamento de imagem / ícone: esquerda
• Use o tamanho da fonte do ícone: Sim
• Tamanho da fonte do ícone: 30px

Configurações de texto do título

Em seguida, defina o estilo do texto do título.

• Fonte do título: Lato
• Peso da fonte do título: negrito
• Estilo da fonte do título: maiúsculas
• Cor do texto do título: # 8f42ec
• Tamanho do texto do título: 16px
• Espaçamento entre letras de título: 2px

Configurações do corpo do texto

Junto com o corpo do texto.

• Fonte do corpo: Lato
• Cor do corpo do texto: # 999999

Dimensionamento

Estamos garantindo que a largura do conteúdo também seja '100%'.

• Largura do conteúdo: 100%

Espaçamento

Em seguida, iremos para as configurações de espaçamento e usaremos alguns valores de preenchimento diferentes em diferentes tamanhos de tela.

• Enchimento superior: 15px
• Preenchimento inferior: 15 px
• Preenchimento esquerdo: 6% (desktop), 2% (tablet), 3% (telefone)
• Preenchimento direito: 6% (desktop), 2% (tablet), 3% (telefone)

Flutuar:

• Enchimento superior: 15px
• Preenchimento inferior: 15 px
• Preenchimento esquerdo: 8%
• Preenchimento direito: 4%

Animações

Removeremos a animação do ícone padrão nas configurações de animação a seguir.

• Animação de imagem / ícone: sem animação

Classe CSS

Em seguida, passaremos para a guia avançada e atribuiremos uma classe CSS ao nosso módulo. Cada módulo em seu menu suspenso precisa da mesma classe CSS atribuída a ele para ser incluído no menu suspenso.

• Classe CSS: dropdown-menu-item

CSS do elemento principal

Por último, mas não menos importante, concluiremos as configurações do módulo alterando o cursor usando uma linha de código CSS no elemento principal.

cursor: pointer;

Clone Blurb Module x3

Depois de concluir o primeiro módulo do Blurb, clone-o três vezes.

Alterar conteúdo e ícones

Modifique todo o conteúdo e ícones para cada duplicata.

Mudar links

Junto com os links.

Clonar o último módulo do Blurb uma vez

Continue clonando o último Módulo Blurb na coluna uma vez.

Adicionar cor de fundo

Abra as configurações do Módulo Blurb duplicado e altere a cor de fundo.

• Cor de fundo: # f9f9f9

Alterar configurações de ícone

Modifique as configurações do ícone também.

• Cor do ícone: # 3b45eb
• Tamanho da fonte do ícone: 22px

Alterar as configurações de texto do título

Junto com as configurações de texto do título.

• Cor do texto do título: # 3b45eb
• Tamanho do texto do título: 14px

Alterar conteúdo e link

E, claro, o conteúdo e o link.

Desativar no tablet e telefone

O segundo tipo de Módulo do Blurb que temos nesta lista suspensa só estará visível em telas maiores. Isso nos ajudará a garantir que o menu suspenso não sobrecarregue demais em telas menores. Para ocultar o módulo em telas menores, vá para a guia avançado e desative o módulo no tablet e no telefone.

Clone Blurb Module x3

Assim que seu segundo tipo de Módulo Blurb for concluído, você pode cloná-lo três vezes.

Alterar conteúdo e ícones

Certifique-se de alterar o conteúdo e os ícones de cada duplicata.

Mudar links

Junto com os links.

Adicionar Módulo de Texto à Coluna 1

Adicionar conteúdo

O último módulo de que precisamos em nosso menu suspenso é um Módulo de texto. Estamos usando um Módulo de Texto em vez de um Módulo de Botão porque o Módulo de Texto se adaptará mais facilmente ao ambiente suspenso. Adicione alguma cópia de sua escolha.

Cor de fundo

Em seguida, altere a cor de fundo.

• Cor de fundo: # 3776ff

Configurações de texto

Vá para a guia de design e modifique as configurações de texto de acordo:

• Fonte do texto: Lato
• Peso da fonte do texto: negrito
• Estilo da fonte do texto: maiúsculas
• Cor do texto: #ffffff
• Espaçamento entre letras do texto: 3px
• Alinhamento de Texto: Centro

Espaçamento

Adicione alguns valores de espaçamento personalizados também.

• Margem superior: 20px
• Margem inferior: 20px
• Margem esquerda: 4%
• Margem direita: 4%
• Enchimento superior: 15px
• Preenchimento inferior: 15 px

Fronteira

Em seguida, adicione cantos arredondados às configurações de borda.

• Todos os cantos: 100px

Sombra da caixa

Ative uma sombra de caixa sutil.

• Posição vertical da sombra da caixa: 14 px
• Cor da sombra: rgba (0,0,0,0) (padrão), rgba (0,0,0,0.09) (pairar)

Transformar Traduzir

Ao pairar, queremos que o botão suba ligeiramente. Para adicionar esse efeito, usaremos algumas configurações de conversão de transformação personalizadas ao pairar.

• Direita: -3px (pairar)

Classe CSS

Como todos os outros módulos em nosso menu suspenso, este módulo precisa da seguinte classe CSS:

• Classe CSS: dropdown-menu-item

CSS do elemento principal

E concluiremos as configurações do módulo alterando o cursor usando uma linha de código CSS no elemento principal.

cursor: pointer;

Excluir coluna 2 e 3

Depois de preencher a primeira coluna do menu suspenso, você pode abrir as configurações de linha e remover as duas colunas vazias da linha.

Clonar a primeira coluna duas vezes

Clone a primeira coluna duas vezes.

Personalizar itens

E personalize todos os itens nos outros dois menus suspensos como quiser.

4. Adicionar código CSS e JQuery

Adicionar novo módulo de código à coluna da linha 1

Agora que temos todos os itens do menu suspenso no lugar, é hora de transformá-los em um menu suspenso e colocar o menu suspenso dentro de um item de menu correspondente. Adicione um Módulo de Código à sua primeira linha, logo abaixo do Módulo de Menu.

Insira o código CSS

E insira o seguinte código CSS:

<style>
  
/* Enable class below once you're done editing the menu */
  
/*
.dropdown-menu-row {
display: none;
}*/
  
</style>
<style>
  
.et_pb_menu__menu [class*="dropdown-menu-container"] {
position: absolute;
top: 75px;
left: -195px;
background-color: white;
width: 464px;
-webkit-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
-moz-box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
box-shadow: 1px 2px 44px 0px rgba(84,81,179,0.36);
border-radius: 20px;
padding-top: 20px;
padding-bottom: 5px;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms all cubic-bezier(.4,0,.2,1);
-moz-transition: 300ms all cubic-bezier(.4,0,.2,1);   
-o-transition: 300ms all cubic-bezier(.4,0,.2,1); 
-ms-transition: 300ms all cubic-bezier(.4,0,.2,1);   
transition: 300ms all cubic-bezier(.4,0,.2,1);     
}
  
.et_pb_menu__menu ul>li:hover [class*="dropdown-menu-container"] {
visibility: visible;
opacity: 1;
}
  
.et_pb_menu__menu [class*="dropdown-menu-container"]:before  {
position: absolute;
left: 195px;
top: -20px;
width: 0;
height: 0;
content: '';
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid white;
}    
.et_mobile_menu [class*="dropdown-menu-container"] {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
}   
.et_mobile_menu li > a {
background-color: transparent;
position: relative;
}
  
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
color: #FF4A9E;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
  
.et_mobile_menu .first-level > .icon-switch:after{
content: '\21';
color: #c9c9c9;
}
  
.et_mobile_menu [class*="dropdown-menu-container"] {
display: none;
}
  
.et_mobile_menu [class*="dropdown-menu-container"].reveal-items {
display: block;
}
  
.et_mobile_menu {
width: 130%;
margin-left: -15% !important;
min-height: 100vh;
}
</style>

Insira o código JQuery

Também estamos usando algum código JQuery. Certifique-se de colocar este código entre as tags de script, como você pode ver na tela de impressão abaixo.

jQuery(function($){
$(document).ready(function(){
  
$('.dropdown-menu-column').each(function(i){
  
i = i + 1;
  
var $dropdownMenuItems = $(this).find('.dropdown-menu-item');
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdownMenuItems.wrapAll('<div class="dropdown-menu-container-' + i + '" />');
var $dropdownContainer = $('.dropdown-menu-container-' + i);
$dropdownContainer.insertAfter($mainMenuItem);
  
});
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu [class*="dropdown-menu-container"]');
$firstLevel.off('click').click(function() {
$(this).attr('href', '#');  
var $thisDropdown = $(this).siblings(); 
$thisDropdown.slideToggle();
$(this).toggleClass('icon-switch');
var dropdownSiblings = $allDropdowns.not($thisDropdown);   
dropdownSiblings.slideUp();
var $thisFirstLevel = $(this);
var $firstLevelSiblings = $firstLevel.not($thisFirstLevel);
$firstLevelSiblings.removeClass('icon-switch');  
});    
    
$(".dropdown-menu-row").css('visibility','hidden');
     
$(window).load(function() {
$(".dropdown-menu-row").fadeIn(1000);
});
  
});
});

5. Habilite a classe CSS assim que terminar de personalizar o menu

Assim que terminar de personalizar todos os itens do menu suspenso, você terá uma coisa a fazer: ocultar a linha inteira que contém os itens do menu suspenso. Isso, em combinação com uma função de carregamento dentro de nosso código, impedirá que os menus suspensos apareçam ao carregar a página. Depois de habilitar esta classe CSS, você não verá mais a segunda linha dentro do Visual Builder, mas poderá acessá-la no modo wireframe e / ou desabilitar temporariamente a classe CSS ao fazer alterações em seus menus suspensos. Para habilitar a classe, remova os colchetes '/ * * /' no início e no final da classe CSS.

• Classe CSS: dropdown-menu-row

6. Criação de mais de 3 menus suspensos

Adicionar classes CSS a itens de menu na aparência

Se você está procurando uma maneira de adicionar mais de 3 menus suspensos ao seu menu, precisará navegar de volta ao seu menu e adicionar classes CSS consecutivas ao quarto item do menu.

• Quarto item de menu ao qual você deseja atribuir uma lista suspensa: primeiro nível primeiro nível-4

Clonar coluna no final da linha

Em seguida, volte ao seu cabeçalho e clone a última coluna.

Certifique-se de que as classes CSS da coluna e do módulo estão no lugar

Certifique-se de que as classes CSS da coluna e do módulo estejam no lugar para o novo menu suspenso e pronto! É importante sempre dedicar uma nova coluna a um novo menu suspenso e seguir a ordem das colunas da linha. Isso significa que a coluna 1 será a lista suspensa 1, a coluna 2 será a lista suspensa 2, etc.

• Classe CSS da coluna: dropdown-menu-column
• Classe CSS do módulo: dropdown-menu-item

Antevisão

Agora que já passamos por todas as etapas, vamos dar uma olhada final no resultado em diferentes tamanhos de tela.

Área de Trabalho

Móvel

Pensamentos finais

Neste tutorial, mostramos como recriar o menu suspenso Elegant Themes usando o Divi's Theme Builder. Combinamos o melhor dos dois mundos e usamos os elementos integrados do Divi para definir o estilo de todos os itens em nosso menu suspenso e, em seguida, usamos algum código para colocar todos os menus suspensos dentro de seu item de menu correspondente dentro do menu WordPress. Você também conseguiu baixar o arquivo JSON gratuitamente! Se você tiver dúvidas ou sugestões, fique à vontade para deixar um comentário na seção de comentários abaixo.

Se você está ansioso para aprender mais sobre o Divi e obter mais brindes do Divi, certifique-se de assinar nosso boletim informativo por e-mail e canal no YouTube para que você sempre seja uma das primeiras pessoas a saber e obter os benefícios desse conteúdo gratuito.