Gostaria de ter um Divi Mega Menu com imagens para ilustrar o conteúdo do cardápio? Acompanhe nosso tutorial sobre como adicionar imagens a um Mega Menu?

Adoramos interagir com imagens online. Com isso em mente, faz sentido adicionar uma imagem ao seu site da Web quando possível. 

Além disso, adicionar imagens em um mega menu é outra ótima oportunidade para dar aos seus usuários a interação que eles precisam.

As imagens também aprimoram o menu chamando sua atenção para simplificar ainda mais o processo de navegação.

Visão geral

Antes de entrarmos neste tutorial, vamos dar uma olhada no resultado que queremos alcançar.

Mega Menu Divi com imagens

Criação do mega menu

Para começar, primeiro precisamos criar o menu. 

Para este exemplo, criaremos um item de menu pai principal chamado “Megamenu” com quatro itens de submenu abaixo. Cada um dos quatro itens de submenu tem três itens de subsubmenu.

Vá para o painel do WordPress e clique em Aparências> Menus

Mega Menu Divi com imagens

Clique 'Criar um novo menu', dê um nome e clique em 'Criar cardápio'.

Certifique-se de habilitar a propriedade do menu CSS Classes clicando na aba Opções tela no canto superior direito da tela Menus e verificando classes CSS.

Agora você pode adicionar seus itens de menu ao novo menu que você criou.

Vamos primeiro criar o item de menu que será o pai de todos os outros itens de menu. Este é o link que exibirá seu mega menu ao passar o mouse.

Para criar este item de menu, crie um link personalizado com os seguintes parâmetros:

  • URL: http://#
  • Título da navegação: Mega Menu
  • Classes CSS: mega-menu

Agora organize/arraste os quatro itens de menu (cada um com três subitens próprios) para se tornarem subitens do link principal do Mega Menu principal.

Depois que os links forem adicionados ao menu, role para baixo até 'Regras do menu' na parte inferior da tela do menu e selecione 'Menu principal' para localização de exibição. Por fim, clique em 'Salvar cardápio'

Veja como está nosso mega cardápio até agora:

Mega Menu Divi com imagens

Adicionando imagens ao mega menu

Agora que o menu está pronto, é hora de adicionar as imagens.

Leia também: Como faço para flutuar postagens de blog no DIVI?

Obtenha as imagens

Comece obtendo quatro imagens. Essas imagens devem estar relacionadas aos quatro itens do submenu (Sobre, Prestação de Serviços, Nosso Trabalho e Fale Conosco).

Use um editor de fotos para reduzir e cortar cada imagem para ter 500px de largura e 300px de altura.

Adicione essas imagens à biblioteca do WordPress. Clique em Mídia > Adicionar.

como adicionar imagens a um Mega Menu

Arraste suas imagens para a página para adicioná-las ou clique em 'Selecionar arquivos'

como adicionar imagens a um Mega Menu

Inserir imagens no Mega Menu

Retorne à página de menus no painel do WordPress.

Neste exemplo, o link na parte superior da primeira coluna é " Sobre "

Clique na seta à direita do item " Sobre ". Na caixa Navigation Label, adicione a imagem desejada usando a tag html img diretamente antes do texto " Sobre ". A tag de imagem deve ficar assim:

<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
como adicionar imagens a um Mega Menu

Para encontrar o URL da imagem, vá para Mídia > Biblioteca de mídia, clique na imagem que deseja adicionar. 

Na tela pop-up Detalhes do anexo, encontre o URL na seção certa e clique em 'Copiar URL para a área de transferência'

como adicionar imagens a um Mega Menu

Agora volte para a configuração do item de menu " Sobre " na página do menu e substitua o texto "Inserir URL da imagem" colando o URL da sua imagem usando ctrl + v.

como adicionar imagens a um Mega Menu

Antes de sair das opções de configuração do item de menu " Sobre ", encontre a caixa de texto CSS Classes e insira a classe "mega-link".

Isso nos permitirá adicionar estilos personalizados posteriormente.

Repita esse processo para adicionar as três imagens a seguir a cada um dos itens do submenu com a classe "mega-link". (Neste exemplo, os três itens restantes são “Entrega de serviço”, “Nosso trabalho” et " Contate-Nos ".)

Resultado

Acesse seu site e passe o mouse sobre o link do mega menu. Agora seu mega menu deve ficar assim:

Mega Menu Divi com imagens

Observe que quando você passa o mouse sobre cada uma das imagens, as imagens aparecem com o item do submenu logo abaixo. Isso ocorre porque a imagem faz parte desse link, portanto, clicar nela o levará ao URL associado.

Toques finais

Para esta última etapa, adicione algum CSS personalizado ao menu para tornar a fonte do texto maior e centralizada. Também dê um raio de borda ao redor da imagem para torná-la mais limpa.

No painel do WordPress, vá para Divi> Opções de tema . 

Role para baixo até a caixa CSS personalizado, digite o CSS abaixo e clique em 'Salvar alterações' :

.mega-link > a {
    text-align: center;
    font-size: 20px !important;
    text-transform: uppercase;
    font-weight: 400 !important;
    letter-spacing: 3px;
}
 
.mega-link > a img {
    margin-bottom: 8px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
 
}

Resultado final

Você terminou !

Se você seguiu todas as etapas deste tutorial, aqui está o resultado que você deve obter.

Mega Menu Divi com imagens

Baixe DIVI agora !!!

Conclusão

Você tem um mega menu Divi com imagens sem precisar usar um plugin. Este tipo de menu funciona particularmente bem para sites. e-commerce, que tem muito conteúdo e exigem imagens de produtos. Esperamos que este tutorial seja útil para seus próximos projetos Divi.

Se você precisar de mais elementos para concluir seus projetos de criação de sites, consulte também nosso guia no Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.

Se você tiver alguma dúvida ou sugestão, encontre-nos em a seção de comentários para discutir isso.

Mas enquanto issocompartilhe este artigo em suas diferentes redes sociais.

...