Secciones deslizantes con Elementor

Índice

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.

Mi intervención, a partir del minuto 1:55

¿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.

Comparte:

Más entradas

Externalizar el comercio electrónico

Externalizar el comercio electrónico

En 2009, con muy poca experiencia en comercio electrónico, le propuse a una empresa montar una tienda online “a comisión”. Tres años después aquella tienda

¿Es rentable montar un marketplace?

Hace unos días asistí a una polémica en Twitter, originada por un interesante tweet de @JaimeObregon, sobre los marketplaces impulsados por las administraciones públicas y

Deja una respuesta

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