Creación del menú desplegable de temas elegantes avanzados con el generador de temas de Divi

Desde que salió el Creador de temas de Divi, la forma en que diseñamos encabezados y pies de página en nuestros sitios web con Divi se ha vuelto más fácil que nunca. Todo se puede personalizar y puede obtener el menú exacto que tiene en mente sin tener que salir del entorno intuitivo de Divi. Ahora, en cierto punto, es posible que se haya encontrado con el menú desplegable Temas elegantes en nuestro sitio web. Este menú desplegable es un tipo de mega menú más avanzado que combina de forma creativa iconos, texto y llamadas a la acción. Esto permite a los visitantes navegar visualmente a través de los diferentes productos que se ofrecen. También se traduce en un hermoso menú anidado en pantallas de menor tamaño.

En este tutorial, le mostraremos cómo recrear este menú desplegable avanzado de Temas elegantes dentro del Generador de temas de Divi. Combinaremos lo mejor de ambos mundos; Usaremos los elementos Divi incorporados para crear la base de nuestros menús desplegables y los combinaremos con algún código que coloca los menús desplegables dentro del menú de WordPress. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue GRATIS el diseño del encabezado del menú desplegable Advanced Elegant Themes

Para poner sus manos en el diseño de encabezado gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Cómo cargar el archivo JSON

Descomprima la carpeta comprimida que pudo descargar arriba. Luego, navegue a su sitio web de WordPress> Divi> Divi Library y cargue el JSON.

Una vez que su diseño está guardado en la Biblioteca Divi, puede navegar hasta Divi Theme Builder e importar el diseño guardado haciendo clic en 'Agregar encabezado global' o 'Agregar encabezado personalizado' y seleccionando 'Crear encabezado global / personalizado'. Vaya a la pestaña 'Sus diseños guardados' en la Biblioteca Divi, seleccione el diseño que ha subido en el paso anterior y guarde todos los cambios en Divi Theme Builder.

Para tener un menú funcional desde el principio, se le pedirá que siga la primera parte de este tutorial a continuación; agregar las clases de CSS a los elementos del menú a nivel individual. También deberá habilitar una de las clases CSS dentro del Módulo de código como se muestra en la parte 5 de este tutorial.

1. Agregar clases CSS a los elementos del menú

Ir a los menús en Apariencia

La primera parte de este tutorial se centra en configurar los elementos del menú de WordPress con las clases CSS adecuadas. Para hacerlo, vaya a su panel de WordPress> Menús> Crear un nuevo menú o abra uno existente.

Habilitar la opción de clase CSS

Luego, en la esquina superior derecha de su pantalla, verá las 'Opciones de pantalla'. Cambie esta opción y habilite 'Clases CSS' en las propiedades del menú avanzado. Esto nos permitirá agregar clases de CSS a elementos de menú específicos en un nivel individual.

Agregue clases de CSS consecutivas a los elementos del menú que necesitan un menú desplegable

A lo largo de este tutorial, crearemos tres menús desplegables diferentes y asignaremos a cada uno de ellos un elemento de menú específico. Para poner en marcha ese proceso, necesitaremos asignar dos clases de CSS diferentes a los tres elementos del menú que queremos que contengan un menú desplegable.

• Primer elemento del menú al que desea asignar un menú desplegable: primer nivel primer nivel-1
• Segundo elemento del menú al que desea asignar un menú desplegable: primer nivel primer nivel-2
• Tercer elemento del menú al que desea asignar un menú desplegable: primer nivel primer nivel 3

2. Cree un encabezado personalizado con el generador de temas de Divi

Ir a Divi Theme Builder

Una vez que las clases de CSS del elemento del menú están en su lugar, es hora de cambiar a Divi. Vaya al Generador de temas Divi y seleccione 'Agregar encabezado global / personalizado'.

Comience a construir un encabezado global

Luego, seleccione 'Crear encabezado global' para ser redirigido al editor de plantillas.

Configuración de la sección

Color de fondo

