Descargue un carrusel de miembros del equipo de desplazamiento automático GRATUITO hecho con los efectos de desplazamiento de Divi

Avance

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

Escritorio

Móvil

Descargue el diseño del carrusel de miembros del equipo GRATIS

Para poner sus manos en el diseño de carrusel gratuito de miembros del equipo, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

¡Empecemos a Recrear!

Agregar nueva sección

Espaciado

Comience agregando una nueva sección regular a la página en la que está trabajando. Abra la configuración de la sección y agregue un relleno personalizado en diferentes tamaños de pantalla.

• Relleno superior: 200 px (escritorio), 100 px (tableta y teléfono)
• Relleno inferior: 200 px (escritorio), 100 px (tableta y teléfono)

desbordamientos

Para asegurarnos de que no aparezca ninguna barra de desplazamiento horizontal en nuestro diseño, ocultaremos los desbordamientos de sección en la pestaña avanzada.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Añadir Fila #1

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila, pase a la pestaña de diseño y modifique el ancho y el ancho máximo en la configuración de tamaño.

• Ancho: 90%
• Ancho máximo: 1580px

Espaciado

También estamos agregando algunos rellenos superiores e inferiores personalizados.

• Relleno superior: 100px
• Relleno inferior: 100px

Agregar módulo de texto a la columna

Agregar contenido H2

Es hora de agregar módulos, comenzando con un primer módulo de texto. Ingrese algún contenido de H2 de su elección.

Configuración de texto H2

Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:

• Encabezado 2 Fuente: Quicksand
• Encabezado 2 Peso de fuente: semi negrita
• Título 2 Color del texto: #000000
• Título 2 Tamaño del texto: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)

Agregar módulo divisor a columna

Visibilidad

Luego, agregue un módulo divisor. Asegúrese de que la opción ‘Mostrar divisor’ esté habilitada.

• Mostrar divisor: Sí

Línea

Realice algunos cambios en la configuración de la línea a continuación.

• Color de línea: #edf000
• Estilo de línea: Sólido
• Posición de la línea: Arriba

Dimensionamiento

Y complete la configuración del módulo cambiando la configuración de tamaño en consecuencia:

• Peso del divisor: 20px
• Ancho: 11%
• Alineación del módulo: Izquierda
• Altura: 20px

Añadir Fila #2

Estructura de la columna

¡A la siguiente fila! Utilice la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho del canalón: 2
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Luego, agregue un poco de relleno izquierdo y derecho solo en tamaños de pantalla más pequeños.

• Relleno izquierdo: 5% (solo tableta y teléfono)
• Relleno derecho: 5% (solo tableta y teléfono)

Configuraciones de columna (5x)

Ahora, en los próximos tres pasos de este tutorial, haremos algunos cambios en las columnas. Aplique los tres pasos a cada una de las columnas de su fila.

Fondo degradado

Primero, agregue un fondo degradado a cada columna.

• Color 1: rgba(255.255.255,0)
• Color 2: rgba (0,0,0,0,84)
• Tipo de gradiente: lineal
• Posición inicial: 25%
• Posición final: 86%
• Coloque el degradado sobre la imagen de fondo: Sí

Imagen de fondo

Luego, cargue una imagen de fondo de su elección. Esta imagen de fondo representa a cada miembro del equipo, así que use una imagen diferente para cada columna.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro

Elemento principal

Complete la configuración de la columna agregando CSS personalizado al elemento principal de cada columna de la tableta. Estas líneas de código CSS nos ayudarán a colocar las columnas una debajo de la otra en la tableta, en lugar de tener dos una al lado de la otra.

Agregar módulo de persona a la columna

Agregar contenido

Para compartir la información de los miembros del equipo, usaremos un módulo de persona. Agregue el módulo de la primera persona a la columna 1 y use algún contenido de su elección.

Quita la imagen

Luego, elimina la imagen. En su lugar, estamos usando la imagen de fondo de la columna.

Imagen de fondo

Luego agregaremos una superposición de imagen como imagen de fondo del módulo. Puede encontrar el que estamos usando descargando la carpeta al comienzo de este tutorial.

• Tamaño de la imagen de fondo: Portada
• Posición de la imagen de fondo: Centro

Configuración del texto del título

Pase a la pestaña de diseño del módulo y cambie la configuración del texto del título de la siguiente manera:

• Título Nivel de encabezado: H3
• Fuente del título: Quicksand
• Peso de la fuente del título: Negrita
• Color del texto del título: #ffffff
• Tamaño del texto del título: 230 %

Configuración del texto del cuerpo

Modifique también la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Color del cuerpo del texto: #ffffff
• Altura de la línea del cuerpo: 2,2 em

Ajustes de texto de posición

Luego, realice algunos cambios en la configuración del texto de posición.

• Fuente de posición: Open Sans
• Color de texto de posición: #edf000

Espaciado

Y complete la configuración del módulo agregando algunos valores de relleno personalizados a la configuración de espaciado.

• Acolchado superior: 70%
• Acolchado inferior: 10%
• Relleno izquierdo: 10%
• Relleno Derecho: 10%

Módulo de persona clon 4x

Una vez que haya completado el Módulo de persona, puede clonar el módulo completo cuatro veces.

Colocar duplicados en las columnas restantes

Coloque los módulos duplicados en las cuatro columnas restantes de la fila. Asegúrate de cambiar el contenido también.

Convierta la fila en un carrusel de desplazamiento automático

Modificar el tamaño de la fila n.º 2

Ahora, para convertir esta fila en un carrusel de miembros del equipo con desplazamiento automático, necesitaremos volver a abrir la configuración de la fila y cambiar el ancho y el ancho máximo en la configuración de tamaño.

• Ancho: 180%
• Ancho máximo: 220 % (escritorio), 100 % (tableta y teléfono)

Agregar movimiento horizontal de la fila n.º 2

Complete la configuración de la fila agregando un poco de movimiento horizontal a la configuración del efecto de desplazamiento en la pestaña avanzada y ¡listo!

• Habilitar movimiento horizontal: Sí
• Compensación inicial:
  
  • Escritorio: 2.5
  • Tableta y teléfono: 0
• Compensación media: 0 (al 40 %)
• Compensación final:
  
  • Escritorio: -25 (al 62%)
  • Tableta y teléfono: 0
• Disparador de efecto de movimiento: medio del elemento

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo ser creativo con los efectos de desplazamiento integrados de Divi . Más específicamente, hemos recreado un hermoso carrusel de miembros del equipo con desplazamiento automático. A medida que los visitantes se desplazan hacia abajo en la página, aparece una parte diferente del carrusel. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse  a nuestro boletín de correo electrónico  y  al canal de YouTube  para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.