Cómo agregar un efecto de desplazamiento a las biografías de los miembros del equipo en Divi

No es ningún secreto que about las páginas son excelentes para crear clics en su sitio web. También es ese tipo de página que enfatizará la parte humana de la empresa detrás del sitio web. Saber esto nos hace conscientes de que es importante que prestemos atención a la forma en que 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 Acerca de 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 biográfico a las fotos de los miembros del equipo utilizando 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 sus 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 según sus propias necesidades.

¡Hagámoslo!

Avance

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

Escritorio

Móvil

Empecemos a recrear

Suscríbete a nuestro canal de Youtube

Agregar nueva sección

Espaciado

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

• Relleno superior: 100 px
• Acolchado inferior: 100px

Agregar fila n. ° 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 solo una columna.

Agregar módulo de texto

Agregar contenido H2

Agregue un módulo de texto de título a la columna con alguna copia H2 de su elección.

Configuración de texto H2

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

• Fuente del encabezado 2: Cinzel
• Estilo de fuente del título 2: minúsculas
• Alineación del texto del encabezado 2: centro
• Tamaño del texto del encabezado 2: 70 px

Agregar módulo divisor

Visibilidad

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

• Mostrar divisor: Sí

Color del divisor

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

• Color del divisor: # 333333

Dimensionamiento

A continuación, reduciremos el tamaño del divisor y lo centraremos.

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

Agregar fila n. ° 2

Estructura de la columna

Justo debajo de la fila anterior que ha agregado, continúe y agregue una nueva fila con tres columnas del mismo tamaño.

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y realice algunos ajustes en la configuración de tamaño.

• Usar ancho personalizado: Sí
• Unidad: PX
• Ancho personalizado: 2000px
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

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

• Margen superior: 50px
• Margen inferior: 50 px
• Acolchado superior: 10px
• Acolchado inferior: 10px
• Relleno izquierdo: 5px
• Relleno derecho: 5px
• Columna 1, 2 y 3 Relleno izquierdo: 5px
• Columna 1, 2 y 3 Relleno derecho: 5px

Sombra de la caja

También le estamos dando a nuestra fila un poco de profundidad al agregarle una sombra de cuadro con la siguiente configuración:

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -14px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de imagen a la columna 1

Subir imagen al 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 mostrar. El módulo Blurb, por otro lado, se usará para agregar el ícono en la esquina inferior izquierda y la biografía al pasar el mouse. Agregue un módulo de imagen a la primera columna usando una imagen de tamaño cuadrado.

Filtros

El diseño que estamos creando es completamente en escala de grises. Para agregar esta escala de grises a nuestra imagen, vaya a la configuración de filtros y elimine toda la saturación.

• Saturación: 0%

Agregar módulo Blurb a la columna 1

Agregar contenido

Continúe agregando un nuevo módulo 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 más información sobre el miembro del equipo en el cuadro de contenido.

Elegir icono

Lo siguiente que haremos es elegir un ícono que les muestre a los visitantes que hay más que solo una imagen.

Color de fondo predeterminado

Luego, elegiremos un color de fondo transparente completo.

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

Colocar el cursor sobre el color de fondo

Y cambiaremos ese color al pasar el mouse.

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

Configuración de iconos predeterminada

Queremos un icono visible que ayude a los visitantes a comprender que pueden colocar el cursor sobre él. Cambie la configuración del icono para lograr un icono como ese.

• Color del icono: #ffffff
• Icono de círculo: Sí
• Color del círculo: # 000000
• Colocació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 ícono aparezca al pasar el mouse. Es por eso que usaremos 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 predeterminada del texto del título

A continuación, vaya a la configuración del texto del título y realice algunos cambios.

• Fuente del título: Cinzel
• Peso de la fuente del título: negrita
• Estilo de fuente del título: minúsculas
• Color del texto del título: # 000000
• Tamaño del texto del título: 0px

Configuración del texto del título flotante

Modifica el tamaño del texto al pasar el mouse.

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

Configuración predeterminada del texto del cuerpo

Modifique también la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Color del texto del cuerpo: # 000000
• Tamaño del texto del cuerpo: 0px
• Altura de la línea del cuerpo: 1.8em

Colocar el cursor sobre la configuración del texto del cuerpo

Y, nuevamente, cambie el tamaño del texto del cuerpo al pasar el mouse.

• 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)

Espaciado de desplazamiento

Cambie el margen personalizado y los valores de relleno al pasar el mouse.

• Margen superior: -11.38vw
• Acolchado superior: 20px
• Acolchado inferior: 20px
• Relleno derecho: 50px

Clonar ambos módulos dos veces y colocar duplicados en las columnas restantes

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

Cambiar imagen y contenido del módulo Blurb

¡Recuerda cambiar la imagen en el Módulo de imagen y la copia en el Módulo Blurb para terminar la sección de miembros del equipo!

Avance

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

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo crear un efecto de desplazamiento biográfico al desplazarse por las fotos de los miembros del equipo utilizando solo las opciones integradas de Divi. Hemos mencionado lo importante que es crear buenas páginas, ya que son uno de los sitios web de páginas más visitados. El uso de efectos de desplazamiento biográfico para las fotos de los miembros del equipo no solo le permitirá llevar su página de información al siguiente nivel, sino que también creará una 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!