Creación de tarjetas horizontales sin duda para móviles con div Div

El deslizamiento de contenido es algo que casi todos hacen todos los días. Básicamente se ha convertido en la segunda naturaleza, por lo que está claro que agregarlo a su sitio web puede contribuir a mejorar la experiencia general del usuario. En esta publicación, le mostraremos cómo crear tarjetas horizontales interminables que se centren principalmente en dispositivos móviles y tabletas, donde está involucrado el toque. Aunque este es un primer tutorial en el móvil, el resultado funcionará excelente en el escritorio. Los usuarios pueden usar la barra de desplazamiento que se incluirá o se “deslizará” hacia la izquierda y la derecha usando su panel táctil.
¡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. Ejemplo 1: fila con una columna de escritorio

Móvil

Ejemplo 2: fila con dos columnas + múltiples módulos en la columna de escritorio “deslizamiento”

Móvil

Acercarse
Para crear este hermoso efecto, necesitaremos convertir una columna vertical completa en un mecanismo de deslizamiento / desplazamiento horizontal utilizando solo unas pocas líneas de código CSS
Usar una columna vertical para este mecanismo (y convertirlo en una cuadrícula horizontal) le permitirá agregar cuántas tarjetas deslizantes desea, determinará cuántas columnas deben ser
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 con una columna
Esto permitirá que el mecanismo deslizante ocupe todo el ancho de la pantalla
El segundo ejemplo, por otro lado, transforma solo una de las dos columnas en un mecanismo deslizante / de ejecución y deja la otra columna en su estado estático, le mostraremos cómo agregar más 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 ser parte del mecanismo de deslizamiento / desplazamiento que pueda ver en el GIF anterior.
Puede encontrar todas las imágenes de fondo de fluido que utilizaremos accediendo a la publicación “Descargue 10 imágenes de fondo gratuitas de la sección de fluido”
Suscríbase a nuestro canal de YouTube recreos Ejemplo no. 1 Agregue una nueva sección para comenzar a crear el primer ejemplo. Agregue una nueva sección a la página en la que está trabajando.
Agregue una nueva línea a la estructura de la columna y luego, agregue una fila con una columna. Convertiremos toda la columna en un mecanismo deslizante / desplazamiento.

Dimensión sin agregar módulos, abrir la configuración de línea y acceder a la configuración de tamaño. Aquí eliminaremos todo el espacio entre la sección, la fila y la columna. En otras palabras, la columna ocupará 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
Código de columna CSS Como se mencionó anteriormente, transformamos la columna en sí en un mecanismo de deslizamiento / desplazamiento. Para hacer esto, necesitaremos tres filas 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 de fila avanzada. Desbordamiento-x: desplazamiento;

Pantalla: cuadrícula;
Columnas de plantilla de cuadrícula: repetir (6, 70%); La primera línea de código CSS permite ejecutar / deslizar. 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. En principio, decimos que queremos 6 columnas que tengan un ancho del 70%. Dependiendo de la cantidad de tarjetas que desee aparecer en el mecanismo de deslizamiento / desplazamiento, deberá cambiar los valores. Entonces, digamos, por ejemplo, que desea que 10 cartas diferentes sean parte del mecanismo y que desea aumentar el ancho de cada columna al 90%, deberá usar el siguiente código CSS: Grid-T-T-Columns: Repita (10, 90%);
Agregue el módulo CTA a la columna 1 Agregar contenido después de haber terminado de cambiar la configuración de la fila, continúe y agregue un módulo CTA a la columna. Agregue un contenido a su elección.
Conexión también, deberá agregar una URL de enlace para el botón para que el botón aparezca en el módulo.

El fondo de gradiente continúa agregando un fondo de gradiente.

Color 1: # 802bff

Color 2: # 001519
Imagen de fondo En la sección de enfoque de esta publicación, mencioné que utilizaremos las imágenes de fondo de fluido que puede descargar de forma gratuita accediendo a esta publicación. Después de descargar las imágenes de fondo de fluido, busque el archivo de imagen “Fluid-Style-2.png” y cárguelo en la imagen de fondo. Cambie la configuración de la imagen de fondo en consecuencia:
Tamaño de la imagen de fondo: adecuado

Posición de la imagen de fondo: Centro
Repetir la imagen de fondo: sin repetición
Mezcla de imagen de fondo: superposición
Configuración de texto Vaya a la pestaña Diseño y asegúrese de aplicar la siguiente configuración de texto:
Orientación de texto: centro

Color de texto: Abierto
Configuración de texto de título Modificar la configuración del texto del título. Titlu Font: Didact Gothic
Título Fuente de peso: Bold

Título Tamaño del texto: 1VW (escritorio), 2.5VW (tableta), 4VW (teléfono)
Altura de la línea de título: 1.9em
Configuración de texto del cuerpo junto con la configuración de texto de su cuerpo.
Font Corp: Open Sans
Tamaño de 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)
Configuración del botón Cambiar la apariencia del botón y en este módulo.
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.9VW (escritorio), 2.1VW (tableta), 3.5VW (teléfono)

