Descargue un carrusel gratuito para los miembros del equipo de defensa personal, hecha con los efectos del desfile de Div.

Cuando configure su página de información, lo más probable es que desee presentar a los miembros de su equipo allí. Al hacerlo, permite que los visitantes se conecten con las personas detrás de su empresa. Si está buscando una forma de animar la sección de los miembros de su equipo, le gustará este tutorial. Recrearemos un hermoso carrusel miembro del equipo que se mueve automáticamente, moviéndose a medida que sus visitantes ejecutan la página hacia abajo. ¡Podrá descargar el archivo JSON de forma gratuita! 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.
Escritorio

Móvil

Descargue el esquema de Carousel para los miembros del equipo gratuito para poner su mano en el look de carrusel del equipo gratuito, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue una nueva sección de espaciado, comience agregando una nueva sección habitual a la página en la que está trabajando. Abra la configuración de la sección y agregue algunos rellenos personalizados en diferentes tamaños de pantalla.
Revelaje superior: 200 PX (escritorio), 100 PX (tableta y teléfono)
Bajo forro: 200 PX (escritorio), 100 PX (tableta y teléfono)
Operaciones Para garantizar que no aparezca una barra de desplazamiento horizontal en nuestro diseño, ocultaremos las secciones de efusión en la pestaña avanzada.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de línea, cambie a la pestaña de diseño y cambie el ancho y el ancho máximos en la configuración del tamaño.

Ancho: 90%
Ancho máximo: 1580 PX
Espacio agregamos un forro personalizado desde arriba y abajo.

Revestimiento superior: 100 px
Finamiento inferior: 100 PX
Agregue un módulo de texto a la columna Agregar el contenido de H2 es hora de agregar módulos, comenzando con un primer módulo de texto. Ingrese un contenido H2 de su elección. Conjuntos de texto H2 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H2 de la siguiente manera:

Fuente del título 2: arena actual

Título 2 Fuente de peso: semi audac
Rúbrica 2 Color de texto: # 000000
Título 2 Dimensión de texto: 70 PX (escritorio), 50 PX (tableta), 40 PX (teléfono)
Agregue el módulo divisor a la visibilidad de la columna y luego, agregue un módulo divisor. Asegúrese de que se active la opción “Muestra el divisor”.
Divisor del espectáculo: si

La línea luego realiza 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: arriba
Dimensión y complete la configuración del módulo cambiando la configuración de tamaño en consecuencia:
Peso del divisor: 20 PX

Ancho: 11%
Alineación del módulo: izquierda
Altura: 20 PX
Agregue la estructura de la fila # 2 de la columna, ¡pasamos la siguiente fila! Use la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2
Ancho: 100%
Ancho máximo: 100%
Espacio y luego, agregue algunos rellenos a la izquierda y a la derecha solo en un tamaño más pequeño de la pantalla.
ENLIZACIÓN IZQUIERDA: 5% (solo tableta y teléfono)


Revelaje derecho: 5% (solo tableta y teléfono)
Configuración de columna (5x) Ahora, en los siguientes tres pasos de este tutorial, haremos algunos cambios en las columnas. Aplique los tres pasos a cada una de las columnas en su turno.
Fondo de gradiente primero, agregue un fondo de gradiente a cada columna.

Color 1: RGBA (255,255,255,0) Color 2: RGBA (0.0,0,84)

Tipo de gradiente: lineal
Posición inicial: 25%
Posición final: 86%
Coloque el gradiente 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

El elemento principal completa la configuración de la columna agregando algunos CSS personalizados al elemento principal de la tableta en cada columna. Estas líneas de código CSS nos ayudarán a colocar las columnas debajo de la otra en la tableta, en lugar de tener dos lado a lado. Ancho: 100%! Importante;
Margen: 50px 0px 50px 0px! Importante;
Agregue el módulo de persona a la columna Agregar contenido para compartir información sobre los miembros del equipo, utilizaremos un módulo de persona. Agregue el módulo de primera persona a la columna 1 y use un contenido de su elección.

Retire la imagen y luego, elimine la imagen. En cambio, usamos la imagen de fondo de la columna.
La imagen de fondo agregará una superposición de la imagen como imagen de fondo del módulo. Puede encontrar el que usamos 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 texto de título Vaya a la pestaña Diseño del módulo y modifique la configuración del texto del título de la siguiente manera:
Nivel de encabezado del título: H3
Fuente del título: Movimiento de arena

Título Fuente de peso: Bold
Color de texto del título: #ffffff
Título del texto Tamaño: 230%
Configuración de texto de CORP modificada y configuración para el texto del cuerpo.
Font Corp: Open Sans
El color del texto del cuerpo: #ffffffînțelea de la línea del cuerpo: 2.2em

Posición de la configuración del texto y luego realice algunos cambios en la configuración de texto de posición.
Posición de fuente: abre sans
Color de texto de posición: # EDF000
Espacio y complete la configuración del módulo agregando algunos valores de llenado personalizados a la configuración de espaciado.

Revestimiento superior: 70%
Finamiento inferior: 10%
ENLIZACIÓN IZQUIERDA: 10%

Revelaje derecho: 10%
El clon de la persona 4X Después de haber completado el módulo de persona, puede clonar todo el módulo cuatro veces.
Coloque los duplicados en las columnas restantes, coloque los módulos duplicados en las cuatro columnas restantes. Asegúrese de cambiar el contenido.
Convierta la fila en carrusel de autoselicia, cambie el tamaño de la fila 2 ahora, para convertir esta fila en un carrusel del equipo de autoselicidad, tendremos que reabrir la configuración de la fila y cambiar el ancho y el ancho máximos en la configuración de dimensionamiento.
Ancho: 180%

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

Agregue el movimiento horizontal de la fila 2 rellene la configuración de la fila agregando un movimiento horizontal a la configuración del efecto de desplazamiento en la pestaña avanzada y ¡está listo!

Active el movimiento horizontal: sí
Comenzando el desplazamiento:
Escritorio: 2.5

Tableta y teléfono: 0
GAPACIÓN PROMEDIA: 0 (al 40%)
Compensación final:
Desktop: -25 (al 62%)
Tableta y teléfono: 0
El desencadenante del efecto de movimiento: el medio del elemento
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil