La forma en que diseña su encabezado establece el tono para el resto de su sitio web. Por eso es importante pensar en la forma en que agrega elementos e interacciones. Por supuesto, querrá incluir los elementos básicos como un logotipo y elementos de menú, pero es muy probable que también desee incluir otras llamadas a la acción. Sin embargo, cuantos más elementos agregue a su encabezado, más abrumador puede volverse el encabezado. Si está buscando una forma limpia e interactiva de mostrar diferentes llamadas a la acción en su encabezado, le encantará este tutorial. Hoy, le mostraremos cómo ahorrar espacio en su encabezado usando iconos de alternancia. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
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 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. Construir estructura de encabezado
Crear nueva plantilla de encabezado global
Comience yendo a Divi Theme Builder y comience a crear un nuevo encabezado global o personalizado.
Añadir Sección #1
Fondo degradado
Una vez dentro del editor de plantillas, verás una sección. Abra la configuración de esa sección y aplique un fondo degradado.
- Color 1: #ffffff
- Color 2: #eaeaea
- Tipo de gradiente: lineal
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 50%
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
Sombra de la caja
Agregue una sombra de cuadro también.
- Color de sombra: rgba(0,0,0,0.06)
Agregar nueva fila
Estructura de la columna
Continúe agregando 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, pase a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
- Alineación de filas: Centro
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Elemento principal CSS
Luego, vaya a la pestaña avanzada y aplique algunas líneas de código CSS personalizadas del elemento principal en diferentes tamaños de pantalla. Este código nos ayudará a centrar verticalmente los elementos en el escritorio.
Escritorio:
|
01
02
|
display: flex;place-items: center; |
Tableta y teléfono:
|
01
|
display: block; |
Configuración de la columna 1
Espaciado
Luego, abra la configuración de la columna 1 y aplique un poco de relleno a la izquierda y a la derecha.
- Relleno izquierdo: 5%
- Relleno derecho: 5%
Elemento principal
Estamos cambiando el tamaño de nuestra columna en el escritorio y volviendo a «100 %» en la tableta y el teléfono mediante la aplicación de CSS personalizado al elemento principal de la columna.
Escritorio:
|
01
|
width: 88% !important |
Tableta y teléfono:
|
01
|
width: 100% !important; |
Configuración de la columna 2
Color de fondo
A continuación, abriremos la configuración de la columna 2 y cambiaremos el color de fondo a blanco.
- Color de fondo: #FFFFFF
Espaciado
También agregaremos algunos valores de relleno de respuesta a la configuración de espaciado de esta columna.
- Acolchado superior:
- Escritorio: 50px
- Tableta y teléfono: 20px
- Acolchado inferior
- Escritorio: 50px
- Tableta y teléfono: 20px
- Relleno izquierdo: 1%
- Relleno derecho: 1%
Elemento principal CSS
También modificaremos el tamaño de la segunda columna en el escritorio. Estamos trayendo esto de vuelta al «100%» en tamaños de pantalla más pequeños.
Escritorio:
|
01
02
03
|
display: flex;place-items: center;width: 12% !important; |
Tableta y teléfono:
|
01
|
width: 100% !important; |
Seleccione el menú
Es hora de agregar módulos, comenzando con un módulo de menú en la columna 1. Seleccione un menú de su elección.
Cargar logotipo
Cargue un logotipo a continuación.
Eliminar color de fondo
Luego, elimine el color de fondo predeterminado.
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ú: Pantalla Playfair
- Fuente del texto del menú: Playfair Display
- Color del texto del menú: #000000
- Tamaño del texto del menú: 19px
- Altura de la línea del menú: 1,4 em
- Alineación de texto: Derecha
Configuración del menú desplegable
Luego, cambie el color de la línea del menú desplegable.
- Color de la línea del menú desplegable: #ffffff
Configuración de iconos
Cambie los colores de los iconos en la configuración de los iconos también.
- Color del icono del carrito de compras: #000000
- Color del icono de búsqueda: #000000
- Color del icono del menú de hamburguesas: #000000
Dimensionamiento
Y complete la configuración del módulo cambiando la configuración de tamaño de la siguiente manera:
- Ancho máximo del logotipo: 200 px
- Ancho: 100%
- Alineación del módulo: Centro
Agregue el Módulo de Blurb #1 a la Columna 2
Dejar el cuadro de contenido vacío
Vamos a la segunda columna. Para crear los íconos de alternar, usaremos Módulos de Blurb sin el título ni el contenido. Comenzaremos creando el primer ícono de alternancia y luego reutilizaremos el módulo para agregar los otros dos íconos de alternancia. Una vez que haya agregado el módulo de Blurb, asegúrese de que el título y el cuadro de contenido estén vacíos.
Seleccionar icono
A continuación, seleccione un icono de su elección.
Configuración de iconos
Pase a la pestaña de diseño del módulo y cambie la configuración del icono de la siguiente manera:
- Color del icono
- Predeterminado: #dbdbdb
- Pasar el cursor: #000000
- Ubicación del icono: superior
- Alineación de iconos: Centro
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 200%
Dimensionamiento
Modifique también la configuración de tamaño.
- Ancho de contenido: 100%
- Ancho: 32%
Elemento principal y CSS de imagen de Blurb
Y complete la configuración del módulo agregando dos líneas de código CSS a las opciones personalizadas de CSS en la pestaña avanzada del módulo de Blurb.
Elemento principal:
|
01
|
display: inline-block; |
Imagen publicitaria:
|
01
|
margin-bottom: 0px !important |
Clonar módulo Blurb dos veces
Una vez que haya completado el primer módulo Blurb de icono de alternar, puede clonarlo dos veces.
Cambiar el ícono
Asegúrate de cambiar el ícono en cada duplicado.
2. Agregar elementos de alternancia
Añadir Sección #2
Dimensionamiento
Ahora que hemos establecido la base de nuestro encabezado, todavía necesitamos incluir los elementos de alternancia. Para hacer eso, agregaremos una nueva sección justo debajo de la anterior. Abra la configuración de la sección y asegúrese de que la altura de esta sección sea «0px». Esto nos ayudará a evitar que la sección ocupe espacio en nuestro diseño de encabezado. La única razón por la que necesitamos esta sección es para mostrar nuestros elementos de alternancia.
- Altura: 0px
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 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:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Posición
Y reposicionar toda la fila. Convertir esta fila en absoluta nos ayudará a evitar que la fila ocupe espacio en el diseño.
- Posición: Absoluta
- Ubicación: esquina superior derecha
Agregue el Módulo de Texto #1 a la Columna 2
Agregar número de teléfono al cuadro de contenido
¡Es hora de agregar los elementos de alternancia! Primero, agregaremos el número de teléfono. Agregue un nuevo módulo de texto a la columna 2 e inserte el número de teléfono en el cuadro de contenido.
Color de fondo
Agregue un color de fondo negro a continuación.
- Color de fondo: #000000
Configuración de texto
Pase a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente de texto: Pantalla Playfair
- Color del texto: #ffffff
- Tamaño del texto: 27px
- Alineación de texto: Centro
Dimensionamiento
Asegúrate de que el ancho sea del 100 % también.
- Ancho: 100%
Espaciado
Luego, agregue algunos valores de relleno personalizados a la configuración de espaciado.
- Acolchado superior: 10%
- Acolchado inferior: 10%
- Relleno izquierdo: 2%
- Relleno derecho: 2%
Módulo de texto clonado
Una vez que haya completado el módulo de texto del primer elemento de alternancia, clónelo una vez.
Cambiar contenido a dirección de correo electrónico
Cambie el contenido en el cuadro de contenido.
Agregar Redes Sociales de Elección
Luego, agregue un módulo de seguimiento de redes sociales a la columna 2. Agregue tantas redes sociales como desee.
Cambiar el color de fondo de cada red social a blanco
Luego, cambie el color de fondo a blanco para cada red social individualmente.
- Color de fondo: #FFFFFF
Color de fondo
Luego, regrese a la configuración general del módulo y use un color de fondo negro.
- Color de fondo: #000000
Alineación
Pase a la pestaña de diseño del módulo y cambie la alineación del módulo.
- Alineación del módulo: Centro
Configuración de iconos
Cambie el color del icono en la configuración de los iconos también.
- Color del icono: #000000
Dimensionamiento
Luego, aplique un ancho de «100%» a la configuración de tamaño.
- Ancho: 100%
Espaciado
Aplique un poco de relleno superior e inferior personalizado también.
- Acolchado superior: 10%
- Acolchado inferior: 10%
Borde
Y complete la configuración del módulo agregando algunas esquinas redondeadas a la configuración del borde.
- Todas las esquinas: 100px
3. Agregar funcionalidad
Agregar ID de CSS consecutivos a la primera sección de los módulos de Blurb
Ahora que todos los elementos están en su lugar, podemos comenzar a agregar el efecto de alternar. Lo primero que deberá hacer es abrir cada módulo de Blurb individualmente y agregar una ID de CSS consecutiva.
- Blurb 1: encabezado-cta-1
- Blurb 2: encabezado-cta-2
- Blurb 3: encabezado-cta-3
Agregar ID de CSS consecutivos para alternar elementos
Haga lo mismo para los módulos de elementos de alternancia. El número al final de la ID de CSS debe coincidir con la ID de CSS que usó para los íconos en el paso anterior.
- Módulo de texto 1: encabezado-elemento-1
- Módulo de texto 2: encabezado-elemento-2
- Módulo de seguimiento de redes sociales: header-item-3
Agregar posición absoluta a todos los elementos de alternancia
Y convierta cada uno de los elementos de alternancia en absoluto uno por uno. Le recomendamos que vaya al modo de estructura alámbrica para hacer esto.
- Posición: Absoluta
- Ubicación: arriba a la derecha
Agregar módulo de código a la primera columna de la sección n.º 1
Ahora que todos los ID de CSS están en su lugar, podemos agregar el código para que funcione la función de clic. Agregue un nuevo módulo de código justo debajo del módulo de menú en la columna 1.
Insertar código CSS
Agregue 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
|
[id*="header-cta"]{cursor: pointer;}[id*="header-item"] {visibility: hidden;opacity: 0;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;}.show-item {visibility: visible;opacity: 1;}.highlight-icon{color: #000 !important;} |
Insertar código JQuery
También estamos agregando un código JQuery personalizado. Agregue el código entre las etiquetas de secuencia de comandos 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
|
jQuery(function($){$(document).ready(function(){ $('[id*="header-cta"]').click(function() { var $selector = $(this).attr('id').replace('cta', 'item');var $item = $('#' + $selector); $item.toggleClass('show-item');$('[id*="header-item"]').not($item).removeClass('show-item');var $icon = $(this).find('.et-pb-icon');var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon'); $icon.toggleClass('highlight-icon');$allIcons.not($icon).removeClass('highlight-icon'); }); });}); |
4. Hacer encabezado + alternar elementos fijos
Hacer que la sección n.º 1 sea pegajosa
Por último, pero no menos importante, también puede convertir el encabezado y alternar elementos fijos. Para crear el resultado deseado, deberá asegurarse de que ambas secciones sean adhesivas y que la opción «Desplazamiento de los elementos adhesivos circundantes» esté habilitada. Haz que la primera sección sea pegajosa.
- Posición pegajosa: Stick to Top
- Límite pegajoso inferior: Ninguno
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
Hacer que la sección n.º 2 sea pegajosa
Y haz lo mismo para la sección 2. ¡Eso es todo!
- Posición pegajosa: Stick to Top
- Límite pegajoso inferior: Ninguno
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
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 los íconos de alternar dentro de su encabezado. Tan pronto como alguien hace clic en un ícono, aparece un elemento de alternancia, que lo ayuda a ahorrar mucho espacio en el diseño de su encabezado. Este enfoque se enfoca en el comportamiento del usuario y lo ayuda a evitar tener que diseñar un diseño de encabezado abrumador. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta, 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.