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 ha hecho y no sabía exactamente cómo abordarlo, esta es la publicación ideal para usted. Le mostraremos cómo crear una página de deslizamiento completamente horizontal con Divi. Esta técnica realmente ayuda a hacer su sitio web se destacan de los demás y coincide con las tendencias de diseño web de 2019. El resultado crearemos se ven muy bien en todos los tamaños de pantalla.

¡Hagámoslo!

Avance

Antes de profundizar en el tutorial, vamos a echar un vistazo rápido a los resultados a través de diferentes tamaños de pantalla.

Escritorio

deslizar la página

Móvil

deslizar la página

Acercarse

  • Crearemos la página completa usando una sola 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 rejilla horizontal colocará cada una de las filas en una columna colocada horizontalmente
  • Tienes la oportunidad de decidir el número de columnas horizontales contiene una sección
  • En este caso, utilizaremos 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 usamos vínculos 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 a 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

deslizar la página

Espaciado

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

  • Top Relleno: 10.5vw (Escritorio), 15vw (Tableta), 10vw (Teléfono)
  • El relleno inferior: 3VW (de escritorio y tabletas), 10vw (Teléfono)

deslizar la página

Agregar fila n. ° 1

Estructura de la columna

Continuar añadiendo una nueva fila con la siguiente estructura de la columna:

deslizar la página

Dimensionamiento

Sin añadir ningún módulo, sin embargo, abrir las configuraciones de la línea y permitir que la fila para ocupar 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

página de golpe

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
  • Izquierda Relleno: 6vw (tableta y del teléfono)
  • Acolchado derecho: 6vw (tableta y teléfono)
  • Columna 1 Relleno inferior: 15vw (tableta y del teléfono)
  • Columna 2 Relleno izquierdo: 4vw (escritorio), 0vw (tableta y teléfono)

deslizar la página

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

deslizar la página

CSS personalizado

Como se mencionó en la sección de aproximación de este post, también estamos aplicando un desplazamiento suave y efecto al mecanismo de romperse. 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;

página de golpe

Agregar módulo Blurb a la columna 1

Seleccionar icono

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

deslizar la página

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: Arriba
  • Usar tamaño de fuente del icono: Sí
  • Tamaño del icono de letra: 5VW (Escritorio), 13vw (Tableta), 21vw (Teléfono)

deslizar la página

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)

deslizar la página

Visibilidad

También ocultaremos el módulo en pantallas de menor tamaño.

deslizar la página

Agregar módulo de texto a la columna 2

Añadir H2 contenido

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

deslizar la página

Ajustes 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 título 2: izquierda
  • Encabezado 2 Tamaño del texto: 3vw (escritorio), 7vw (tableta y teléfono)

deslizar la página

Dimensionamiento

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

  • Ancho: 77%

deslizar la página

Espaciado

Y añadir un poco de margen inferior para pantallas de menor tamaño.

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

deslizar la página

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.

página de golpe

Configuración de botones

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

  • Estilos personalizados para el uso del 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

página de golpe

  • 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

deslizar la página

Espaciado

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

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

página de golpe

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.

deslizar la página

Enlace

Luego, vaya a la configuración del vínculo y agregue un vínculo 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

deslizar la página

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)

página de golpe

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 del teléfono)

deslizar la página

Agregar fila n. ° 2

Estructura de columna

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

deslizar la página

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

deslizar la página

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

deslizar la página

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)

deslizar la página

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

deslizar la página

Ajustes 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

deslizar la página

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 línea del título 3: 1.8em

deslizar la página

Espaciado

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

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

deslizar la página

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.

deslizar la página

Cambiar contenido

Asegúrese de cambiar el contenido.

deslizar la página

Clonar fila n. ° 1 tres veces

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

deslizar la página

Cambiar el duplicado n. ° 1

Cambiar ID CSS de fila

Tendremos que cambiar el ID de CSS del primer duplicado.

  • ID de CSS: deslizar-2

deslizar la página

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

Junto con el color del primer módulo Blurb.

  • Color del icono: # 333333

página de golpe

Cambiar los enlaces de ambos módulos de Blurb

Para que los enlaces de anclaje 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

deslizar la página

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

deslizar la página

Cambiar duplicado n. ° 2

Cambiar ID CSS de fila

Cambie el ID de CSS del segundo duplicado.

  • ID de CSS: deslizar-3

página de golpe

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

deslizar la página

Cambiar los enlaces de ambos módulos de Blurb

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

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

deslizar la página

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

página de golpe

Duplicar el cambio # 3

Cambio CSS ID

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

  • ID de CSS: deslizar-4

deslizar la página

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

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

deslizar la página

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

Asegúrese de que al hacer clic, el visitante sea redirigido a la primera columna de la 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

deslizar la página

Fila clon # 2 tres veces

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

deslizar la página

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

Cambiar el color de fondo del primer duplicado.

  • Color de fondo: #dcdced

página de golpe

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

deslizar la página

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.

  • Fondo del color: # d6ffe5

deslizar la página

Agregar ID de CSS 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 este ID de CSS para ocultar la barra de desplazamiento.

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

página de golpe

A continuación, ir a las opciones de estilo CSS personalizados y añadir algunas líneas de código CSS para el 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, deberá 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 hay que tener en cuenta que tendrá que añadir más filas si es que está aumentando el número de columna. Entonces, en este caso, si desea que aparezcan dos filas por columna de sección, necesitará 14 filas.

deslizar la página

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

página de golpe

deslizar la página

Avance

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

Escritorio

página de golpe

Móvil

deslizar la página

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. Puede crear una página totalmente horizontal golpe así. En este tutorial, le mostramos cómo lograr un impresionante diseño web de deslizamiento horizontal con Divi. Si tienes alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios!