Cómo crear un menú anidado que se colapsa para dispositivos móviles con el generador de temas de Divi

Hace un tiempo, compartimos un truco de menú móvil que lo ayuda a crear un menú anidado que se contrae. 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 los elementos de su menú
• Construyendo su menú usando el Generador de Temas y el Módulo de Menú
• Agregar el código personalizado dentro del generador de temas

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

Descargue el diseño de encabezado global GRATIS

Importante: después de descargar y cargar el archivo JSON en su creador 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 que se contrae gratis, 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!

Suscríbete a nuestro canal de Youtube

1. Configure su menú

Agregar elementos de menú y elementos de submenú

Lo primero que debe hacer es crear su 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'.

Agregar clase CSS a elementos de menú de primer nivel que contienen elementos de 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 del 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ú del primer nivel para crear el menú anidado que se contrae.

• Clases CSS: segundo nivel

2. Vaya a Divi Theme Builder y comience a crear un encabezado global

Ir a Divi Theme Builder

La siguiente parte de este tutorial se centra en la creación del diseño del encabezado. Si desea que la técnica anidada se aplique a un encabezado que ya ha creado (utilizando 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. Vaya al Creador de temas Divi.

Comience a construir un encabezado global

Empiece a construir su encabezado global a continuación.

Configuración de la sección

Espaciado

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

• Relleno superior: 0px
• Acolchado 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 usando 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 de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

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

• Relleno superior: 0px
• Acolchado 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 una sola línea de código CSS al elemento principal de la fila también.

display: flex;

Columna 1

Espaciado

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

• Acolchado superior: 20px
• Acolchado inferior: 20px

Frontera

Agregue un poco de radio de borde también.

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

Sombra de la caja

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

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

Columna 2

Espaciado

A continuación, abra la configuración de la segunda columna y agregue un poco de relleno superior e inferior.

• Acolchado superior: 20px
• Acolchado inferior: 20px

Columna 3

Fondo degradado

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

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

Espaciado

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

• Acolchado superior: 20px
• Acolchado inferior: 20px

Frontera

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

• Arriba a la izquierda: 100 px
• 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

Subir logotipo

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

Alineación

A continuación, cambie la alineación de la imagen del módulo.

• Alineación de la 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 creó en la primera parte de este tutorial.

Eliminar color de fondo

A continuación, elimine el color de fondo del módulo.

Diseño

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

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

Texto del menú

Diseñe también el texto del menú.

• 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 de 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 icono del menú de hamburguesas en la configuración de los iconos.

• 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 una 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

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

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

Espaciado

Complete la configuración del módulo agregando algunos márgenes superiores.

• 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 que se contrae. 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 del script.

.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%;
}

(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);

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 que se contraiga se aplique a su encabezado global dentro del Generador de temas. Comenzamos creando la barra de menú principal, continuamos diseñando nuestro encabezado dentro del Creador 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 de 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 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.