Cómo crear un scroll horizontal con Elementor
Introducción
¿Quieres aprender cómo crear un scroll horizontal con Elementor para darle una vuelta de diseño a tu página web?
Pongámonos en situación…
Te ha enamorado esa página que tiene un diseño espectacular como por ejemplo ganasdevicio.com
Que cuando estás en el escritorio y haces scroll con el ratón hacia abajo se mueve de derecha a izquierda, pero en la versión móvil si que se mueve de arriba abajo.
Y ahora estás delante de tu WordPress ( o ITOfunnels, dá igual) con Elementor como constructor visual y no tienes ni idea de cómo hacer ese efecto tan espectacular que cuando bajas con el ratón la página se mueve hacia la derecha.
Entonces estás en el lugar adecuado, en éste artículo te vamos a explicar cómo hacerlo. Y verás que es mucho más fácil de lo que piensas.
🤔 ¿Cómo crear un scroll horizontal con Elementor?
A continuación te lo explicamos paso a paso.
¡Vamos a ello!
Creamos una página en blanco y vamos a nuestro editor de Elementor
html {
scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
main {
overflow-x: hidden;
display: flex;
}
section {
min-width: 100vw!important;
min-height: 100vh!important;
}
}
-
Dentro de cada columna pon el contenido que quieras
Ahora es el momento de diseñar, eso ya te lo dejo a tí. y si necesitas ayuda para adaptar tu diseño al móvil puedes consultar este artículo que explica cómo adaptar tu diseño al móvil
<script type="text/javascript">
if (window.innerWidth > 1025) {
const scrollContainer = document.querySelector("main");
scrollContainer.addEventListener("wheel", (evt) => {
evt.preventDefault();
scrollContainer.scrollLeft += evt.deltaY;
});
} else {
}
</script>Fácil, ¿verdad? Ya te lo he dicho. Ahora sí que tenemos una página con scroll horizontal.
Aquí tienes el vídeo de cómo crear un scroll horizontal con Elementor 😉
Suscríbete a nuestro canal de Youtube 👉👉
¿Tienes cuenta en ITOfunnels?
En nuestra academia te explicamos todo lo que necesitas saber para sacarle el máximo partido a ITOfunnels. *
(*) Sólo accesible para usuarios de ITOfunnels
Interacciones con los lectores