Cómo crear un menú deslizable receptivo con el generador de temas de Divi

Al configurar un sitio web para un cliente propio, se encontrará contemplando qué tipo de encabezado crear. La más utilizada en la web es la barra de menú horizontal en la parte superior, pero también hay otras opciones, como un menú deslizable. Los menús deslizables lo ayudan a limitar el espacio que ocupa el encabezado global. En lugar de mostrar todos los elementos de su menú desde el principio, puede dejar que aparezca un menú deslizable cuando sus visitantes hagan clic en el ícono de la hamburguesa en la esquina superior derecha. El uso de un menú deslizable lo ayuda a agregar interacción adicional a su sitio web.

En el tutorial Divi de caso de uso de hoy, le mostraremos cómo crear uno usando el Theme Builder de Divi , los elementos Divi incorporados y algún código adicional. El diseño de este menú deslizable coincide perfectamente con el paquete de diseño del instructor de yoga , pero puedes modificarlo para que coincida con cualquier sitio web que construyas. ¡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 la plantilla de encabezado global del menú deslizable receptivo GRATIS

Para poner sus manos en la plantilla de encabezado global del menú deslizante gratuito, primero deberá descargarla 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!

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

Ir al Creador de temas Divi

Comience yendo a Divi Theme Builder en el backend de su sitio web de WordPress y haga clic en ‘Agregar encabezado global’.

Empezar a construir encabezado global

Continúe seleccionando ‘Crear encabezado global’.

2. Crear diseño de encabezado

Ajustes de sección

Color de fondo

Una vez dentro del editor de plantillas, verás una sección. Abre esa sección y haz que el color de fondo sea transparente.

  • Color de fondo: rgba(255,255,255,0)

Espaciado

Pase a la pestaña de diseño y elimine todo el relleno superior e inferior predeterminado.

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

Posición

Luego, convertiremos la sección en fija yendo a la pestaña avanzada y modificando la configuración de posición.

  • Posición: Fija
  • Ubicación: Centro superior

Añadir Fila #1

Estructura de la columna

Una vez que haya completado la configuración de la sección, agregue una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

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

  • Ancho: 97%
  • Ancho máximo: 100%

Espaciado

Modifique la configuración de espaciado a continuación.

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

Elemento principal

Luego, vaya a la pestaña avanzada y agregue dos líneas de código CSS al elemento principal de la fila. Esto nos ayudará a alinear verticalmente el contenido de la columna en nuestra fila.

01
02
display: flex;
align-items: center;

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.

Agregar módulo de texto a la columna 3

Agregar 3 tramos al cuadro de contenido

Luego, pase a la tercera columna y agregue un módulo de texto. Usaremos la pestaña de texto del módulo de texto para agregar tres tramos HTML con clases personalizadas asignadas a ellos. Más adelante en el tutorial, usaremos estos intervalos para crear nuestro icono de hamburguesa interactivo.

01
02
03
<span class="line line-1"></span>
<span class="line line-2"></span>
<span class="line line-3"></span>

Color de fondo

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

  • Color de fondo: rgba(0,0,0,0.04)

Configuración de texto

Luego, pase a la pestaña de diseño y elimine la altura de la línea de texto. Esto nos ayudará a tener un control total sobre los intervalos que hemos agregado.

  • Altura de línea de texto: 0em

Dimensionamiento

A continuación, modificaremos la configuración de tamaño del módulo.

  • Ancho: 120px
  • Alineación del módulo: Derecha

Espaciado

Y completaremos la configuración del módulo convirtiendo el módulo en un cuadrado utilizando valores de relleno personalizados en la configuración de espaciado.

  • Relleno superior: 40px
  • Relleno inferior: 60px
  • Relleno izquierdo: 40px
  • Relleno derecho: 40px

Añadir Fila #2

Estructura de la columna

¡A la siguiente fila! Usaremos esta fila para diseñar todo nuestro menú deslizable. Utilice la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo, abra la configuración de la fila y cambie el color de fondo de la siguiente manera:

  • Color de fondo: #e7e0e2

Imagen de fondo

También estamos usando una imagen de fondo de patrón. Puede encontrar la imagen que hemos usado en la carpeta de descarga que pudo descargar al comienzo de este tutorial, pero siéntase libre de usar cualquier otro patrón de fondo de su elección.

  • Tamaño de la imagen de fondo: Tamaño real
  • Posición de la imagen de fondo: Centro
  • Imagen de fondo Repetir: Repetir

Dimensionamiento

Luego, pase a la pestaña de diseño y cambie la configuración de tamaño en consecuencia:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho: 20% (Escritorio), 40% (Tableta), 60% (Teléfono)
  • Altura: 100vh

Espaciado

Modifique también la configuración de espaciado en diferentes tamaños de pantalla.

  • Acolchado superior: 10vw (escritorio), 30vw (tableta), 40vw (teléfono)

Borde

Y complete la configuración de la fila agregando un borde izquierdo.

  • Ancho del borde izquierdo: 10px
  • Color del borde izquierdo: #24394a
  • Estilo de borde izquierdo: Doble

Agregar módulo de texto a la columna

Agregar contenido

¡Es hora de agregar el primer módulo de texto del elemento del menú! Agregue la copia al cuadro de contenido.

Añadir enlace

Continúe agregando un enlace relevante al elemento del menú.

  • URL del enlace del módulo: #

Color de fondo

Modifique el color de fondo a continuación.

  • Color de fondo: rgba(216,210,212,0.35)

Configuración de texto

