¿Cómo crear contenedores deslizantes con Elementor Pro en WordPress?

En este tutorial, aprenderemos cómo crear un diseño de apilamiento de contenedores en desplazamiento utilizando el popular plugin de diseño de páginas para WordPress: Elementor. El objetivo es lograr un diseño atractivo donde los contenedores se apilen verticalmente y se desplacen de manera suave al hacer scroll, dejando espacio para imágenes u otros elementos visuales. Este tipo de diseño es ideal para presentar información de manera estructurada y atractiva en tu sitio web.

Requisitos previos

• Un sitio web basado en WordPress.
• El plugin Elementor instalado y activado en tu sitio.
• Contenido y elementos visuales (imágenes, textos, etc.) preparados para utilizar en los contenedores.

Paso 1: Crear una nueva página

1. Inicia sesión en tu panel de WordPress.
2. Ve a “Páginas” y selecciona “Añadir nueva”.
3. Asigna un título a tu página, por ejemplo, “Apilamiento de Contenedores”.
4. Haz clic en “Editar con Elementor” para comenzar a diseñar la página con Elementor.

Paso 2: Agregar la estructura de contenedores

1. Una vez en el editor de Elementor, arrastra un widget de “Sección” a la página. Esto actuará como el contenedor principal.
2. Dentro de esta sección, arrastra un widget de “Columna” y ajústalo para tener una estructura de columna única. Puedes establecer la distribución de columnas según tus preferencias, por ejemplo, 1 columna para un diseño de apilamiento sencillo.
3. Ahora, dentro de esta columna, puedes empezar a agregar tus contenedores. Arrastra el widget de “Contenedor” a la columna. Puedes agregar tantos contenedores como desees para representar diferentes secciones de tu página.

Paso 3: Diseñar los contenedores

1. Selecciona un contenedor y ve a la pestaña “Estilo” en el panel de edición de Elementor.
2. Aquí puedes ajustar los colores de fondo, bordes y márgenes para cada contenedor. Asegúrate de que los contenedores tengan un aspecto visual atractivo y contrasten entre sí.
3. Para añadir imágenes, texto u otros elementos, simplemente arrastra los widgets correspondientes (por ejemplo, “Imagen” para imágenes y “Texto” para texto) dentro de cada contenedor.
4. Ajusta el contenido y el diseño según tus preferencias. Recuerda que estamos buscando un diseño de apilamiento en desplazamiento, así que asegúrate de que cada contenedor tenga suficiente espacio vertical entre ellos.

Paso 4: Aplicar el efecto de desplazamiento

1. Una vez que hayas diseñado tus contenedores, selecciona la sección principal que contiene todo el contenido.
2. Ve a la pestaña “Avanzado” en el panel de edición de Elementor.
3. En la sección “Efectos de Desplazamiento”, activa la opción “Efecto de desplazamiento”.
4. Aquí puedes ajustar la velocidad y dirección del efecto de desplazamiento. Experimenta con estos valores para lograr el efecto deseado. Puedes ver una vista previa en tiempo real mientras ajustas los valores.

Paso 5: Vista previa y publicación

1. Antes de publicar la página, asegúrate de hacer clic en el botón de “Vista Previa” para ver cómo se ve y se comporta el diseño de apilamiento de contenedores en desplazamiento.
2. Si estás satisfecho con el resultado, haz clic en “Publicar” para que tu página esté en línea y sea visible para tus visitantes.

¡Felicidades! Ahora tienes un diseño de apilamiento de contenedores en desplazamiento creado con Elementor en tu sitio de WordPress. Este diseño agregará un toque atractivo y dinámico a tu página, haciendo que tu contenido sea más agradable y fácil de consumir para tus visitantes.

Revisa el video tutorial a continuación