Saltar al contenido principal

Cómo crear un carrusel de desplazamiento de miembros del equipo con Divi

Divi: el tema de WordPress más fácil de usar

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Al crear su página Acerca de, probablemente también desee presentar a los miembros de su equipo. Al hacerlo, permite que los visitantes interactúen con las personas detrás de su negocio. Si está buscando una forma de animar la sección de miembros de su equipo en el pergamino, este tutorial puede ser para usted. Crearemos un carrusel de miembros del equipo de desplazamiento automático que se mueve a medida que sus visitantes se desplazan por la página. 

Demostración

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

Scroll miembro del equipo divi

Comienzo de la concepción.

Añadir una nueva sección

espaciamiento

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 relleno personalizado en diferentes tamaños de pantalla.

  • Acolchado superior: 200 px (escritorio), 100 px (tableta y teléfono)
  • Acolchado inferior: 200 px (escritorio), 100 px (tableta y teléfono)
Configuración de parámetros

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
Configuración de desbordamiento

Agregar línea # 1

Estructura de la columna

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

Elija el diseño divi

apresto

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

  • Ancho: 90%
  • Ancho máximo: 1580 px
Parámetro de línea divi

espaciamiento

También agregamos relleno superior e inferior personalizados.

  • Relleno superior: 100px
  • Relleno inferior: 100px
Configuración divi de espaciado de línea

Agregar un módulo de texto a la columna

Añadir contenido H2

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

Conocer al equipo

Configuraciones de texto H2

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

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

Agregar un módulo de separación a la columna

visibilidad

Luego agregue un módulo de separación. Asegúrese de que la opción "Mostrar separador" esté habilitada.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

  • Mostrar separador: sí
Mostrar separador divi

línea

Luego realice algunos cambios en la configuración de la línea.

  • Color de línea: # edf000
  • Estilo de línea: sólido
  • Posición de línea: superior
Estilo de espaciado Divi

apresto

Y complete los parámetros del módulo modificando los parámetros de dimensionamiento en consecuencia:

  • Peso del divisor: 20px
  • Ancho: 11%
  • Alineación del módulo: izquierda.
  • Altura: 20px
Dimensionamiento del módulo divi line

Agregar una línea # 2

Estructura de la columna

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

Configuración de la columna Divi

apresto

Sin agregar más módulos, abra los parámetros de línea y modifique los parámetros de tamaño de la siguiente manera:

  • Use un ancho de canal personalizado: Sí
  • Ancho de canal: 2
  • Ancho: 100%
  • Ancho máximo: 100%
Configuración de ancho de canal

espaciamiento

Luego agregue relleno izquierdo y derecho solo en las pantallas más pequeñas.

  • Relleno izquierdo: 5% (solo tableta y teléfono)
  • Relleno derecho: 5% (solo tableta y teléfono)
Configuración de estilo de espaciado de línea

Parámetros de columna (5x)

Ahora, en los siguientes tres pasos de este tutorial, realizaremos algunos cambios en las columnas. Aplique los tres pasos a cada una de las columnas de su fila.

Configuración de la línea de parámetros Divi

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 de inicio: 25%
  • Posición final: 86%
  • Colocar degradado encima de la imagen de fondo: Sí
Configuración de la columna trasera Divi

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.

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

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

Elemento principal

Complete la configuración de la columna agregando CSS personalizado al elemento principal de la tableta de cada columna. 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.

ancho: 100%! importante; margen: 50px 0px 50px 0px! importante;
Código css divi columna

Agregar un módulo de persona a la columna

Agregar contenido

Para compartir información sobre los miembros del equipo, usaremos un módulo de Persona. Agregue el primer módulo Persona a la columna 1 y use el contenido que desee.

Nombre de la persona divi

Eliminar Imagen

Luego borra la imagen. En su lugar, usamos la imagen de fondo de la columna.

Eliminar imagen divi

Imagen de fondo

Luego agregaremos una superposición de imágenes 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 de fondo del módulo de persona

Configuración del texto del título

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

  • Nivel de título: 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%
Personalización del título del módulo Divi

Configuración del texto del cuerpo

También cambie la configuración del texto del cuerpo.

  • Fuente del cuerpo: abierto sin
  • Color del texto del cuerpo: #ffffff
  • Altura de la línea del cuerpo: 2,2 em
Personalización del cuerpo Divi

Configuración de texto de posición

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

  • Posición de fuente: Open Sans
  • Color del texto de posición: # edf000
Posición Divi

espaciamiento

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

  • Acolchado superior: 70%
  • Acolchado inferior: 10%
  • Relleno izquierdo: 10%
  • Relleno derecho: 10%
Espaciado de módulo divi person

Duplicar el módulo Persona 4 veces

Una vez que haya completado el módulo Persona, puede clonar todo el módulo cuatro veces.

Coloque duplicados en las columnas restantes.

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

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [Recomendado]

Convierta la fila en un carrusel de desplazamiento automático

Cambiar el tamaño de la línea # 2

Ahora, para convertir esta fila en un carrusel de miembros del equipo de desplazamiento automático, necesitamos 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)
Espaciado de modificación de divi de línea

Agregar movimiento horizontal de la línea # 2

Complete la configuración de línea agregando movimiento horizontal a la configuración del efecto de desplazamiento en la pestaña avanzada y listo.

  • Activar movimiento horizontal: sí
  • Iniciar desplazamiento:
    • Despacho: 2,5
    • Tableta y teléfono: 0
  • Compensación media: 0 (al 40%)
  • Desplazamiento final:
    • Oficina: -25 (al 62%)
    • Tableta y teléfono: 0
  • Efecto de movimiento de disparo: medio del elemento
Configuración de animación de desplazamiento Divi

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.

oficina

Scroll miembro del equipo divi

Consideraciones finales

En este tutorial, le mostramos cómo ser creativo con los efectos de desplazamiento integrados de Divi. 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 otra parte del carrusel.

Este artículo contiene los comentarios 0

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
0 acciones
cuota
Tweet
Siguiente