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

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

¡Empecemos con el primer ejemplo! Cree una nueva página o abra una existente y agréguele una sección normal. 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á 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 (computadora de escritorio y tableta), 0 px (teléfono)
• Relleno inferior: 50 px (computadora de 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)

Añadir Fila #1

Estructura de la columna

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

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de la 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 del canalón: 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 cuadro: 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 alto de ‘500px’.

Alineación

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

• Alineación de imagen: Centro

Dimensionamiento

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

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

Borde

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 cuadro para crear un diseño dimensional.

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

Añadir Módulo de Texto #1

Agregar contenido H3

¡Pasamos 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.

• Título 3 Fuente: Open Sans
• Encabezado 3 Peso de fuente: semi negrita
• Encabezado 3 Alineación de texto: Centro
• Título 3 Color del texto: #ffffff
• Encabezado 3 Altura de línea: 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: 30px

Añadir Módulo de Texto #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 fuente de texto: regular
• Color del texto: #919191
• Orientación del texto: Centro

Añadir Módulo de Texto #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 línea de texto: 1,6 em
• 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 poco de margen superior e inferior para crear espacio adicional.

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

Agregar módulo de botones

Agregar copia

El siguiente y último módulo que necesitamos en esta fila es un módulo de botones. Agrega algo de 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: 30px
• Fuente del botón: Open Sans
• Peso de fuente: ultra negrita
• Estilo de fuente: Mayúsculas

Espaciado

Agregue un margen personalizado y relleno a continuación.

• Margen inferior: 50px
• Relleno superior: 15px
• Relleno 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 cuadro: 80px
• Color de sombra: rgba (0,0,0,0,69)

Añadir Fila #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 gradiente: Radial
• Dirección radial: superior izquierda
• Posición inicial: 26%
• Coloque el 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 la siguiente configuración de fondo:

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

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 de fila que obtenemos.

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

Espaciado

Agregue un poco de relleno personalizado a continuación.

• Relleno superior: 84px
• Relleno inferior: 84px
• Relleno 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 cuadro: 80px
• Color de sombra: rgba(0,0,0,0.3)

Mostrar

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.

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 de elementos: Centro

Agregar nueva red social

Continúe agregando una nueva red social. Para este ejemplo, estamos usando 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 un relleno personalizado.

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

Borde

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 cuadro: 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 de texto.

• Fuente de texto: Open Sans
• Peso de fuente de texto: ultra negrita
• Color del texto: #ffffff
• Orientación del texto: Centro

Agregue el Módulo de Texto #2 a la Columna 1

Agregar contenido

Añade 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 Redes Sociales

Por supuesto, tendrás que 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

¡Vamos 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 (computadora de escritorio y tableta), 0 px (teléfono)
• Relleno inferior: 50 px (computadora de escritorio y tableta), 0 px (teléfono)
• Relleno izquierdo: 36vw (escritorio), 23vw (tableta), 4vw (teléfono)
• Relleno derecho: 36vw (escritorio), 23vw (tableta), 4vw (teléfono)

Añadir Fila #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 del canalón: 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 imagen: Centro

Dimensionamiento

Modifique el ancho también.

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

Borde

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 sutil sombra de cuadro.

• Fuerza de desenfoque de sombra de cuadro: 51px
• Color de sombra: rgba (0,0,0,0,37)

Añadir Módulo de Texto #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.

Configuración de texto H3

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

• Título 3 Fuente: Open Sans
• Encabezado 3 Peso de fuente: Ultra negrita
• Título 3 Estilo de fuente: Mayúsculas
• Encabezado 3 Alineación de texto: Centro
• Título 3 Color del texto: #000000
• Encabezado 3 Espaciado entre letras: -1px
• Encabezado 3 Altura de línea: 0.9em

Espaciado

Agregue un poco de margen superior a continuación.

• Margen superior: 30px

Añadir Módulo de Texto #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

Añadir Fila #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

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

• Columna 2 Color de fondo: #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 del canalón: 1
• Igualar alturas de columna: Sí

Espaciado

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

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

Borde

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

Sombra de la caja

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

• Fuerza de desenfoque de sombra de cuadro: 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 de elementos: Centro

Agregar nueva red social

Luego, agrega 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

Agregue algunos valores de relleno personalizados a continuación.

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

Borde

Y añade ’10px’ a cada uno de los rincones de la red social.

Sombra de la caja

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

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

Agregue el Módulo de Texto #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 fuente de texto: ultra negrita
• Color del texto: #000000
• Orientación del texto: Centro

Espaciado

Cree espacio agregando un margen superior a continuación.

• Margen superior: 10px

Agregue el Módulo de Texto #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 de texto.

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

Clonar Fila #2

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

Módulos de intercambio

Intercambia los módulos a continuación.

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

Quitar el color de fondo de la columna 2

Elimine el color de fondo de la columna 2 a continuación.

Cambiar alineación de fila

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

• Alineación de filas: Derecha

Cambiar tamaño de fila

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

• Ancho personalizado: 66,99 %

Cambiar borde de fila

También nos estamos asegurando de que ’14px’ se asigne solo a las esquinas superior derecha e inferior derecha.

Cambiar red de seguimiento social

Continuar 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 #1

Cambia 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 #2

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

Cambiar la red social de seguimiento 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 le asigna a la red social.

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

Descargar The Mobile Social Follow Bios GRATIS

Para poner sus manos en las secciones gratuitas de seguimiento social móvil, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado de los dos 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 usar 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!