Dentro de la plantilla, verá una sección. Abra esa sección y cambie el color de fondo.

• Color de fondo: #ffffff

Espaciado

A continuación, elimine todo el relleno predeterminado de las secciones superior e inferior.

• Relleno superior: 0px
• Acolchado inferior: 0px

Sombra de la caja

E incluye también una sombra de caja sutil.

• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 30px
• Color de sombra: rgba (103,151,255,0.17)

Agregar nueva fila

Estructura de la columna

Continúe agregando una primera fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho máximo: 1440px

Espaciado

A continuación, cambie los valores de relleno superior e inferior en la configuración de espaciado.

• Acolchado superior: 10px
• Acolchado inferior: 10px

Agregar módulo de menú a la fila

Seleccione el menú

Luego, agregue un Módulo de menú a la columna de su fila y seleccione el menú de WordPress que ha modificado en la primera parte de este tutorial.

Subir logotipo

Sube un logo a continuación.

Configuración del texto del menú

Vaya a la pestaña de diseño y cambie la configuración del texto del menú en consecuencia:

• Fuente del menú: Lato
• Peso de la fuente del menú: negrita
• Estilo de fuente del menú: mayúsculas
• Color del texto del menú: rgba (32,41,47,0.62)
• Tamaño del texto del menú: 13px
• Espaciado de letras del menú: 3px
• Alineación de texto: derecha

Configuración del menú desplegable

A continuación, realice algunos cambios en la configuración del menú desplegable.

• Color de fondo del menú desplegable: #ffffff
• Color de la línea del menú desplegable: rgba (0,0,0,0)
• Color del texto del menú desplegable: # 000000
• Color de fondo del menú móvil: # f2f4f5
• Color del texto del menú móvil: # 000000

Configuración de iconos

Así como la configuración de los iconos.

• Color del icono del carrito de compras: # 000000
• Color del icono de búsqueda: # 000000
• Color del icono del menú de hamburguesas: # ff4a9e

Dimensionamiento

Y complete la configuración del módulo asignando una altura máxima de logotipo a la configuración de tamaño.

• Altura máxima del logotipo: 64 px

3. Crear elementos desplegables

Agregar nueva fila a la sección

Estructura de columna (se necesita un número coincidente de menús desplegables)

Una vez que su menú predeterminado esté en su lugar, es hora de crear los menús desplegables. Para hacer eso, agregaremos una nueva fila que contiene tres columnas del mismo tamaño. El número de columnas coincide con el número de menús desplegables que crearemos.

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 86%
• Ancho máximo: Ninguno

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Clase CSS

Y asigne una clase CSS a la fila.

• Clase CSS: fila de menú desplegable

Todas las clases de CSS de columna

Una vez que haya completado la configuración general de la fila, abra cada columna individualmente y asigne la siguiente clase CSS:

• Clase CSS: columna de menú desplegable

Agregue el módulo Blurb n. ° 1 a la columna 1

Agregar contenido

¡Es hora de agregar módulos! Comenzaremos creando el primer menú desplegable en la primera columna. Para mostrar todos los productos diferentes, usaremos el módulo Blurb de Divi. Agregue algún contenido de su elección.

Seleccionar icono

Luego, seleccione un icono que coincida.

Añadir enlace

Agregue un enlace al módulo también.

Configuración de iconos

Vaya a la pestaña de diseño y aplique el estilo a la configuración del icono de la siguiente manera:

• Color del icono: # 8f42ec
• Ubicación de la imagen / icono: Izquierda
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 30px

Configuración del texto del título

Luego, aplique estilo al texto del título.

• Fuente del título: Lato
• Peso de la fuente del título: negrita
• Estilo de fuente del título: mayúsculas
• Color del texto del título: # 8f42ec
• Tamaño del texto del título: 16px
• Espaciado de letras de título: 2px

Configuración del texto del cuerpo

Junto con el cuerpo del texto.

• Fuente del cuerpo: Lato
• Color del texto del cuerpo: # 999999

