Cómo crear una página deslizante horizontal con div

¿Alguna vez has pensado en crear una página completamente horizontal para usar enlaces deslizantes y de anclaje para navegar? Bueno, si no supiera exactamente cómo abordarlo, esta es la publicación ideal para usted. Le mostraremos cómo crear una página deslizante completamente horizontal usando Div. Esta técnica realmente lo ayuda a distinguir su sitio web de otros y coincidir con las tendencias de diseño web de 2019. El resultado que crearemos se verá excelente en todas las dimensiones de la pantalla. ¡Vamos a eso! Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio

Móvil

Acercarse
Crearemos la página completa usando una sola sección
Convertimos esa sección en una cuadrícula horizontal utilizando algunas líneas de código CSS al final del tutorial
La cuadrícula horizontal colocará cada fila en una columna horizontal
Debe decidir cuántas columnas horizontales contiene una sección
En este caso, usaremos 4 columnas diferentes que estarán compuestas por 2 filas
Puede cambiar el número de columnas horizontales que crea y puede determinar cuántas filas contienen cada una de las columnas de sección
También utilizamos enlaces de anclaje para ayudar a las personas a navegar a través de las diferentes columnas de la sección
Además, agregamos un desfile suave y un efecto de fijación del desfile, que facilitará la navegación de sus visitantes.
Comencemos a recrear agregar una nueva sección de color de fondo. Cree una nueva página y agregue una sección normal. Abra la configuración de la sección y cambie el color de fondo.
Color de fondo: #ffffff

Espacio Entonces, acceda a la configuración de espaciado y agregue algunos rellenos personalizados en diferentes tamaños de pantalla. Titular superior: 10.5VW (escritorio), 15VW (tableta), 10VW (teléfono)
Bajo forro: 3VW (escritorio y tableta), 10 VW (teléfono)
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la pantalla.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
El espacio para acceder a la configuración de espaciado a continuación y realizar algunos cambios para todos los tamaños de pantalla diferentes.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
ENLIZACIÓN IZQUIERDA: 6VW (tableta y teléfono)
Revelaje derecho: 6VW (tableta y teléfono)
Columna 1 Con revestimiento inferior: 15 VW (tableta y teléfono)
Columna 2 ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 0VW (tableta y teléfono)
ID CSS tendrá que asignar un ID CSS a la primera fila de cada una de las columnas de sección que creamos. Esto nos ayudará a crear flechas de anclaje más adelante en esta publicación.

ID CSS: diapositivas-1
CSS personalizado como se menciona en la sección de enfoque de esta publicación, aplicamos al mecanismo y un efecto de desarrollo y fijación suave. Para hacer esto, tendremos que agregar una sola línea de código CSS en la primera fila de cada una de las columnas horizontales que creamos. Scroll-snap-asign: inicio;

Agregue los módulos de blurb a la columna 1 Seleccione el icono ¡Ahora podemos comenzar a agregar módulos! Comience con un módulo de propaganda en la columna 1. Abra la configuración del módulo y seleccione un icono de flecha a la izquierda.

Icono de color: RGBA (255,255,255,0)

Colocación de la imagen / icono: arriba
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 5VW (escritorio), 13VW (tableta), 21VW (teléfono)
Espaciado Agregue algunos valores de margen personalizados.
Margen superior: 14VW (escritorio), -11VW (tableta), -17VW (teléfono)

Margen izquierdo: 60 VW (tableta y teléfono)
La visibilidad también oculta el módulo en dimensiones de pantalla más pequeñas.
Agregue un módulo de texto en la columna 2 Agregar contenido H2 La siguiente forma en que necesitamos es un módulo de texto en la columna 2. Agregue el contenido H2.

Configuración de texto H2 Luego acceda a la pestaña de diseño y cambie la configuración de texto H2.

2 Sección de fuentes: SERIF Pro Fuente

