Esta fue mi presentación en el MeetUp de Elementor Madrid, que tuvo lugar el pasado 30 de abril. En ella presenté un sencillo truco llamado Secciones Deslizantes.
¿Qué son las Secciones Deslizantes?
Las Secciones Deslizantes son un sencillo pero vistoso truco realizado con Elementor para hacer una especie de navegación vertical entre páginas.
¿Qué necesito?
El truco requiere la versión Pro de Elementor y puede ser aplicado en cualquier plantilla (al menos, de las que yo he probado).
¿En que se basa?
El truco se basa en crear tres secciones que deben de establecerse con un Alto definido como Ajustar a la pantalla. De esta forma, cada sección ocupará la pantalla completa tanto en ancho como en altura, excluyendo el header y el footer si existen.
Por otra parte, para que se superpongan tendremos que controlar el z-index que, como se sabe, nos coloca el objeto en una capa superior a los que no lo tienen definido (por ejemplo, como las capas de Photoshop).
Así, asignaremos el mayor valor de z-index (por ejemplo, 3) a la última sección, un valor inferior (2) a la sección intermedia y un valor inferior (1) a la primera sección.
Por último, para limitar la capacidad de scroll de cada sección, nos iremos a los ajustes de cada una de ellas y estableceremos el Sticky a Top.
Y ya está.
Ajuste para móviles
En el caso de dispositivos móviles, Elementor no hace demasiado bien la altura de las secciones, por lo que nos veremos obligados a introducir un Relleno, Arriba y Abajo, de 150 px.
