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.
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
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’.
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
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)
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
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.