Cómo crear una página de equipo con Hover Vibrant para su próximo Div

Las páginas del equipo a menudo se subestiman. Antes de comprar un producto o contratar un servicio, muchos usuarios navegan al equipo o páginas para tener una mejor idea sobre la empresa y las personas detrás de él. Si la página de su equipo deja una primera impresión positiva, podría conducir a tasas de conversión más altas. Ahora, hay muchas maneras de crear hermosas páginas de equipo con Div, pero si está buscando una inspiración para su próximo proyecto, le gustará esta publicación. Recrearemos una página vibrante del equipo Hover que desencadena a los miembros de los miembros de Hover.
¡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

Suscríbase a nuestro canal de YouTube 1. Comience con una sección regular + fila con una columna de título abra una nueva página y configure los atributos de la página en “página vacía”. Después de haber hecho esto, ingrese al constructor Divin y agregue una sección con una fila con una columna.

Agregue una división y módulo de texto.

2. Agregue el contenido al módulo de texto y estilice el contenido H1 al módulo de texto.

Cambie a la pestaña de diseño y estilice la configuración de texto H1 en consecuencia:
Fuente del título: Poppins
Título Fuente de peso: Luz
Alineación del texto del encabezado: Centro
Encabezado de texto en color: negro # 000000
Encabezado de texto de tamaño:
Escritorio = 6VW
Tableta = 9VW
Teléfono = 11VW
Distancia entre letras: -0.4VW

3. Stile el interruptor divisor al siguiente módulo, que es el módulo divisor. Cambie el color del divisor en negro y cambie la configuración de tamaño.
Color divisor: negro #oooooo
Peso del divisor: 12 pxllătime: 14%
Alineación del módulo: centro
4. Cree las biografías para el equipo utilizando una sección regular + la fila de tres columnas ahora, después de haber completado la sección de título, estamos listos para comenzar a construir las biografías del equipo. Comience agregando una nueva sección habitual con tres columnas.

5. Ajuste la configuración para las filas de dimensionamiento permitiendo que la fila ocupe todo el ancho del contenedor de sección cambiando la configuración de tamaño.


Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
6. Ajuste la configuración del espacio establecido y agregue un relleno personalizado, superior e inferior.

Revestimiento superior: 2VW
Revestimiento inferior: 2VW
7. Agregue un módulo de imagen y propaganda a la columna Los dos módulos principales que usaremos para crear el efecto final son una imagen y un módulo de propaganda. Primero, agregue el módulo de imagen y luego la propaganda.

8. Cargue una imagen y estilice la página de su equipo de Hover se refiere a los miembros del equipo. Abra el módulo de imagen y agregue una foto de uno de ellos. Usaremos una de nuestras imágenes. Asegúrese de que el tamaño de su imagen sea 612 PX x 612 PX.

Alineación Vaya a la pestaña Diseño y cambie la alineación de la imagen.

Alineación de imágenes: centro
Dimensión Modifique la configuración de tamaño.

Ancho: 30%
Alineación del módulo: centro
Espaciado y agregue un margen superior negativo.

Marja:
Escritorio = -3VW
Tableta y teléfono = -13VW
Borde para convertir la imagen en círculo, cambiaremos la configuración del borde.

Esquinas redondeadas: 20 VW las cuatro esquinas
Estilos de borde: los cuatro del lado del borde: 12 PX
Color del borde: blanco #ffffff
Estilo de borde: doble
Box Shadow también agregue una cierta profundidad a la imagen aplicando una sombra de caja sutil.
Box Shadow: Primera opción

Poder de poco claro de la sombra de la caja: 50 px
El índice Z En uno de los pasos anteriores, agregué un margen superior negativo. Para garantizar que la imagen permanezca por encima de la columna, incluso cuando vaya más allá, aumentaremos el índice Z en la configuración de visibilidad.
IND ÍNDICE: 3

9. Agregue contenido a Blurb & Style, agregue CSS personalizado a la configuración de la página antes de hacer cualquier otra cosa, agregaremos algunos CSS personalizados para deshacerse del borde predeterminado del icono dentro de la propaganda. Agregue las siguientes líneas de código CSS a la configuración de la página:
.blurb-icon .et_pb_main_blurb_image

{
Botón de margen: 0px;
}
Dale a la clase una clase CSS para abrir el módulo de la propaganda y agregar la clase CSS correcta.
Clase CSS: ícono de la propaganda

Agregue contenido. Usaremos el texto sustituyente, pero puede insertar el nombre real y la descripción de un miembro del equipo.
Elija el icono Elija un icono adicional.

Usa el icono: si

Icono: firmar más dentro de un círculo
El fondo del estilo va a la configuración de fondo, agregue un color de fondo predeterminado blanco y un fondo de jardín del cursor.
Fondo: blanco #ffffff

Coloque el cursor en segundo plano: gradiente
Color de gradiente One: # 00ffa1
Color Dos gradiente: # 29C4A9
Tipo de gradiente: lineal
Dirección de gradiente: 154 grados
Posición inicial: 0
Posición final: 46%
Icono de estilo Aplicar la siguiente configuración de icono a continuación:
Icono de color:


