Al crear su página Acerca de, probablemente también querrá presentar allí a los miembros de su equipo. Al hacerlo, permite que el visitantes interactuar con las personas detrás de su negocio. Si está buscando una manera de animar la sección de los miembros de su equipo en el desplazamiento, este tutorial puede resultarle útil. Vamos a crear un carrusel de miembros del equipo de desplazamiento automático que se mueve cuando su visitantes desplazarse por la página.
Demostración
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.
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)
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
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:
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
espaciamiento
También agregamos relleno superior e inferior personalizados.
- Relleno superior: 100px
- Relleno inferior: 100px
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. Ingresarlo contenido H2 de tu elección.
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)
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.
- Mostrar separador: sí
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
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
Agregar una línea # 2
Estructura de la columna
¡A la siguiente fila! Utilice la siguiente estructura de columnas:
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%
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)
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.
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í
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 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;
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 De tu elección
Eliminar Imagen
Luego borra la imagen. En su lugar, usamos la imagen de fondo de la columna.
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 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%
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
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
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%
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úrese de cambiar también el contenido.
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)
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
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
oficina
Consideraciones finales
En este tutorial, le mostramos cómo ser creativo con los efectos de desplazamiento integrados de Divi. Específicamente, recreamos un hermoso carrusel de miembros del equipo con desplazamiento automático. Cuando el visitantes Al desplazarse por la página, aparece otra parte del carrusel.
