La Herramienta Sticky de Divi

En este video te quiero mostrar la herramienta de Divi llamada Sticky Position y todo lo que se puede hacer con ella.
  1. Inicio
  2. Divi
  3. Guías Divi
  4. La Herramienta Sticky de Divi

WordPress es Mejor con Divi

Hoy te quiero mostrar la herramienta de Divi llamada Sticky Position.

Esta nueva característica permite hacer que un elemento se quede adherido en algún lugar de la pantalla mientras el resto del contenido de la página avanza de la forma habitual.

Te muestro cómo funciona en el video de arriba.

Para qué sirve la Herramienta Sticky de Divi

Cómo ya decía, la herramienta Sticky de Divi te permite hacer que un elemento se mueva en la página mientras hacemos scroll y se quede fijo cuando llega a algún punto determinado. Por ejemplo, el borde superior.

La diferencia con la Herramienta de Posición de Divi es que ésta fija completamente un elemento, mientras que con Sticky el elemento se mueve hasta que llega al punto definido.

Cómo Usar y Configurar Sticky Position de Divi

La herramienta Sticky Position de Divi se encuentra en la pestaña Avanzado de los ajustes de cualquier módulo, fila, columna o sección del constructor Divi Builder. Más precisamente en la sección Scroll Effects.

Cómo Configurar Sticky Position

La opción predeterminada de Sticky Position es Do Not Stick (No adherir) y desde el selector podemos alternar entre 4 posibilidades:

  • Do Not Stick. El elemento no es adhesivo sino regular.
  • Stick to Top. El elemento se adhiere al borde superior de la pantalla.
  • Stick to Bottom. El elemento se adhiere al borde inferior de la pantalla.
  • Stick to Top and Bottom. El elemento se adhiere tanto al borde superior como al inferior de la pantalla.

Luego de elegir a qué borde de la pantalla se va a adherir el elemento la herramienta nos ofrece algunas opciones más.

Sticky Offset

Esta opción nos permite definir un valor de desfase en píxeles entre el borde adhesivo de la pantalla y el elemento (es como un margen).

0px equivale al elemento pegado justo en el borde, y si aumentamos este valor el elemento se adhiere pero con una separación desde el borde.

Sticky Limit

Esta opción te permite definir un límite para el efecto adhesivo del elemento.

Las opciones disponibles varían según el elemento. Para los módulos tenemos las siguientes:

  • Ninguno.
  • Body area.
  • Sección.
  • Fila.
  • Columna.

Estas opciones corresponden a los contenedores del módulo y lo que indican es que el módulo permanezca adherido solo mientras el contenedor elegido esté en la pantalla.

Por ejemplo, si tenemos un módulo de texto adhesivo y elegimos como límite Sección, éste permanecerá adherido a la pantalla mientras estemos viendo la sección que lo contiene. Cuando la sección sale de la pantalla arrastra al módulo adhesivo y se lo lleva con ella.

Offset From Surrounding Sticky Elements

El desfase de los elementos contiguos sirve cuando necesitamos fijar a un mismo borde dos o más elementos.

Cuando esta opción está en cada elemento adhesivo se apila uno contra el otro a medida que van llegando al borde. Es decir que todos los elementos adhesivos quedan visibles en la pantalla.

En cambio si la opción está en No cada elemento adhesivo se solapa con el anterior superponiéndose entre sí y quedando visible solo uno de ellos, mientras que los otros quedan debajo.

Para definir cuál de los elementos queda arriba podemos usar la herramienta Puesto indicando un valor de Indice Z para cada elemento.

Transition Default and Sticky Styles

Con esta opción activamos la transición entre los estilos por defecto y los estilos de sticky. Al activar la transición el cambio entre unos estilos y otros se efectúa de forma suave cuando el elemento se convierte en adhesivo.

Cómo Configurar los Estilos Adhesivos

Cómo si lo anterior fuera poco, la herramienta Sticky de Divi nos permite definir estilos diferentes para un elemento cuando éste se hace adhesivo.

Es decir que un mismo módulo, fila o sección pueden tener ciertos estilos y estos estilos modificarse cuando el elemento se adhiere.

Para configurar los estilos adhesivos:

  1. Es indispensable que primero hagamos adhesivo el elemento, como mostré antes.
  2. Vamos al editor de cualquier estilo y ya vamos a ver, junto al título del estilo, un nuevo ícono (sticky).

Al hacer clic en el ícono Sticky se habilitan dos pestañas, una para los estilos por defecto y otra para los estilos sticky o adhesivos.

De esta forma podemos hacer, por ejemplo, que cambie el color de fondo de una sección, fila o módulo cuando éste se hace adhesivo, o que se transforme en transparente.

Y no solo el fondo… Casi todos los estilos tienen la posibilidad de cambiar cuando el elemento es adhesivo.

Contenedor adhesivo

Tengan en cuenta que si definimos como adhesiva una sección, se activan automáticamente los estilos adhesivos en todos los elementos que esta sección contiene, sin necesidad de hacer adhesivo cada fila o módulo por separado.

Qué se puede hacer con Sticky

La nueva herramienta Sticky de Divi abre un montón de posibilidades de diseño y facilita muchísimo la creación de  ciertas cosas para las que antes era necesario introducir códigos y CSS adicionales.

Encabezado Pegajoso con Sticky de Divi

Entre los ejemplos que muestro en el video podemos ver un menú que ocupa un lugar determinado en la página. Pero cuando llega al borde superior se queda pegado ahí.

Y no solo se queda adherido… también cambia su tamaño y estilo. Esto no se podía hacer con la herramienta de posición de Divi.

Y si observamos las fotos de comida también se quedan adheridas al borde superior gradualmente conformando un encabezado junto con el menú.

Cuando volvemos a subir éstos elementos recuperan su posición original en la página.

Menú de Categorías Adhesivo con Sticky de Divi

Hace un tiempo te mostraba en otro video cómo hacer un menú de categorías pegajoso. Este menú se queda adherido al borde superior de la pantalla cuando hacemos scroll.

Pero para eso era necesario insertar un código CSS un poco complicado en las opciones de CSS Personalizado de la sección que conforma el menú.

Ahora en cambio, con la herramienta Sticky Position de Divi es mucho más fácil y mejor…

Simplemente tenemos que ir a Scroll Efects en la pestaña Avanzado y ahí vamos a ver la nueva herramienta Sticky.

En el selector elegimos la opción Sticky to Top para indicar que el elemento se quede pegado al borde superior, en vez de seguir de largo como el resto de la página.

Pero eso no es todo…. La herramienta Sticky de Divi también nos permite modificar los estilos del elemento cuando éste se hace adhesivo.

Por ejemplo… Si vamos a la sección Fondo de la sección y hacemos clic en el nuevo ícono Sticky, vas a ver que ahora tenemos la pestaña Escritorio y la pestaña Sticky, donde podemos asignar estilos diferentes para cada momento del elemento.

De esta forma podemos lograr un menú que tiene inicialmente un fondo sólido y que se convierte en transparente cuando se hace adhesivo.

Y también podemos hacer que sea adhesivo el titulo de la entrada… Para eso vamos al módulo de texto y en la herramienta Sticky Position seleccionamos nuevamente Sticky to top…

Con ésto logramos que el título se pegue también, justo debajo del menú.

Incluso podemos cambiarle el tamaño al texto cuando se hace adhesivo para que el texto suba hasta quedarse pegado debajo del menú y además se reduzca su tamaño de fuente.

Encabezado Fijo con Sticky de Divi

También hace un tiempo te mostraba en otro video cómo hacer un menú que se quede fijo y flotando en la parte superior del página.

Ésto se podía hacer fácilmente con la herramienta de posición de Divi, donde seleccionamos la opción Fixed y elegíamos una posición determinada en la pantalla, para que la sección que contiene al encabezado se quede siempre fija en ese lugar.

Pero ahora, con la herramienta Sticky podemos hacer ésto mismo y además asignarle un estilo para que cambie al hacer scroll.

Si desactivamos la posición fija y vamos a Scroll Effects para seleccionar Sticky to top.

Una vez que definimos el elemento como sticky podemos ir a la pestaña Contenido y en Fondo asignarle un color diferente a la sección cuando ésta se hace adhesiva. Es decir cuando comenzamos a hacer scroll.

En la práctica la sección va a estar siempre en el borde superior (por ser el primer elemento de la página) pero técnicamente se convierte en adhesiva o sticky recién cuando comenzamos a hacer scroll. Y ahí es cuando se aplica el estilo Sticky.

También podemos reducir los rellenos superior e inferior de la sección para Sticky.

Y por último ir al Módulo Menú (dentro de la sección adhesiva) y cambiar el color del texto a blanco para sticky. Así entona mejor con el color de fondo sticky.

Vale aclarar que, si convertimos una Sección de Divi en adhesiva, también podremos aplicar los estilos de Sticky a todos los módulos, filas y columnas que esta sección contiene.

Llamada a la Acción Pegajosa con Sticky de Divi

Con Sticky Position de Divi también podemos hacer, de forma muy sencilla, una llamada a la acción de barra lateral que se quede adherida en el medio de la pantalla.

Para eso vamos a los ajustes de la llamada a la acción y en la herramienta seleccionamos la opción Sticky to top para que ésta se pegue al borde superior.

Pero además le podemos definir un Offset (o desfase) de 200px para que se fije un poco más abajo del borde superior. El offset sería como un margen.

Y por último podemos definir también un límite para el efecto adhesivo. Este límite va a ser la sección que contiene al módulo.

Lo que ésto hace es que la llamada a la acción permanezca adherida mientras esté dentro de la sección que la contiene. Y luego sigue de largo.

La herramienta Sticky Position es mucho más que una simple fijación de elementos.

Otros ejemplos con Sticky de Divi

En el video vas a poder ver varios ejemplo más de lo que se puede hacer con la herramienta Sticky de Divi.

Por ejemplo otro encabezado que se transforma al hacer scroll y unas fichas de menú de restaruant que se van solapando unas sobre otras junto al borde superior de la página.

También una llamada a la acción que se pega al borde inferior y recupera su posición en la página cuando pasamos por ahí.

Podemos crear por ejemplo un anuncio adhesivo en la barra lateral del blog.

Y por qué no una llamada a la acción que se adhiere primero al pie de página, luego se transforma al recuperar su lugar en la página…. y se vuelve a adherir al borde superior mientras seguimos subiendo.

Otra posibilidad es un menú vertical de barra lateral lateral que se hace adhesivo y cambia su estilo.

Entre muchas otras posibilidades….

Con Sticky de Divi la imaginación ya casi no tiene límites.

 

Espero que te haya gustado igual que a mí esta nueva herramienta de Divi.

Déjame debajo un comentario contándome que te pareció esta nueva características de Divi y la posibilidades que ofrece. Ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.

Jorge B.

Jorge B.

En 2013 fundé Aventura Digital para ayudar a profesionales y emprendedores independientes a tener su sitio web profesional con WordPress.

Curso Gratis de WordPress con Divi

WordPress es Mejor con Divi

Algunos de los enlaces que hay en esta página son enlaces de afiliado. Ésto significa que si haces clic en el enlace y compras el producto recibo una pequeña comisión que me ayuda a seguir generando nuevos contenidos.

1 Comentario

  1. Diseñador web Colombia

    El menu sticky tiene muchos beneficios, permite al cliente navegar rapidamente nuestra web y ademas se puede animar para que se vea moderna la web

    Responder

Enviar un comentario

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