Creación de tarjetas de deslizamiento horizontal sin fin para dispositivos móviles con Divi


Deslizar el contenido es algo que casi todo el mundo hace a diario. Básicamente se ha convertido en una segunda naturaleza, por lo que no hace falta decir que agregarlo a su sitio web puede ayudar a mejorar la experiencia general del usuario. En esta publicación, le mostraremos cómo crear infinitas tarjetas de deslizamiento horizontal que se centran principalmente en dispositivos móviles y tabletas, donde el tacto está involucrado. Aunque este es un tutorial para dispositivos móviles, el resultado también funcionará muy bien en el escritorio. Las personas pueden usar la barra de desplazamiento que se incluirá o "deslizar" hacia la izquierda y hacia la derecha con su panel táctil.

¡Hagámoslo!

Avance

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

Ejemplo 1: fila de una columna

Escritorio

contenido de deslizamiento horizontal

Móvil

contenido de deslizamiento horizontal

Ejemplo 2: Fila de dos columnas + Varios módulos en "Columna deslizante"

Escritorio

contenido de deslizamiento horizontal

Móvil

contenido de deslizamiento horizontal

Acercarse

  • Para crear este hermoso efecto, necesitaremos transformar una columna vertical completa en un mecanismo de cuadrícula de deslizamiento / desplazamiento horizontal usando solo unas pocas líneas de código CSS
  • El uso de una columna vertical para este mecanismo (y convertirlo en una cuadrícula horizontal) le permitirá agregar tantas tarjetas deslizantes como desee, puede determinar cuántas columnas habrá
  • En otras palabras; agregará módulos hacia abajo y el mecanismo de deslizamiento / desplazamiento colocará el dobladillo en una columna horizontal
  • Para el primer ejemplo, usaremos una fila de una columna
  • Esto permitirá que el mecanismo de deslizamiento ocupe todo el ancho de la pantalla.
  • El segundo ejemplo, por otro lado, convierte solo una de las dos columnas en un mecanismo de deslizamiento / desplazamiento y deja la otra columna en su estado estático
  • También le mostraremos cómo agregar varios módulos a una "columna" del mecanismo de deslizamiento / desplazamiento.
  • Una vez que comprenda el enfoque, podrá crear literalmente cualquier tipo de diseño que desee y hacer que forme parte del mecanismo de deslizamiento / desplazamiento que puede ver en los GIF anteriores.
  • Puede encontrar todas las imágenes de fondo fluidas que usaremos en la sección "Descargue 10 imágenes de fondo de la sección de fluidos GRATIS para Divi"Publicar

(incrustar) https://www.youtube.com/watch?v=m8IuHRC2hwE (/ incrustar)

Suscríbete a nuestro canal de Youtube

Recrear el ejemplo n. ° 1

Agregar nueva sección

¡Comencemos a crear el primer ejemplo! Agrega una nueva sección a la página en la que estás trabajando.

contenido de deslizamiento horizontal

Agregar nueva fila

Estructura de columna

Luego, agregue una fila con una columna. Vamos a convertir toda esta columna en un mecanismo de deslizamiento / desplazamiento.

contenido de deslizamiento horizontal

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y vaya a la configuración de tamaño. Aquí, vamos a eliminar todo el espacio entre la sección, la fila y la columna. En otras palabras, la columna ocupará todo el ancho de la pantalla.

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

contenido de deslizamiento horizontal

Código CSS de columna

Como se mencionó anteriormente, estamos convirtiendo la columna en sí misma en un mecanismo de cuadrícula de deslizamiento / desplazamiento. Para hacerlo, necesitaremos tres líneas de código CSS personalizado, que puede encontrar a continuación. Continúe y agréguelos al elemento principal de la columna en la pestaña avanzada de la fila.

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 70%);

La primera línea de código CSS permite desplazarse / deslizarse. La segunda línea convierte la columna en una cuadrícula horizontal. Y la tercera línea de código CSS define la cuadrícula. Básicamente, estamos diciendo que queremos 6 columnas, cada una de las cuales tendrá un ancho del 70%. Dependiendo de la cantidad de tarjetas de deslizamiento que desee que aparezcan en el mecanismo de deslizamiento / desplazamiento, deberá modificar los valores. Entonces, digamos, por ejemplo, que desea que 10 tarjetas de deslizamiento diferentes sean parte del mecanismo y desea aumentar el ancho de cada columna al 90%, tendrá que usar la siguiente línea de código CSS en su lugar:

grid-template-columns: repeat(10, 90%);

contenido de deslizamiento horizontal

Agregar módulo de CTA a la columna 1

Agregar contenido

Una vez que haya terminado de modificar la configuración de la fila, continúe y agregue un Módulo de CTA a la columna. Agregue algún contenido de su elección.

contenido de deslizamiento horizontal

