Cómo crear una página de equipo flotante vibrante para su próximo proyecto Divi

Las páginas de equipo a menudo se subestiman. Antes de comprar un producto o contratar un servicio, muchos usuarios navegan hacia el equipo o sobre las páginas para tener una mejor idea de la empresa y las personas que la respaldan. Si la página de su equipo deja una primera impresión positiva, podría generar tasas de conversión más altas. Ahora, hay muchas formas de crear hermosas páginas de equipo con Divi, pero si estás buscando inspiración para tu próximo proyecto, te encantará esta publicación. Recrearemos una página vibrante del equipo flotante que activa las biografías de los miembros al pasar el mouse.

¡Hagámoslo!

Avance

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

Escritorio

Móvil

Suscríbete a nuestro canal de Youtube

1. Comience con una sección normal + una fila de una columna para el título

Abra una página nueva y establezca los atributos de la página en "página en blanco". Una vez que haya hecho eso, ingrese al Divi Builder y agregue una sección con una fila de una columna.

Agrega un módulo de texto y divisor.

2. Agregue contenido al módulo de texto y modifíquelo

Agregue algo de contenido H1 al módulo de texto.

Vaya a la pestaña de diseño y aplique el estilo de la configuración de texto H1 en consecuencia:

• Fuente de encabezado: Poppins
• Peso de la fuente del encabezado: Ligero
• Alineación del texto del encabezado: centro
• Color del texto del encabezado: Negro # 000000
• Tamaño del texto del encabezado:
  • Escritorio = 6vw
  • Tableta = 9vw
  • Teléfono = 11vw
• Espaciado de letras de encabezado: -0.4vw

3. Estilo del divisor

Pasemos al siguiente módulo, que es el módulo divisor. Cambie el color del divisor a negro y modifique la configuración de tamaño.

• Color del divisor: negro #oooooo
• Peso del divisor: 12px
• Ancho: 14%
• Alineación del módulo: centro

4. Cree biografías de equipo utilizando una sección normal + una fila de tres columnas

Ahora que hemos completado la sección del título, estamos listos para comenzar a construir las biografías del equipo. Comience agregando una nueva sección regular con una fila de tres columnas.

5. Ajustar la configuración del tamaño de las filas

Permita que la fila ocupe todo el ancho del contenedor de la sección modificando la configuración de tamaño.

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%

6. Ajustar la configuración de espaciado de filas

Agregue un poco de acolchado superior e inferior personalizado también.

• Acolchado superior: 2vw
• Acolchado inferior: 2vw

7. Agregue un módulo de imagen y propaganda a la columna uno

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 modifíquela

La página de tu equipo flotante se trata de mostrar 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 de archivo Divi. Asegúrese de que las dimensiones de su imagen sean 612px X 612px.

Alineación

Pase a la pestaña de diseño y cambie la alineación de la imagen.

• Alineación de la imagen: centro

Dimensionamiento

Modifique también la configuración de tamaño.

• Ancho: 30%
• Alineación del módulo: centro

Espaciado

Y agregue un margen superior negativo.

• Margen:
  • Escritorio = -3vw
  • Tableta y teléfono = -13vw

Frontera

Para convertir la imagen en un círculo, cambiaremos la configuración del borde.

• Esquinas redondeadas: 20vw las cuatro esquinas
• Estilos de borde: los cuatro lados
• Ancho del borde: 12px
• Color del borde: blanco #ffffff
• Estilo de borde: Doble

Sombra de la caja

También estamos agregando algo de profundidad a la imagen aplicando una sombra de cuadro sutil.

• Box Shadow: la primera opción
• Fuerza de desenfoque de sombra de caja: 50px

Índice Z

En uno de los pasos anteriores, agregamos un margen superior negativo. Para asegurarnos de que la imagen permanezca en la parte superior de la columna, incluso cuando la exceda, aumentaremos el índice z en la configuración de visibilidad.

• Índice Z: 3

9. Agregue contenido a Blurb & Style It

Agregar CSS personalizado a la configuración de la página

Antes de hacer cualquier otra cosa, agregaremos algo de CSS personalizado para deshacernos del margen inferior predeterminado del ícono 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
{
margin-bottom: 0px;
}

Dale a Blurb una clase CSS

Abra el módulo de propaganda a continuación y agregue la clase CSS correspondiente.

• Clase CSS: blurb-icon

Agregar contenido

Usaremos texto de marcador de posición, pero puede insertar el nombre real y la descripción de un miembro del equipo.

Elegir icono

Elija un icono más a continuación.

• Usar icono: Sí
• Icono: Signo más dentro de un círculo

Fondo de estilo

Pase a la configuración de fondo, agregue un color de fondo blanco predeterminado y un fondo degradado al pasar el mouse.

• Fondo: Blanco #ffffff
• Fondo flotante: degradado
• Gradiente de color uno: # 00ffa1
• Gradiente de color dos: # 29c4a9
• Tipo de degradado: lineal
• Dirección del gradiente: 154 grados
• Posición inicial: 0
• Posición final: 46%

Icono de estilo

A continuación, aplique la siguiente configuración de iconos:

• Color del icono:
  • Predeterminado: # 29c4a9
  • Hover: Rgba transparente (255,255,255,0)
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono:
  • Escritorio = 2vw
  • Tableta = 4vw
  • Teléfono = 6vw

