Presentamos el sistema sticky más completo en cualquier creador de páginas para WordPress

Las Opciones Sticky de Divi son una nueva función que te permite fijar cualquier elemento en la parte superior y/o inferior de la ventana del navegador mientras te desplazas hacia arriba o hacia abajo por la página. Esto te permite crear encabezados fijos, menús, botones, y mantener otra información importante visible al hacer scroll, como llamadas a la acción o formularios flotantes de suscripción. Pero eso es solo el comienzo de lo que las Opciones Sticky de Divi pueden hacer.

Las Opciones Sticky de Divi ofrecen mucho más que una simple posición fija. Es un sistema avanzado que permite una interacción única basada en el desplazamiento y ajustes personalizados del estilo sticky. Tú eliges cuándo y dónde los elementos se vuelven sticky según la dirección del desplazamiento del visitante y la posición del elemento en la página. Además, tienes control total sobre el estilo sticky de cualquier elemento, ¡lo que permite transiciones de diseño al volverse sticky!

Ejemplos de Opciones Sticky

Hay mucho que puedes hacer con las nuevas opciones sticky de Divi. Antes de entrar en detalles, echa un vistazo a algunas de estas increíbles demostraciones creadas por nuestro equipo de diseño. ¡Desplázate hacia arriba y hacia abajo por la página completa para ver el efecto completo!

Fijar en la Parte Superior, Inferior o Ambas

Usar las opciones sticky es fácil. Simplemente ve a Avanzado > Efectos de desplazamiento > Posición Sticky y elige entre las opciones disponibles:

• Fijar en la parte superior
  Esto fijará el elemento en la parte superior de la ventana del navegador al desplazarte hacia abajo. Una vez que la parte superior del elemento toque la parte superior de la ventana, se fijará allí y permanecerá visible mientras te desplazas. Esto funciona muy bien para menús de encabezado fijos, como se muestra a continuación.

• Fijar en la parte inferior
  Esto fijará el elemento en la parte inferior de la ventana del navegador al desplazarte hacia arriba. Una vez que la parte inferior del elemento toque la parte inferior de la ventana, se fijará allí y permanecerá visible. Esto es ideal para formularios flotantes de suscripción o llamadas a la acción.

• Fijar en la parte superior e inferior
  Esto fijará el elemento en la parte superior de la ventana del navegador al desplazarte hacia abajo más allá del elemento, y lo fijará en la parte inferior de la ventana del navegador al desplazarte hacia arriba más allá del mismo.

También puedes dar a los elementos sticky un estilo único, y aquí es donde realmente brillan las opciones sticky. Una vez activadas las opciones sticky para un elemento, todas las configuraciones de diseño obtienen nuevas opciones de estilo en estado sticky. Esto significa que los elementos pueden tener dos estilos diferentes: un estilo estándar y un estilo sticky. Una vez que el elemento se vuelve sticky, el diseño cambia de su estilo estándar a su estilo sticky.

Por ejemplo, en el video a continuación se ha activado la edición del estilo sticky para el color de fondo del menú. Luego, se asignó un color de fondo naranja para el estilo sticky y un color de fondo transparente para el estilo estándar. Al hacer scroll hacia abajo y volverse sticky el menú, el color de fondo cambia a naranja. Este color de fondo naranja asegura que los enlaces del menú sigan siendo legibles al desplazarse sobre distintos elementos.

Para activar el ajuste de estilo sticky, haz clic en el nuevo ícono sticky sobre cualquier configuración de diseño. Luego puedes ajustar el estilo estándar y el estilo sticky de forma independiente. Una vez que el elemento se vuelve sticky, asumirá su estilo sticky.
Por ejemplo:

• Puedes cambiar el color de fondo de un encabezado de transparente a sólido.

• Puedes reducir la altura del menú en estado sticky para que ocupe menos espacio al desplazarte.

No hay límite para lo que puedes hacer, porque cada configuración de diseño se puede ajustar para dar a los elementos sticky estilos completamente únicos.

Aplicar un Límite Sticky

También puedes asignar un límite sticky a los elementos sticky. Fuera de este límite, los elementos ya no permanecerán fijados.
Por ejemplo, en el video a continuación, se ha asignado la sección principal como límite sticky para un menú lateral flotante. Eso significa que se volverá sticky cuando el menú toque la parte superior de la ventana del navegador, pero dejará de estar fijo al salir de la sección principal. Este menú sticky solo es relevante para los elementos dentro de esa sección, por lo que asignar un límite sticky tiene sentido.