El color del texto del botón: # 000000
El color del fondo del botón: #ffffff
El ancho del nudo del botón: 10 px
El color del marco del botón: #fffff
Botón de fuente: Didact Gothic
Dimensión también, es importante reducir suavemente el ancho del módulo CTA en la configuración del tamaño. Esto le asegurará que siempre habrá una brecha entre este módulo y cualquiera de los módulos que siguen en el mecanismo de deslizamiento / desplazamiento.
Ancho: 95%
Alineación del módulo: centro


Espacio, por supuesto, queremos que todo se vea genial en todo el tamaño diferente de la pantalla. Por lo tanto, agregaremos diferentes valores de llenado personalizados a la configuración de espaciado.
Margen superior: 50 PX
Margen inferior: 50 PX

Revelaje superior: 12VW (escritorio), 5VW (tableta), 14VW (teléfono)
Bajo forro: 12VW (escritorio), 5VW (tableta), 14VW (teléfono)
ENLIZACIÓN IZQUIERDA: 20VW (escritorio), 3VW (tableta), 8VW (teléfono)
Revestimiento derecho: 20VW (escritorio), 3VW (tableta), 8VW (teléfono)
Por último, pero no menos importante, agregamos “20px” a cada una de las esquinas del módulo.
Clone El módulo CTA tantas veces como desee después de haber terminado el módulo personalizado CTA, puede continuar y clonar el módulo tantas veces como desee. Cambie el fondo y el fondo del gradiente duplicado 1 cambie el fondo de gradiente del primero duplicar.
Color 1: # 7a010d

Color 2: # 001519

Y use los antecedentes de “estilo fluido-9.png”.


Tamaño de la imagen de fondo: portada
Posición de la imagen de fondo: Centro
Repetir la imagen de fondo: sin repetición

Mezcla de imagen de fondo: superposición
Cambie el gradiente de fondo y la imagen de fondo del duplicado 2 y luego cambie el fondo de gradiente del segundo duplicado.
Color 1: # 26ccff
Color 2: # 001519
Cargue el archivo de imagen “estilo fluido-10a.png” como una imagen de fondo.

Tamaño de la imagen de fondo: adecuado
Posición de la imagen de fondo: superior izquierda
Repetir la imagen de fondo: sin repetición

Mezcla de imagen de fondo: superposición
Cambie el fondo de gradiente y el fondo del duplicado 3 Cambie el fondo de gradiente del tercer duplicado.
Color 1: # FF21B8
Color 2: # 001519
Cargue el fondo “Fluid Style-6.png”.

Tamaño de la imagen de fondo: adecuado
Posición de la imagen de fondo: Centro
Repetir la imagen de fondo: sin repetición

Mezcla de imagen de fondo: superposición
Cambie el gradiente de fondo y la imagen de fondo del duplicado 4 Cambie el fondo de gradiente del cuarto duplicado.
Color 1: # 4400AA
Color 2: # 001519
Use “Fluid Style-4.png” como imagen de fondo.

Tamaño de la imagen de fondo: adecuado
Posición de la imagen de fondo: Centro
Repetir la imagen de fondo: sin repetición


Mezcla de imagen en el sótano: sobrepunérez Cambie el fondo y la imagen de fondo del gradiente duplicado 5 Cambie el fondo de gradiente del último duplicado.
Color 1: # FF2626
Color 2: # 001519
Use “Fluid Style-7.png” como una imagen de fondo.
Tamaño de la imagen de fondo: adecuado

Posición de la imagen de fondo: derecha a la derecha
Repetir la imagen de fondo: sin repetición
Mezcla de imagen de fondo: superposición

Ajuste la columna CSS al número de módulos que mencioné antes, pero nuevamente, asegúrese de que el código CSS coincida con la cantidad de módulos que tiene en su columna.
La estilización de la barra de desplazamiento agrega la clase CSS a la columna, también puede estilizar la barra de desplazamiento que viene con este mecanismo de deslizamiento / desplazamiento. Agregue la siguiente clase CSS a su columna:
Columna de clase CSS: diapositivas
Agregue CSS personalizado a la configuración de la página Luego, abra la configuración de la página, acceda a la pestaña avanzada y agregue el siguiente código CSS personalizado: .swipe-scroll ::-Webkit-scrolbar {
Ancho: 10px;

}

.Swipe-scrollbar ::-Webkit-scrollbar-track {
Antecedentes: #fff;

}
.Swipe-Scrollbar ::-WebKit-Scroll-Thumb {
Antecedentes: #333;
Border-radio: 50px;
}
Recrear el ejemplo no. 2 Clon La sección anterior pasamos al siguiente ejemplo! Clone la sección que creó en la parte anterior de esta publicación.
Cambie la configuración de espaciado CTA y luego, cambie la configuración de espaciado del primer módulo CTA.
Margen superior: 50 PX
Margen inferior: 50 PX
Revelaje superior: 5VW (escritorio y tableta), 14VW (teléfono)


