Cómo crear una página de deslizamiento completamente horizontal con Divi

¿Alguna vez ha pensado en crear una página completamente horizontal que utilice enlaces deslizantes y de anclaje para navegar? Bueno, si lo has hecho y no sabías exactamente cómo abordarlo, esta es la publicación ideal para ti. Le mostraremos cómo crear una página de deslizamiento completamente horizontal usando Divi. Esta técnica realmente lo ayuda a hacer que su sitio web se destaque de los demás y coincida con las tendencias de diseño web de 2019. El resultado que crearemos se verá genial en todos los tamaños de pantalla.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Acercarse

• Crearemos la página completa usando solo una sección
• Vamos a convertir esa sección en una cuadrícula horizontal usando algunas líneas de código CSS al final del tutorial.
• La cuadrícula horizontal colocará cada una de las filas en una columna colocada horizontalmente
• Puedes decidir cuántas columnas horizontales contiene una sección.
• En este caso, usaremos 4 columnas diferentes, cada una de las cuales constará de 2 filas.
• Puede modificar el número de columnas horizontales que crea y determinar cuántas filas contiene cada una de las columnas de la sección
• También estamos utilizando enlaces de anclaje para ayudar a las personas a navegar por las diferentes columnas de la sección.
• Además de eso, estamos agregando un desplazamiento suave y un efecto de ajuste de desplazamiento de sección que facilitará la navegación para sus visitantes.

Empecemos a recrear

Agregar nueva sección

Color de fondo

Crea una nueva página y agrégale una sección regular. Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: #ffffff

Espaciado

Luego, vaya a la configuración de espaciado y agregue un relleno personalizado en diferentes tamaños de pantalla.

• Acolchado superior: 10.5vw (escritorio), 15vw (tableta), 10vw (teléfono)
• Acolchado inferior: 3vw (escritorio y tableta), 10vw (teléfono)

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Vaya a la configuración de espaciado a continuación y realice algunos cambios en todos los tamaños de pantalla diferentes.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Acolchado izquierdo: 6vw (tableta y teléfono)
• Acolchado derecho: 6vw (tableta y teléfono)
• Acolchado inferior de la columna 1: 15vw (tableta y teléfono)
• Columna 2 Relleno izquierdo: 4vw (escritorio), 0vw (tableta y teléfono)

ID de CSS

Tendremos que asignar un ID de CSS a la primera fila de cada una de las columnas de sección que creamos. Esto nos ayudará a crear las flechas de anclaje más adelante en esta publicación.

• ID de CSS: deslizar-1

CSS personalizado

Como se mencionó en la sección de enfoque de esta publicación, también estamos aplicando un efecto de desplazamiento y ajuste suave al mecanismo. Para poder hacer eso, necesitaremos agregar una sola línea de código CSS a la primera fila de cada una de las columnas horizontales que creamos.

scroll-snap-align: start;

Agregar módulo Blurb a la columna 1

Seleccionar icono

¡Ahora podemos comenzar a agregar módulos! Comience con un módulo Blurb en la columna 1. Abra la configuración del módulo y seleccione un icono de flecha hacia la izquierda.

Configuración de iconos

Luego, vaya a la pestaña de diseño y realice algunos cambios en la apariencia del ícono.

• Color del icono: rgba (255,255,255,0)
• Ubicación de la imagen / icono: parte superior
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 5vw (escritorio), 13vw (tableta), 21vw (teléfono)

Espaciado

A continuación, agregue algunos valores de margen personalizados.

• Margen superior: 14vw (escritorio), -11vw (tableta), -17vw (teléfono)
• Margen izquierdo: 60vw (tableta y teléfono)

Visibilidad

También estamos ocultando el módulo en tamaños de pantalla más pequeños.

Agregar módulo de texto a la columna 2

Agregar contenido H2

El siguiente módulo que necesitamos es un módulo de texto en la columna 2. Agregue algo de contenido H2.

Configuración de texto H2

Luego, vaya a la pestaña de diseño y modifique la configuración del texto H2.

• Fuente del título 2: Source Serif Pro
• Alineación del texto del encabezado 2: izquierda
• Encabezado 2 Tamaño del texto: 3vw (escritorio), 7vw (tableta y teléfono)

Dimensionamiento