Título 2 Alineación del texto: Izquierda
2 Tamaño de texto: 3VW (escritorio), 7VW (tableta y teléfono)
Dimensión Cambiar el ancho en la configuración de siguiente tamaño.
Ancho: 77%

Espacio y agregue un borde inferior para un tamaño de pantalla más pequeño.
Margen inferior: 15 VW (tableta y teléfono)

Agregue un módulo de botón a la columna 2 Agregue contenido justo debajo del módulo de texto que haya agregado, continúe y agregue un módulo de botón. Ingrese una copia.
Establece el botón Luego, acceda a la pestaña de diseño y cambie la configuración del botón.

Use estilos personalizados para el botón: Sí

Tamaño de texto de texto: 0.9VW (escritorio), 2VW (tableta), 3.5VW (teléfono)
El color de texto del texto del botón: # 000000 El nudo del botón: 1 PX
Cenas de libros: # 000000
El rasgo de botón de botón: 0 px
Botón de fuente: Mukta

Peso de fuente: en negrita
Estilo de fuente: mayúscula
El espacio agregue algunos bordes personalizados y un mayor relleno.
Margen superior: 6VW (escritorio), 4VW (tableta y teléfono)
Revestimiento superior: 15 px

Revestimiento inferior: 15 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Agregue los módulos de blurb a la columna 3 Seleccione el siguiente icono y el último módulo que necesitamos en esta fila es otro módulo de blurb en la columna 3. Seleccione un icono de su elección.
Enlace luego, acceda 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 módulo: https://www.yourwebsite.com/page/#swipe-2

Continuar la configuración del icono y modificar la configuración del icono.

Icono de color: # 333333
Coloque el icono de la imagen: arriba

Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 5VW (escritorio), 13VW (tableta), 21VW (teléfono)
El espacio continúa agregando bordes superiores y izquierda personalizada en diferentes tamaños de pantalla.
Margen superior: 14VW (escritorio), -11VW (tableta), -17VW (teléfono)
Margen izquierdo: 60 VW (tableta y teléfono)

Agregue la fila # 2 La segunda estructura de fila que necesitamos usar la siguiente estructura de columna:
Color de fondo sin agregar módulos, abra la configuración de la fila y cambie el color de fondo.
Color de fondo: # F7F7F7

La dimensión cambia la configuración de dimensionamiento adicional.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí


El ancho de la canaleta: 1 gira junto con los valores personalizados de llenado y margen de la configuración de espaciado.
Margen superior: -3.5VW (escritorio), -10VW (tableta), -17VW (teléfono)
Revelaje superior: 8VW (escritorio), 15VW (tableta), 20VW (teléfono)
Bajo forro: 8VW (escritorio), 15VW (tableta), 20VW (teléfono)

ENLIZACIÓN IZQUIERDA: 24VW (escritorio), 5VW (tableta y teléfono)
Revestimiento derecho: 24VW (escritorio), 5VW (tableta y teléfono)
Columna 1 Reinicio derecho: 2VW (escritorio), 0VW (tableta y teléfono)
Columna 2 Lineo izquierdo: 2VW (escritorio), 0VW (tableta y teléfono)
Agregue un módulo de texto a la columna 1 Agregar contenido Continuar y agregar un módulo de texto a la primera columna. Ingrese una copia de su elección (incluido un título H3).
Configuración de texto Vaya a la pestaña Diseño y cambie la configuración de texto.
Texto de fuente: Abrir sans
Tamaño de texto: 0.65VW (escritorio), 1.8VW (tableta), 2.7VW (teléfono)

La altura de la línea de texto: 1.8em

Configuración de texto H3 junto con la configuración de texto H3.
3 Fuentes de fuentes: Mukta
Título 2 Fuente de peso: Bold
Título 3 Estilo de fuente: mayúscula