Enlace

También deberá agregar una URL de enlace de botón para que el botón aparezca en el módulo.

contenido de deslizamiento horizontal

Fondo degradado

Continúe agregando un fondo degradado.

  • Color 1: # 802bff
  • Color 2: # 001519

contenido de deslizamiento horizontal

Imagen de fondo

En la sección de enfoque de esta publicación, mencionamos que usaremos las imágenes de fondo fluidas que puede descargar de forma gratuita yendo a este enviar. Una vez que haya descargado las imágenes de fondo fluidas, busque "fluido-estilo-2.png"Archivo de imagen y cárguelo en la pestaña de imagen de fondo. Modifique la configuración de la imagen de fondo en consecuencia:

  • Tamaño de la imagen de fondo: Ajustar
  • Posición de la imagen de fondo: Centro
  • Repetición de imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: superposición

contenido de deslizamiento horizontal

Configuración de texto

Vaya a la pestaña de diseño y asegúrese de que se apliquen las siguientes configuraciones de texto:

  • Orientación del texto: centro
  • Color del texto: claro

contenido de deslizamiento horizontal

Configuración del texto del título

A continuación, modifique la configuración del texto del título.

  • Fuente del título: Didact Gothic
  • Peso de la fuente del título: negrita
  • Tamaño del texto del título: 1vw (escritorio), 2.5vw (tableta), 4vw (teléfono)
  • Altura de la línea de título: 1.9em

contenido de deslizamiento horizontal

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

  • Fuente del cuerpo: Open Sans
  • Tamaño del texto del cuerpo: 0.6vw (escritorio), 1.3vw (tableta), 2.5vw (teléfono)
  • Altura de la línea del cuerpo: 2.6em (escritorio y tableta), 2.1em (teléfono)

contenido de deslizamiento horizontal

Configuración de botones

También cambiaremos la apariencia del botón en este módulo.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 0.9vw (escritorio), 2.1vw (tableta), 3.5vw (teléfono)
  • Color del texto del botón: # 000000
  • Color de fondo del botón: #ffffff
  • Ancho del borde del botón: 10px
  • Color del borde del botón: #ffffff
  • Fuente del botón: Didact Gothic

contenido de deslizamiento horizontal

contenido de deslizamiento horizontal

Dimensionamiento

También es importante reducir ligeramente el ancho del módulo de CTA en la configuración de tamaño. Esto asegurará que siempre haya un espacio entre este módulo y el módulo que viene a continuación en el mecanismo de deslizamiento / desplazamiento.

  • Ancho: 95%
  • Alineación del módulo: centro

contenido de deslizamiento horizontal

Espaciado

Por supuesto, queremos que todo se vea bien en todos los tamaños de pantalla diferentes. Es por eso que agregaremos varios valores de relleno personalizados en la configuración de espaciado.

  • Margen superior: 50 px
  • Margen inferior: 50 px
  • Acolchado superior: 12vw (escritorio), 5vw (tableta), 14vw (teléfono)
  • Acolchado inferior: 12vw (escritorio), 5vw (tableta), 14vw (teléfono)
  • Acolchado izquierdo: 20vw (escritorio), 3vw (tableta), 8vw (teléfono)
  • Relleno derecho: 20vw (escritorio), 3vw (tableta), 8vw (teléfono)

contenido de deslizamiento horizontal

Frontera

Por último, pero no menos importante, también estamos agregando "20px" a cada una de las esquinas del módulo.

contenido de deslizamiento horizontal

Clona el módulo de CTA tantas veces como quieras

Una vez que haya terminado de personalizar el Módulo de CTA, puede seguir adelante y clonar el módulo tantas veces como desee.

contenido de deslizamiento horizontal

contenido de deslizamiento horizontal

Cambiar el fondo degradado y la imagen de fondo del duplicado 1

Cambia el fondo degradado del primer duplicado.

  • Color 1: # 7a010d
  • Color 2: # 001519

contenido de deslizamiento horizontal

Y usa el "estilo-fluido-9.png"Imagen de fondo en su lugar.

  • Tamaño de la imagen de fondo: Portada
  • Posición de la imagen de fondo: Centro
  • Repetición de imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: superposición

contenido de deslizamiento horizontal

Cambiar el fondo degradado y la imagen de fondo de Duplicate 2

Cambie el fondo degradado del segundo duplicado a continuación.

  • Color 1: # 26ccff
  • Color 2: # 001519

contenido de deslizamiento horizontal

Sube el archivo de imagen "fluid-style-10a.png" como imagen de fondo.

  • Tamaño de la imagen de fondo: Ajustar
  • Posición de la imagen de fondo: arriba a la izquierda
  • Repetición de imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: superposición

contenido de deslizamiento horizontal

Cambiar el fondo degradado y la imagen de fondo del duplicado 3