Luego, vaya a la pestaña de diseño y cambie la configuración del texto de la siguiente manera:

  • Fuente del texto: Domine
  • Peso de fuente de texto: Negrita
  • Color del texto: #000000
  • Tamaño de texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Alineación de texto: Centro

Espaciado

Complete la configuración del módulo agregando algunos valores de espaciado personalizados en diferentes tamaños de pantalla.

  • Margen inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado superior: 1vw
  • Acolchado inferior: 1vw

Módulo de texto clonado (1 módulo por elemento del menú)

Una vez que haya completado el módulo de texto del primer elemento del menú, puede clonarlo tantas veces como sea necesario. Solo asegúrese de que sus módulos no excedan la altura de la ventana gráfica.

Cambiar contenido y enlaces de módulos de texto duplicados

Cambie el contenido y los enlaces de cada módulo de texto duplicado.

Agregar módulo de botones a la columna

Agregar copia

El último módulo que necesitamos en esta fila es un módulo de botones. Agregue alguna copia de su elección.

Añadir enlace

Añade un enlace también.

  • URL del enlace del botón: #

Alineación

Pase a la pestaña de diseño y cambie la alineación del botón.

  • Alineación de botones: Centro

Configuración de botones

Continúe diseñando el módulo de botones de la siguiente manera:

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.7vw (escritorio), 1.5vw (tableta), 2.5vw (teléfono)
  • Color del texto del botón: #000000
  • Color de fondo del botón: rgba(0,0,0,0)
  • Color del borde del botón: #24394a
  • Radio del borde del botón: 0px
  • Espaciado entre letras de botones: 4px

  • Fuente del botón: Open Sans
  • Peso de la fuente del botón: Negrita
  • Estilo de fuente del botón: Mayúsculas

Espaciado

Y complete la configuración del módulo agregando valores de espaciado personalizados en diferentes tamaños de pantalla.

  • Margen superior: 5vw
  • Relleno superior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Acolchado inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Relleno izquierdo: 1.8vw (escritorio), 3vw (tableta), 4vw (teléfono)
  • Relleno derecho: 1.8vw (escritorio), 3vw (tableta), 4vw (teléfono)

3. Agregue la funcionalidad deslizante

Agregar ID de CSS al módulo de texto del icono de menú

Ahora que tenemos todos los elementos en su lugar, ¡es hora de crear el efecto de menú deslizante receptivo! Primero, abra el Módulo de texto (que contiene los tramos) en la tercera columna de su primera fila y use una ID de CSS personalizada en la pestaña avanzada. Usaremos este ID de CSS para crear una función de clic en nuestro código.

  • ID de CSS: deslizar para abrir

Agregue la clase CSS a la fila n. ° 2

Luego, abra la segunda fila, vaya a la pestaña avanzada y agregue una clase CSS personalizada. Al hacer clic, permitiremos que la fila se deslice hacia adentro.

  • Clase CSS: contenedor de menú deslizable

Cambiar el posicionamiento de la fila n.º 2

Cambiaremos la posición de esta fila también. Observe cómo el desplazamiento horizontal coincide con el ancho de la fila en diferentes tamaños de pantalla en la configuración de tamaño.

  • Posición: Absoluta
  • Ubicación: arriba a la derecha
  • Desplazamiento horizontal: -20 % (escritorio), -40 % (tableta), -60 % (teléfono)

Cambiar la opacidad de la fila #2

Y lleve la opacidad a 0 en un estado predeterminado.

01
opacity: 0;

Agregar módulo de código a la segunda columna de la primera fila

Insertar código CSS

Para crear el efecto de función de clic y diseñar los espacios de nuestro icono de hamburguesa, necesitaremos un código CSS. Agregue un módulo de código a la segunda columna de su primera fila y coloque las siguientes líneas de código CSS entre las etiquetas de estilo , como puede observar en la pantalla de impresión a continuación:

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#slide-in-open{
cursor: pointer;
}
 
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
 
.line-2 {
top: 10px;
}
 
.line-3 {
top: 20px;
}
 
#slide-in-open.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
 
#slide-in-open.open .line-2 {
display: none;
}
 
#slide-in-open.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
 
.slide-in-menu {
right: 0 !important;
opacity: 1 !important;
}
 
.slide-in-menu-container {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

Insertar código JQuery

También necesitaremos agregar algo de JQuery para la función de clic. Asegúrese de colocar el código entre las etiquetas del script, como puede ver en la pantalla de impresión a continuación:

01
02
03
04
05
06
jQuery(function($){
$('#slide-in-open').click(function(){
$(this).toggleClass('open');
$('.slide-in-menu-container').toggleClass('slide-in-menu');
});
});

4. Guarde los cambios del generador de temas y vea el resultado en el sitio web

Una vez que haya completado todos los elementos en su encabezado global, lo único que queda por hacer es guardar todos los cambios y ver el resultado en su sitio web.

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 esta publicación, le mostramos cómo usar el generador de temas de Divi para crear un menú deslizable receptivo para su próximo proyecto de Divi. Hemos combinado lo mejor de los elementos y opciones integrados de Divi con un código de función de clic personalizado. ¡Esto le permite concentrarse en diseñar el menú deslizable y dejar que el código se haga cargo de la parte funcional del encabezado global! También pudo descargar el archivo JSON de forma gratuita. 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 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.

Publicaciones relacionadas:

  1. Cómo crear un menú anidado plegable móvil con el generador de temas de Divi
  2. Cómo crear un mega menú de comercio electrónico personalizado con el generador de temas de Divi
  3. Cómo crear una barra de menú flotante transparente global con el generador de temas de Divi
  4. Creación del menú desplegable de temas elegantes avanzados con el generador de temas de Divi