Texto 3 Sección: 0.8VW (escritorio), 3VW (tableta), 4VW (teléfono)
Rúbrica 3 altura de línea: 1.8em
Espacio agregue un borde inferior y para tamaños de pantalla más pequeños.
Margen inferior: 5VW (tableta y teléfono)
Clone el módulo de texto y coloque en la columna 2 Después de haber terminado de cambiar el módulo de texto en la columna 1, puede clonar y colocar el duplicado en la segunda columna.
Cambie el contenido Asegúrese de cambiar el contenido.

Clone fila # 1 tres veces Una vez que se completan ambas filas, puede clonar primero 3 veces.
Cambiar duplicado # 1 Cambiar la fila de ID de CSS Tendremos que cambiar la ID de CSS del primer duplicado.id CSS: GISA-2

Cambie el color del icono del módulo de propaganda (columna 1) junto con el color del primer módulo de propaganda.

Icono de color: # 333333

Cambie los enlaces de ambos módulos de blurb para que funcionen los enlaces de anclaje, deberá cambiar la conexión de cada una de las flechas en consecuencia:

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

Cambie el duplicado # 2 Cambie la fila de ID de CSS Cambie la ID CSS del segundo duplicado.
ID CSS: GISA-3

Cambie el color del icono del módulo de propaganda (columna 1) junto con el color del primer icono del módulo de propaganda.
Icono de color: # 333333

Cambie los enlaces de los módulos de la propaganda y nuevamente, cambie los enlaces de cada módulo de propaganda en consecuencia:

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

Cambie el duplicado no. 3 Cambie la ID de CSS y cambie el código CSS del tercer duplicado.
ID CSS: GLISA-4

Cambie el icono del módulo de propaganda (columna 2) y seleccione otro icono de propaganda en la columna 3.
Cambie el enlace del módulo de la propaganda (columna 2) Asegúrese de que, al hacer clic, el visitante se redirigirá a la primera columna de la sección modificando correctamente la URL del enlace del módulo:

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

Clone fila # 2 tres veces pasamos la siguiente fila. Clonar esta fila y tres veces.
Cambie el color de fondo de la fila para duplicar no. 1 Cambiar el color de fondo del primer duplicado. Wallpaper: #dcdced

Cambie el color de fondo de la fila para duplicar no. 2 El segundo duplicado usa el siguiente color de fondo:

Color de fondo: # ffeed1
Cambie el color de fondo de la fila para duplicar no. 3 Cambie el color de fondo del tercer duplicado.

Color de fondo: # d6ffe5

Agregue el código CSS y el código CSS a la sección ahora, que tenemos todas las líneas que necesitamos, podemos hacer que la magia suceda. Agregue una 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: sección Sección

Luego acceda a las opciones CSS personalizadas y agregue algunas líneas de código CSS al elemento principal. Desbordamiento-y: desplazarse;
Pantalla: cuadrícula;

Columnas de plantilla de cuadrícula: repetir (4, 100%);
Behavior de desplazamiento: suave;

Scroll-snap-type: x obligatorio; Cuantas más columnas de sección desee crear, más columnas deberá agregar al código CSS. Entonces, digamos, por ejemplo, que desea tener la misma estructura, pero permita 7 diapositivas en lugar de 4, deberá cambiar las columnas de la línea de código CSS de plantilla de grilla en consecuencia: columnas de plantilla de cuadrícula: Repetir (7 , 100%); Pero tenga en cuenta que deberá agregar más filas si aumenta el número de columna. Entonces, en este caso, si desea aparecer dos líneas para cada columna de la sección, necesitará 14 filas.
Oculte la barra de desplazamiento, puede optar por ocultar la barra de desplazamiento usando la sección de ID de CSS y agregar las siguientes líneas de código CSS a la configuración de la página: #section-scroll: -webkit-scroll {display: none;

}
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla.Escritorio
Móvil
Pensamientos finales Al diseñar sitios web con Div, lo más simple es construir.Pero solo porque es lo más simple, no significa que esté limitado a esta opción.También puede crear una página deslizante completamente horizontal.En este tutorial, le mostré cómo hacer un diseño web increíble con deslizamiento horizontal usando div.Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.