Cambia el fondo degradado del tercer duplicado.

  • Color 1: # ff21b8
  • Color 2: # 001519

contenido de deslizamiento horizontal

Sube el "fluido-estilo-6.png' imagen de fondo.

  • Tamaño de la imagen de fondo: Ajustar
  • Posición de la imagen de fondo: Centro
  • Repetición de imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: superposición

contenido de deslizamiento horizontal

Cambiar el fondo degradado y la imagen de fondo del duplicado 4

Cambia el fondo degradado del cuarto duplicado.

  • Color 1: # 4400aa
  • Color 2: # 001519

contenido de deslizamiento horizontal

Utilizar 'fluido-estilo-4.png"Como imagen de fondo.

  • Tamaño de la imagen de fondo: Ajustar
  • Posición de la imagen de fondo: Centro
  • Repetición de imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: superposición

contenido de deslizamiento horizontal

Cambiar el fondo degradado y la imagen de fondo de Duplicate 5

Cambia el fondo degradado del último duplicado.

  • Color 1: # ff2626
  • Color 2: # 001519

contenido de deslizamiento horizontal

Utilizar 'fluido-estilo-7.png"Como imagen de fondo.

  • Tamaño de la imagen de fondo: Ajustar
  • Posición de la imagen de fondo: arriba a la derecha
  • Repetición de imagen de fondo: sin repetición
  • Mezcla de imagen de fondo: superposición

contenido de deslizamiento horizontal

Ajustar CSS de columna a la cantidad de módulos

Ya lo mencionamos antes, pero nuevamente, asegúrese de que el código CSS coincida con la cantidad de módulos que tiene en su columna.

contenido de deslizamiento horizontal

Aplicar estilo a la barra de desplazamiento

Agregar clase CSS a la columna

También puede diseñar la barra de desplazamiento que viene con este mecanismo de cuadrícula de deslizamiento / desplazamiento. Agregue la siguiente clase CSS a su columna:

  • Clase CSS de columna: barra de desplazamiento deslizante

contenido de deslizamiento horizontal

Agregar CSS personalizado a la configuración de la página

Luego, abra la configuración de la página, vaya a la pestaña avanzada y agregue el siguiente código CSS personalizado:

.swipe-scrollbar::-webkit-scrollbar {
width: 10px;
}
.swipe-scrollbar::-webkit-scrollbar-track {
background: #fff;
}
.swipe-scrollbar::-webkit-scrollbar-thumb {
background: #333;
border-radius: 50px;
}

contenido de deslizamiento horizontal

contenido de deslizamiento horizontal

Recrear el ejemplo 2

Clonar la sección anterior

¡Pasemos al siguiente ejemplo! Clona la sección que creaste en la parte anterior de esta publicación.

contenido de deslizamiento horizontal

Cambiar la configuración de espaciado de CTA

Luego, cambie la configuración de espaciado del primer módulo de CTA.

  • Margen superior: 50 px
  • Margen inferior: 50 px
  • Acolchado superior: 5vw (escritorio y tableta), 14vw (teléfono)
  • Acolchado inferior: 5vw (escritorio y tableta), 14vw (teléfono)
  • Acolchado izquierdo: 4vw (escritorio), 3vw (tableta), 8vw (teléfono)
  • Relleno derecho: 4vw (escritorio), 3vw (tableta), 8vw (teléfono)

contenido de deslizamiento horizontal

Amplíe la configuración de espaciado a todos los módulos de la columna

Amplíe estas nuevas configuraciones de espaciado haciendo clic derecho y haciendo clic en "Extender estilos de espaciado".

contenido de deslizamiento horizontal

  • Para: todas las llamadas a la acción
  • A lo largo de: esta columna

contenido de deslizamiento horizontal

Cambiar la estructura de la columna

Continúe cambiando la estructura de columnas de la fila.

contenido de deslizamiento horizontal

Mover módulos a la segunda columna

Y coloque cada uno de los módulos en la segunda columna.

contenido de deslizamiento horizontal

Mover CSS a la segunda columna y cambiar valores

Dado que hemos movido los módulos de una columna a otra, también tendremos que hacer lo mismo con el código CSS. En su lugar, agregue la clase CSS a la columna 2.

  • Columna 2 Clase CSS: barra de desplazamiento deslizante

contenido de deslizamiento horizontal

Coloque las líneas de código CSS en el elemento principal de la columna 2. También cambiaremos el ancho de cada columna a "80%".

overflow-x: scroll;
display: grid;
grid-template-columns: repeat(6, 80%);

contenido de deslizamiento horizontal

Agregar módulo de texto de título a la columna 1

Agregar contenido

Continúe agregando un nuevo módulo de texto a la primera columna. Agregue un poco de contenido H2 de su elección.

contenido de deslizamiento horizontal