Modifique el ancho en la configuración de tamaño a continuación.

• Ancho: 77%

Espaciado

Y agregue un margen inferior para tamaños de pantalla más pequeños.

• Margen inferior: 15vw (tableta y teléfono)

Agregar módulo de botones a la columna 2

Agregar contenido

Justo debajo del Módulo de texto que ha agregado, continúe y agregue un Módulo de botones. Ingrese alguna copia.

Configuración de botones

Luego, vaya a la pestaña de diseño y cambie la configuración del botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.9vw (escritorio), 2vw (tableta), 3.5vw (teléfono)
• Color del texto del botón: # 000000
• Ancho del borde del botón: 1 px

• Color del borde del botón: # 000000
• Radio del borde del botón: 0px
• Fuente del botón: Mukta
• Peso de fuente: negrita
• Estilo de fuente: mayúsculas

Espaciado

Agregue un poco de margen personalizado y relleno a continuación.

• Margen superior: 6vw (escritorio), 4vw (tableta y teléfono)
• Acolchado superior: 15px
• Acolchado inferior: 15px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Agregue el módulo Blurb a la columna 3

Seleccionar icono

El siguiente y último módulo que necesitamos en esta fila es otro Módulo Blurb en la columna 3. Seleccione un icono de su elección.

Enlace

Luego, vaya a la configuración del enlace y agregue un enlace que llevará a los visitantes a la segunda columna horizontal de la sección.

• URL del enlace del módulo: https://www.yourwebsite.com/page/#swipe-2

Configuración de iconos

Continúe y cambie la configuración del icono también.

• Color del icono: # 333333
• Ubicación del icono de imagen: parte superior
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 5vw (escritorio), 13vw (tableta), 21vw (teléfono)

Espaciado

Continúe agregando algunos márgenes superior e izquierdo personalizados en diferentes tamaños de pantalla.

• Margen superior: 14vw (escritorio), -11vw (tableta), -17vw (teléfono)
• Margen izquierdo: 60vw (tableta y teléfono)

Agregar fila n. ° 2

Estructura de la columna

La segunda fila que necesitamos hace uso de la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.

• Color de fondo: # f7f7f7

Dimensionamiento

A continuación, modifique la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Junto con los valores de margen y relleno personalizados en la configuración de espaciado.

• Margen superior: -3.5vw (escritorio), -10vw (tableta), -17vw (teléfono)
• Acolchado superior: 8vw (escritorio), 15vw (tableta), 20vw (teléfono)
• Acolchado inferior: 8vw (escritorio), 15vw (tableta), 20vw (teléfono)
• Acolchado izquierdo: 24vw (escritorio), 5vw (tableta y teléfono)
• Relleno derecho: 24vw (escritorio), 5vw (tableta y teléfono)
• Columna 1 Relleno derecho: 2vw (escritorio), 0vw (tableta y teléfono)
• Columna 2 Relleno izquierdo: 2vw (escritorio), 0vw (tableta y teléfono)

Agregar módulo de texto a la columna 1

Agregar contenido

Continúe y agregue un módulo de texto a la primera columna. Ingrese alguna copia de su elección (incluido un título H3).

Configuración de texto

Vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Tamaño del texto: 0.65vw (escritorio), 1.8vw (tableta), 2.7vw (teléfono)
• Altura de la línea de texto: 1.8em

Configuración de texto H3

Junto con la configuración de texto H3.

• Título 3 Fuente: Mukta
• Peso de fuente del encabezado 2: Negrita
• Estilo de fuente del título 3: mayúsculas
• Encabezado 3 Tamaño del texto: 0.8vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Altura de la línea del título 3: 1.8em

Espaciado

Agregue un margen inferior también para tamaños de pantalla más pequeños.

• Margen inferior: 5vw (tableta y teléfono)

Clonar módulo de texto y colocarlo en la columna 2

Una vez que haya terminado de modificar el Módulo de texto en la columna 1, puede clonarlo y colocar el duplicado en la segunda columna.

Cambiar contenido

Asegúrate de cambiar el contenido.

Clonar fila n. ° 1 tres veces

Una vez que hayas terminado con ambas filas, puedes clonar la primera fila 3 veces.

Cambiar el duplicado n. ° 1

