Cómo crear bonitas biografías de seguimiento social móvil con Divi (descarga gratuita)

Cuando está creando su sitio web personal, es útil tener una página de biografía de seguimiento social a la que pueda vincular fácilmente. Es una excelente tarjeta de visita en línea con un resumen de lo que hace y dónde la gente puede ver su trabajo. La información que se comparte dentro de las biografías de seguimiento de redes sociales móviles generalmente se limita a su imagen, nombre, título de trabajo, una pequeña descripción y enlaces de cartera. También puede agregar una llamada a la acción adicional para ayudar a los visitantes a ponerse en contacto con usted.

En esta publicación, le mostraremos cómo crear dos hermosas biografías de seguimiento social móvil usando Divi. Al final del tutorial, también compartiremos los archivos JSON de ambos ejemplos para que pueda comenzar de inmediato.

¡Hagámoslo!

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido a los dos ejemplos que recrearemos desde cero.

Ejemplo 1

Ejemplo 2

Comience a recrear el ejemplo n. ° 1

Agregar nueva sección

Color de fondo

¡Comencemos con el primer ejemplo! Cree una nueva página o abra una existente y agregue una sección regular. Abra la configuración de la sección y agregue un color de fondo blanco.

• Color de fondo: #ffffff

Espaciado

Luego, vaya a la configuración de espaciado de la sección y realice algunos cambios. Notarás que los valores difieren según el tamaño de la pantalla. Mantenemos el mismo tipo de diseño delgado en diferentes tamaños de pantalla modificando el relleno izquierdo y derecho a medida que avanzamos.

• Relleno superior: 50 px (escritorio y tableta), 0 px (teléfono)
• Acolchado inferior: 50 px (escritorio y tableta), 0 px (teléfono)
• Relleno izquierdo: 36vw (escritorio), 23vw (tableta), 0vw (teléfono)
• Relleno derecho: 36vw (escritorio), 23vw (tableta), 0vw (teléfono)

Agregar fila n. ° 1

Estructura de la columna

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

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un color de fondo.

• Color de fondo: # 333333

Dimensionamiento

Luego, vaya a la configuración de tamaño en la pestaña de diseño y elimine todo el espacio personalizado entre la columna y la fila.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Sombra de la caja

También estamos agregando una sombra de cuadro para crear algo de profundidad en tamaños de pantalla más grandes.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.3)

Agregar módulo de imagen

Cargar imagen

¡Es hora de comenzar a agregar módulos! Comience con un módulo de imagen que tenga una proporción de 1: 1. La imagen que estamos usando, por ejemplo, tiene un ancho y un alto de '500px'.

Alineación

Una vez que haya subido la imagen, vaya a la pestaña de diseño y cambie la alineación de la imagen.

• Alineación de la imagen: centro

Dimensionamiento

Estamos reduciendo el tamaño de la imagen modificando el ancho en la configuración de tamaño a continuación.

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

Frontera

También estamos convirtiendo la imagen en un círculo agregando '50vw' a cada una de las esquinas en la configuración del borde. Además de eso, agregaremos un borde blanco usando la siguiente configuración:

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

Sombra de la caja

Por último, pero no menos importante, agregue una sombra de caja para crear un diseño dimensional.

• Posición vertical de la sombra del cuadro: 40px
• Fuerza de desenfoque de sombra de caja: 100px
• Color de sombra: # 000000

Agregar módulo de texto n. ° 1

Agregar contenido H3

¡Pasemos al siguiente módulo! Agregue un módulo de texto justo debajo del módulo de imagen con algo de contenido H3.

Configuración de texto H3

Continúe yendo a la pestaña de diseño y cambiando la configuración de texto H3.

• Fuente del título 3: Open Sans
• Peso de fuente del encabezado 3: Semi negrita
• Alineación del texto del encabezado 3: centro
• Color del texto del encabezado 3: #ffffff
• Altura de la línea del encabezado 3: 0.1em

Espaciado

También estamos agregando un margen superior para crear espacio entre el Módulo de imagen y este Módulo de texto.

• Margen superior: 30 px

Agregar módulo de texto n. ° 2

Agregar contenido

El siguiente módulo que necesitamos es otro módulo de texto. Agregue el título de su trabajo al cuadro de contenido.

Configuración de texto

Luego, vaya a la pestaña de diseño y cambie la configuración del texto.

