Cómo hacer que cualquier elemento de la página Divi sea pegajoso

Saber cómo hacer que cualquier elemento de la página Divi sea pegajoso (o fijo) es una de esas habilidades útiles que los diseñadores web pueden usar de varias maneras. Si no está familiarizado con el término "pegajoso", simplemente se refiere a un elemento en una página web que permanece "fijo" mientras el usuario se desplaza hacia abajo en la página. Un ejemplo popular de elemento fijo es un menú de navegación fijo. Divi tiene una funcionalidad de navegación fija (o pegajosa) disponible de forma predeterminada. Entonces, cuando el usuario se desplaza hacia abajo en la página, una versión fija del menú permanece atascada en la parte superior de la página mientras el usuario se desplaza. Pero los elementos adhesivos se pueden usar para casi cualquier cosa y es una excelente manera de llamar la atención sobre la llamada a la acción deseada en cualquier página determinada.

En este tutorial, le mostraré una manera fácil de hacer que cualquier elemento de su página sea pegajoso usando el complemento llamado Sticky Menu (o Anything!) En Scroll. Todo lo que se necesita es unos momentos para configurar los ajustes del complemento. Luego, todo lo que necesita hacer es agregar una ID CSS personalizada a su elemento. Es fácil.

¡Entremos en ello!

Qué necesitas para este tutorial

Para este tutorial, necesitará lo siguiente:

• Tema Divi
• El menú fijo (¡o cualquier cosa!) En el complemento Scroll
• El diseño de la página del blog del contable (disponible en Divi Builder)

Cómo hacer que cualquier elemento de la página Divi sea pegajoso

Suscríbete a nuestro canal de Youtube

Configurar los ajustes del complemento

Una vez que tenga el menú Sticky (o Anything!) En el complemento Scroll instalado y activado en su tema Divi, diríjase al panel de WordPress y navegue hasta Settings> Sticky Menu (o Anything!).

En la pestaña Configuración básica, actualice las opciones de la siguiente manera:

Primero, deberá agregar un identificador único para su elemento fijo. Puede ser una clase o un ID de CSS. Luego agregaremos este identificador a nuestro elemento en Divi más adelante. Para que sea más fácil de recordar, agregaré el ID de CSS "#sticky".

Elemento pegajoso: # pegajoso

Luego, debe agregar el valor de píxel para el espacio entre la parte superior de la página y el elemento adhesivo. Dado que la barra de navegación fija de Divi tiene 54px de altura por defecto, queremos agregar al menos 54px para esta opción para que nuestro elemento fijo no se superponga a la navegación fija.

Espacio entre la parte superior de la página y el elemento adhesivo: 54 píxeles

También es una buena idea desactivar el elemento adhesivo en el móvil. Para ello necesitamos configurar el plugin para que no pegue el elemento cuando la pantalla sea menor a 980px.

No pegue el elemento cuando la pantalla sea más pequeña que: 980 píxeles

Guarde su configuración y luego vaya a la pestaña Configuración avanzada y actualice lo siguiente:

Para la opción de índice z, queremos asegurarnos de que nuestro elemento esté apilado encima de todos los demás elementos de la página, especialmente si planeamos que nuestro elemento se superponga a otros elementos en el desplazamiento. Para asegurarse de que esto suceda, establezca el índice z en 99998.

Índice Z: 99998

Para darte una idea de cómo se ordenan los elementos en Divi, las secciones tienen un índice Z de 2, las columnas tienen un índice Z de 9 y la barra de encabezado / navegación tiene un índice Z de 99999. queriendo que nuestro elemento fijo sea 1 número más bajo que el índice z para la navegación del encabezado. Esto asegurará que el elemento fijo se ubique por encima de todo lo demás en la página excepto el nav. Esto será útil siempre que desee detener su elemento y empujarlo hacia arriba en la página para que el elemento adhesivo no se quede en la parte superior del navegador mientras se desplaza (se ve desordenado y roto).

A continuación, podemos agregar un identificador de elemento "push up". Puede pensar en esto como un tapón para nuestro elemento adhesivo. Suele ser un elemento de pie de página. Básicamente, esto identifica el elemento que detendrá el elemento adhesivo cuando se desplaza hacia abajo en la página, lo que permite que el elemento adhesivo se empuje hacia arriba con el resto de la página. Para este ejemplo, voy a establecer el identificador con el ID de CSS "#stop".

Elemento push-up: #stop

Guardar ajustes.

¡Ahora estamos equipados con la potencia que necesitamos para hacer un elemento pegajoso!

Hacer pegajoso un elemento de página Divi

Para mostrarle cómo hacer que un elemento Divi sea pegajoso, usaré la página del blog de contadores de Divi del paquete de diseño de contadores. Para comenzar, cree una nueva página, asigne un título a su página e implemente Visual Builder. Luego seleccione la opción "Elegir un diseño prediseñado". En la ventana emergente de carga desde la biblioteca, seleccione el paquete de diseño de contable y elija la página Blog.