Configuración del texto del encabezado

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

  • Fuente del encabezado 2: Didact Gothic
  • Peso de fuente del encabezado 2: Negrita
  • Alineación del texto del título 2: centro
  • Encabezado 2 Tamaño del texto: 2.5vw (escritorio), 5vw (tableta), 6vw (teléfono)

contenido de deslizamiento horizontal

Espaciado

Agregue un margen superior personalizado también.

  • Margen superior: 100 px

contenido de deslizamiento horizontal

Agregar módulo divisor a la columna 1

Visibilidad

El siguiente módulo que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

  • Mostrar divisor: Sí

contenido de deslizamiento horizontal

Color

A continuación, cambie el color del divisor.

  • Color: # 333333

contenido de deslizamiento horizontal

Dimensionamiento

Junto con la configuración de tamaño.

  • Peso del divisor: 7px
  • Alto: 0px
  • Ancho: 10%
  • Alineación del módulo: centro

contenido de deslizamiento horizontal

Espaciado

Complete el módulo divisor agregando un margen superior personalizado en diferentes tamaños de pantalla.

  • Margen superior: 1.8vw (escritorio), 2.5vw (tableta), 4vw (teléfono)

contenido de deslizamiento horizontal

Agregar módulo de texto del cuerpo a la columna 1

Agregar contenido

El siguiente y último módulo que necesitamos en la primera columna es un módulo de texto descriptivo. Agregue algún contenido de su elección.

contenido de deslizamiento horizontal

Configuración de texto

Continúe cambiando la configuración del texto en la pestaña de diseño.

  • Fuente de texto: Open Sans
  • Tamaño del texto: 0.7vw (escritorio), 1.6vw (tableta), 2.3vw (teléfono)

contenido de deslizamiento horizontal

Dimensionamiento

Modifique también la configuración de tamaño.

  • Ancho: 43% (escritorio), 68% (tableta), 70% (teléfono)
  • Alineación del módulo: centro

contenido de deslizamiento horizontal

Espaciado

Y agregue algunos márgenes superior e inferior personalizados.

  • Margen superior: 50 px
  • Margen inferior: 50 px

contenido de deslizamiento horizontal

Cambiar a la vista de estructura alámbrica

Una vez que haya terminado de modificar todos los módulos en la columna 1, continúe y cambie a la vista de estructura alámbrica.

contenido de deslizamiento horizontal

Agregar módulo de texto a la parte superior de la columna 2

Aquí, vamos a agregar un módulo de texto en la parte superior de la segunda columna. El código CSS que agregamos nos ha ayudado a crear 6 columnas diferentes. Esto significa que si desea que aparezcan dos módulos diferentes en cada una de estas 6 columnas, deberá tener 12 módulos en total. La colocación del módulo ocurre horizontalmente, por lo que los primeros 5 módulos que tiene en la columna 2 aparecerán uno al lado del otro. Luego, el mecanismo cambiará a otra fila y agregará los 6 módulos restantes.

contenido de deslizamiento horizontal

Agregar contenido

Abra el nuevo módulo de texto que ha agregado en la parte superior de la segunda columna y agregue algún contenido de su elección.

contenido de deslizamiento horizontal

Configuración de texto

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

  • Fuente de texto: Didact Gothic
  • Peso de la fuente del texto: negrita
  • Color del texto: # 000000
  • Tamaño del texto: 1.1vw (escritorio), 3vw (tableta), 3.5vw (teléfono)

contenido de deslizamiento horizontal

Módulo de texto de clonación 5x

Continúe y clone este módulo de texto 5 veces. Ahora, tendrá 6 módulos de texto diferentes, esto es igual a la cantidad de módulos de CTA que tenemos también. Por lo tanto, si está utilizando 10 módulos de CTA en su lugar, deberá agregar 10 módulos de texto (o cualquier otro módulo) para equilibrar la estructura de la columna.

contenido de deslizamiento horizontal

Cambiar el contenido de los duplicados

Cambie el contenido de cada uno de los duplicados para que coincida con el Módulo de CTA que aparecerá debajo y ¡listo!

contenido de deslizamiento horizontal

Avance

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

Ejemplo 1: fila de una columna

Escritorio

contenido de deslizamiento horizontal

Móvil

contenido de deslizamiento horizontal

Ejemplo 1: Fila de dos columnas + varios módulos en "Columna deslizante"

Escritorio

contenido de deslizamiento horizontal

Móvil

contenido de deslizamiento horizontal

Pensamientos finales

En esta publicación, le mostramos cómo crear infinitas tarjetas de deslizamiento horizontal con Divi. Crear estas tarjetas deslizantes no solo lo ayudará a agregar una dimensión adicional a su sitio web, sino que también ayudará a los visitantes a navegar sin problemas por todo el contenido que su sitio web tiene para ofrecer. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!