Cómo crear un sitio Web de desplazamiento horizontal – Elementor pro

En este tutorial, aprendemos cómo crear un sitio web de desplazamiento horizontal agregando CSS y Javascript personalizados dentro de Elementor. Comenzaremos con un sitio web diseñado verticalmente y lo guiaremos paso a paso para transformarlo en un diseño horizontal, manteniendo la pantalla vertical para los dispositivos móviles y tabletas.

Cómo crear un sitio web de desplazamiento horizontal

En este tutorial, aprendemos cómo crear un sitio web de desplazamiento horizontal agregando CSS y Javascript personalizados dentro de Elementor. Comenzaremos con un sitio web diseñado verticalmente y lo guiaremos paso a paso sobre cómo transformarlo en un diseño horizontal, manteniendo la visualización vertical para los dispositivos móviles y tabletas.

Este tutorial cubrirá:
✔︎ Creación de secciones que son adecuadas para un diseño de desplazamiento horizontal
✔︎ Cómo cambiar el diseño de la página de vertical a horizontal usando CSS
✔︎ Cómo agregar código Javascript personalizado a través de la función de código personalizado
✔︎ ¡Y mucho más!

• Los sitios web tradicionales siempre se han desplazado verticalmente, pero hoy vamos a romper el molde y te enseñaremos cómo crear un sitio web con desplazamiento horizontal.

• En este tutorial avanzado de consejos y trucos, primero comenzaremos con este sitio web diseñado verticalmente para un Videógrafo y Director.
  

Vamos a configurar la visualización de nuestro contenedor principal de las secciones, que es .elementor-section-wrap, como inline-flex. Esto apilará cada sección una al lado de la otra en lugar de apilar verticalmente hacia abajo y estirará el contenedor de acuerdo con la sección que contiene horizontalmente. Luego estableceremos el ancho de cada sección en 100vw para que cada sección se vea como un marco que ocupará todo el espacio en la ventana gráfica. –

Como puede ver, nuestras secciones ahora están ubicadas una al lado de la otra, en lugar de una encima de la otra.

A continuación, agregaremos el siguiente CSS para garantizar que cada sección llene el ancho de la ventana gráfica.

Escriba el sector ‘.elementor-section‘ seguido de las llaves de apertura.

Luego escriba ancho: 100vw;

Y cierra los corchetes.

Y finalmente agregaremos ‘overflow:hidden;’ para asegurarse de que nada se derrame fuera de estas secciones.
Ahora volvamos a habilitar el encabezado… le daremos a esta sección un nombre de clase… y luego abriremos la configuración de la página una vez más y agregaremos el siguiente CSS para garantizar que nuestro encabezado siga teniendo el mismo tamaño.
Bien, hemos hecho un gran progreso hasta ahora y ahora veremos qué sucede en otros dispositivos.

Tambien existe una alternativa si tienes Elementor free.

En este Tutorial aprenderás a crear El scroll horizontal en una página web utilizando Elementor Free y un poco de código CSS y JAVASCRIPT el cual solo vas a tener que copiar y pegar para crear el scroll horizontal en toda tu página web. scroll horizontal con WordPress y Elementor.

Código CSS

html {
  scroll-behavior: smooth;
}
@media only screen and (min-width: 1025px) {
    main {
      overflow-x: hidden;
      display: flex;
    }

    section {
      min-width: 100vw!important;

    }
}

Código Javascript

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