Esta página presenta un formulario de suscripción por correo electrónico en la barra lateral derecha de una sección especializada. En un esfuerzo por llamar más la atención sobre este formulario, podemos hacer que se vuelva pegajoso una vez que el usuario se desplaza hacia abajo en la página. Luego, podemos hacer que el elemento se detenga (o empuje hacia arriba) cada vez que llegue a la siguiente sección de la página para que no se superponga.

Cómo hacer una columna pegajosa

En este punto, sin embargo, debemos decidir qué elemento específico queremos hacer pegajoso. Podríamos hacer que el módulo de Opción de correo electrónico sea pegajoso, pero eso no tendría en cuenta el módulo de Seguimiento de redes sociales directamente debajo del formulario, que también queremos que sea pegajoso. Y podemos dar a ambos módulos el mismo identificador porque ambos se volverían pegajosos en la misma posición causando superposición. La mejor manera de hacer esto es hacer que toda la columna (columna 2) sea pegajosa.

Para hacer que la columna 2 sea pegajosa, abra la configuración de fila de la fila que contiene la columna que queremos apuntar. Luego, en la pestaña Avanzado, agregue el ID de CSS "pegajoso". Esto corresponde al identificador único del elemento fijo que agregamos en la configuración de nuestro complemento.

ID de CSS: pegajoso

(NOTA: No coloque el símbolo de hashtag (o libra) antes del ID aquí. Además, asegúrese de agregarlo al ID de CSS y no a la Clase de CSS)

Guarde la configuración y obtenga una vista previa de la versión en vivo de la página. Si se desplaza hacia abajo, notará que la columna 2 (con ambos módulos) se volverá pegajosa una vez que se conviertan en 54px desde la parte superior de la ventana y permanezcan en esa posición mientras continúa desplazándose.

Detención del elemento adhesivo en una sección

Como puede ver, el elemento sigue siendo pegajoso de modo que se superpone al contenido de las otras secciones a continuación. Para evitar que esto suceda, podemos usar nuestro identificador "push up" (#stop) que agregamos en la configuración del complemento.

Para detener el elemento fijo en la sección siguiente, debemos abrir la configuración de la sección y agregar el ID de CSS "detener".

ID de CSS: detener

Ahora obtenga una vista previa de la versión en vivo de la página. Observe cómo el elemento adhesivo se detiene en la sección que identificó.

Bastante bien, ¿verdad?

Cómo hacer que un módulo sea pegajoso

Para hacer que un solo módulo sea pegajoso, deberá realizar un ajuste en Divi para asegurarse de que su elemento tenga el índice Z correcto para que se ubique encima de otros elementos a lo largo de la página cuando se desplaza. Como mencioné anteriormente, Divi asigna un índice z de 2 a todas las secciones. Y el complemento aplica el índice z de 99998 al elemento fijo. Pero dado que un módulo no se puede ordenar (o indexar) por encima de su elemento principal (la sección), el módulo aún se ubicará detrás de otros módulos en la página. Para solucionar esto, debemos asegurarnos y darle a la sección que contiene nuestro módulo fijo un índice Z de 99998 manualmente.

Para ilustrar esto, voy a usar el mismo diseño de página de Blog de contable que usamos anteriormente. Antes de agregar nuestro ID de CSS a un módulo, primero debemos sacar el ID de CSS (fijo) que configuramos para la columna 2. Y luego quitar el ID de CSS (detener) que configuramos para la sección debajo. Después de eso, abra la configuración del módulo Social Media Follow y agregue la ID de CSS "pegajosa" al módulo.

Si ve la página en vivo, notará que el elemento adhesivo está oculto cuando se superponen los otros módulos en las secciones siguientes a medida que se desplaza.

Para solucionar esto, abra la configuración de la sección para la sección que contiene el elemento fijo del módulo de seguimiento de redes sociales. Luego agregue el siguiente CSS personalizado al elemento principal:

z-index: 99998;

Ahora revisa la página en vivo. Observe cómo los íconos de las redes sociales se pegarán en la parte superior de la página (54px desde la parte superior), justo debajo de la navegación fija y luego permanecerán encima de los otros módulos mientras se desplaza.

Hacer una sección pegajosa

Para hacer que una sección completa sea pegajosa, debe seguir el mismo proceso de agregar el ID de CSS "pegajoso" a la sección de su elección. No es necesario actualizar el índice z usando CSS personalizado, ya que el complemento lo hace automáticamente.

Los efectos de desplazamiento pueden provocar fallas en los elementos pegajosos

Si tiene efectos de desplazamiento activo en toda su página o en su elemento adhesivo, es posible que encuentre algunos fallos. Si esto sucede, es posible que deba desactivar los efectos de desplazamiento del elemento adhesivo.

Solo un elemento fijo por página

El complemento solo permite un elemento adhesivo por página, por lo que si desea agregar varios elementos adhesivos, necesitará una solución más avanzada (u otro complemento que admita esto).

Pensamientos finales

Espero que este artículo haya sido útil para proporcionar una forma refrescante y sencilla de hacer que cualquier elemento de la página Divi sea pegajoso. Úselo para crear submenús fijos, CTA fijos, ofertas promocionales fijas y casi cualquier otra cosa que se le ocurra. ¡Diviértete explorando las posibilidades!

Espero tener noticias tuyas en los comentarios a continuación.

¡Salud!