Valor predeterminado: # 29C4A9 Coloque el cursor: RGBA Transparent (255,255,255.0)
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente:
Escritorio = 2VW
Tableta = 4VW
Teléfono = 6VW
Cambio de alineación a la configuración del texto y cambie la alineación del texto.
Alineación de texto: Centro
El texto del encabezado de estilo luego, abra la configuración del texto del encabezado y realice algunos cambios en diferentes tamaños de pantalla.

Antetitlu: H4
Título de la fuente: Poppins

Fuente del título: Bold
Color de texto del título: blanco #ffffff
Título del texto Tamaño:
Escritorio: 1.5VW
Tableta: 2.5VW
Teléfono: 3.5VW
El texto del estilo del estilo hace lo mismo para la configuración para el texto del cuerpo.
Color of Body Text: White #ffffff
El tamaño del texto del cuerpo:

Escritorio = 0.8VW
Tableta = 1.9VW
Teléfono = 2.6VW
La altura de la línea del cuerpo:
Escritorio = 2VW
Tableta + teléfono = 3VW
Dimensión a continuación, cambiaremos la configuración de tamaño de nuestro módulo de propaganda.
Ancho de contenido: 100%
Ancho: 81%

Alineación del módulo: centro
Espacio aplicaremos algunos valores de margen y llenado personalizados y en diferentes tamaños de pantalla.
Margen superior:
Escritorio = -4VW

Tableta + teléfono = -9VW
Margen inferior:
Escritorio = 3.5VW
Tableta + teléfono = 10VW
Revestimiento superior e inferior:
Escritorio = 7.1VW
Tableta = 30VW
Teléfono = 28VW
Forro izquierdo y derecho
Escritorio = 2VW
Tableta + teléfono = 8VW
El borde convierte el módulo de la propaganda en un círculo agregando un rayo de borde.
Esquinas redondeadas: 50VW las cuatro esquinas
Box Sombra y complete el diseño del módulo de la propaganda agregando un cuadro que aparece en el flotador.

Box Shadow: quinto estilo
Posición horizontal de la sombra de la caja: 0VW

Posición vertical de las sombras de la caja: escritorio + hover = -14VW
Tableta = -44VW
Teléfono = -46VW
El poder de extender la sombra de la caja:
Escritorio + hover = -6vw
Tableta + teléfono = -19VW
Box de color de sombra:
Hover = RGBA (0.0,0,055)
10. Estilo de columna Uno ahora, después de haber agregado todos los módulos, debemos columna uno, es hora de atacar la columna.
ANTERGUOS ABRIBA LA CONFIGURACIÓN DE SEGURIDAD PARA LA COLUMNA 1 y aplique el siguiente fondo de gradiente:
Estilo de fondo: gradiente
Color de gradiente One: # 00ffa1

Color Dos gradiente: # 29C4A9
Tipo de gradiente: revestimiento
Dirección de gradiente: 282 grados
El borde vaya a la pestaña de diseño y convierta la columna en un círculo agregando un rayo de borde.
Esquinas redondeadas: 50VW
Superando para garantizar que la imagen aparezca sobre la columna, cambiaremos las descargas horizontales y verticales de la configuración de visibilidad.
Superación horizontal y vertical: Visible

11. Elimine las columnas vacías y copie la primera columna dos veces que completamos la primera columna y todos los módulos en ella. Para ahorrarnos un tiempo, eliminaremos las columnas vacías y clonaremos la primera columna dos veces. Limpie las columnas dos y tres regresan a la configuración de la fila principal y haga clic en el icono del contenedor de basura para dos y tres columnas.
Duplicate la columna dos veces después de que haya limpiado las columnas dos y tres, la columna parecerá extraña por un segundo, pero todos los cambios tan pronto como clone la columna dos veces.

12. Cambie el contenido y los colores de la columna dos ahora es el momento de crear el estilo de las nuevas columnas para los otros dos miembros del equipo. Columna dos Abra la configuración de la segunda columna y cambie el fondo de gradiente
El color del jardín del fondo uno: # 00EFF

Color de dos gradientes de fondo: # 309CE5Care y otra imagen.

Continúe abriendo el módulo de propaganda y cambiando el fondo de gradiente.

Coloque el cursor en el color de fondo: # 00eff
Coloque el cursor en el color de fondo dos: # 309CE5
Cambia el color del icono.

Color de icono predeterminado: # 309CE5

La tercera columna abre la configuración de la tercera columna y modifica el fondo de gradiente.
El color del jardín del fondo uno: # FF91EC
Color de gradiente de fondo Two: # A500FF

Luego cambie el fondo del gradiente de la propaganda.
Coloque el cursor en el fondo de un color: # FF91EC

Coloque el cursor en el color de fondo dos: # A500FF
Junto con el color del icono.
Color de icono predeterminado: # A500FF

Vista previa ahora, que hemos dado los diferentes pasos, para echar un vistazo final al resultado en diferentes dimensiones de pantalla. Escritorio
Móvil
¡Es una lámina! En esta publicación, le mostré cómo crear una página vibrante del equipo de desplazamiento con coloridas opciones de desplazamiento. Siéntase libre de usar este diseño en su próximo proyecto Div. Intente una página de equipo o un directorio de colaboradores. Cuéntanos si tienes pensamientos en los comentarios.