No es ningún secreto que las páginas "Acerca de nosotros" son muy buenas para atraer clics a su sitio web. También es este tipo de página la que enfatizará la parte humana del negocio detrás de la Sitio web. Sabiendo esto, nos damos cuenta de que es importante prestar atención a cómo estructuramos las páginas, qué tipo de información compartimos y cómo creamos interacciones.

Una de las cosas que puede hacer para mejorar la experiencia de la página es proporcionar una sección de miembros del equipo que ponga a sus empleados en el centro de atención. Además de eso, puede agregar un efecto de desplazamiento biológico a las fotos de los miembros del equipo usando solo las opciones integradas de Divi.

Esto le permitirá ahorrar espacio en la página en la que está trabajando y crear una interacción flotante entre usted y su visitantes.

En este tutorial, le mostraremos paso a paso cómo llegar allí. Una vez que obtenga el enfoque, podrá personalizar el estilo de diseño para satisfacer sus propias necesidades.

¡Vamos!

vista

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

oficina

Móvil

Comencemos a recrear

Añadir una nueva sección

espaciamiento

Cree una nueva página o abra una existente y agregue una nueva sección usando los siguientes valores de relleno personalizados:

• Mejor relleno: 100px
• Relleno inferior: 100px

Agregar fila 1

Estructura de la columna

Una vez que haya terminado de agregar el relleno personalizado a su sección, puede cerrar la configuración de la sección y agregar una nueva fila usando una sola columna.

Añadir un módulo de texto.

Añadir contenido H2

Agregue un título de Módulo de texto a la columna con un tamaño H2 de elección.

Configuraciones de texto H2

Luego vaya a la configuración de texto H2 y realice algunos cambios en el aspecto de la copia.

• Título 2 Fuente: Cinzel
• Título 2 Font Style: Small Caps
• Título 2 Alineación de texto: centro
• Título 2 Tamaño del texto: 70px

Añadir un módulo de división

visibilidad

Continúe agregando un nuevo módulo de separación justo debajo del título del Módulo de texto.

• Mostrar divisor: si

Color del separador

Vaya a la pestaña Diseño, abra la configuración de color y cambie el color del divisor en consecuencia:

• Color del separador: # 333333

apresto

Luego reduciremos el tamaño del divisor y lo centraremos.

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

Añade la línea 2

Estructura de la columna

Justo debajo de la línea anterior que agregó, continúe y agregue una nueva fila utilizando tres columnas de igual tamaño.

apresto

Sin agregar más módulos, abra los parámetros de línea y realice algunos cambios en los parámetros de tamaño.

• Use un ancho personalizado: Sí
• Unidad: PX
• Ancho personalizado: 2000px
• Use un ancho de canal personalizado: Sí
• Ancho de canal: 1
• Ecualizar alturas de columna: Sí

espaciamiento

Luego, vaya a la configuración de espaciado y agregue valores de margen y relleno personalizados.

• Margen superior: 50px
• Margen inferior: 50px
• Relleno superior: 10px
• Relleno inferior: 10px
• Relleno izquierdo: 5px
• Derecho de tapicería: 5px
• Columna 1, 2 y 3 Relleno a la izquierda: 5px
• Columna 1, 2 y 3 Relleno a la derecha: 5px

Caja de sombra

También le damos un poco de profundidad a nuestra línea agregando una sombra de cuadro con los siguientes parámetros:

• Box Shadow Blur Force: 80px
• Fuerza de propagación de la sombra de la caja: -14px
• Color de sombra: rgba (0,0,0,0,3)

Agregar un módulo de imagen a la columna 1

Cargue una imagen en un módulo de imagen

¡Es hora de comenzar a agregar módulos! Para lograr el efecto de desplazamiento biológico, necesitaremos dos módulos en total. un módulo de imagen y un módulo de propaganda. El módulo de Imagen contendrá la imagen del miembro del equipo que desea presentar.

Mientras tanto, el mod de Blurb se usará para agregar el ícono en la esquina inferior izquierda y la biografía flotante. Agregue un módulo de imagen a la primera columna usando una imagen de tamaño cuadrado.