• Fuente de texto: Open Sans
• Peso de la fuente del texto: Regular
• Color del texto: # 919191
• Orientación del texto: centro

Agregar módulo de texto n. ° 3

Agregar contenido

Continúe agregando otro módulo de texto con una breve descripción de usted mismo.

Configuración de texto

Vaya a la configuración de texto y realice algunos cambios.

• Fuente de texto: Open Sans
• Color del texto: # b7b7b7
• Altura de la línea de texto: 1.6em
• Orientación del texto: centro

Dimensionamiento

Modifique también el ancho del módulo.

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

Espaciado

Y agregue un margen superior e inferior para crear espacio adicional.

• Margen superior: 30 px
• Margen inferior: 30 px

Agregar módulo de botones

Agregar copia

El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Agregue una copia.

Alineación

Luego, vaya a la pestaña de diseño y cambie la alineación de los botones para que coincida con los módulos anteriores.

• Alineación de botones: centro

Configuración de botones

Continúe cambiando la apariencia del botón en la configuración del botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 13px
• Color del texto del botón: #ffffff
• Color 1: # ad32ff
• Color 2: # 32baff
• Dirección del gradiente: 96 grados
• Ancho del borde del botón: 0px
• Radio del borde del botón: 30 px
• Fuente del botón: Open Sans
• Peso de fuente: Ultra Bold
• Estilo de fuente: mayúsculas

Espaciado

Agregue un poco de margen personalizado y relleno a continuación.

• Margen inferior: 50 px
• Acolchado superior: 15px
• Acolchado inferior: 15px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Sombra de la caja

Y complete el diseño del botón agregando una sombra de cuadro.

• Posición vertical de la sombra del cuadro: 20px
• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.69)

Agregar fila n. ° 2

Estructura de la columna

¡A la siguiente fila! Utilice la siguiente estructura de columnas:

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de la fila y agregue un fondo degradado:

• Color 1: # 1e1e1e
• Color 2: # 3f3f3f
• Tipo de degradado: radial
• Dirección radial: arriba a la izquierda
• Posición inicial: 26%
• Colocar degradado sobre la imagen de fondo: Sí

Imagen de fondo

Guarde la siguiente imagen en su computadora y utilícela como imagen de fondo para la fila:

Junto con las siguientes configuraciones de fondo:

• Tamaño de la imagen de fondo: tamaño real
• Posición de la imagen de fondo: Centro
• Repetición de imagen de fondo: sin repetición
• Mezcla de imagen de fondo: luz intensa

Dimensionamiento

Luego, vaya a la pestaña de diseño y elimine todo el espacio entre las columnas y la fila. Esto nos ayudará a aprovechar al máximo el espacio entre filas que obtenemos.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Espaciado

Agregue un poco de relleno personalizado a continuación.

• Acolchado superior: 84px
• Acolchado inferior: 84px
• Acolchado izquierdo: 4vw (escritorio), 7vw (tableta), 14vw (teléfono)
• Relleno derecho: 4vw (escritorio), 7vw (tableta), 14vw (teléfono)

Sombra de la caja

Junto con una sombra de caja.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.3)

Monitor

Para asegurarnos de que todos los íconos de seguimiento social aparezcan uno al lado del otro, agregaremos una sola línea de código CSS al elemento principal de la fila.

display: flex;

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

Alineación

El primer módulo que necesitamos en la columna 1 es un módulo de seguimiento de redes sociales. Una vez que haya agregado el módulo, cambie la alineación del elemento en la pestaña de diseño.

• Alineación del artículo: centro

Agregar nueva red social

Continúe agregando una nueva red social. Para este ejemplo, usamos Dribbble.

Enlace

Agrega un enlace a tu perfil de Dribbble.

Fondo degradado

Luego, cambie el fondo degradado usando la siguiente configuración:

• Color 1: # ea0061
• Color 2: # ea4c8d
• Dirección del gradiente: 136 grados

Espaciado

Y aumente el tamaño del módulo agregando algo de relleno personalizado.

• Acolchado superior: 20px
• Acolchado inferior: 20px
• Relleno izquierdo: 20px
• Relleno derecho: 20px

Frontera

También estamos convirtiendo el módulo en un círculo agregando '20vw' a cada una de las esquinas en la configuración del borde.

Sombra de la caja

Por último, pero no menos importante, agregue una sombra de cuadro.

• Posición vertical de la sombra del cuadro: 20px
• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: # 000000

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

