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

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.

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 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;

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.

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.

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

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.

Publicaciones relacionadas:

  1. Cómo agregar íconos animados con desplazamiento a los fondos de sección en Divi
  2. Cómo alternar extractos de publicaciones de blog al pasar el mouse en Divi
  3. Cómo crear cálculos automáticos de precios con Divi (usando JQuery)
  4. Cómo ocultar su encabezado antes de desplazarse con las opciones fijas de Divi