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


Cuando estás creando tu sitio web personal, es útil tener una página de biografía de seguimiento social a la que puedas 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, cargo, 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 para dispositivos móviles con 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

bio de seguimiento social

Ejemplo 2

bio de seguimiento social

Comience a recrear el ejemplo n. ° 1

Agregar nueva sección

Color de fondo

¡Comencemos con el primer ejemplo! Cree una página nueva 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

bio de seguimiento social

Espaciado

Luego, vaya a la configuración de espaciado de la sección y realice algunos cambios. Notará 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)
  • Acolchado izquierdo: 36vw (escritorio), 23vw (tableta), 0vw (teléfono)
  • Relleno derecho: 36vw (escritorio), 23vw (tableta), 0vw (teléfono)

bio de seguimiento social

Agregar fila n. ° 1

Estructura de columna

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

bio de seguimiento social

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

bio de seguimiento social

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 del canal: 1

bio de seguimiento social

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)

bio de seguimiento social

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 "500 px".

bio de seguimiento social

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 imagen: centro

bio de seguimiento social

Dimensionamiento

A continuación, reduciremos el tamaño de la imagen modificando el ancho en la configuración de tamaño.

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

bio de seguimiento social

Frontera

También convertiremos 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

bio de seguimiento social

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

bio de seguimiento social

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.

bio de seguimiento social

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 título 3: centro
  • Color del texto del encabezado 3: #ffffff
  • Altura de línea del título 3: 0.1em

bio de seguimiento social

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

bio de seguimiento social

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.

bio de seguimiento social

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

bio de seguimiento social

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.

bio de seguimiento social

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

bio de seguimiento social

Dimensionamiento

Modifique también el ancho del módulo.

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

bio de seguimiento social

Espaciado

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

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

bio de seguimiento social

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.

bio de seguimiento social

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

bio de seguimiento social

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

bio de seguimiento social

bio de seguimiento social

Espaciado

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

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

bio de seguimiento social

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)

bio de seguimiento social

Agregar fila n. ° 2

Estructura de columna

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

bio de seguimiento social

Fondo degradado

Sin agregar ningún módulo todavía, abra la configuración de 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í

bio de seguimiento social

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

bio de seguimiento social

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 del canal: 1

bio de seguimiento social

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)

bio de seguimiento social

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)

bio de seguimiento social

Monitor

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

display: flex;

bio de seguimiento social

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

bio de seguimiento social

Agregar nueva red social

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

bio de seguimiento social

bio de seguimiento social

Enlace

Agrega un enlace a tu perfil de Dribbble.

bio de seguimiento social

Fondo degradado

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

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

bio de seguimiento social

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

bio de seguimiento social

Frontera

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

bio de seguimiento social

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

bio de seguimiento social

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.

bio de seguimiento social

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

bio de seguimiento social

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

Agregar contenido

Agrega otro debajo del anterior.

bio de seguimiento social

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

bio de seguimiento social

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, necesitará 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 2

bio de seguimiento social

Agregar nueva sección

Color de fondo

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

  • Color de fondo: #ffffff

bio de seguimiento social

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)

bio de seguimiento social

Agregar fila n. ° 1

Estructura de columna

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

bio de seguimiento social

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 del canal: 1

bio de seguimiento social

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.

bio de seguimiento social

Alineación

Cambia la alineación de la imagen.

  • Alineación de imagen: centro

bio de seguimiento social

Dimensionamiento

Modifica también el ancho.

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

bio de seguimiento social

Frontera

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

bio de seguimiento social

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)

bio de seguimiento social

Agregar módulo de texto n. ° 1

Agregar contenido H3

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

bio de seguimiento social

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 fuente del encabezado 3: Ultra Bold
  • Estilo de fuente del título 3: mayúsculas
  • Alineación del texto del título 3: centro
  • Título 3 Color del texto: # 000000
  • Espacio entre letras del encabezado 3: -1px
  • Altura de línea del título 3: 0.9em

bio de seguimiento social

Espaciado

A continuación, agregue un margen superior.

  • Margen superior: 30 px

bio de seguimiento social

Agregar módulo de texto n. ° 2

Agregar contenido

Agregue otro módulo de texto.

bio de seguimiento social

Configuración de texto

Modifique la configuración del texto.

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

bio de seguimiento social

Agregar fila n. ° 2

Estructura de columna

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

bio de seguimiento social

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

bio de seguimiento social

Color de fondo de la columna 2

Añade también un color de fondo a la segunda columna.

  • Color de fondo de la columna 2: #efefef

bio de seguimiento social

Alineación

Asegúrese de utilizar la alineación de la fila izquierda.

  • Alineación de filas: izquierda

bio de seguimiento social

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 del canal: 1
  • Ecualizar alturas de columna: Sí

bio de seguimiento social

Espaciado

También estamos agregando un 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

bio de seguimiento social

Frontera

Agregue "14px" en las esquinas superior izquierda, superior derecha e inferior izquierda.

bio de seguimiento social

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)

bio de seguimiento social

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

bio de seguimiento social

Agregar nueva red social

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

bio de seguimiento social

bio de seguimiento social

Enlace

Agrega el enlace a tu portafolio de Dribbble.

bio de seguimiento social

Fondo degradado

Y cambia el fondo degradado de la red social.

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

bio de seguimiento social

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

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

bio de seguimiento social

Frontera

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

bio de seguimiento 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)

bio de seguimiento social

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

Agregar contenido

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

bio de seguimiento social

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

bio de seguimiento social

Espaciado

Cree espacio agregando un margen superior a continuación.

  • Margen superior: 10 px

bio de seguimiento social

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.

bio de seguimiento social

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

bio de seguimiento social

Clonar fila n. ° 2

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

bio de seguimiento social

Módulos de intercambio

Cambie los módulos a continuación.

bio de seguimiento social

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

bio de seguimiento social

Eliminar el color de fondo de la columna 2

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

bio de seguimiento social

Cambiar alineación de filas

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

  • Alineación de filas: derecha

bio de seguimiento social

Cambiar el tamaño de la fila

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

  • Ancho personalizado: 66,99%

bio de seguimiento social

Cambiar borde de fila

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

bio de seguimiento social

Cambiar la red de seguimiento social

Continúe cambiando la red social.

bio de seguimiento social

Cambiar el fondo degradado de la red de seguimiento social

Junto con el fondo degradado.

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

bio de seguimiento social

Clonar ambas filas de seguimiento social

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

bio de seguimiento social

Cambiar el borde del duplicado n. ° 1

Cambie las esquinas redondeadas del primer duplicado.

bio de seguimiento social

Cambiar la red de seguimiento social del duplicado # 1

Junto con la red social.

bio de seguimiento social

Cambiar el fondo degradado del duplicado n. ° 1

Y el fondo degradado.

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

bio de seguimiento social

Cambiar el borde del duplicado n. ° 2

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

bio de seguimiento social

Cambiar la red de seguimiento social del duplicado # 2

Junto con la red social.

bio de seguimiento 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

bio de seguimiento social

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.

Avance

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

Ejemplo 1

bio de seguimiento social

Ejemplo 2

bio de seguimiento social

Pensamientos finales

En esta publicación, le mostramos cómo crear impresionantes biografías de seguimiento en redes sociales 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!