Agregar contenido

Agregue un módulo de texto a la primera columna a continuación.

Configuración de texto

Cambia la configuración del texto.

• Fuente de texto: Open Sans
• Peso de la fuente del texto: Ultra Bold
• Color del texto: #ffffff
• Orientación del texto: centro

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

Agregar contenido

Agrega otro debajo del anterior.

Configuración de texto

Cambie también la configuración de texto de este módulo.

• Fuente de texto: Open Sans
• Color del texto: # 898989
• Tamaño del texto: 11px
• Orientación del texto: centro

Clonar módulos en la columna 1 dos veces y colocar duplicados en las columnas restantes

Una vez que haya terminado de personalizar todos los módulos en la columna 1, puede continuar y clonarlos dos veces. Coloque los duplicados en las dos columnas restantes de la fila.

Cambiar las redes sociales

Por supuesto, deberás cambiar las redes sociales.

Cambiar enlaces de redes sociales

Junto con los enlaces.

Cambiar fondos degradados de redes sociales

Y los fondos degradados de la red.

• Color 1: # 0043ff
• Color 2: # 00aced

• Color 1: # ea2c59
• Color 2: # fed270

Comience a recrear el ejemplo n. ° 2

Agregar nueva sección

Color de fondo

¡Pasemos al siguiente ejemplo! Agregue una nueva sección con un color de fondo blanco.

• Color de fondo: #ffffff

Espaciado

Agregue un poco de relleno personalizado a continuación.

• Relleno superior: 50 px (escritorio y tableta), 0 px (teléfono)
• Acolchado inferior: 50 px (escritorio y tableta), 0 px (teléfono)
• Acolchado izquierdo: 36vw (escritorio), 23vw (tableta), 4vw (teléfono)
• Relleno derecho: 36vw (escritorio), 23vw (tableta), 4vw (teléfono)

Agregar fila n. ° 1

Estructura de la columna

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

Dimensionamiento

Sin agregar ningún módulo todavía, vaya a la pestaña de diseño de la configuración de fila y cambie la configuración de tamaño.

• Hacer esta fila de ancho completo: Sí
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1

Agregar módulo de imagen

Cargar imagen

¡Es hora de comenzar a agregar módulos! El primer módulo que necesitamos es un módulo de imagen con una proporción de 1: 1.

Alineación

Cambia la alineación de la imagen.

• Alineación de la imagen: centro

Dimensionamiento

Modifica también el ancho.

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

Frontera

Y agregue '20px' a cada una de las esquinas en la configuración del borde.

Sombra de la caja

Complete el diseño de la imagen agregando una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 51px
• Color de sombra: rgba (0,0,0,0.37)

Agregar módulo de texto n. ° 1

Agregar contenido H3

El siguiente módulo que necesitamos es un módulo de texto. Agregue un poco de contenido H3 de su elección.

Configuración de texto H3

Cambie la configuración de texto H3 en la pestaña de diseño.

• Fuente del título 3: Open Sans
• Peso de la fuente del encabezado 3: Ultra Bold
• Estilo de fuente del título 3: mayúsculas
• Alineación del texto del encabezado 3: centro
• Título 3 Color del texto: # 000000
• Espacio entre letras del encabezado 3: -1px
• Altura de la línea del título 3: 0.9em

Espaciado

A continuación, agregue un poco de margen superior.

• Margen superior: 30 px

Agregar módulo de texto n. ° 2

Agregar contenido

Agregue otro módulo de texto.

Configuración de texto

Modifique la configuración del texto.

• Fuente de texto: Open Sans
• Color del texto: # 919191
• Orientación del texto: centro

Agregar fila n. ° 2

Estructura de la columna

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

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo de la fila.

• Color de fondo: #ffffff

Color de fondo de la columna 2

Agrega también un color de fondo a la segunda columna.

• Color de fondo de la columna 2: #efefef

Alineación

Asegúrate de usar la alineación de la fila izquierda.

• Alineación de filas: izquierda

Dimensionamiento

Vaya a la configuración de tamaño a continuación y realice algunos cambios.

• Usar ancho personalizado: Sí
• Unidad:%
• Ancho personalizado: 67%
• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí

Espaciado

También estamos agregando algo de relleno personalizado a la fila y sus columnas.

