Cómo agregar íconos sociales a las imágenes de los miembros del equipo con Div

Al construir su página de información, puede considerar agregar diferentes miembros del equipo de su empresa a una vitrina. Cuando comience este proceso de diseño, notará que faltan tres cosas del bate: una imagen, un nombre y una posición. Pero si desea destacar aún más a los miembros del equipo, puede considerar agregar sus enlaces de redes sociales al diseño. Por supuesto, podría hacer esto de la antigua manera y puede agregar un módulo de seguimiento en las redes sociales bajo el nombre y la función de la persona. Sin embargo, también puede optar por agregar un poco de interacción activando íconos sociales tan pronto como alguien realice una de las imágenes de la persona. En el tutorial de hoy, le mostraremos exactamente cómo hacer esto usando Div. ¡Podrá descargar el archivo JSON de forma gratuita!
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

Descargue el aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlos usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
¡Comencemos a recrear! Agregue la sección no. 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
Espacio ir a la pestaña de diseño de la sección y modifique la configuración de espaciado adicional.

Forro de arriba
Escritorio y tableta: 100 px
Teléfono: 50 PX
Levante inferior:
Escritorio y tableta: 100 px
Teléfono: 50 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Agregue el módulo de texto no. 1 En la columna, agregue el contenido H1, agregue un primer módulo de texto en la columna de fila con un contenido H1 a su elección.

Configuración de texto H1 Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H1 en consecuencia:

Fuente del titulo:
Encabezado de texto en color: #ffffff
Encabezado de texto de tamaño:
Escritorio: 50 PX
Tableta: 45 PX
Teléfono: 35 PX
Altura de la línea de dirección: 1.2em
Agregue el módulo divisor a la visibilidad de la columna, entonces agregaremos un módulo divisor. Asegúrese de que la opción “Show Divider” esté activada.

Mostrar divisor: Dalinia se mueve a la pestaña Diseño del módulo y cambia el color de la línea.
Color de línea: #ffffff

Dimensión Modifique la configuración de tamaño.
Peso del divisor: 2 PX

Ancho máximo: 100 PX
Altura: 2 PX
Agregue el módulo de texto no. 2 En la columna, agregue el contenido de descripción El siguiente módulo que necesitamos en esta fila es otro módulo de texto con un contenido de descripción.
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:

Texto de fuente: Alesa

Color de texto: # 7C7C7C
Tamaño del texto: 17 PX
La altura de la línea de texto: 1.9em
Espacio eliminar y el margen inferior predeterminado.
Margen inferior: 0 PX

Agregue el fondo de gradiente de la sección 2 Agregue otra sección justo debajo de la anterior y use un fondo de gradiente para ella.
Color 1: # 0F0F0F

Color 2: # 000000
Posición inicial: 10%
Posición final: 10%
Extienda y luego cambie la configuración de espaciado.
SUS Lingo: 0 PX

Finamiento inferior: 200 PX
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Dimensión Abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 2 PX
Agregue el módulo de seguimiento de las redes sociales a la columna 1 Agregar redes sociales para elegir el primer módulo que necesitamos en nuestro turno es un módulo de seguimiento social de seguimiento en la columna 1. Agregue las redes sociales a su elección.
Elimine cada color de fondo de la red social luego, abra cada red social individual y elimine el color de fondo.

Agregue un enlace a cada red social individual Agregue un enlace apropiado a cada red social. Los antecedentes predeterminados luego volverán a la configuración del módulo general y aplicarán el siguiente color de fondo:

Color de fondo: RGBA (0.0,0,0)


Coloque el cursor en el color de fondo Cambiar el color de fondo al cursor.

Coloque el cursor en segundo plano: # 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 Vaya a la pestaña Diseño del módulo y cambie la alineación.
Alineación del módulo: centro
Modificar el icono y el color del icono.

Icono de color: RGBA (0.0,0,0)
Espacio entonces, acceda a la configuración de espaciado y aplique los siguientes valores:

Margen inferior: 0 PX
Revestimiento superior:

Escritorio: 250 PX
Tableta: 450 PX
Teléfono: 200 PX
Finamiento inferior: 20 PX
Border también cambiamos la configuración del borde.
Todas las esquinas: 100 px
Ancho fronterizo: 2 PX

Color del borde: RGBA (255,255,255.0)
Coloque el mouse sobre el borde Use otro color del borde en el flotador.
Coloque el cursor en el color del borde: #fffff
La clase CSS luego accede a la pestaña avanzada y aplique una clase CSS personalizada.

Clase CSS: Ecite Social
Coloque el cursor antes del elemento y complete la configuración del módulo activando la configuración de desplazamiento en el elemento anterior y copie las siguientes líneas de código CSS: Contenido: & quot; Conéctese conmigo! & Quot ;;

Font-Family: & quot; aleata & quot ;;
Color: White! Importante;

Posición: Absoluto;
margen -top: -30px;
Agregue el módulo de persona a la columna 1 Agregue el siguiente contenido y el último módulo que necesitamos en la columna 1 es un módulo de persona. Agregue un contenido de su elección. Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto de la siguiente manera:
Alineación de texto: Centro
Color de texto: Abierto

Configuración de texto de título Stilet el texto del título más.

Título de la fuente: Aleda
Título del texto Tamaño:
Escritorio: 27 PX

Tableta: 25 PX
Teléfono: 22 PX
Configuración Posición del texto Luego, cambie la configuración del texto de posición.
Posición de fuente:
Posición del tamaño del texto:
Escritorio: 17 PX

Tableta y teléfono: 15 px
El espacio aplica algunos rellenos personalizados e inferiores a la configuración de espaciado.
Revestimiento superior: 40 px
Revestimiento inferior: 40 px
Borde y complete la configuración del módulo aplicando la siguiente configuración del borde:

Ancho fronterizo: 1 PX
Color del borde: #ffffff
Retire las columnas restantes después de haber completado los módulos en la columna 1, puede eliminar las dos columnas restantes de la fila.

Clonar la columna dos veces Reutilización de la columna 1 clonándola dos veces.
Clonar toda la fila, clonar toda la fila con la frecuencia que necesite.
Cambie todo el contenido duplicado Las redes sociales siguen los enlaces, por supuesto, deberá cambiar todo el contenido duplicado, comenzando con los enlaces de redes sociales en cada seguimiento de las redes sociales duplicadas.

Las redes sociales siguen las imágenes de fondo, cambian la imagen de fondo en cada módulo de seguimiento en las redes sociales.


El contenido del módulo de persona y complete los cambios cambiando el contenido de cada módulo de persona.

Agregue un módulo de código debajo del último módulo de texto entre no. 1 de la sección no. 1 Ahora, para garantizar que cada red social cambie los estilos tan pronto como se coloque todo el módulo, necesitaremos algunas líneas de código CSS. Colocaremos este código en un nuevo módulo de código que agregaremos en la primera sección, incluso bajo la descripción del módulo de texto. Agregue el código CSS para copiar las siguientes líneas de código CSS y ha terminado: & lt; Style & GT ;

.Team-Socials: Hover Li A.icon: antes {

Color: Negro! Importante;

}

.Team-Socials: Hover Li A.icon {

Color de fondo: blanco;
}
& lt;/style & gt;
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, te mostré cómo ser creativo con la ventana de los miembros de tu equipo. Específicamente, le mostré cómo activar íconos sociales al colocar a uno de los miembros del equipo. Esto da como resultado una interacción sutil pero divertida, que puede usar para cualquier tipo de sitio web que cree. ¡Podrías 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.