Cómo "recoger" su encabezado adhesivo Divi al pasar la sección de héroe de su página
Publicado: 2020-11-18Desde que se lanzó la actualización de opciones adhesivas de Divi, hemos estado compartiendo consejos y trucos sobre cómo usarlas en las compilaciones de su sitio web con Divi, y hoy, ¡agregamos otro para que lo agregue a favoritos! Este tutorial tratará sobre la interacción. Colocaremos automáticamente un encabezado personalizado debajo de la sección de héroe de cada página y lo volveremos pegajoso tan pronto como los visitantes pasen por él, lo que resulta en una hermosa experiencia de desplazamiento. ¡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
Descarga la plantilla GRATIS
Para poner sus manos en la plantilla de página 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.
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.
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. Cree una nueva página utilizando la página de inicio del paquete de diseño de tapicería de Divi
Para este tutorial, usaremos el paquete de diseño de tapicería y su plantilla gratuita de encabezado y pie de página que puede descargar en el blog. Aunque estamos usando este paquete de diseño en particular, puede aplicar este método a cualquier tipo de sitio web que esté creando. Para obtener una vista previa del resultado mientras sigue el tutorial a continuación, le recomendamos que configure una página que mantenga abierta en una pestaña separada. Para que coincida con el encabezado y el pie de página que usaremos, estamos configurando una nueva página usando un diseño de elección que viene con el paquete de diseño de tapicería de Divi.
2. Descargue e instale el encabezado y pie de página gratuitos para el paquete de diseño de tapicería de Divi
Descargue el encabezado y pie de página gratuitos en nuestro blog
A continuación, descargaremos la plantilla gratuita de encabezado y pie de página para el paquete de diseño de tapicería de Divi. La descarga e instalación de este programa gratuito nos ayudará a concentrarnos en la parte importante de este tutorial, que es la técnica correcta. Una vez que haya ido a la publicación del blog, navegue hasta el formulario de suscripción de correo electrónico y complete su dirección de correo electrónico. Luego, aparecerá un botón de descarga. Este botón de descarga le permitirá descargar una carpeta comprimida. Una vez que haya descomprimido la carpeta, puede encontrar un archivo JSON que contiene una plantilla de sitio web predeterminada con un encabezado y pie de página globales.
Navega hasta el generador de temas de Divi
Para usar el archivo JSON que acaba de descargar, navegue hasta Divi Theme Builder.
Cargue la plantilla de sitio web predeterminada con diseños de encabezado y pie de página
Allí, haga clic en el botón importar y exportar en la esquina superior derecha y cargue el archivo JSON que puede encontrar en su carpeta de descargas.
Crear nueva plantilla de página
Tan pronto como haya cargado la plantilla, verá aparecer un encabezado y un pie de página globales dentro de la plantilla predeterminada de su sitio web. Para evitar ubicaciones de encabezado extrañas, solo aplicaremos el efecto "recoger encabezado fijo" a nuestras páginas, pero si también tiene una sección de héroe construida por Divi en otros tipos de publicaciones personalizadas, no dude en usar el encabezado allí también. Agregue una nueva plantilla y úsela en todas las páginas.
- Usar en: todas las páginas
Eliminar la plantilla de encabezado y pie de página de la plantilla de sitio web predeterminada
Tan pronto como agregue la plantilla de página, el encabezado y pie de página globales se agregarán automáticamente a esa plantilla. Estamos convirtiendo este encabezado global en un encabezado personalizado eliminando el encabezado y pie de página globales en nuestra plantilla de sitio web predeterminada. De esta forma, los cambios que hagamos en nuestro encabezado solo se aplicarán a las páginas.
3. Coloque la sección de encabezado debajo de la sección de héroe
Abrir plantilla de encabezado global
Ahora que hemos configurado el entorno de creación de temas para nuestro encabezado, es hora de cambiar a nuestra plantilla de encabezado haciendo clic en el icono de lápiz.
Asignar un ID de CSS personalizado a la sección dentro del encabezado global
Una vez dentro del editor de plantillas, verá un diseño de encabezado que contiene una sección, una fila y un par de módulos. Para colocar automáticamente el encabezado debajo de la primera sección de héroe de cada página, necesitaremos asignar una ID personalizada a nuestra sección. La técnica que estamos usando se basa en un tutorial anterior. La diferencia entre esta publicación y la mencionada en la oración anterior es que tan pronto como un visitante pase por el encabezado, se volverá pegajoso. Cuando las personas se desplacen hacia arriba, volverá a ocupar su lugar debajo de la sección de héroes.
- ID de CSS: encabezado personalizado
Agregar módulo de código debajo del módulo de menú en la columna 1
Continúe agregando un nuevo módulo de código a la primera columna de la fila.
Agregue el código JQuery para colocar la sección debajo de la primera sección de cada página
Allí, insertaremos un código de JQuery que colocará automáticamente la sección de encabezado debajo de la primera sección de héroe de cada página.
jQuery(function($){
$(document).ready(function(){
$('#custom-header').insertAfter('.et_pb_section_0');
});
});
Agregar código CSS al mismo módulo de código
También incluiremos una clase CSS entre las etiquetas de estilo para evitar que el encabezado aparezca en el constructor mientras se crean las páginas.
#et_pb_root #custom-header {
display: none;
}
4. Aplicar estilos y posiciones fijas al encabezado
Agregar posicionamiento fijo a la sección
Ahora que nuestra sección está debajo de la primera sección de héroe de cada página, es hora de aplicar también el efecto adhesivo. Para hacer eso, usaremos la configuración adhesiva incorporada de Divi en la pestaña avanzada.
- Posición adhesiva: adherirse a la parte superior
Agregar sombra de cuadro adhesivo a la sección
Ahora que se ha aplicado la posición fija, podemos empezar a realizar cambios fijos en nuestra sección y todos los elementos secundarios que contiene. Comenzaremos agregando una sombra de caja adhesiva a nuestro contenedor de sección.
- Fuerza de desenfoque de sombra de caja: 30px
- Color de sombra
- Por defecto: rgba (0,0,0,0)
- Pegajoso: rgba (0,0,0,0.13)
Modificar el fondo degradado de fila pegajosa
Luego, aplicaremos un fondo degradado adhesivo a nuestra fila.
- Color 1: #ffffff
- Color 2: # e8e8e8
Modificar el color del texto del módulo de menú fijo
Luego, abriremos el Módulo de menú y cambiaremos el color del texto del menú en un estado fijo.
- Color del texto del menú: # 2d2e34
Modificar el color del icono de hamburguesa del menú pegajoso
También modificaremos el color del icono de hamburguesa del menú adhesivo.
- Color del icono del menú de hamburguesas: # 2d2e34
Agregar filtro de inversión de logotipo adhesivo
Y completaremos el tutorial agregando un filtro de inversión de imagen. ¡Eso es todo! Una vez que haya aplicado todos estos cambios a su encabezado, asegúrese de guardar la plantilla y los cambios de Divi Theme Builder antes de ver el resultado en la página que creó en la primera parte del tutorial.
- Inversión de imagen: 80%
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, hemos compartido otro consejo y truco que puede aplicar con las opciones adhesivas incorporadas de Divi. Más específicamente, le mostramos cómo "levantar" su encabezado una vez que se desplaza más allá de él. El encabezado se colocará automáticamente debajo de la primera sección de cada página. Si tiene alguna pregunta o sugerencia, ¡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.