ElegantThemes

Aquí se explica cómo hacer que todos los elementos de la página Divi sean adhesivos

Los elementos fijos (o sólidos) son partes de un sitio web que permanecen en su lugar cuando el usuario se desplaza hacia abajo en la página. Hay muchos usos para este tipo de función. Quizás el menú de navegación principal sigue al usuario. O una suscripción de correo electrónico se desplaza a lo largo del borde de la página. Quizás solo un buen elemento de diseño se suma a la experiencia general del usuario. Independientemente de lo que necesite para ceñirse a la página, Divi tiene opciones integradas para agregar este efecto a su sitio web de manera fácil y rápida.

En este tutorial, le mostraremos cómo hacer que cada elemento de su página sea «fijo» (sólido) usando la configuración Divi incorporada para que no tenga que preocuparse por el código de los complementos en absoluto. Es simple, fácil y rápido. Así que profundizamos.

Qué necesitará para este tutorial

Para anclar un elemento en su sitio web, necesita lo siguiente:

  • Tema Divi
  • Elementos para pegar
  • ¡Eso es!

Aquí se explica cómo hacer que todos los elementos de la página Divi sean adhesivos

El primer paso para hacer un artículo adhesivo es abrir el lado con el que desea trabajar. Dado que esta no es una configuración global o avanzada y solo se aplica a un solo elemento, estamos trabajando directamente dentro de una página (o un diseño de creación de temas). Asegúrese de abrirlo en Divi Builder para editarlo.

A continuación, elija su artículo Divi-Sticky. Todo puede estar en la página, pero trabajaremos con un solo módulo por hoy. Vamos a elegir eso Compra en línea Módulo de botones porque ese es un elemento bastante común que se pone en la pantalla.

Módulo de botones

A continuación, abra la configuración del módulo haciendo clic en el icono de engranaje y navegando hasta el Progresivo Tab. Desplácese hacia abajo hasta encontrar este Efectos de desplazamiento Entrada. Elija ya sea Permanecer de pié, Quédate abajo, o Mantenga arriba y abajo. La diferencia significa que el elemento permanecerá desplazándose hacia abajo cuando seleccione Permanecer de pié. (Imagínese empujándolo hacia abajo desde esta parte de la ventana gráfica). Quédate abajo significa que incluso mientras se desplaza hacia arriba, seguirá siendo pegajoso en lugar de quedarse atrás.

Efectos de desplazamiento para pegajoso

Mantenga arriba y abajo es una combinación que. ¡Y eso es! El artículo ahora está pegajoso. Ahora puede establecer límites para el elemento y dejar que se desplace solo a ciertas partes de la página o ciertas distancias desde la ventana gráfica.

bordes adhesivos en divi

Después de elegir cómo desea que se adhiera el elemento Divi, puede elegir qué tan lejos debe adherirse del borde superior o inferior una vez que el usuario comience a desplazarse. Si tu escoges 0pxPor ejemplo, el elemento solo se adherirá al borde mismo de la ventana gráfica. Asimismo, si eliges 55px, siempre estará a esta distancia del borde de la ventana gráfica al desplazarse. Tampoco comienza a desplazarse hasta que el borde de la ventana gráfica alcanza esta distancia.

Ese Límite pegajoso superior / inferior Los menús desplegables ajustan dónde se queda la cosa pegajosa. Puede elegir si cada elemento debe estar en uno de sus contenedores principales (pilar, la línea, o sección), o puede pegarlo por toda la página deslizando el Área del cuerpo Oportunidad. Esta configuración puede ser diferente para ambos. Puede elegir que un elemento se adhiera a la parte inferior de la página cuando se desplaza hacia abajo, pero que se detenga en la parte superior de su sección cuando el usuario se desplaza sobre él.

Disparador de efecto de movimiento

Puede especificar en qué parte del elemento comienza el desplazamiento presionando el botón Disparador de efecto de movimiento Situada cerca de la parte inferior de la Efectos de desplazamiento Sección. Elija entre arriba, abajo o en el medio del elemento. Aquí Divi sigue la ventana gráfica para iniciar el efecto de elemento adhesivo.

Es posible que esté utilizando varios elementos pegajosos y desee mantenerlos separados. Si es así, habilite Desplazamiento de elementos pegajosos circundantes y los valores de compensación utilizados anteriormente se aplican a otros elementos de bordado. Si no lo hace, es probable que sus elementos adhesivos se superpongan a medida que se desplaza. Nadie quiere eso.

Opciones de compensación

Ese Transforma estilos estándar y pegajosos es una forma fantástica de experimentar. Puede cambiar tanto la transición / animación de un elemento presionando Efectos de transformación de desplazamiento. Puede configurar el elemento para que se vuelva pegajoso o girará para llamar la atención sobre el elemento que ahora lo sigue.

También puede utilizar esta opción para cambiar todo el diseño de un elemento adhesivo. en el diseño Puedes activar la pestaña Estilos pegajosos haciendo clic en Símbolo de chincheta. Tenga en cuenta que este icono solo aparecerá si ha activado la adherencia en Progresivo – Efectos de desplazamiento ya.

Opciones de diseño para elementos adhesivos.

Luego, puede personalizar el estilo del elemento adhesivo como cualquier otro estilo secundario de Divi. Simplemente haga clic en la pestaña de tachuelas en lugar de en el dispositivo móvil, el escritorio o la tableta. Divi te permite cambiar todo, desde el fondo hasta el color y el tamaño, para que el elemento adhesivo siempre luzca diferente al estático.

También nos gustaría señalar que si pega una sección, por ejemplo, verá el icono de chincheta para todos los elementos secundarios en ella: filas, columnas, módulos. Dado que su padre es pegajoso, heredan esta propiedad, pero se pueden personalizar para desplazarse.

Ajuste del índice Z

Probablemente desee que los elementos Divi-Sticky permanezcan encima del resto del contenido de la página. Entonces tienes que ajustar el tuyo Valor del índice Z. Puedes encontrar eso en el posición Sección de la Progresivo Tab. Z-Index es la profundidad relativa de los elementos en la página. Esto significa que un elemento con un índice Z más alto aparecerá antes que los elementos con un valor más bajo.

índice z del elemento adhesivo

Si ajusta el valor y el elemento fijo permanece en la página debajo de otros, incluso si tienen un valor de índice z más bajo, deberá ajustar el índice z de la línea o sección que lo contiene.

índice z para filas

Siempre que ambos sean más grandes que los otros elementos de la página, el elemento adhesivo flotará en la parte superior.

Termine con Divi Sticky Elements

Las opciones de elementos adhesivos incorporados de Divi le permiten pegar cualquier módulo, fila, columna o sección en las pantallas de sus usuarios mientras te desplazas. Ya sea CTA, submenú, ofertas promocionales o cualquier otra cosa que se te ocurra, hemos reunido algunas poderosas opciones en tus manos. ¡Y estamos emocionados de ver cómo los usa!

El cargo Aquí se explica cómo hacer que todos los elementos de la página Divi sean adhesivos apareció primero Blog temático elegante.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *