Elementor, uno de los constructores de páginas más populares para WordPress, ofrece una amplia gama de herramientas para diseñar sitios web dinámicos y atractivos. Una de las funcionalidades más interesantes es el uso de Sticky Effects, que permite fijar elementos en la pantalla mientras los usuarios se desplazan por tu página. Este efecto mejora la experiencia del usuario, manteniendo contenido clave visible en todo momento.
¿Qué son los Sticky Effects en Elementor?
Los Sticky Effects permiten que ciertos elementos, como menús, encabezados o llamadas a la acción, se mantengan visibles en la pantalla mientras el usuario hace scroll. Esto es especialmente útil para destacar información importante, como un botón de contacto, un carrito de compras o un menú de navegación.
Cómo Activar Sticky Effects en Elementor
Sigue estos pasos para agregar un Sticky Effect a cualquier elemento de tu diseño:
- Abre Elementor en tu página o sección
Inicia sesión en tu panel de WordPress y abre Elementor para editar la página o plantilla donde deseas agregar el efecto. - Selecciona el Elemento que Deseas Hacer Sticky
Haz clic en el elemento (sección, columna o widget) que quieres fijar en la pantalla. - Accede a la Configuración Avanzada
En el panel izquierdo, ve a la pestaña Avanzado. - Activa la Opción Sticky
- En la sección Efectos de Movimiento, busca la opción Sticky.
- Selecciona en qué posición deseas que el elemento sea “pegajoso”: puede ser en el Top, Bottom, o ambas.
- Personaliza el Comportamiento Sticky
Elementor permite ajustar configuraciones adicionales para los Sticky Effects:- Contenedor de Sticky: Elige si el efecto se limita a un contenedor específico.
- Límite Sticky: Define hasta dónde el elemento permanecerá fijo.
- Compatibilidad en Dispositivos: Decide si el efecto estará activo en escritorio, tablet o móvil.
- Guarda y Revisa el Resultado
Guarda tus cambios y previsualiza tu página para asegurarte de que el efecto funciona como lo planeaste.
Ahora bien, si quieres algo más especifico para poder darle mas uso a esta herramienta, podemos hacer uso de codigo css.
La recomendación es que realices el efecto de Sticky en un contenedor y no solo en un elemento, esto te permitira que todos los elementos se manytengan en su lugar.
Una vez realizado esto puedes ir a la pestaña Avanzado e ir a Custom CSS, en este podemos agregar el atributo elementor-sticky–effects y poder manipular todo lo que sucede dentro del contenedor
Ejemplo:
selector.elementor-sticky--effects{
background-color: #000;
}Con esto podemos hacer que fondo del contenedor cambie a negro una vez que se mueva.
También podemos classes o ID a elementos dentro del contenedor para poderlos manipular con el effecto STICKY.
Por ejemplo si a un bloque de imagen le asignamos la clase “mi_imagen”, podemos manipularla al momento de hacer el efecto.
selector.elementor-sticky--effects .mi_imagen{
width:100px;
}
Ideas para Usar Sticky Effects en Tus Diseños
- Menús de Navegación: Haz que tus menús principales sigan visibles mientras los usuarios se desplazan por tu sitio. Esto mejora la usabilidad y facilita la navegación.
- Llamados a la Acción: Mantén visible un botón como “Contáctanos” o “Comprar ahora” para aumentar conversiones.
- Encabezados o Secciones Importantes: Fija un encabezado con información clave, como promociones o datos de contacto.
- Barra de Progreso: Muestra un indicador visual que se mantenga fijo para que los usuarios sepan cuánto contenido les queda por leer.
Conclusión
Los Sticky Effects de Elementor son una herramienta poderosa para diseñar sitios web dinámicos y funcionales. Con ellos, puedes mejorar la navegación, destacar información importante y crear una experiencia de usuario más atractiva.
¿Ya usas los Sticky Effects en tus proyectos? ¡Comparte tus ideas en los comentarios y no olvides probar esta funcionalidad en tus próximos diseños web!