Bajo forro: 5VW (escritorio y tableta), 14VW (teléfono)

ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 3VW (tableta), 8VW (teléfono)
Revelaje derecho: 4VW (escritorio), 3VW (tableta), 8VW (teléfono) extender la configuración de espacio a todos los módulos de columna extiende estas nuevas configuraciones de espaciado haciendo clic y haciendo clic en “Extender estilos de espaciado”.
A: todas las llamadas a las acciones
A lo largo: esta columna
Cambie la estructura de la columna Continúe cambiando la estructura de la columna de fila.
Mueva los módulos a la segunda columna y coloque cada uno de los módulos en la segunda columna.
Mueva CSS a la segunda columna y cambie los valores porque movemos los módulos de una columna a otra, tendremos que hacer lo mismo para el código CSS. En su lugar, agregue la clase CSS a la columna 2.

Columna 2 clase CSS: barra deslizante

Coloque las líneas de código CSS en el elemento principal de la columna 2. También cambiamos el ancho de cada columna a “80%”. Desbordamiento-x: desplazamiento;
Pantalla: cuadrícula;

Columnas de plantilla de cuadrícula: repetir (6, 80%);

Agregue el módulo de texto de título en la columna 1 Agregar contenido Continuar agregando un nuevo módulo de texto a la primera columna. Agregue contenido H2 a su elección.

Configuración de texto Acceda a la pestaña Diseño y cambia la configuración de texto H2.
2 Sección de fuentes: Didact Gothic

Título 2 Fuente de peso: Bold
Título 2 Alineación de texto: Centro
2 Tamaño de texto: 2.5VW (escritorio), 5VW (tableta), 6VW (teléfono)

Espacio Agregar un margen personalizado.

Margen superior: 100 PX
Agregue un módulo divisor en la visibilidad de la columna 1 La siguiente manera que necesitamos en la columna 1 es un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si
Color luego cambie el color del separador.
Color: # 333333

Dimensión con configuración de dimensionamiento.
Peso del divisor: 7 pxcînălțime: 0px

Ancho: 10%
Alineación del módulo: centro

El espacio completa el módulo divisor agregando bordes superiores personalizados en diferentes tamaños de pantalla.
Margen superior: 1.8VW (escritorio), 2.5VW (tableta), 4VW (teléfono)

Agregue el módulo de texto del cuerpo a la columna 1 Agregar contenido al siguiente y el último módulo que necesitamos en la primera columna es una descripción del texto. Agregue un contenido a su elección.
Configuración de texto Continúe cambiando la configuración de texto en la pestaña Diseño.
Texto de fuente: Abrir sans
Tamaño de texto: 0.7VW (escritorio), 1.6VW (tableta), 2.3VW (teléfono)
Dimensión Modifique la configuración de tamaño.

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

Espacio y agregue algunos bordes personalizados desde arriba e abajo.

Margen superior: 50 PX
Margen inferior: 50 PX
Cambie a la vista de estructura alámbrica Después de haber terminado de cambiar todos los módulos en la columna 1, continúe y continúe con Wireframe.

Agregue un módulo de texto a la parte superior de la columna 2 aquí, agregaremos un módulo de texto a la parte superior de la segunda columna. El código CSS que agregamos nos ayudó a crear 6 columnas diferentes. Esto significa que si desea que aparezcan dos módulos diferentes en cada una de estas 6 columnas, necesitará 12 módulos en total. La ubicación del módulo tiene lugar horizontalmente, de modo que los primeros 5 módulos que tiene en la columna 2 aparecerán uno al lado del otro. Luego, el mecanismo se moverá a otra fila y agregará los 6 módulos restantes.
Agregue contenido Abra el nuevo módulo de texto que agregó a la parte superior de la segunda columna y agregue un contenido de su elección.
Configuración de texto luego acceda a la pestaña de diseño y cambie la configuración del texto. Texto: Didact Gothic

El peso de la fuente de texto: en negrita
Color de texto: # 000000
Tamaño de texto: 1.1VW (escritorio), 3VW (tableta), 3.5VW (teléfono)

El modo de texto de clonación 5X continúa y clona este módulo de texto 5 veces. Ahora, tendrá 6 módulos de texto diferentes, esto es igual al número de módulos CTA que tenemos. Entonces, si usa 10 módulos CTA en su lugar, deberá agregar 10 módulos de texto (o cualquier otro módulo) para equilibrar la estructura de la columna.

¡Cambie el contenido de los duplicados Cambie el contenido de cada uno de los duplicados para que coincidan con el módulo CTA que aparecerá debajo y ya está terminado!

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Ejemplo 1: fila con una columna de escritorio

Móvil
Ejemplo 1: fila con dos columnas + múltiples módulos en la columna de escritorio “deslizamiento”
Móvil
Pensamientos finales En esta publicación, te mostré cómo crear tarjetas horizontales interminables usando div. Crear estas tarjetas deslizantes no solo lo ayudará a agregar un tamaño adicional a su sitio web, sino que también ayudará a los visitantes a navegar sin problemas en todo su sitio web. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.