• Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
• Módulo Menú de Divi. Usaremos este módulo para mostrar en el encabezado el menú al que vamos a aplicar la característica visual.
• Módulo Código de Divi. Vamos a utilizar este módulo para insertar los códigos CSS y JavaScript que harán funcionar el menú.
• Layers. La herramienta Layers de Divi es necesaria para acceder a elementos del diseño que está ocultos cuando carga la página. En este caso las cajas de categorías.

¿Cómo Hacer un Menú Visual con Divi?

En esta guía creamos un menú de navegación con una característica particular. Al pasar por encima de ciertos elementos del menú se despliegan sus sub-opciones de manera visual: con imagen y texto con formato.

Si bien existen algunos complementos pagos para Divi que nos permiten crear menús avanzados con formato, de forma sencilla, hoy vamos a ver cómo hacerlo sin ningún plugin adicional sino solo con Divi.

Cómo hacer un menú visual paso a paso

Te recomiendo ver el video ya que ahí muestro cómo hacer un menú visual con Divi en detalle y paso a paso.

Paso 1 – Añadir el ítem al menú de navegación

Lo primero es ir a Apariencia -> Menús y añadir al menú el item que va a funcionar con el desplegable visual.

En este ejemplo añado el ítem Blog ya que en el desplegable voy a mostrar las categorías del blog.

Es necesario activar la opción de pantalla Clase CSS (en la pestaña superior) para poder asignarle una clase al nuevo ítem.

• Clases CSS: first-level first-level-1

Paso 2 – Crear un encabezado global

Ahora lo que hay que hacer es ir al Theme builder de Divi y crear un encabezado global para el sitio web. Ahí es donde vamos a agregar el menú y hacerle los ajustes necesarios para que se muestren visualmente las sub-opciones de sus ítems.

Paso 3 – Sección + Fila 1 para el encabezado

Reducimos a cero los márgenes internos de la sección y añadimos una fila con estructura de 1 columna. Esta fila va a contener el logo y menú.

Paso 4 – Módulo de Menú

Ahora sí, añadimos el módulo de menú. Este módulo te permite subir un logo y elegir un menú de los que hay creados previamente en WordPress. En este caso es el menú Principal.

Hacemos los ajustes de formatos que creamos convenientes y antes de salir le asignamos una clase CSS en la pestaña Avanzado.

ID y CLASE CSS:

• Clase CSS: category-menu

Paso 5 – Fila 2 para el menú desplegable

Necesitamos una segunda fila para el menú de categorías desplegable que se va a mostrar cuando hagamos clic en Blog.

En este caso tiene que ser una fila con estructura de 2 columnas y le vamos a asignar la siguiente clase CSS.

ID y CLASE CSS:

• Clase CSS: dropdown-menu dropdown-menu-1

Luego de configurar la fila ingresamos a los ajustes de ambas columnas (en la pestaña Contenido) y añadimos lo siguiente en cada una.

CSS PERSONALIZADO:

• Elemento principal

width: 50% !important;

Paso 6 – Módulos para las sub-opciones

Ahora vamos a añadir un módulo de texto en la columna 1. Este módulo va a contener el nombre de la sub-categoría, su enlace y una imagen de fondo.

Te recomiendo ver el video para entender cómo lo configuré, aunque puedes darle el formato que quieras a esta caja.

Para finalizar añadimos lo siguiente para que el mouse cambie de puntero a mano cuando pasamos por encima del módulo indicando que es clicable.

CSS PERSONALIZADO:

• Elemento principal

cursor: pointer;

Una vez terminada la primera categoría clonamos el módulo de texto y lo arrastramos hasta la columna 2. Por supuesto cambiamos el nombre, el enlace y la imagen de fondo.

Si hay más de dos categorías podemos clonar nuevamente ambos módulos hacia abajo.

Este método no te va a servir si el blog tiene muchas categorías ya que no van a entrar en la pantalla y ya no resulta práctico.

Paso 7 – Insertar el código para que funcione

Añadimos un módulo de código debajo del módulo de texto de la columna 1 para insertar ahí el código que va a hacer que el desplegable aparezca cuando pasamos por encima del ítem Blog.

<style>
/* Enable class below once you're done editing the menu */ 

/* 
.dropdown-menu {
visibility: hidden;
}*/

.category-menu .et_pb_menu__menu .dropdown-menu {
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); 
}

.category-menu .et_pb_menu__menu li.first-level:hover .dropdown-menu {
visibility: visible;
opacity: 1;
}

.category-menu .et_pb_menu__menu li {
margin-top: 0px !important;
} 

.category-menu .et_pb_menu__menu li>a {
margin-top: 0px !important;
padding: 30px 20px !important; 
}

.category-menu .et_pb_menu__menu li.first-level>a:hover {
background-color: #00C995; 
} 

.category-menu .et_mobile_menu .dropdown-menu {
background-color: white; 
padding-top: 25px;
padding-bottom: 5px;
} 

.category-menu .et_mobile_menu li > a {
background-color: transparent;
position: relative;
}

.category-menu .et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\37';
color: black;
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}

.category-menu .et_mobile_menu .first-level > .icon-switch:after{
content: '\36';
color: #c9c9c9;
}

.category-menu .et_mobile_menu .dropdown-menu {
display: none;
visibility: visible;
}

.category-menu .et_mobile_menu .dropdown-menu.reveal-items {
display: block;
}

</style>

<script>
jQuery(function($){
$(document).ready(function(){
   
 
$('.dropdown-menu').each(function(i){
   
i = i + 1;
   
var $dropdown = $('.dropdown-menu-' + i);
var $mainMenuItem = $('.first-level-' + i + '>a');
$dropdown.insertAfter($mainMenuItem);
   
});  
   
var $firstLevel = $('.et_mobile_menu .first-level > a');
var $allDropdowns = $('.et_mobile_menu .dropdown-menu');
 
$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');  
 
});      
   
});
});
</script>

Y ahora solo te queda guardar y probarlo.

En el video también explico cómo hacer para tener más de un ítem del menú que active un menú  visual desplegable.

Dejame debajo un comentario contándome que te pareció esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.