Cómo crear una pestaña de alternancia para un encabezado fijo en Divi

Los encabezados fijos pueden ser efectivos para mantener tu menú y otras llamadas a la acción importantes accesibles para los usuarios. Pero a veces, los encabezados fijos pueden distraer, especialmente para encabezados grandes en pantallas más pequeñas. Por lo general, recurrimos a encoger el encabezado y/u ocultar elementos en el estado fijo para crear más espacio para el contenido. Sin embargo, crear una pestaña de alternancia para esos encabezados fijos podría ser una gran alternativa. La inclusión de una pequeña pestaña de alternancia debajo del encabezado fijo brinda a los usuarios la opción de ocultar/mostrar ese encabezado fijo cuando lo deseen. En este tutorial, le mostraremos cómo crear una pestaña de alternancia para un encabezado fijo en Divi .

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido a la pestaña de alternancia de encabezado fijo que construiremos en este tutorial. Observe cómo la pestaña de alternar se vuelve visible una vez que el usuario se desplaza más allá de la altura del encabezado. Luego, el usuario puede alternar el encabezado fijo haciendo clic en la pestaña. Una vez que el usuario se desplaza hacia atrás a la parte superior de la página, el encabezado se hace visible y la pestaña se oculta.

Y aquí hay un codepen que demuestra este mismo concepto.

Descargue la pestaña de alternar para la plantilla de encabezado fijo GRATIS

Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo 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!

Para importar la plantilla a su Biblioteca Divi, haga lo siguiente:

  1. Navega hasta Divi Theme Builder .
  2. Haga clic en el ícono de portabilidad en la parte superior derecha de la página.
  3. En la ventana emergente de portabilidad, seleccione la pestaña de importación.
  4. Elija el archivo de descarga desde su computadora.
  5. Luego haga clic en el botón importar.

Una vez hecho esto, la plantilla estará disponible en Divi Theme Builder .

Desde allí, puede abrir la configuración de la plantilla y asignar la plantilla a cualquiera o todas las páginas de su sitio web para probar los resultados. O puede hacer clic en abrir el editor de plantillas de encabezado para editar el diseño de la plantilla.

Vayamos al tutorial, ¿de acuerdo?

Parte 1: Cargar la plantilla de encabezado prefabricada en Divi Theme Builder

Para acelerar el proceso de creación de este tutorial, vamos a utilizar un encabezado prefabricado que se puede descargar gratis de nuestro blog.

Descarga la Plantilla

Para obtener la plantilla de encabezado prefabricada, vaya a la publicación que presenta nuestra Plantilla de encabezado y pie de página GRATUITA para el paquete de diseño de intérprete de Divi .

Luego ingrese su dirección de correo electrónico dentro de la opción de correo electrónico. Una vez hecho esto, verá el botón «Descargar los archivos». Haga clic en el botón para descargar el archivo.

Una vez descargado el archivo, descomprima el archivo JSON.

Importar la plantilla

A continuación, navegue hasta Divi > Generador de temas. Y haga clic en el icono de portabilidad en la parte superior derecha de la página.

Selecciona la pestaña Importar, elige el archivo JSON que acabas de descomprimir, desmarca las opciones y haz clic en el botón Importar.

A continuación, seleccione la opción «Importarlos como diseños estáticos…» y haga clic en el botón Importar nuevamente.

Abra el Editor de plantillas de encabezado

Una vez que la plantilla se haya cargado en el generador de temas, elimine el pie de página de la plantilla y haga clic en Guardar cambios. Luego haga clic en el icono de edición para editar el encabezado personalizado de la plantilla.

Abrir capas modal y eliminar módulo de código existente

En el editor de diseño de encabezado, abra el menú de configuración en la parte inferior de la página y haga clic en el icono de vista de capas para abrir el modal de capas. Esto nos ayudará a acceder a nuestros elementos Divi más fácilmente en el futuro.

En el modo de capas, haga clic en Abrir/Cerrar todo para que pueda ver todos los elementos Divi. En la segunda fila de la sección, elimine el módulo de código. No necesitaremos este código personalizado para este tutorial.

Parte 2: Creación de un encabezado fijo con pestaña de alternar en Divi

La configuración de la sección

Para este encabezado, vamos a hacer que toda la sección sea adhesiva para que el encabezado se adhiera a la parte superior de la página cuando se desplace. También le daremos a la sección una clase CSS personalizada para orientarla más adelante con nuestro código personalizado.

Abra la configuración de la sección y actualice lo siguiente:

  • Clase CSS: et-divi-sticky-header
  • Posición pegajosa: Stick to Top

Creación de la pestaña Alternar con un módulo de Blurb

A continuación, vamos a crear nuestra pestaña de alternar usando un módulo de publicidad.

Para hacer esto, agregue un nuevo módulo de propaganda en la parte inferior de la segunda fila debajo del módulo de menú.

Luego abra la configuración de publicidad y actualice el contenido de la siguiente manera:

  • eliminar el contenido del título
  • eliminar el contenido del cuerpo
  • Icono de uso: SÍ
  • Icono: flecha hacia arriba (ver captura de pantalla)
  • Color de fondo: #ffffff

