Cómo agregar iconos sociales flotantes a las imágenes de los miembros del equipo con Divi

Al crear su página de información, podría considerar agregar a los diferentes miembros del equipo de su empresa en una presentación. Al iniciar ese proceso de diseño, notará que no pueden faltar tres cosas: una imagen, un nombre y una posición. Pero si desea resaltar aún más a los miembros de su equipo, puede considerar agregar sus enlaces de redes sociales al diseño también. Por supuesto, puede hacerlo a la antigua y agregar un módulo de seguimiento de redes sociales debajo del nombre y la posición de la persona. Sin embargo, también puede optar por agregar un poco de interacción activando los íconos sociales tan pronto como alguien coloque una de las imágenes de la persona. En el tutorial de hoy, le mostraremos exactamente cómo hacerlo usando Divi. ¡También podrá descargar el archivo JSON de forma gratuita!

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

Descarga The Layout GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

¡Empecemos a recrear!

Agregar la sección n. ° 1

Color de fondo

Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # 0f0f0f

Espaciado

Vaya a la pestaña de diseño de la sección y cambie la configuración de espaciado a continuación.

• Acolchado superior
  • Escritorio y tableta: 100 px
  • Teléfono: 50px
• Acolchado inferior:
  • Escritorio y tableta: 100 px
  • Teléfono: 50px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Agregar el módulo de texto n. ° 1 a la columna

Agregar contenido H1

Agregue un primer módulo de texto a la columna de la fila con algún contenido H1 de su elección.

Configuración de texto H1

Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H1 en consecuencia:

• Fuente de encabezado: Alata
• Color del texto del encabezado: #ffffff
• Tamaño del texto del encabezado:
  • Escritorio: 50px
  • Tableta: 45px
  • Teléfono: 35px
• Altura de la línea de rumbo: 1.2em

Agregar módulo divisor a la columna

Visibilidad

A continuación, agregaremos un módulo divisor. Asegúrese de que la opción "Mostrar divisor" esté habilitada.

• Mostrar divisor: Sí

Línea

Vaya a la pestaña de diseño del módulo y cambie el color de la línea.

• Color de línea: #ffffff

Dimensionamiento

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

• Peso del divisor: 2px
• Ancho máximo: 100px
• Alto: 2px

Agregar el módulo de texto n. ° 2 a la columna

Agregar contenido de descripción

El siguiente y último módulo que necesitamos en esta fila es otro módulo de texto con algún contenido descriptivo de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Fuente de texto: Alata
• Color del texto: # 7c7c7c
• Tamaño del texto: 17px
• Altura de la línea de texto: 1.9em

Espaciado

Elimine también el margen inferior predeterminado.

• Margen inferior: 0px

Agregar sección n. ° 2

Fondo degradado

Agregue otra sección justo debajo de la anterior y use un fondo degradado para ella.

• Color 1: # 0f0f0f
• Color 2: # 000000
• Posición inicial: 10%
• Posición final: 10%

Espaciado

A continuación, modifique la configuración de espaciado.

• Relleno superior: 0px
• Acolchado inferior: 200px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2px

Agregue el módulo de seguimiento de redes sociales a la columna 1

Agregue las redes sociales de su preferencia

El primer módulo que necesitamos en nuestra fila es un Módulo de seguimiento de redes sociales en la columna 1. Agregue las redes sociales de su elección.

Eliminar cada color de fondo de red social individualmente

Luego, abra cada red social individualmente y elimine el color de fondo.

Agregue un enlace a cada red social individualmente

Agregue un enlace correspondiente a cada red social también.

Color de fondo predeterminado

Luego, regrese a la configuración general del módulo y aplique el siguiente color de fondo:

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

Colocar el cursor sobre el color de fondo

Cambie el color de fondo al pasar el mouse.

• Color de fondo flotante: # 494949

Imagen de fondo

Luego, cargue una imagen de fondo.

• Tamaño de la imagen de fondo: Portada
• Mezcla de imagen de fondo: multiplicar

Alineación

Pase a la pestaña de diseño del módulo y cambie la alineación.

• Alineación del módulo: centro

Icono

Modifique también el color del icono.

• Color del icono: rgba (0,0,0,0)

Espaciado

Luego, vaya a la configuración de espaciado y aplique los siguientes valores:

• Margen inferior: 0px
• Acolchado superior:
  • Escritorio: 250px
  • Tableta: 450px
  • Teléfono: 200px
• Acolchado inferior: 20px

Frontera

También estamos cambiando la configuración de los bordes.

• Todas las esquinas: 100px
• Ancho del borde: 2px
• Color del borde: rgba (255,255,255,0)

Borde flotante

Use otro color de borde al pasar el mouse.

• Color del borde flotante: #ffffff

Clase CSS

Luego, vaya a la pestaña avanzada y aplique una clase CSS personalizada.

• Clase CSS: redes sociales en equipo

Colocar el cursor antes del elemento

Y complete la configuración del módulo habilitando la configuración de desplazamiento en el elemento anterior y copiando y pegando las siguientes líneas de código CSS:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

Agregar módulo de persona a la columna 1

Agregar contenido

El siguiente y último módulo que necesitamos en la columna 1 es un módulo de persona. Agregue algún contenido de su elección.

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto de la siguiente manera:

• Alineación de texto: centro
• Color del texto: claro

Configuración del texto del título

A continuación, aplique estilo al texto del título.

• Fuente del título: Alata
• Tamaño del texto del título:
  • Escritorio: 27px
  • Tableta: 25px
  • Teléfono: 22px

Configuración de texto de posición

Luego, modifique la configuración del texto de posición.

• Fuente de posición: Alata
• Posición del tamaño del texto:
  • Escritorio: 17px
  • Tableta y teléfono: 15px

Espaciado

Aplique un relleno personalizado superior e inferior a la configuración de espaciado.

• Acolchado superior: 40px
• Acolchado inferior: 40px

Frontera

Y complete la configuración del módulo aplicando la siguiente configuración de borde:

• Ancho del borde: 1 px
• Color del borde: #ffffff

Eliminar las columnas restantes de la fila

Una vez que haya completado los módulos de la columna 1, puede eliminar las dos columnas restantes de la fila.

Clonar columna dos veces

Reutilice la columna 1 clonándola dos veces.

Clonar toda la fila

Luego, clona toda la fila tantas veces como necesites.

Cambiar todo el contenido duplicado

Enlaces de seguimiento de redes sociales

Por supuesto, deberá modificar todo el contenido duplicado, comenzando con los enlaces de redes sociales en cada módulo de seguimiento de redes sociales duplicado.

Las redes sociales siguen las imágenes de fondo

Luego, cambie la imagen de fondo en cada módulo de seguimiento de redes sociales.

Contenido del módulo de persona

Y complete los cambios modificando el contenido de cada módulo de persona.

Agregue el módulo de código debajo del último módulo de texto en la fila n. ° 1 de la sección n. ° 1

Ahora, para asegurarnos de que cada red social cambie de estilo tan pronto como se desplace todo el módulo, necesitaremos algunas líneas de código CSS. Colocaremos este código dentro de un nuevo módulo de código que agregaremos a la primera sección, justo debajo de la descripción del módulo de texto.

Agregar código CSS

Copie y pegue las siguientes líneas de código CSS y listo:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

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 ser creativo con el escaparate de los miembros de su equipo. Más específicamente, le mostramos cómo activar íconos sociales cuando pasa el mouse por una de las imágenes de los miembros del equipo. Esto da como resultado una interacción sutil pero divertida que puede utilizar para cualquier tipo de sitio web que cree. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.