¿Le gustaría que los miembros de su equipo se presentaran en forma de carrusel con Divi ?
Al configurar su página Acerca de, probablemente querrá incluir allí también a los miembros de su equipo. Al hacerlo, permite visitantes para conectar con las personas detrás de su negocio.
Si está buscando una forma de animar la sección de los miembros de su equipo en el desplazamiento, le encantará este tutorial.
Vamos a recrear un hermoso carrusel de miembros del equipo con desplazamiento automático que se mueve a medida que su visitantes desplazarse por la página.
Vamos.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Ordenador de oficina
Versión móvil
Empecemos a diseñar con Divi
Lea también: Divi: cómo revelar contenido al pasar el cursor sobre el divisor de sección
Añadir una nueva sección
Magos Internos
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.
- Relleno (superior e inferior): 200 px (escritorio), 100 px (tableta y teléfono)
visibilidad
Para asegurarnos de que no aparezcan barras de desplazamiento horizontales en nuestro diseño, ocultaremos los desbordamientos de sección en la pestaña avanzada.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar línea #1
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Manga
Sin agregar ningún módulo todavía, abra la configuración de línea, cambie a la pestaña Diseño y cambie el ancho y el ancho máximo en la configuración de tamaño.
- Ancho: 90%
- Ancho máximo: 1px
espaciamiento
También agregamos relleno superior e inferior personalizados.
- Relleno (superior e inferior): 100px
Agregar un módulo de texto a la columna
Agregar contenido de tamaño H2
Es hora de agregar módulos, comenzando con un primer módulo de Texto. Entrar a contenido Tamaño H2 de su elección.
Configuraciones de texto H2
Cambiar a pestaña Diseño del módulo y modifique los parámetros de texto H2 de la siguiente manera:
- Fuente: arena movediza
- Peso de fuente: semi negrita
- Color del texto: #000000
- Tamaño del texto: 70 px (escritorio), 50 px (tableta), 40 px (teléfono)
Agregue un módulo "Divisor" a la columna
visibilidad
Luego agregue un módulo Divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.
- Mostrar divisor: SÍ
línea
Luego haga algunos cambios en la configuración de la línea.
- Color de línea: #edf000
- Estilo: Sólido
- Posición de la línea: Superior
Guía de Tallas
Y complete los parámetros del módulo modificando los parámetros de tamaño en consecuencia:
- Peso del divisor: 20px
- Ancho: 11%
- Módulo de alineación: izquierda
- Altura: 20px
Añadir línea 2
Estructura de la columna
¡Siguiente fila! Utilice la siguiente estructura de columnas:
Guía de Tallas
Sin agregar ningún módulo todavía, abra la configuración de fila y cambie 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 (solo tableta y teléfono)
A continuación, agregue relleno izquierdo y derecho solo en tamaños de pantalla pequeños.
- Relleno (izquierdo y derecho): 5% (solo tableta y teléfono)
Parámetros 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.
Gradiente de fondo
Primero, agregue un fondo degradado a cada columna.
- Paradas de gradiente (25 %): rgba (255,255,255,0 XNUMX XNUMX)
- Paradas de gradiente (86 %): rgba (0,0,0,0.84 XNUMX XNUMX)
- Tipo: lineal
- Gradiente cuadrado 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
CSS personalizado agregado (solo tableta)
Complete la configuración de la columna agregando CSS personalizado al elemento principal (Para ver Tablet solamente) 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.
width: 100% !important;
margin: 50px 0px 50px 0px !important;
Agregue un módulo 'Persona' a la columna
Agregar contenido
Para compartir información de los miembros del equipo, usaremos un módulo Persona .
Agregue el primer módulo Persona a la columna 1 y use el contenido De tu elección
Eliminar Imagen
Luego borra la imagen. En su lugar, usamos la imagen de fondo de la columna.
Imagen de fondo
A continuación, agregaremos una superposición de imágenes como imagen de fondo del módulo.
- Tamaño de la imagen de fondo: Portada
- Posición de la imagen de fondo: centro
Configuración del texto del título
Cambiar a pestaña Diseño 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 fuente: Negrita
- Color del texto del título: #ffffff
- Tamaño del texto del título: 230 %
Configuración del texto del cuerpo
También cambie la configuración del texto del cuerpo.
- Fuente del cuerpo: Open Sans
- Color del texto: #ffffff
- Altura de la línea: 2,2 cm
Configuración de texto de puesto de miembro del equipo
A continuación, realice algunos cambios en la configuración de texto del puesto que ocupa el miembro del equipo.
- Fuente de posición: abierta sin
- Color de texto de posición: #edf000
espaciamiento
Y complete la configuración del módulo agregando valores de relleno personalizados a la configuración de espaciado.
- Relleno: 70% (Superior), 10% (Inferior, Izquierda y Derecha)
Clona el módulo "Persona" cuatro 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.
También asegúrese de cambiar el contenido.
Convierte una fila en un carrusel de desplazamiento automático
Ver también: Divi: cómo crear una cuadrícula de columna fluida al pasar el mouse
Cambiar tamaño de fila #2
Ahora, para convertir esta línea en un carrusel de desplazamiento automático, necesitaremos volver a abrir la configuración de línea 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 a 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 Avanzado bajo opción Efectos de desplazamiento ¡y tu estas listo!
- Habilitar movimiento horizontal: Sí
- Compensación inicial:
- Escritorio: 2,5
- Tableta y teléfono: 0
- Compensación media: 0 (a 40 %)
- Compensación final:
- Escritorio: -25 (al 62%)
- Tableta y teléfono: 0
- Disparador de efecto de movimiento: medio del elemento
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
Ordenador de oficina
¡¡¡Descarga DIVI ahora!!!
Vista móvil
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, le mostramos cómo ser creativo con los efectos de desplazamiento integrados de Divi.
Específicamente, recreamos un hermoso carrusel con miembros del equipo que se desplazan automáticamente. Cuando el visitantes Al desplazarse por la página, aparece otra parte del carrusel.
Esperamos que este tutorial te sirva de inspiración para tus próximos proyectos. Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