filtros

El diseño que creamos está íntegramente en escala de grises. Para agregar este tono de gris a nuestra imagen, vaya a la configuración de filtros y elimine toda la saturación.

• Saturación: 0%

Agregue el módulo Blurb a la columna 1

Agregar contenido

Continúe agregando un nuevo módulo de Blurb justo debajo del módulo de imagen en la columna 1. Agregue el nombre del miembro del equipo al campo de título e ingrese información adicional sobre el miembro del equipo en el cuadro. contenido.

Elige un ícono

Lo siguiente que haremos es elegir un icono de elección que mostrará visitantes que hay algo más que una foto.

Color de fondo predeterminado

A continuación, elegiremos un color de fondo completamente transparente.

• Color de fondo: rgba (255,255,255,0)

Color de fondo en el paso elevado

Y vamos a cambiar este color flotando.

• Color de fondo: rgba (255,255,255,0.88)

Configuración de icono predeterminada

Queremos un icono visible que ayude visitantes para entender que pueden volar sobre él. Cambie la configuración del ícono para obtener dicho ícono.

• Color del icono: #ffffff
• Icono de círculo: sí
• Color del círculo: # 000000
• Ubicación del icono: izquierda
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 50px

Configuración del icono de desplazamiento

Sin embargo, no queremos que el icono aparezca al pasar el mouse. Es por eso que usamos un color completamente transparente en su lugar.

• Color del icono: rgba (255,255,255,0)
• Color del círculo: rgba (255,255,255,0)

Configuración de título predeterminada

Luego vaya a la configuración de texto del título y realice algunos cambios.

• Título de Policía: Cinzel
• Título de la fuente: Bold
• Título Tipo de letra: Tapas pequeñas
• Título del texto en color: # 000000
• Tamaño del título del texto: 0px

Desplácese sobre la configuración de texto del título

Cambia el tamaño del texto al pasar el ratón.

• Tamaño del título del texto: 30px

Configuración predeterminada del texto del cuerpo

También cambie la configuración del texto del cuerpo.

• Cuerpo de policia: Open Sans
• Texto del color del cuerpo: # 000000
• Tamaño del texto del cuerpo: 0px
• Altura del cuerpo: 1.8em

Parámetro del cuerpo en sobrevuelo

Y, de nuevo, cambia el tamaño del cuerpo del texto flotando.

• Tamaño del texto del cuerpo: 14px

Espaciado predeterminado

Por último, pero no menos importante, necesitaremos crear una superposición entre el módulo Blurb y el módulo de imagen utilizando un margen superior negativo.

• Margen superior: -3.7vw (escritorio), -9vw (tableta y teléfono)
• Margen inferior: 1.5vw (tableta), 2vw (teléfono)

Espaciamiento estacionario

Cambie el margen personalizado y los valores de relleno en rollover.

• Margen superior: -11,38vw
• Relleno superior: 20px
• Relleno inferior: 20px
• Derecho de tapicería: 50px

Clone los dos módulos dos veces y coloque los duplicados en las columnas restantes.

Hemos terminado de crear nuestro primer efecto de desplazamiento biológico. Para ahorrar tiempo, simplemente podemos clonar los dos módulos en la columna 1 dos veces y colocar los duplicados en las dos columnas restantes.

Edita la imagen y el contenido del módulo Blurb

¡No olvide cambiar la imagen en el módulo Imagen y copiarla en el módulo Blurb para completar la sección de miembros del equipo!

vista

Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se veía en diferentes tamaños de pantalla.

oficina

Móvil

Consideraciones finales

En este artículo, le mostramos cómo crear un efecto de desplazamiento biológico para las fotos de los miembros del equipo utilizando solo las opciones integradas de Divi. Hemos enfatizado lo importante que es crear buenas páginas porque son uno de los sitios web más visitados.

El uso de efectos de desplazamiento biográfico para las fotos de los miembros del equipo no solo mejorará la calidad de su página, sino que también creará interacción con sus visitantes. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!