Dimensionamiento

También nos aseguramos de que el ancho del contenido sea '100%'.

• Ancho del contenido: 100%

Espaciado

Luego, iremos a la configuración de espaciado y usaremos algunos valores de relleno diferentes en diferentes tamaños de pantalla.

• Acolchado superior: 15px
• Acolchado inferior: 15px
• Relleno izquierdo: 6% (escritorio), 2% (tableta), 3% (teléfono)
• Relleno derecho: 6% (escritorio), 2% (tableta), 3% (teléfono)

Flotar:

• Acolchado superior: 15px
• Acolchado inferior: 15px
• Acolchado izquierdo: 8%
• Acolchado derecho: 4%

Animaciones

Eliminaremos la animación de icono predeterminada en la configuración de animación a continuación.

• Animación de imagen / icono: sin animación

Clase CSS

Luego, pasaremos a la pestaña avanzada y asignaremos una clase CSS a nuestro módulo. Todos y cada uno de los módulos de su menú desplegable necesitan la misma clase CSS asignada para que se incluya en el menú desplegable.

• Clase CSS: elemento de menú desplegable

CSS del elemento principal

Por último, pero no menos importante, completaremos la configuración del módulo cambiando el cursor usando una línea de código CSS en el elemento principal.

cursor: pointer;

Módulo de clonación x3

Una vez que haya completado el primer módulo Blurb, clónelo tres veces.

Cambiar contenido e íconos

Modifique todo el contenido y los iconos de cada duplicado.

Cambiar enlaces

Junto con los enlaces.

Clonar el último módulo Blurb una vez

Continúe clonando el último módulo Blurb en la columna una vez.

Agregar color de fondo

Abra la configuración del módulo Blurb duplicado y cambie el color de fondo.

• Color de fondo: # f9f9f9

Cambiar la configuración del icono

Modifique también la configuración del icono.

• Color del icono: # 3b45eb
• Tamaño de fuente del icono: 22px

Cambiar la configuración del texto del título

Junto con la configuración del texto del título.

• Color del texto del título: # 3b45eb
• Tamaño del texto del título: 14px

Cambiar contenido y enlace

Y, por supuesto, el contenido y el enlace.

Desactivar en tableta y teléfono

El segundo tipo de módulo Blurb que tenemos en este menú desplegable solo será visible en pantallas de mayor tamaño. Esto nos ayudará a asegurarnos de que el menú desplegable no se vuelva demasiado abrumador en tamaños de pantalla más pequeños. Para ocultar el módulo en tamaños de pantalla más pequeños, vaya a la pestaña avanzada y desactive el módulo en la tableta y el teléfono.

Módulo de clonación x3

Una vez que haya completado su segundo tipo de módulo Blurb, puede clonarlo tres veces.

Cambiar contenido e íconos

Asegúrese de cambiar el contenido y los iconos de cada duplicado.

Cambiar enlaces

Junto con los enlaces.

Agregar módulo de texto a la columna 1

Agregar contenido

El último módulo que necesitamos en nuestro menú desplegable es un módulo de texto. Estamos usando un módulo de texto en lugar de un módulo de botones porque el módulo de texto se adaptará más fácilmente al entorno desplegable. Agregue una copia de su elección.

Color de fondo

Luego, cambie el color de fondo.

• Color de fondo: # 3776ff

Configuración de texto

Vaya a la pestaña de diseño y modifique la configuración del texto en consecuencia:

• Fuente de texto: Lato
• Peso de la fuente del texto: negrita
• Estilo de fuente de texto: mayúsculas
• Color del texto: #ffffff
• Espaciado de letras de texto: 3px
• Alineación de texto: centro

Espaciado

Agregue también algunos valores de espaciado personalizados.

• Margen superior: 20px
• Margen inferior: 20px
• Margen izquierdo: 4%
• Margen derecho: 4%
• Acolchado superior: 15px
• Acolchado inferior: 15px

Frontera

Luego, agregue esquinas redondeadas a la configuración del borde.

