Si está creando su encabezado dentro de Divi , hay bastantes maneras de hacerlo. De hecho, puede obtener una descripción general de los tipos de encabezados y tutoriales aquí. Ahora, en el tutorial de hoy, agregaremos otra opción a su lista. Le mostraremos cómo agregar un icono de hamburguesa para alternar en el módulo de menú de DIvi. Este ícono de hamburguesa aparece, de forma predeterminada, en pantallas más pequeñas, pero en este tutorial, nos aseguraremos de que también aparezca un ícono de hamburguesa en el escritorio. Al hacer clic en el icono de la hamburguesa, todos los elementos del menú aparecerán en orden horizontal junto al icono. Esto le da una apariencia mínima a su encabezado al mismo tiempo que agrega interacción. ¡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.
Descargue la plantilla de encabezado global GRATIS
Para poner sus manos en la plantilla de encabezado global gratuita, 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. Crear nueva plantilla de encabezado global
Ir al Creador de temas Divi
Comience yendo a Divi Theme Builder en el backend de su sitio web de WordPress. Una vez allí, haga clic en «Agregar encabezado global».
Agregar nuevo encabezado global
Aparecerá un menú desplegable. Para comenzar a construir desde cero, continúe seleccionando «Crear encabezado global».
2. Crear un diseño de encabezado global
Ajustes de sección
Color de fondo
Una vez dentro del editor de plantillas, es hora de comenzar a construir el diseño del encabezado. Notarás que ya hay una sección ahí. Abra la configuración de la sección y agregue un color de fondo.
- Color de fondo: #f6f9fb
Espaciado
Pase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar módulos todavía, abra la configuración de la fila, vaya a la pestaña de diseño y modifique el ancho máximo en la configuración de tamaño.
- Ancho máximo: 1280px
Espaciado
Modifique el relleno superior e inferior en la configuración de espaciado a continuación.
- Relleno superior: 5px
- Relleno inferior: 5px
Seleccione el menú
A continuación, agregue un módulo de menú a la columna de la fila y seleccione un menú dinámico de su elección.
Cargar logotipo
Sube un logotipo.
Eliminar color de fondo
Luego, elimine el color de fondo blanco predeterminado del módulo.
Configuración del texto del menú
Pase a la pestaña de diseño del módulo y cambie la configuración del texto del menú en consecuencia:
- Fuente del menú: Poppins
- Peso de la fuente del menú: semi negrita
- Color del texto del menú: #003e51
- Tamaño del texto del menú: 16px
- Alineación de texto: Derecha
Configuración del menú desplegable
Cambie la configuración del menú desplegable a continuación.
- Color de la línea del menú desplegable: #7159c8
Configuración de iconos
Modifique también la configuración de los iconos.
- Color del ícono del carrito de compras: #670fff
- Color del icono de búsqueda: #670fff
- Color del icono del menú de hamburguesas: #670fff
Dimensionamiento
Luego, vaya a la configuración de tamaño y asigne un ancho máximo de logotipo.
- Ancho máximo del logotipo: 50 px
Espaciado
Elimine también el margen inferior predeterminado del módulo.
- Margen inferior: 0px
Gire la sección pegajosa
Ahora que nuestro menú está en su lugar, también convertiremos la sección en fija. Abra la configuración de la sección, vaya a la pestaña avanzada y aplique la siguiente configuración adhesiva:
- Posición pegajosa: Stick to Top
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
Color de fondo adhesivo
Modifique el color de fondo de la sección en un estado fijo a continuación.
- Color de fondo: #ffffff
Sombra de caja pegajosa
Aplique una sombra de cuadro a la sección también.
- Color de sombra predeterminado: rgba (0,0,0,0)
- Color de sombra adhesiva: rgba (0,0,0,0.04)
En la siguiente parte del tutorial, nos centraremos en crear el icono de alternancia del icono de hamburguesa en el escritorio. Primero, abra la configuración del Módulo de menú, vaya a la pestaña avanzada y asigne una ID de CSS.
- ID de CSS: divi-menú
Luego, agregue un módulo de código debajo del módulo de menú.
Usaremos código CSS y JQuery. Para prepararnos para eso, agregaremos algunas etiquetas de estilo y script.
Agregar código CSS
Pegaremos las siguientes líneas de código CSS entre las etiquetas de estilo:
|
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
|
.toggle-icon:after {content: "61";font-size: 32px;font-family: ETmodules !important;color: #003e51;position: absolute;top: 26px;right: 0;cursor: pointer;}#divi-menu .et_pb_menu__menu>nav {margin-right: 38px;visibility: hidden;opacity: 0; -webkit-transition: .1s ease-in-out;-moz-transition: .1s ease-in-out;-o-transition: .1s ease-in-out;transition: .1s ease-in-out; transform: translateY(50%); } .reveal-menu-items {opacity: 1 !important;visibility: visible !important;transform: translateY(0%) !important;} .icon-switch:after {content: '4d';font-size: 32px;font-family: ETmodules !important;color: #003e51;position: absolute;top: 26px;right: 0;cursor: pointer; } |
Añadir JQuery
Agregar líneas de código de apertura de JQuery
A continuación, tendremos el código JQuery. Agregue las siguientes líneas de código JQuery entre las etiquetas del script:
|
01
02
03
04
05
|
jQuery(function($){$(document).ready(function(){});}); |
Crear Variables
Cree algunas variables a continuación.
|
01
02
|
var toggleIcon = $('<div class="toggle-icon"></div>');var desktopMenu = $('#divi-menu .et_pb_menu__menu>nav'); |
Coloque el icono de alternar dentro del módulo de menú
Luego, coloque la variable del icono de alternar dentro del Módulo de menú usando esta siguiente línea de código:
|
01
|
toggleIcon.insertAfter(desktopMenu); |
Agregar función de clic
También estamos agregando una función de clic.
|
01
02
03
04
|
toggleIcon.click(function(){ desktopMenu.toggleClass('reveal-menu-items'); $(this).toggleClass('icon-switch');}); |
4. Guardar los cambios del generador de temas Divi
Ahora que todo está en su lugar, lo único que queda por hacer es guardar todos los cambios de Divi Theme Builder y ver el resultado.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Pensamientos finales
En esta publicación, le mostramos cómo ser creativo con su encabezado Divi dentro del Divi Theme Builder. Más específicamente, también le mostramos cómo agregar un ícono de menú de hamburguesa en el escritorio. De manera predeterminada, un ícono de hamburguesa es parte de la experiencia de la tableta y el dispositivo móvil, pero también lo estamos extendiendo al escritorio. Al hacer clic en el ícono de alternar, los elementos del menú aparecerán en un orden horizontal, lo que le da una apariencia mínima. ¡También pudo descargar el archivo JSON de la plantilla de forma gratuita! Si tiene alguna pregunta o sugerencia, asegúrese de 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.