• Relleno superior: 0px
• Acolchado inferior: 0px
• Relleno superior de la columna 1: 20px
• Relleno inferior de la columna 1: 20px
• Relleno superior de la columna 2: 20px
• Relleno inferior de la columna 2: 20px

Frontera

Agregue '14px' a las esquinas superior izquierda, superior derecha e inferior izquierda.

Sombra de la caja

Y complete el diseño de la fila agregando una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.17)

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

Alineación

En la primera columna, necesitaremos un módulo de seguimiento de redes sociales. Cambie la alineación del elemento.

• Alineación del artículo: centro

Agregar nueva red social

Luego, agregue una nueva red social. Estamos usando Dribbble.

Enlace

Agregue el enlace a su cartera de Dribbble.

Fondo degradado

Y cambia el fondo degradado de la red social.

• Color 1: # ea0061
• Color 2: # ea4c8d
• Dirección del gradiente: 136 grados

Espaciado

A continuación, agregue algunos valores de relleno personalizados.

• Acolchado superior: 20px
• Acolchado inferior: 20px
• Relleno izquierdo: 20px
• Relleno derecho: 20px

Frontera

Y agrega '10px' a cada uno de los rincones de la red social.

Sombra de la caja

Complete el diseño del módulo agregando una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Color de sombra: rgba (0,0,0,0.3)

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

Agregar contenido

Agregue un módulo de texto a la segunda columna.

Configuración de texto

Cambie la configuración de texto en consecuencia:

• Fuente de texto: Open Sans
• Peso de la fuente del texto: Ultra Bold
• Color del texto: # 000000
• Orientación del texto: centro

Espaciado

Crea espacio agregando un margen superior a continuación.

• Margen superior: 10px

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

Agregar contenido

El segundo módulo que necesitamos en la columna 2 es otro módulo de texto.

Configuración de texto

Cambia la configuración del texto.

• Fuente de texto: Open Sans
• Color del texto: # 898989
• Tamaño del texto: 11px
• Orientación del texto: centro

Clonar fila n. ° 2

Una vez que haya terminado de modificar la fila, puede continuar y clonarla una vez.

Módulos de intercambio

A continuación, intercambie los módulos.

Agregar color de fondo de la columna 1

Luego, agregue un color de fondo de la columna 1 a la fila duplicada.

• Color de fondo de la columna 1: #dbdbdb

Eliminar el color de fondo de la columna 2

A continuación, elimine el color de fondo de la columna 2.

Cambiar alineación de filas

Cambie también la alineación de las filas.

• Alineación de filas: derecha

Cambiar el tamaño de la fila

Junto con el ancho personalizado en la configuración de tamaño.

• Ancho personalizado: 66,99%

Cambiar borde de fila

También nos aseguramos de que '14px' se asigne solo a las esquinas superior derecha e inferior derecha.

Cambiar la red de seguimiento social

Continúe cambiando la red social.

Cambiar el fondo degradado de la red de seguimiento social

Junto con el fondo degradado.

• Color 1: # 0043ff
• Color 2: # 00aced

Clonar ambas filas de seguimiento social

Una vez que haya terminado de tener ambas filas de seguimiento social, puede clonar cada una de ellas.

Cambiar borde del duplicado n. ° 1

Cambie las esquinas redondeadas del primer duplicado.

Cambiar la red de seguimiento social del duplicado n. ° 1

Junto con la red social.

Cambiar el fondo degradado del duplicado n. ° 1

Y el fondo degradado.

• Color 1: # ea2c59
• Color 2: # fed270

Cambiar borde del duplicado n. ° 2

Continúe cambiando también las esquinas redondeadas del segundo duplicado.

Cambiar la red de seguimiento social del duplicado n. ° 2

Junto con la red social.

Cambiar el fondo degradado del duplicado n. ° 2

Y, una vez más, el fondo degradado que se asigna a la red social.

• Color 1: # 00306b
• Color 2: # 007bb6

Descargue la BIOS de Mobile Social Follow GRATIS

Para poner sus manos en las secciones gratuitas de seguimiento social móvil, primero deberá descargarlas 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!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado de ambos ejemplos que hemos recreado.

Ejemplo 1

Ejemplo 2

Pensamientos finales

En esta publicación, le mostramos cómo crear impresionantes biografías de seguimiento social para dispositivos móviles. Puede utilizar estos diseños como su tarjeta de visita en línea y redirigir a las personas a esta página para que puedan ponerse en contacto o ver los enlaces de su cartera. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!