• Todas las esquinas: 100px

Sombra de la caja

Habilite una sombra de cuadro sutil.

• Posición vertical de la sombra del cuadro: 14px
• Color de sombra: rgba (0,0,0,0) (predeterminado), rgba (0,0,0,0.09) (Hover)

Transformar Traducir

Al pasar el mouse, queremos que el botón suba ligeramente. Para agregar ese efecto, usaremos algunas configuraciones de traducción de transformación personalizadas al pasar el mouse.

• Derecha: -3px (Hover)

Clase CSS

Como todos los demás módulos de nuestro menú desplegable, este módulo necesita la siguiente clase CSS:

• Clase CSS: elemento de menú desplegable

CSS del elemento principal

Y completaremos la configuración del módulo cambiando el cursor usando una línea de código CSS en el elemento principal.

cursor: pointer;

Eliminar columnas 2 y 3

Una vez que haya completado la primera columna del menú desplegable, puede abrir la configuración de la fila y eliminar las dos columnas vacías en la fila.

Clonar la primera columna dos veces

Clona la primera columna dos veces.

Personalizar artículos

Y personalice todos los elementos de los otros dos menús desplegables como desee.

4. Agregue código CSS y JQuery

Agregar nuevo módulo de código a la columna de la fila n. ° 1

Ahora que tenemos todos los elementos del menú desplegable en su lugar, es hora de convertirlos en un menú desplegable y colocar el menú desplegable dentro de un elemento de menú correspondiente. Agregue un módulo de código a su primera fila, justo debajo del módulo de menú.

Insertar código CSS

E inserte el siguiente 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>

Insertar código JQuery

También estamos usando algo de código JQuery. Asegúrese de colocar este código entre las etiquetas de secuencia de comandos, como puede ver en la pantalla de impresión a continuación.

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 la clase CSS una vez que haya terminado de personalizar el menú

Tan pronto como haya terminado de personalizar todos los elementos del menú desplegable, le quedará una cosa por hacer: ocultar toda la fila que contiene los elementos del menú desplegable. Esto, en combinación con una función de carga dentro de nuestro código, evitará que aparezcan los menús desplegables al cargar la página. Una vez que habilite esta clase CSS, ya no verá la segunda fila dentro del Visual Builder, pero podrá acceder a ella en el modo de estructura alámbrica y / o deshabilitar temporalmente la clase CSS cuando realice cambios en sus menús desplegables. Para habilitar la clase, elimine los corchetes '/ * * /' al principio y al final de la clase CSS.

• Clase CSS: fila de menú desplegable

6. Creación de más de tres menús desplegables

Agregar clases CSS a los elementos del menú en apariencia

Si está buscando una manera de agregar más de 3 menús desplegables a su menú, deberá navegar de regreso a su menú y agregar clases CSS consecutivas al cuarto elemento del menú.

• Cuarto elemento del menú al que desea asignar un menú desplegable: primer nivel primer nivel 4

Clonar columna al final de la fila

Luego, regrese a su encabezado y clone la última columna.

Asegúrese de que las clases CSS de columna y módulo estén en su lugar

¡Asegúrese de que las clases CSS de columna y módulo estén en su lugar para el nuevo menú desplegable y listo! Es importante dedicar siempre una nueva columna a un nuevo menú desplegable y seguir el orden de las columnas de la fila. Esto significa que la columna 1 será el menú desplegable 1, la columna 2 será el menú desplegable 2, etc.

• Clase CSS de columna: columna de menú desplegable
• Clase CSS del módulo: elemento de menú desplegable

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En este tutorial, le mostramos cómo recrear el menú desplegable de Elegant Themes usando el generador de temas de Divi. Hemos combinado lo mejor de ambos mundos y hemos utilizado los elementos integrados de Divi para diseñar todos los elementos de nuestro menú desplegable, luego usamos un código para colocar todos los menús desplegables dentro de su elemento de menú correspondiente dentro del menú de WordPress. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.