En la pestaña de diseño, actualice lo siguiente:

  • Color del icono: #1a3066
  • Usar tamaño de fuente del icono: SÍ
  • Tamaño de fuente del icono: 40px
  • Ancho: 45px
  • Altura: 45px

  • Margen: 0px
  • Esquinas redondeadas: 12 px abajo a la izquierda, 12 px abajo a la derecha
  • Transformar Traducir Eje X: 100%
  • Animación de imagen/icono: sin animación

NOTA: Con la transformación y traducción Y configurada al 100 %, el ícono se moverá hacia abajo exactamente el 100 % de la altura del ícono (45 px).

En la pestaña Avanzado, actualice lo siguiente:

  • Clase CSS: et-divi-sticky-toggle
  • Posición: Absoluta
  • Ubicación: abajo a la derecha
  • Desplazamiento horizontal: 20 px
  • Índice Z: -1

Ahora que la propaganda tiene una posición absoluta (con la transformación traducir Y 100%), la propaganda (pestaña de alternancia) se ubicará justo debajo de toda la sección del encabezado. Esto es importante para que la pestaña de alternar permanezca visible/se pueda hacer clic cuando mostramos/ocultamos el encabezado al hacer clic en la pestaña de alternar.

Agregar el código personalizado

Para agregar la funcionalidad que necesitamos para este cambio de encabezado fijo, necesitaremos agregar algunos CSS y JQuery personalizados.

Para hacer esto, agregaremos un nuevo módulo de código debajo del módulo de propaganda.

Dentro del cuadro de contenido del código, pegue el siguiente CSS asegurándose de envolver el código en las etiquetas de estilo necesarias.

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
.et-divi-sticky-toggle {
  visibility: hidden;
  opacity: 0;
  transition: all 400ms;
}
 
.et-divi-sticky-toggle:hover {
  cursor: pointer;
}
 
.et-divi-sticky-toggle.et-show-toggle {
  visibility: visible;
  opacity: 1;
}
 
.et-divi-sticky-header {
  transition: all 400ms !important;
}
.et-divi-sticky-header.et-hide-sticky-header {
  transform: translateX(0%) translateY(-100%) !important;
}
 
.et-divi-sticky-toggle .et-pb-icon {
  margin-bottom: 0px;
  transition: all 400ms;
}
 
.et-hide-sticky-header .et-divi-sticky-toggle .et-pb-icon {
  transform: rotateX(180deg);
}

Debajo de la etiqueta de secuencia de comandos final que rodea el CSS personalizado, pegue el siguiente JQuery asegurándose de envolver el código en las etiquetas de secuencia de comandos necesarias.

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
jQuery(document).ready(function ($) {
  // variables for header and toggle
  $stickyHeader = $(".et-divi-sticky-header");
  $stickyToggle = $(".et-divi-sticky-toggle");
 
  // attach scroll event handler function to window that
  // uses the windows scroll position (winScrollTop) and
  // the height of the header (headerHeight) to hide/show
  // toggle once the user scrolls beyond the header height.
  $(window).on("scroll", function () {
    winScrollTop = $(window).scrollTop();
    headerHeight = $stickyHeader.height();
    if (
      winScrollTop >= headerHeight &&
      !$stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.addClass("et-show-toggle");
    } else if (
      winScrollTop < headerHeight &&
      $stickyToggle.hasClass("et-show-toggle")
    ) {
      $stickyToggle.removeClass("et-show-toggle");
      $stickyHeader.removeClass("et-hide-sticky-header");
    }
  });
 
  // attach click event function on toggle tab that
  // toggles the "et-hide-sticky-header" class.
  $stickyToggle.on("click", function (e) {
    $stickyHeader.toggleClass("et-hide-sticky-header");
  });
});

Resultado final

Para ver el resultado final, deberá asignar la plantilla con el nuevo encabezado a una página o a todas las páginas de su sitio web.

Para hacer esto, guarde el diseño y salga del editor de plantillas de encabezado.

A continuación, abra la configuración de la plantilla (el icono de engranaje) para la plantilla con el nuevo encabezado de pestaña de alternancia adhesiva. En la pestaña Usar en, seleccione Todas las páginas y haga clic en el botón Guardar.

IMPORTANTE: Esto mostrará el encabezado en todas las páginas de su sitio web. Así que asegúrese de estar utilizando un sitio de prueba y no su sitio web en vivo.

Ahora, abre cualquier página de tu sitio web para ver el resultado.

Aquí hay una vista previa de cómo se verá en el escritorio, la tableta y el teléfono.

Pensamientos finales

En este tutorial, le mostramos cómo crear una pestaña de alternancia para un encabezado fijo. Esta puede ser una solución útil tanto para los desarrolladores que desean mantener el contenido importante del encabezado fijo accesible para los usuarios como para los usuarios que desean ocultar o mostrar ese encabezado cuando lo deseen. ¡Con suerte, esto será útil para un proyecto futuro!

Espero escuchar de usted en los comentarios.

¡Salud!