Secciones deslizantes con Elementor

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando...

Comparte:

Más entradas

Custom Post Types

Custom Post Types en WordPress

Los custom post types o entradas personalizadas son una de las características más impresionantes de WordPress. Vamos a hacer un repaso de qué son, cuándo

Diseño de sitios web para conversiones

Diseño de sitios web para conversiones

Un sitio web que convierte no solo es un sitio web que posiciona bien. Es un sitio web que es capaz de hacer que el usuario logre sus objetivos con el menor número de tareas y con la mayor facilidad para realizarlas.

Cómo diseñar un sitio web en papel

Cómo diseñar una web en papel

Diseñar una web en papel es un ejercicio excelente para validar si nuestro sitio web va a funcionar correctamente o no y reducir los tiempos de producción. En este artículo te doy las pautas para hacerlo.

Deja una respuesta

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

Te ofrezco una hora de consultoría web gratis

¿Tienes un sitio web y no te está funcionando? ¿Quieres crear una web para tu negocio y no sabes por dónde empezar? ¿Necesitar unirte al boom del comercio electrónico?

Te ofrezco una hora gratis de consultoría a través de Skype.

Si continuas utilizando este sitio, aceptas el uso de las cookies. Más información

Las opciones de cookie en este sitio web están configuradas para "permitir cookies" para ofrecerte una mejor experiéncia de navegación. Si sigues utilizando este sitio web sin cambiar tus opciones o haces clic en "Aceptar" estarás consintiendo las cookies de este sitio.

Cerrar