Cómo crear un menú anidado plegable móvil con el generador de temas de Divi

Hace un tiempo, compartimos un truco de menú móvil que te ayuda a crear un menú anidado que se colapsa. Sabemos que muchos de ustedes lo han usado, pero con el nuevo Divi Theme Builder , el enfoque se vuelve ligeramente diferente. En el tutorial de hoy, le mostraremos cómo aplicar un efecto de colapso móvil al módulo de menú dentro de Divi Theme Builder. Hay tres partes principales en este tutorial:

  • Configurar su menú y asignar las clases correctas a sus elementos de menú
  • Construyendo su menú usando el Theme Builder y el Módulo de Menú
  • Agregar el código personalizado dentro del generador de temas

¡También podrá descargar el archivo JSON de la plantilla 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.

Móvil

Escritorio

Descarga el diseño de encabezado global GRATIS

Importante: después de descargar y cargar el archivo JSON en su generador de temas, aún deberá configurar manualmente su menú con las clases CSS correctas + agregar el Módulo de código con el código CSS y JQuery (pasos 1 y 3 de esta publicación) .

Para poner sus manos en el menú anidado colapsable gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Descárgalo gratis

Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Suscríbete a nuestro canal de Youtube

1. Configure su menú

Agregar elementos de menú y elementos de submenú

Lo primero que tienes que hacer es crear tu menú. Agregue los elementos secundarios de su elección.

Agregar opción de clase CSS

Una vez que haya agregado los elementos del menú, puede habilitar la opción de clases CSS haciendo clic en ‘Opciones de pantalla’ y habilitando ‘Clases CSS’.

Agregue la clase CSS a los elementos del menú de primer nivel que contienen elementos del submenú

Continúe agregando una clase CSS a los elementos del menú de primer nivel que contienen elementos del submenú. En este ejemplo, eso significa agregar la clase CSS a los elementos de menú ‘Servicio’ y ‘Portafolio’.

  • Clases CSS: primer nivel

Agregue la clase CSS a los elementos del menú de segundo nivel y guarde el menú

Luego, asigne una clase CSS diferente a los elementos del menú de segundo nivel en su menú. Asegúrese de agregar esta clase CSS solo a los elementos del menú de segundo nivel (en caso de que esté agregando más niveles). Más adelante en este tutorial, usaremos esta clase CSS y la que hemos asignado a los elementos del menú de primer nivel para crear el menú anidado colapsable.

  • Clases CSS: segundo nivel

2. Vaya a Divi Theme Builder y comience a construir el encabezado global

Ir al Creador de temas Divi

La siguiente parte de este tutorial se enfoca en crear el diseño del encabezado. Si desea que la técnica anidada se aplique a un encabezado que ya ha creado (usando el Módulo de menú), puede omitir este paso e ir a la última parte del tutorial. Si desea recrear el diseño, siga los pasos. Ve al Creador de temas Divi .

Empezar a construir encabezado global

Comience a construir su encabezado global a continuación.

Ajustes de sección

Espaciado

Dentro del editor de plantillas, verás una sección. Abra esa sección y elimine todo el relleno superior e inferior predeterminado.

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

Índice Z

Aumente también el índice z de la sección.

  • Índice Z: 99999

Agregar nueva fila

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Igualar alturas de columna: Sí
  • Ancho: 100%
  • Ancho máximo: 100%

Espaciado

Elimine todo el relleno superior e inferior predeterminado a continuación.

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

Elemento principal

Asegúrese de que todos los módulos aparezcan uno al lado del otro en tamaños de pantalla más pequeños agregando también una sola línea de código CSS al elemento principal de la fila.

01
display: flex;

columna 1

Espaciado

Luego, abra la configuración de la columna 1 y agregue un relleno superior e inferior personalizado.

  • Relleno superior: 20px
  • Relleno inferior: 20px

Borde

Agregue un poco de radio de borde también.

  • Arriba a la derecha: 100px
  • Abajo a la derecha: 100px

Sombra de la caja

Y complete la configuración de la columna 1 agregando una sutil sombra de cuadro.

  • Posición horizontal de la sombra del cuadro: 20px
  • Fuerza de desenfoque de sombra de cuadro: 50px
  • Color de sombra: rgba (0,0,0,0.15)

columna 2

Espaciado

Abra la configuración de la segunda columna a continuación y agregue un poco de relleno superior e inferior.

  • Relleno superior: 20px
  • Relleno inferior: 20px

