Cómo ahorrar espacio en su encabezado usando iconos de alternancia con Divi

La forma en que diseña su encabezado marca la pauta 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 lo básico como un logotipo y elementos del menú, pero es muy probable que desee incluir también otras llamadas a la acción. Sin embargo, cuantos más elementos agregue a su encabezado, más abrumador puede resultar 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, te mostramos cómo ahorrar espacio en tu encabezado usando íconos de alternancia. ¡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 GRATIS

Para tener en sus manos 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Crear estructura de encabezado

Crear nueva plantilla de encabezado global

Comience por ir a Divi Theme Builder y comience a crear un nuevo encabezado global o personalizado.

Agregar la sección n. ° 1

Fondo degradado

Una vez dentro del editor de plantillas, verá una sección. Abra la configuración de esa sección y aplique un fondo degradado.

• Color 1: #ffffff
• Color 2: #eaeaea
• Tipo de degradado: lineal
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 50%

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.

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

Sombra de la caja

Agrega también una sombra de caja.

• 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 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 de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%
• Alineación de filas: centro

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

CSS del elemento principal

Luego, vaya a la pestaña avanzada y aplique algunas líneas de código CSS personalizadas de elementos principales en diferentes tamaños de pantalla. Este código nos ayudará a centrar verticalmente los elementos en el escritorio.

Escritorio:

display: flex;
place-items: center;

Tableta y teléfono:

display: block;

Configuración de la columna 1

Espaciado

Luego, abra la configuración de la columna 1 y aplique un poco de relleno izquierdo y derecho.

• Acolchado izquierdo: 5%
• Acolchado derecho: 5%

Elemento principal

Cambiaremos el tamaño de nuestra columna en el escritorio y lo devolveremos al "100%" en la tableta y el teléfono mediante la aplicación de CSS personalizado al elemento principal de la columna.

Escritorio:

width: 88% !important

Tableta y teléfono:

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 sensibles 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
• Acolchado izquierdo: 1%
• Acolchado derecho: 1%

CSS del elemento principal

También modificaremos el tamaño de la segunda columna en el escritorio. Lo devolveremos al "100%" en tamaños de pantalla más pequeños.

Escritorio:

display: flex;
place-items: center;
width: 12% !important;

Tableta y teléfono:

width: 100% !important;

Agregar módulo de menú a la columna 1

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.

Subir logotipo

Sube un logo a continuación.

Eliminar color de fondo

Luego, elimine el color de fondo predeterminado.

Configuración del texto del menú

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto del menú en consecuencia:

• Fuente del menú: Playfair Display
• Fuente de 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.4em
• 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 también los colores de los iconos en la configuración de los iconos.

• 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: 200px
• Ancho: 100%
• Alineación del módulo: centro

Agregue el módulo Blurb n. ° 1 a la columna 2

Dejar el cuadro de contenido vacío

Pasemos a la segunda columna. Para crear los íconos de alternancia, usaremos módulos de Blurb sin el título y 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 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

Vaya 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
  • Hover: # 000000
• Ubicación del icono: Arriba
• Alineación de iconos: centro
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 200%

Dimensionamiento

Modifique también la configuración de tamaño.

• Ancho del contenido: 100%
• Ancho: 32%

Elemento principal e imagen publicitaria CSS

Y complete la configuración del módulo agregando dos líneas de código CSS a las opciones CSS personalizadas en la pestaña avanzada del Módulo Blurb.

Elemento principal:

display: inline-block;

Imagen publicitaria:

margin-bottom: 0px !important

Clonar módulo Blurb dos veces

Una vez que haya completado el primer módulo de Blurb del icono de alternar, puede clonarlo dos veces.

Cambiar el ícono

Asegúrese de cambiar el icono en cada duplicado.

2. Agregar elementos de alternancia

Agregar sección 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.

• Alto: 0px

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado 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 fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

Posición

Y reposicione toda la fila. Convertir esta fila en absoluto nos ayudará a evitar que la fila ocupe espacio en el diseño.

• Posición: Absoluto
• Ubicación: esquina superior derecha

Agregue el módulo de texto n. ° 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

A continuación, agregue un color de fondo negro.

• Color de fondo: # 000000

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente de texto: Playfair Display
• Color del texto: #ffffff
• Tamaño del texto: 27px
• Alineación de texto: centro

Dimensionamiento

Asegúrate de que el ancho también sea del 100%.

• Ancho: 100%

Espaciado

Luego, agregue algunos valores de relleno personalizados a la configuración de espaciado.

• Acolchado superior: 10%
• Acolchado inferior: 10%
• Acolchado izquierdo: 2%
• Acolchado derecho: 2%

Módulo de clonación de texto

Una vez que haya completado el primer módulo de texto del elemento de alternancia, clónelo una vez.

Cambiar el contenido a la dirección de correo electrónico

Cambie el contenido en el cuadro de contenido.

Agregue el módulo de seguimiento de redes sociales a la columna 2

Agregue las redes sociales de su preferencia

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

Vaya 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 también el color del icono en la configuración de los iconos.

• Color del icono: # 000000

Dimensionamiento

Luego, aplique un ancho "100%" a la configuración de tamaño.

• Ancho: 100%

Espaciado

Aplique un poco de relleno personalizado en la parte superior e inferior también.

• Acolchado superior: 10%
• Acolchado inferior: 10%

Frontera

Y complete la configuración del módulo agregando algunas esquinas redondeadas a la configuración del borde.

• Todas las esquinas: 100px

3. Agregue funcionalidad

Agregue 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 alternancia. Lo primero que deberá hacer es abrir cada módulo de Blurb individualmente y agregar una ID de CSS consecutiva.

• Comentario 1: encabezado-cta-1
• Comentario 2: encabezado-cta-2
• Comentario 3: encabezado-cta-3

Agregar ID de CSS consecutivos para alternar elementos

Haga lo mismo con 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 iconos 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 gire cada uno de los elementos de alternancia uno por uno. Le recomendamos que vaya al modo de estructura alámbrica para hacer esto.

• Posición: Absoluto
• 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 :

[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 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 .

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 que los elementos de encabezado + alternar sean adhesivos

Hacer pegajosa la sección n. ° 1

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 adhesiva: adherirse a la parte superior
• Límite inferior de adherencia: Ninguno
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: Sí

Hacer pegajosa la sección 2

Y haz lo mismo con la sección 2. ¡Eso es!

• Posición adhesiva: adherirse a la parte superior
• Límite inferior de adherencia: Ninguno
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: 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 alternancia dentro de su encabezado. Tan pronto como alguien hace clic en un icono, aparece un elemento de alternancia, que le ayuda a ahorrar mucho espacio en el diseño de su encabezado. Este enfoque se centra en el comportamiento del usuario y le ayuda a evitar tener que diseñar un diseño de encabezado abrumador. ¡También pudo descargar el archivo JSON gratis! 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.