Alineación

Continúe con la configuración del texto y cambie la alineación del texto.

• Alineación de texto: centro

Estilo de texto de encabezado

Luego, abra la configuración del texto del encabezado y realice algunos cambios en diferentes tamaños de pantalla.

• Título: H4
• Fuente del título: Poppins
• Fuente del título: Negrita
• Color del texto del título: blanco #ffffff
• Tamaño del texto del título:
  • Escritorio: 1.5vw
  • Tableta: 2.5vw
  • Teléfono: 3.5vw

Texto del cuerpo del estilo

Haga lo mismo con la configuración del texto del cuerpo.

• Color del texto del cuerpo: blanco #ffffff
• Tamaño del texto del cuerpo:
  • Escritorio = 0.8vw
  • Tableta = 1.9vw
  • Teléfono = 2.6vw
• Altura de la línea del cuerpo:
  • Escritorio = 2vw
  • Tableta + Teléfono = 3vw

Dimensionamiento

A continuación, vamos a cambiar la configuración de tamaño de nuestro módulo de propaganda.

• Ancho del contenido: 100%
• Ancho: 81%
• Alineación del módulo: centro

Espaciado

También aplicaremos algunos valores de margen y relleno personalizados en diferentes tamaños de pantalla.

• Margen superior:
  • Escritorio = -4vw
  • Tableta + Teléfono = -9vw
• Margen inferior:
  • Escritorio = 3.5vw
  • Tableta + Teléfono = 10vw
• Acolchado superior e inferior:
  • Escritorio = 7.1vw
  • Tableta = 30vw
  • Teléfono = 28vw
• Acolchado izquierdo y derecho
  • Escritorio = 2vw
  • Tableta + Teléfono = 8vw

Frontera

Convierta el módulo de propaganda en un círculo agregando un radio de borde.

• Esquinas redondeadas: 50vw las cuatro esquinas

Sombra de la caja

Y complete el diseño del módulo de propaganda agregando una sombra de cuadro que aparece al pasar el mouse.

• Sombra de caja: quinto estilo
• Posición horizontal de la sombra del cuadro: 0vw
• Posición vertical de la sombra del cuadro:
  • Escritorio + Hover = -14vw
  • Tableta = -44vw
  • Teléfono = -46vw
• Fuerza de propagación de la sombra de caja:
  • Escritorio + Hover = -6vw
  • Tableta + Teléfono = -19vw
• Color de la sombra de la caja:
  • Hover = rgba (0,0,0,0,05)

10. Estilo de la columna uno

Ahora que hemos agregado todos los módulos que necesitamos a la columna uno, es hora de diseñar la columna.

Fondo

Abra la configuración de fondo de la columna uno y aplique el siguiente fondo degradado:

• Estilo de fondo: degradado
• Gradiente de color uno: # 00ffa1
• Gradiente de color dos: # 29c4a9
• Tipo de degradado: Liner
• Dirección del gradiente: 282 grados

Frontera

Pase a la pestaña de diseño y convierta la columna en un círculo agregando un radio de borde.

• Esquinas redondeadas: 50vw

Desbordamiento

Para asegurarnos de que la imagen aparezca sobre la columna, cambiaremos los desbordamientos horizontal y vertical en la configuración de visibilidad.

• Desbordamiento horizontal y vertical: visible

11. Eliminar columnas vacías y duplicar la primera columna dos veces

Hemos completado la primera columna y todos los módulos que contiene. Para ahorrarnos algo de tiempo, eliminaremos las columnas vacías y clonaremos la primera columna dos veces.

Eliminar las columnas dos y tres

Regrese a la configuración de la fila principal y haga clic en el icono de la papelera para las columnas dos y tres.

Columna duplicada uno dos veces

Una vez que haya eliminado las columnas dos y tres, la columna uno se verá extraña por un segundo, pero todo cambiará tan pronto como clone la columna dos veces.

12. Cambiar el contenido y los colores de la columna dos

Ahora es el momento de diseñar las nuevas columnas para los otros dos miembros del equipo.

Columna dos

Abra la configuración de la segunda columna y cambie el fondo degradado

• Color de degradado de fondo uno: # 00eeff
• Color de degradado de fondo dos: # 309ce5

Sube también una imagen diferente.

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

• Colocar el cursor sobre el color de fondo uno: # 00eeff
• Colocar el cursor sobre el color de fondo dos: # 309ce5

Cambie también el color del icono.

• Color de icono predeterminado: # 309ce5

Columna tres

Abra la configuración de la tercera columna y cambie el fondo degradado.

• Color de degradado de fondo uno: # ff91ec
• Color de degradado de fondo dos: # a500ff

A continuación, cambie el fondo degradado de la propaganda.

• Colocar el cursor sobre el color de fondo uno: # ff91ec
• Colocar el cursor sobre el color de fondo dos: # a500ff

Junto con el color del icono.

• Color de icono predeterminado: # a500ff

Avance

Ahora que hemos seguido los diferentes pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

¡Es una envoltura!

En esta publicación, le mostramos cómo crear una página de equipo flotante vibrante con opciones coloridas. No dude en utilizar este diseño en su próximo proyecto Divi. Pruébelo para una página de equipo o un directorio de colaboradores. Háganos saber si tiene alguna idea en los comentarios.