Cambiar el ID de CSS de la fila

Necesitaremos cambiar el ID de CSS del primer duplicado.

• ID de CSS: deslizar-2

Cambiar el color del icono del módulo Blurb (columna 1)

Junto con el color del primer módulo Blurb.

• Color del icono: # 333333

Cambiar los enlaces de ambos módulos de Blurb

Para que los enlaces de ancla funcionen, tendrás que cambiar el enlace de cada una de las flechas en consecuencia:

• URL del enlace del módulo: https://www.yourwebsite.com/page/#swipe-1

• URL del enlace del módulo: https://www.yourwebsite.com/page/#swipe-3

Cambiar el duplicado n. ° 2

Cambiar el ID de CSS de la fila

Cambie el ID de CSS del segundo duplicado.

• ID de CSS: deslizar-3

Cambiar el color del icono del módulo Blurb (columna 1)

Junto con el color del icono del primer módulo Blurb.

• Color del icono: # 333333

Cambiar los enlaces de ambos módulos de Blurb

Y nuevamente, cambie los enlaces de cada módulo Blurb en consecuencia:

• URL del enlace del módulo: https://www.yourwebsite.com/page/#swipe-2

• URL del enlace del módulo: https://www.yourwebsite.com/page/#swipe-4

Cambiar el duplicado n. ° 3

Cambiar ID de CSS

Cambie también el ID de CSS del duplicado de la tercera fila.

• ID de CSS: deslizar-4

Cambiar el icono del módulo Blurb (columna 2)

Y seleccione otro icono para el módulo Blurb en la columna 3.

Cambiar el enlace del módulo Blurb (columna 2)

Asegúrese de que al hacer clic, el visitante sea redirigido a la columna de la primera sección modificando la URL del enlace del módulo en consecuencia:

• URL del enlace del módulo: https://www.yourwebsite.com/page/#swipe-1

Clonar la fila n. ° 2 tres veces

A la siguiente fila. Clona esta fila también tres veces.

Cambiar el color de fondo de la fila del duplicado n. ° 1

Cambia el color de fondo del primer duplicado.

• Color de fondo: #dcdced

Cambiar el color de fondo de la fila del duplicado n. ° 2

El segundo duplicado utiliza el siguiente color de fondo:

• Color de fondo: # ffeed1

Cambiar el color de fondo de la fila del duplicado n. ° 3

Cambie también el color de fondo del duplicado de la tercera fila.

• Color de fondo: # d6ffe5

Agregar CSS ID y código CSS a la sección

Ahora que tenemos todas las filas que necesitamos, podemos hacer que suceda la magia. Agregue un ID de CSS a toda la sección. Más adelante en esta publicación, usaremos esta ID de CSS para ocultar la barra de desplazamiento.

• ID de CSS: barra de desplazamiento de sección

Luego, vaya a las opciones de CSS personalizado y agregue algunas líneas de código CSS al elemento principal.

overflow-y: scroll;
display: grid;
grid-template-columns: repeat(4, 100%);
scroll-behavior: smooth;
scroll-snap-type: x mandatory;

Cuantas más columnas de sección desee crear, más columnas tendrá que agregar en el código CSS. Entonces, digamos, por ejemplo, que desea tener la misma estructura pero permitir 7 deslizamientos en lugar de 4, tendrá que modificar la línea de código CSS de las columnas de la plantilla de cuadrícula en consecuencia:

grid-template-columns: repeat(7, 100%);

Pero tenga en cuenta que tendrá que agregar más filas si aumenta el número de columna. Entonces, en este caso, si desea que aparezcan dos filas por columna de sección, necesitará 14 filas.

Ocultar barra de desplazamiento

También puede optar por ocultar la barra de desplazamiento utilizando la sección ID de CSS y agregando las siguientes líneas de código CSS a la configuración de la página:

#section-scrollbar::-webkit-scrollbar {
display: none;
}

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

Al diseñar sitios web con Divi, lo más sencillo es construir hacia abajo. Pero el hecho de que sea lo más sencillo de hacer no significa que esté limitado a esa opción. También puede crear una página de deslizamiento completamente horizontal. En este tutorial, le mostramos cómo lograr un diseño web de deslizamiento horizontal impresionante con Divi. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!