Desde que se lanzó la actualización de las opciones fijas de Divi , hemos estado compartiendo consejos y trucos sobre cómo usarlos a lo largo de las construcciones de su sitio web con Divi , ¡y hoy estamos agregando otro para que lo marque como favorito! Este tutorial será todo acerca de la interacción. Colocaremos automáticamente un encabezado personalizado debajo de la sección principal de cada página y convertiremos ese encabezado en fijo tan pronto como los visitantes se desplacen más allá de él, lo que da como resultado una hermosa experiencia de desplazamiento. ¡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
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 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. Cree una nueva página utilizando la página de destino del paquete de diseño de tapicería de Divi
Para este tutorial, vamos a utilizar 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 realiza 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 con un diseño de elección que viene con el paquete de diseño de tapicería de Divi.
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. Descargar e instalar este obsequio nos ayudará a concentrarnos en la parte importante de este tutorial, que es obtener 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 un pie de página globales.
Para usar el archivo JSON que acaba de descargar, vaya a Divi Theme Builder.
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á un encabezado y un pie de página globales dentro de su plantilla de sitio web predeterminada. Para evitar colocaciones extrañas de encabezados, solo aplicaremos el efecto «recoger encabezado fijo» en nuestras páginas, pero si también tiene una sección de héroe creada por Divi en otros tipos de publicaciones personalizadas, siéntase libre de usar el encabezado allí también. Agregue una nueva plantilla y utilícela en todas las páginas.
- Usar en: todas las páginas
Tan pronto como agregue la plantilla de página, el encabezado y el 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 el pie de página globales en nuestra plantilla de sitio web predeterminada. De esta manera, 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 principal
Abrir plantilla de encabezado global
Ahora que hemos configurado el entorno del generador de temas para nuestro encabezado, es hora de cambiar a nuestra plantilla de encabezado haciendo clic en el icono del lápiz.
Asigne una ID de CSS personalizada a la sección dentro del encabezado global
Una vez dentro del editor de plantillas, verás 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 principal de cada página, necesitaremos asignar una identificación 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 pasa por el encabezado, se vuelve pegajoso. Cuando las personas se desplacen hacia arriba, volverá a ocupar su lugar debajo de la sección principal.
- ID de CSS: encabezado personalizado
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 JQuery que colocará automáticamente la sección de encabezado debajo de la primera sección principal de cada página.
|
01
02
03
04
05
|
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 se muestre en el generador mientras se crean las páginas.
|
01
02
03
|
#et_pb_root #custom-header {display: none;} |
4. Aplicar posición fija y estilos al encabezado
Agregar posicionamiento fijo a la sección
Ahora que nuestra sección está ubicada 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 integrada de Divi en la pestaña avanzada.
- Posición pegajosa: Stick to Top
Agregar sombra de cuadro adhesivo a la sección
Ahora que se ha aplicado la posición fija, podemos comenzar a realizar cambios fijos en nuestra sección y todos los elementos secundarios que contiene. Comenzaremos agregando una sombra de cuadro adhesivo a nuestro contenedor de sección.
- Fuerza de desenfoque de sombra de cuadro: 30px
- Color de sombra
- Predeterminado: rgba(0,0,0,0)
- Pegajoso: rgba(0,0,0,0.13)
Modificar fondo de degradado de fila fija
Luego, aplicaremos un fondo degradado pegajoso a nuestra fila.
- Color 1: #ffffff
- Color 2: #e8e8e8
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
También modificaremos el color del ícono de la hamburguesa del menú fijo.
- Color del icono del menú de hamburguesas: #2d2e34
Agregar filtro de inversión de logotipo fijo
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, compartimos otro consejo y truco que puede aplicar con las opciones adhesivas integradas de Divi. Más específicamente, le mostramos cómo «recoger» su encabezado una vez que lo pasa. 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 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.