Los elementos adhesivos (o fijos) son partes de un sitio web que permanecen en su lugar mientras el usuario se desplaza hacia abajo en la página. Hay muchos usos para este tipo de característica. Tal vez el menú de navegación principal sigue al usuario. O un correo electrónico de suscripción se desplaza a lo largo del costado de la página. Tal vez solo un buen elemento de diseño se suma a la experiencia general del usuario. Independientemente de lo que necesite para apegarse a la página, Divi tiene opciones integradas para agregar este efecto a su sitio de manera simple y rápida.
En este tutorial, le mostraremos cómo hacer que cualquier elemento de su página sea «pegajoso» (fijo) usando la configuración integrada de Divi para que no tenga que preocuparse por el código de los complementos. Es simple, fácil y rápido. Así que profundicemos.
Para hacer que cualquier elemento sea fijo en su sitio, necesitará lo siguiente:
- Tema Divi
- Elementos para hacer pegajoso
- ¡Eso es todo!
Cómo hacer que cualquier elemento de la página Divi sea pegajoso
El primer paso para hacer que un elemento sea fijo es abrir la página con la que desea trabajar. Debido a que esta no es una configuración global o extendida y solo se aplica a un solo elemento, trabajaremos directamente dentro de una página (o diseño de generador de temas). Asegúrate de abrirlo en el constructor Divi para editarlo.
A continuación, elegirá su elemento adhesivo Divi. Puede ser cualquier cosa en la página, pero vamos a trabajar con un solo módulo por hoy. Elijamos el módulo del botón Comprar en línea porque es un elemento bastante común para colocar en la pantalla.
Luego, abra la configuración del módulo haciendo clic en el icono de engranaje y vaya a la pestaña Avanzado . Desplácese hacia abajo hasta que encuentre la entrada Efectos de desplazamiento . Elija Pegar en la parte superior , Pegar en la parte inferior o Pegar en la parte superior e inferior . La diferencia significa que el elemento se mantendrá en el desplazamiento hacia abajo si selecciona Stick to Top. (Piense en ello como si fuera empujado hacia abajo por esa parte de la ventana gráfica). Stick to Bottom significa que seguirá siendo pegajoso cuando el usuario se desplace hacia arriba también, en lugar de quedarse atrás.
Stick to Top and Bottom es una combinación de esos. ¡Y eso es! El elemento es pegajoso ahora. Ahora, puede establecer límites para el elemento y hacer que solo se desplace a ciertas partes de la página o a ciertas distancias de la ventana gráfica.
Una vez que haya seleccionado cómo desea que se pegue el elemento Divi, puede elegir qué tan lejos de la parte superior o inferior se pegará una vez que el usuario comience a desplazarse. Si elige 0px , por ejemplo, el elemento solo se adherirá al borde de la ventana gráfica. Del mismo modo, si elige 55px , siempre será esa distancia desde el borde de la ventana gráfica una vez mientras se desplaza. Además, solo comenzará a desplazarse cuando el borde de la ventana gráfica llegue a esa distancia.
Los menús desplegables Top/Bottom Sticky Limit ajustan dónde permanece pegajoso. Puede elegir que cualquier elemento se pegue dentro de cualquiera de sus contenedores principales ( columna , fila o sección ), o puede optar por dejar que se pegue también en toda la página usando la opción de área del cuerpo . Esta configuración puede ser diferente para cualquiera. Puede elegir que un elemento se adhiera hasta la parte inferior de la página en un desplazamiento hacia abajo, pero que se detenga en la parte superior de su sección si el usuario se desplaza por encima de él.
Es posible que esté utilizando varios elementos adhesivos y desee que mantengan la distancia. Si ese es el caso, habilite Desplazamiento desde elementos adhesivos circundantes y los valores de desplazamiento que usa arriba se aplicarán a otros elementos adhesivos. Si no lo hace, existe la posibilidad de que sus elementos adhesivos se superpongan a medida que se desplaza. Nadie quiere eso.
Los estilos Transform Default y Sticky son una opción fantástica para experimentar. Puede cambiar tanto la transición como la animación que toma un elemento usando Efectos de transformación de desplazamiento . Puede hacer que el elemento se desvanezca y se vuelva pegajoso o rotarlo para llamar la atención sobre el elemento que ahora lo sigue.
Además, puede usar esta opción para cambiar el estilo completo de cualquier elemento fijo. En la pestaña Diseño , puede habilitar Estilos fijos haciendo clic en el ícono de la chincheta . Tenga en cuenta que este icono solo aparecerá si ya ha habilitado la permanencia en Avanzado – Efectos de desplazamiento .
A continuación, puede ajustar el estilo del elemento fijo como lo haría con cualquier otro estilo Divi secundario. Simplemente haga clic en la pestaña de la chincheta en lugar de móvil, computadora de escritorio o tableta. Divi te da la opción de cambiar cualquier cosa, desde el fondo hasta el color y el tamaño, de modo que el elemento adhesivo siempre se vea diferente al estático.
También queremos señalar que si convierte una sección en fija, por ejemplo, el ícono de la chincheta aparecerá para todos los elementos secundarios en ella: filas, columnas, módulos. Debido a que su padre es fijo, heredan esa propiedad, pero se les puede aplicar un estilo individual para el desplazamiento.
Ajuste del índice Z
Lo más probable es que desee que los elementos adhesivos de Divi permanezcan encima del resto del contenido de la página. Por lo tanto , deberá ajustar su valor de índice Z. Lo encontrará en la sección Posición de la pestaña Avanzado . El índice Z es la profundidad relativa de los elementos en la página. Esto significa que un elemento con un índice Z más alto aparecerá delante de elementos con un valor más bajo.
Si ajusta el valor y el elemento adhesivo permanece debajo de otros en la página, incluso si tienen un valor de índice Z más bajo, deberá ajustar el índice Z de la fila o sección que lo contiene.
Siempre que ambos sean mayores que los otros elementos de la página, el elemento adhesivo flotará en la parte superior.
Terminando con Divi Sticky Elements
Con las opciones de elementos fijos integrados de Divi, puede pegar cualquier módulo, fila, columna o sección en las pantallas de sus usuarios a medida que se desplazan . Ya sea un CTA, un submenú, ofertas promocionales o cualquier otra cosa que se te ocurra, hemos puesto algunas opciones poderosas en tus manos. ¡Y no podemos esperar a ver cómo los pones en uso!