Creación de tarjetas deslizantes horizontales infinitas para dispositivos móviles con Divi

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

Móvil

Ejemplo 2: Fila de dos columnas + Múltiples módulos en ‘Columna deslizable’

Escritorio

Móvil

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 múltiples 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 yendo a la publicación ‘ Descargar 10 imágenes de fondo de sección fluida GRATIS para Divi ‘

Suscríbete a nuestro canal de Youtube

Recrear el ejemplo n.º 1

Agregar nueva sección

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

Agregar nueva fila

Estructura de la columna

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

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ón: 1

Código CSS de la columna

Como se mencionó anteriormente, estamos convirtiendo la columna misma en un mecanismo de cuadrícula de deslizamiento/desplazamiento. Para hacer eso, 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.

La primera línea del 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 deslizables que desee mostrar en el mecanismo de deslizamiento/desplazamiento, deberá modificar los valores. Entonces, supongamos que, por ejemplo, desea que 10 tarjetas magnéticas diferentes formen parte del mecanismo y desea aumentar el ancho de cada columna al 90 %; en su lugar, deberá usar la siguiente línea de código CSS:

Agregue el módulo 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 CTA a la columna. Agregue algún contenido de su elección.

Enlace

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

Fondo degradado

Continúe agregando un fondo degradado.

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

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 esta publicación . Una vez que haya descargado las imágenes de fondo fluidas, busque el archivo de imagen ‘ fluid-style-2.png ‘ 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: Ajuste
• Posición de la imagen de fondo: Centro
• Repetición de la imagen de fondo: sin repetición
• Mezcla de imagen de fondo: superposición

Configuración de texto

Pase 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

Configuración del texto del título

Modifique la configuración del texto del título a continuación.

• 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,9 em

Configuración del texto del cuerpo

Junto con la configuración del texto del cuerpo.

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

Configuración de botones

También estamos cambiando 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

Dimensionamiento

También es importante disminuir ligeramente el ancho del Módulo CTA en la configuración de tamaño. Esto asegurará que siempre haya un espacio entre este módulo y el siguiente módulo en el mecanismo de deslizar/desplazarse.

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

Espaciado

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

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

Borde

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

Clone el módulo CTA tantas veces como desee

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

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

Y use la imagen de fondo ‘ fluid-style-9.png ‘ en su lugar.

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

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

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

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

Cargue el archivo de imagen ‘fluid-style-10a.png’ como imagen de fondo.

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

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

Cargue la imagen de fondo ‘ fluid-style-6.png ‘.

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

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

Utilice ‘ fluid-style-4.png ‘ como imagen de fondo.

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

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

Cambia el fondo degradado del último duplicado.

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

Utilice ‘ fluid-style-7.png ‘ como imagen de fondo.

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

Ajustar la columna CSS al número de módulos

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

Estilo de la barra de desplazamiento

Agregar clase CSS a la columna

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

• Columna Clase CSS: deslizar la barra de desplazamiento

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:

Recrear el Ejemplo #2

Clonar sección anterior

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

Cambiar la configuración de espaciado de CTA

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

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

Ampliar la configuración de espaciado a todos los módulos en la columna

Extienda estas nuevas configuraciones de espaciado haciendo clic con el botón derecho y haciendo clic en ‘Extender estilos de espaciado’.

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

Cambiar la estructura de la columna

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

Mover módulos a la segunda columna

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

Mover CSS a la segunda columna y cambiar valores

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

• Columna 2 Clase CSS: deslizar barra de desplazamiento

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

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 algo de contenido de H2 de su elección.

Ajustes de texto de encabezado

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

• Encabezado 2 Fuente: Didact Gothic
• Encabezado 2 Peso de fuente: Negrita
• Encabezado 2 Alineación de texto: Centro
• Título 2 Tamaño del texto: 2.5vw (Escritorio), 5vw (Tableta), 6vw (Teléfono)

Espaciado

Agregue también un margen superior personalizado.

• Margen superior: 100px

Agregue el 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í

Color

Cambia el color del divisor a continuación.

• Color: #333333

Dimensionamiento

Junto con la configuración de tamaño.

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

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)

Agregue el módulo de cuerpo de texto a la columna 1

Agregar contenido

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

Configuración de texto

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

• Fuente de texto: Open Sans
• Tamaño del texto: 0,7 vw (escritorio), 1,6 vw (tableta), 2,3 vw (teléfono)

Dimensionamiento

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

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

Espaciado

Y agregue un margen superior e inferior personalizado.

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

Cambiar a 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.

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 hemos agregado nos ha ayudado a crear 6 columnas diferentes. Esto significa que si quieres que aparezcan dos módulos diferentes en cada una de estas 6 columnas, necesitarás tener 12 módulos en total. La ubicación del módulo se realiza 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.

Agregar contenido

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

Configuración de texto

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

• Fuente del texto: didáctica gótica
• Peso de fuente de texto: Negrita
• Color del texto: #000000
• Tamaño del texto: 1.1vw (escritorio), 3vw (tableta), 3.5vw (teléfono)

Clonar módulo de texto 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 también tenemos. Entonces, si usa 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.

Cambiar contenido de duplicados

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

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

Móvil

Ejemplo 1: Fila de dos columnas + Múltiples módulos en ‘Columna deslizable’

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear infinitas tarjetas deslizables horizontales usando Divi . La creación de 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 a través de 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!