columna 3

Fondo degradado

En la siguiente y última columna. Agrega un fondo degradado.

  • Color 1: #26c699
  • Color 2: #abe02f
  • Dirección del gradiente: 116 grados

Espaciado

Agregue un poco de relleno superior e inferior personalizado a continuación.

  • Relleno superior: 20px
  • Relleno inferior: 20px

Borde

Luego, vaya a la configuración del borde y realice los siguientes cambios:

  • Arriba a la izquierda: 100px
  • Abajo a la izquierda: 100px

Sombra de la caja

Complete la configuración de la columna agregando una sombra de cuadro.

  • Posición horizontal de la sombra del cuadro: -26px
  • Posición vertical de la sombra del cuadro: 0px
  • Color de sombra: #d2ff0c

Agregar módulo de imagen a la columna 1

Cargar logotipo

Es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue su logotipo.

Alineación

Cambie la alineación de la imagen del módulo a continuación.

  • Alineación de imagen: Centro

Dimensionamiento

Complete la configuración del módulo cambiando el ancho en diferentes tamaños de pantalla.

  • Ancho: 120 px (escritorio), 80 px (tableta y teléfono)

Agregar módulo de menú a la columna 2

Seleccione el menú

En la columna 2, el único módulo que necesitamos es un módulo de menú. Seleccione el menú que ha creado en la primera parte de este tutorial.

Eliminar color de fondo

Elimine el color de fondo del módulo a continuación.

Disposición

Luego, cambie la configuración de diseño.

  • Estilo: Centrado
  • Dirección del menú desplegable: hacia abajo

Texto del menú

Dale estilo al texto del menú también.

  • Fuente del menú: Montserrat
  • Peso de la fuente del menú: Medio
  • Color del texto del menú: #000000
  • Tamaño del texto del menú: 13px
  • Espaciado entre letras del menú: 1px

Menú desplegable

Continúe cambiando algunos colores en la configuración del menú desplegable.

  • Color de fondo del menú desplegable: #ffffff
  • Color de la línea del menú desplegable: #000000

Iconos

Y complete la configuración del módulo cambiando el color del ícono del menú de hamburguesas en la configuración de íconos.

  • Color del icono del menú de hamburguesas: #000000

Agregar módulo de texto a la columna 3

Agregar contenido

Pasemos al siguiente y último módulo, que es un módulo de texto en la columna 3. Agregue alguna copia de su elección.

Añadir enlace

Agregue un enlace al módulo a continuación.

  • URL del enlace del módulo: #

Configuración de texto

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

  • Fuente del texto: Montserrat
  • Peso de fuente de texto: semi negrita
  • Color del texto: #ffffff
  • Tamaño del texto: 16px
  • Altura de línea de texto: 1em
  • Alineación de texto: Centro

Espaciado

Complete la configuración del módulo agregando un margen superior.

  • Margen superior: 10px

3. Agregue funcionalidad al menú usando un módulo de código

Agregar módulo de código a la columna 2

Una vez que haya completado el diseño de su encabezado, es hora de agregar el código personalizado que transformará el menú móvil en un menú anidado colapsable. Agregue un módulo de código a la segunda columna (o en cualquier otro lugar).

Insertar código CSS y JQuery

Luego, agregue el código CSS y JQuery. Asegúrese de colocar el código CSS entre las etiquetas de estilo y el código JQuery entre las etiquetas de script.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
(function($) {
       
function setup_collapsible_submenus() {
     
var FirstLevel = $('.et_mobile_menu .first-level > a');
   
FirstLevel.off('click').click(function() {
$(this).attr('href', '#'); 
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
   
 
}
       
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
  
})(jQuery);

4. Desactive los iconos dinámicos en la configuración de Divi

Para asegurarse de que los íconos aparezcan dentro de su menú, deberá desactivar los íconos dinámicos navegando a Divi> Opciones de tema> Rendimiento y alternando la opción de íconos dinámicos.

Avance

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

Móvil

Escritorio

Pensamientos finales

En esta publicación, le mostramos cómo hacer que un menú anidado colapsado se aplique a su encabezado global dentro del Generador de temas. Comenzamos creando la barra de menú principal, continuamos con el diseño de nuestro encabezado dentro del generador de temas usando el módulo de menú y completamos el tutorial agregando el código personalizado que hace que el efecto funcione. Esperamos que hayas disfrutado este tutorial y si tienes alguna pregunta, ¡no dudes 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 regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.