¿Quieres crear un menú lateral deslizante y receptivo en Divi?
Al crear un Sitio web, a menudo te preguntas 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ú deslizante.
Los menús deslizantes suelen ayudarte a limitar el espacio que ocupa el encabezado global. De modo que puede dejar que aparezca un menú deslizable cuando su visitantes haz clic en el ícono de la hamburguesa en la esquina superior derecha.
Por lo tanto, usar un menú deslizable lo ayuda a agregar interacción adicional a su Sitio web.
En este tutorial, le mostraremos cómo crear uno usando el Theme Builder de Divi.
¡Empecemos!
vista
Antes de sumergirnos en este tutorial, primero veamos el resultado que vamos a obtener.
Vaya a Theme Builder y cree un encabezado global
Ir al Creador de temas
Para comenzar, vaya a Theme Builder desde el menú Divi en su panel de WordPress y haga clic en "Agregar encabezado global".
Crear el encabezado global
Continúe seleccionando 'Crear encabezado global'.
Crear un estilo de encabezado
Configuraciones de sección
Color de fondo
Una vez en el editor de plantillas, notará una sección. Abra esta sección y haga que el color de fondo sea transparente.
- Fondo: rgba (255,255,255,0)
espaciamiento
Cambie a la pestaña Estilo y elimine todos los márgenes superior e inferior.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
puesto
A continuación, cambiaremos la posición de la sección yendo a la pestaña avanzada y cambiando la configuración de posición.
- Posición: Fija
- Ubicación: centro superior
Añadir la primera línea
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:
apresto
Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:
- Ancho máximo: 97%
- Ancho máximo: 100%
espaciamiento
Cambie la configuración de espaciado.
- Margen interno máximo: 1%
- Margen interno 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 línea. Esto nos ayudará a alinear verticalmente el contenido de la columna de nuestra fila.
display: flex;
align-items: center;
Agregue un módulo de imagen a la columna 1
Descargar logo
Es hora de agregar módulos, comenzando con un módulo Imagen en la columna 1. Cargue su logotipo.
Agregue un módulo de texto a la columna 3
Agregar 3 espacios al área de contenido
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Color de fondo
Modificar el color de fondo del módulo.
- Fondo: rgba (0,0,0,0.04)
Configuraciones de texto
A continuación, cambie a la pestaña Estilo y elimine la altura de la línea de texto. Esto nos ayudará a tener control total sobre los alcances que hemos agregado.
- Altura de línea de texto: 0em
apresto
Vamos a modificar los parámetros de dimensionamiento del módulo.
- Ancho máximo: 120 píxeles
- Alineación del texto: derecha
espaciamiento
Y completaremos los parámetros del módulo transformando el módulo en un cuadrado. Para esto usaremos valores de relleno personalizados en la configuración de espaciado.
- Vértice del margen interno: 40px
- Margen interno inferior: 60px
- Margen interior izquierdo: 40px
- Margen interior derecho: 40px
Añadir la segunda línea
Estructura de la columna
¡Siguiente fila! Usaremos esta línea para diseñar todo nuestro menú deslizante. Utilice la siguiente estructura de columnas:
Color de fondo
Sin agregar módulos, abra la configuración de la fila y cambie el color de fondo de la siguiente manera:
- Fondo: #e7e0e2
Imagen de fondo
También usamos una imagen de fondo estampada. Puede utilizar un 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
- Repetir Imagen de fondo: Repetir
apresto
A continuación, cambie a la pestaña Estilo y modifique la configuración de tamaño en consecuencia:
- Usar ancho de canalón personalizado: Sí
- Espacio entre columnas: 1
- Ancho máximo: 20 % (escritorio), 40 % (tableta), 60 % (teléfono)
- Altura: 100vh
espaciamiento
También cambie la configuración de espaciado en diferentes tamaños de pantalla.
- Margen interno Summit: 10 vw (escritorio), 30 vw (tableta), 40 vw (teléfono)
frontera
Y complete los parámetros de línea agregando un borde izquierdo.
- Ancho del borde izquierdo: 10px
- Color del borde izquierdo: #24394a
- Estilo de borde izquierdo: Doble
Agregar un módulo de texto a la columna
Agregar contenido
¡Es hora de agregar el primer elemento del menú del módulo de texto! Añade la copia al cuadro. contenido.
Ajouter un gravamen
Continúe agregando un enlace relevante al elemento del menú.
- URL del enlace del módulo: #
Color de fondo
Luego cambia el color de fondo.
- Fondo: rgba (216,210,212,0.35)
Configuraciones de texto
A continuación, cambie a la pestaña Style'3 y cambie la configuración de texto de la siguiente manera:
- Fuente del texto: Domine
- Texto de luz suave: Texto en negrita
- Color del texto Texto: #000000
- Texto Tamaño del texto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Alineación de texto: centrado
espaciamiento
Complete la configuración del módulo agregando valores de espaciado personalizados en diferentes tamaños de pantalla.
- Margen inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Margen interno máximo: 1vw
- Margen interno inferior: 1vw
Clonar módulo de texto (1 módulo por elemento de 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.
Edite el contenido y los enlaces del módulo de texto duplicado
Modificar el contenido y los enlaces de cada módulo de Texto Duplicado.
Agregar módulo de botones a la columna
Añadir una copia
El último módulo que necesitamos en esta fila es un módulo Botón. Agregue una copia de su elección.
Ajouter un gravamen
Añade también un enlace.
- URL del enlace del botón: #
alineación
Cambie a la pestaña Estilo y cambie la alineación de los botones.
- Alineación de botones: centrado
Configuración de botones
Continúe personalizando el módulo Botón de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 0,7 vw (escritorio), 1,5 vw (tableta), 2,5 vw (teléfono)
- Color del texto del botón: #000000
- Botón de fondo: rgba (0,0,0,0)
- Color del borde del botón: #24394a
- Botón de radio del borde: 0 píxeles
- Espaciado entre letras de botones: 4px
- Botón de fuente: abrir ninguno
- Botón de luz tenue: texto en negrita
- Botón de estilo de copia: TT
espaciamiento
Y complete la configuración del módulo agregando valores de espaciado personalizados en diferentes tamaños de pantalla.
- Margen superior: 5vw
- Máximo margen interno: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Margen interior inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Margen interno izquierdo: 1,8 vw (escritorio), 3 vw (tableta), 4 vw (teléfono)
- Margen interior derecho: 1,8 vw (escritorio), 3 vw (tableta), 4 vw (teléfono)
Agregar 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 ámbitos) 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 línea #2
Luego abra la segunda línea, vaya a la pestaña avanzada y agregue una clase CSS personalizada. Al hacer clic, la línea se deslizará.
- Clase CSS: contenedor de menú deslizable
Cambiar el posicionamiento de la línea #2
También reposicionaremos esta línea. Observe cómo el desplazamiento horizontal coincide con el ancho de línea 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 línea 2
Y lleve la opacidad a 0 en un estado predeterminado.
opacity: 0;
Agregue el módulo Código a la segunda columna de la primera fila
Insertar código CSS
Para crear el efecto de la función de clic y darle estilo a los pentagramas 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 se puede ver en la pantalla de impresión a continuación:
#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: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Insertar código JQuery
También necesitaremos agregar algo de JQuery para la función de clic. Asegúrese coloque el código entre las etiquetas del script , como se puede ver en la pantalla de impresión a continuación:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('deslizar-en-menú'); }); });
Guarde los cambios del generador de temas y muestre el resultado en el sitio web
Una vez que haya completado todos los elementos de su encabezado global, todo lo que tiene que hacer es guardar todos los cambios y mostrar el resultado en su sitio.
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado.
Conclusión
En conclusión, en este artículo, le mostramos cómo usar el generador de temas de Divi para crear un menú deslizante receptivo. Para ello, hemos combinado lo mejor de los elementos y opciones integrados de Divi con un código de función de clic personalizado. Por lo tanto, le permite concentrarse en diseñar el menú deslizable y dejar que el código se encargue de la parte funcional del encabezado global.
Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
