Cómo crear un hermoso dispositivo de seguimiento social con Divic (¡descarga gratuita!)

Cuando crea su sitio personal, le ayuda a tener una página de biografía de seguimiento social a la que pueda conectarse fácilmente. Haga una excelente tarjeta de presentación en línea con un resumen de lo que hace y dónde las personas pueden ver su trabajo. La información que se comparte en el BIOS de búsqueda social móvil generalmente se limita a la imagen, el nombre, el título de su publicación, una pequeña descripción y enlaces de cartera. También puede agregar un CTA adicional para ayudar a los visitantes a contactarlo en esta publicación, le mostraremos cómo crear dos hermosas búsqueda social móvil usando Div. Al final del tutorial, también distribuiremos los archivos JSON de ambos ejemplos, por lo que puede comenzar de inmediato.
¡Vamos a eso! Vista previa antes de tirar la cabeza en el tutorial, para echar un vistazo rápido a los dos ejemplos que recrearemos desde cero. Ejemplo 1

Ejemplo 2

Empiece a recrear el ejemplo no. 1

¡Agregue un nuevo color de fondo para comenzar 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

Extienda luego, acceda 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, cambiando el forro izquierdo y derecho a medida que avanzamos.
Revestimiento superior: 50 PX (escritorio y tableta), 0 PX (teléfono)
Bajo forro: 50 PX (escritorio y tableta), 0 PX (teléfono)
ENLIZACIÓN IZQUIERDA: 36VW (escritorio), 23VW (tableta), 0VW (teléfono)
Revelaje derecho: 36VW (escritorio), 23VW (tableta), 0VW (teléfono) Agregar estructura de columna de giro # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Color de fondo sin agregar módulos, abra la configuración de línea y agregue un color de fondo.

Color de fondo: # 333333
Dimensión Luego, acceda a la configuración de tamaño en la pestaña de diseño y elimine todo el espacio personalizado entre la columna y una fila.

Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
La sombra de la caja también agregue una sombra de la caja para crear una cierta profundidad en el tamaño más grande de la pantalla.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
Agregue un módulo de imagen Cargue la imagen es hora de comenzar a agregar módulos. Comience con un módulo de imagen que tenga una relación 1: 1. La imagen que usamos, por ejemplo, tiene el ancho y la altura de “500 PX”.

Alineación Después de cargar la imagen, vaya a la pestaña de diseño y cambie la alineación de la imagen.

Alineación de imágenes: centro
Dimensión reducimos el tamaño de la imagen cambiando el ancho en la siguiente configuración de tamaño.

Ancho: 33%
Alineación del módulo: centro
El borde también transforma la imagen en un círculo agregando “50VW” a cada esquina de la configuración del borde. Además, agregaremos un borde blanco utilizando la siguiente configuración:

Ancho fronterizo: 8 PX
Color del borde: #ffffff
Box Shadow por último, pero no menos importante, agregue un tono de caja para crear un diseño dimensional.

Box Shadow Posición vertical: 40 PX
Poder de poco claro de la sombra de la caja: 100 px
Color de la sombra: # 000000
Agregue el módulo de texto no. 1 Agregue el contenido H3 ¡pase al siguiente módulo! Agregue un módulo de texto justo debajo del módulo de imagen con un contenido H3. Texto H3 Continúe accediendo a la pestaña Diseño y cambiando la configuración de texto H3.

3 FUENTES SECCIÓN: Open Sans

Título 3 Fuente de peso: semi audac
Título 3 Alineación de texto: Centro
Frup 3 color de texto: #ffffff
Título 3 Altura de la línea: 0.1em
El espacio también agregue algunos bordes superiores para crear espacio entre el módulo de imagen y este módulo de texto.
Margen superior: 30 PX

Agregue el módulo de texto no. 2 Agregar contenido La siguiente forma en que necesitamos es otro módulo de texto. Agregue su título de publicación al cuadro de contenido.
Configuración de texto Entonces, acceda a la pestaña de diseño y cambie la configuración de texto.

Texto de fuente: Abrir sans

El peso de la fuente de texto: regular
Color de texto: # 919191
Orientación de texto: centro
Agregue el módulo de texto no. 3 Agregar contenido Continúe agregando otro módulo de texto con una breve descripción de usted.
Configuración de texto Vaya a la configuración de texto y realice algunos cambios.

Texto de fuente: Abrir sans

Color de texto: # B7B7B7
La altura de la línea de texto: 1.6em
Orientación de texto: centro
Dimensión Modifique el ancho del módulo.
Ancho: 68%

Alineación del módulo: centro
Espacio y agregue algunos bordes superior e inferior para crear espacio adicional.
Margen superior: 30 PX

Margen inferior: 30 px
Agregue un botón Agregue una copia a continuación y el último módulo que necesitamos en esta fila es un módulo de botón. Agregue una copia.
Alinee luego, acceda a la pestaña de diseño y cambie la alineación del botón para que coincida con los módulos anteriores.

Alineación de botones: centro

Configuración Continúe cambiando la apariencia del botón en la configuración del botón. Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 13 PX

El color del texto del botón: #ffffff
Color 1: # AD32FFF
Color 2: # 32BAFF
Dirección de gradiente: 96 grados
El ancho del nudo del botón: 0 PX
Botón Raza: 30 PX
Botón de fuente: Abrir sans
Peso de fuente: Ultra Bold
Estilo de fuente: mayúscula
El espacio agregue algunos bordes personalizados y un mayor relleno.
Margen inferior: 50 PX
Revestimiento superior: 15 px


Revestimiento inferior: 15 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Box Shadow y complete el diseño de los botones agregando una sombra de la caja.
Box Shadow Posición vertical: 20 PX
Poder de poco claro de la sombra de la caja: 80 px

Shadow Color: RGBA (0.0,0,0.69)
Agregue la estructura de la fila # 2 de la columna, ¡pasamos la siguiente fila! Use la siguiente estructura de columna:
Fondo de gradiente sin agregar módulos, abrir la configuración de la fila y agregar un fondo de gradiente:
Color 1: # 1e1e1e

Color 2: # 3F3F3F

Tipo de gradiente: radial
Dirección radial: superior izquierda
Posición inicial: 26%
Coloque el gradiente sobre la imagen de fondo: sí
Imagen de fondo Guarde la siguiente imagen en su computadora y úsela como una imagen de fondo:
Junto con la siguiente configuración de fondo:
El tamaño de la imagen de fondo: el tamaño real

Posición de la imagen de fondo: Centro

Repetir la imagen de fondo: sin repetición
Mezcla de imagen de fondo: luz brillante
Dimensión Luego, acceda a la pestaña de diseño y elimine todo el espacio entre columnas y fila. Esto nos ayudará a aprovechar al máximo el espacio consecutivo que obtenemos.
Haga que esta fila sea un ancho completo: Dale el ancho personalizado de la canaleta: Sí
El ancho de la canaleta: 1

Espacio agregue algunos revestimientos personalizados.
Revestimiento superior: 84 PX
Finamiento inferior: 84 PX
ENLIZACIÓN IZQUIERDA: 4VW (escritorio), 7VW (tableta), 14VW (teléfono)

Revestimiento derecho: 4VW (escritorio), 7VW (tableta), 14VW (teléfono)
Sombra de caja con un tono de caja.
Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
La pantalla para garantizar que todos los íconos de búsqueda social aparezcan uno al lado del otro, agregaremos una sola línea de código CSS al elemento principal de la fila. Pantalla: Flex;

Agregue el módulo de seguimiento de las redes sociales a la alineación de la columna 1 El primer módulo que necesitamos en la columna 1 es un módulo de seguimiento social. Después de haber agregado el módulo, cambie la alineación de los elementos en la pestaña de diseño.
Alineación del artículo: Centro
Agregue una nueva red social Continuar agregando una nueva red social. Para este ejemplo, usamos dribbble.

Enlace Agregue un enlace a su perfil Dribbble.

Fondo de gradiente y luego cambie el fondo de gradiente utilizando la siguiente configuración:
Color 1: # EA0061

Color 2: #A4C8D


Dirección de gradiente: 136deg

Espacio y aumento del tamaño del módulo agregando algunos rellenos personalizados.
Revestimiento superior: 20 px
Finamiento inferior: 20 PX
ENLIZACIÓN IZQUIERDA: 20 PX

Revestimiento derecho: 20 PX
El borde también transforma el módulo en un círculo que agrega “20VW” a cada una de las esquinas en la configuración del borde.
Box Shadow por último, pero no menos importante, agregue un tono de caja.
Box Shadow Posición vertical: 20 PX
Poder de poco claro de la sombra de la caja: 80 px

Color de la sombra: # 000000

Agregue el módulo de texto no. 1 en la columna 1 Agregar contenido Agregue un módulo de texto en la primera columna. Textos de texto Cambie la configuración de texto.
Texto de fuente: Abrir sans
El peso de la fuente de texto: Ultra Bold
Color de texto: #ffffff

Orientación de texto: centro

Agregue el módulo de texto no. 2 en la columna 1 Agregar contenido Agregue otro en el anterior.
Configuración de texto Cambio y configuración de texto de este módulo.
Texto de fuente: Abrir sans
Color de texto: # 898989
Tamaño del texto: 11 PX

Orientación de texto: centro

Módulos de clon en la columna 1 dos veces y coloque los duplicados en las columnas restantes después de haber terminado de personalizar todos los módulos en la columna 1, puede continuar y puede clonarlos dos veces. Coloque los duplicados en las dos columnas restantes de la fila.
Cambie las redes sociales, por supuesto, deberá cambiar las redes sociales.
Cambie las conexiones de redes sociales junto con los enlaces.
Cambie los antecedentes del gradiente de redes sociales y antecedentes de gradiente de red.
Color 1: # 0043ff

Color 2: # 00 al frente

Color 1: # EA2C59

Color 2: # Fed270

Empiece a recrear el ejemplo no. 2
¡Agregue un nuevo color de fondo, pasamos al siguiente ejemplo! Agregue una nueva sección con un color de fondo blanco.
Color de fondo: #ffffff

Espacio agregue algunos revestimientos personalizados.
Revestimiento superior: 50 PX (escritorio y tableta), 0 PX (teléfono)

Bajo forro: 50 PX (escritorio y tableta), 0 PX (teléfono)

ENLIZACIÓN IZQUIERDA: 36VW (escritorio), 23VW (tableta), 4VW (teléfono)

Revestimiento derecho: 36VW (escritorio), 23VW (tableta), 4VW (teléfono)

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:
Dimensión sin agregar módulos, acceder a la pestaña de diseño de configuración de línea y modificar la configuración de dimensionamiento.
Haga esta fila ancho completo: sí
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Agregue un módulo de imagen Cargue la imagen es hora de comenzar a agregar módulos. El primer módulo que necesitamos es un módulo de imagen con una relación 1: 1.

Alineación Cambiar la alineación de la imagen.
Alineación de imágenes: centro
Cambio de dimensión y ancho.
Ancho: 33%

Alineación del módulo: centro

Borde y agregue “20px” a cada una de las esquinas en la configuración del borde.
Box Shadow Completa el diseño de la imagen agregando un tono de caja sutil.

Poder de poco claro de la sombra de la caja: 51 px
Shadow Color: RGBA (0.0,0,0.37)
Agregue el módulo de texto no. 1 Agregar contenido H3 La siguiente forma en que necesitamos es un módulo de texto. Agregue un contenido H3 a su elección.

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

3 FUENTES SECCIÓN: Open Sans
Título 3 Peso de fuente: Ultra Bold
Título 3 Estilo de fuente: mayúscula

Título 3 Alineación de texto: Centro

Rúbrica 3 Color de texto: # 000000
Rúbrica 3 Espaciación de litros: -1 PX
Rúbrica 3 altura de línea: 0.9em
El espacio agregue algunos bordes superiores más.
Margen superior: 30 PX
Agregue el módulo de texto no. 2 Agregar contenido Agregar otro módulo de texto.
Configuración de texto Cambie la configuración de texto.
Texto de fuente: Abrir sans

Color de texto: # 919191
Orientación de texto: centro

Agregue la estructura de la columna de la fila # 2 Continuar agregando una nueva fila utilizando la siguiente estructura de columnas:

Color de fondo sin agregar módulos, abra la configuración de la fila y cambie el color de fondo de la fila. Wallpaper: #FFFFFF
Columna 2 El color de fondo también agregue un color de fondo a la segunda columna.
Columna 2 Color de fondo: #efeffe
Alineación Asegúrese de usar la alineación de la fila a la izquierda.

Alineación de filas: a la izquierda

Dimensión Vaya a la siguiente configuración de tamaño y realice algunos cambios.
Use ancho personalizado: sí

Unidad: %
Ancho personalizado: 67%

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1

Igualar las alturas de la columna: sí
Espacio también, agregamos algunos rellenos personalizados a su fila y columnas.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Columna 1 revestimiento superior: 20 px
Columna 1 revestimiento inferior: 20 px
Columna 2 revestimiento superior: 20 px

Columna 2 revestimiento inferior: 20 px
El borde agregue “14 PX” a las esquinas superior izquierda, esquina superior derecha e inferior izquierda.
Sombra de caja y complete el diseño de la fila agregando un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,17)
Agregue el módulo de seguimiento de las redes sociales a la alineación de la columna 1 En la primera columna, necesitaremos un módulo de seguimiento de las redes sociales. Cambiar la alineación de los elementos.
Alineación del artículo: Centro

Agregue una nueva red social luego, agregue una nueva red social. Usamos dribbble.

Enlace Agregue el enlace a su cartera de dribbble.
Antecedentes de gradiente y cambia los antecedentes de gradiente de la red social.
Color 1: # EA0061

Color 2: #A4C8D
Dirección de gradiente: 136deg

Espacio agregue algunos valores de llenado personalizados.


Revelaje superior: 20 pxCaptuse Inferior: 20 PX

ENLIZACIÓN IZQUIERDA: 20 PX
Revestimiento derecho: 20 PX
Borde y agregue “10px” a cada una de las esquinas de la red social.
Box Shadow Completa el diseño del módulo agregando una sombra sutil de la caja.

Poder de poco claro de la sombra de la caja: 80 px
Color de la sombra: RGBA (0.0,0,0,3)
Agregue el módulo de texto no. 1 en 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:
Texto de fuente: Abrir sans

El peso de la fuente de texto: Ultra Bold

Color de texto: # 000000
Orientación de texto: centro
El espacio crea espacio agregando un borde superior.

Margen superior: 10 PX

Agregue el módulo de texto no. 2 en la columna 2 agrega contenido La segunda forma que necesitamos en la columna 2 es otro módulo de texto.
Configuración de texto Cambie la configuración de texto.
Texto de fuente: Abrir sans
Color de texto: # 898989
Tamaño del texto: 11 PX

Orientación de texto: centro
Clone Row # 2 Después de que haya terminado de cambiar la fila, puede continuar y clonar una vez.

Los módulos de intercambio cambian más los módulos.

Agregue el color de fondo de la columna 1 y luego, agregue un color de fondo 1 en la fila duplicada.
Columna 1 Color de fondo: #DBDBDB
Elimine el color 2 del color de fondo y luego retire el color de fondo de la columna 2.
Cambie la alineación de las filas Cambie y alinee las filas.
Alineación de filas: correcto

Cambie el tamaño de la fila junto con el ancho personalizado desde la configuración del tamaño.

Ancho personalizado: 66.99%

Cambie el borde de la fila también, nos aseguramos de que “14 PX” se asigne solo a las esquinas de la parte superior derecha y derecha.
Cambie la red de seguimiento social, continúe cambiando la red social. Cambie los antecedentes de la red de seguimiento social junto con los antecedentes de gradiente.

Color 1: # 0043ff

Color 2: # 00 al frente
Clon ambas hileras de persecución social Después de haber terminado ambas filas de persecución social, puedes clonar cada una de ellas.

Cambie el borde del duplicado no. 1 Cambie las esquinas redondeadas del primer duplicado.
Cambie la red de seguimiento social de duplicado no. 1 junto a la red social.

Cambie el fondo de gradiente duplicado no. 1 y el fondo de gradiente.

Color 1: # EA2C59

Color 2: # Fed270
Cambie el borde del duplicado # 2 Continúe cambiando las esquinas redondeadas del segundo duplicado.
Cambie la red de seguimiento social de duplicado no. 2 junto a la red social.

Cambie el fondo de gradiente duplicado no. 2 Y, una vez más, los antecedentes de gradiente que se asigna a la red social.

Color 1: # 00306b

Color 2: # 007BB6

Descargue el BIOS de Social Social de forma gratuita para obtener su mano en secciones gratuitas de seguimiento social móvil, primero deberá descargarlo 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!

Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado de ambos ejemplos que hemos recreado. Ejemplo 1

Ejemplo 2

Pensamientos finales En esta publicación, te mostré cómo crear increíbles biografías de búsqueda social para dispositivos móviles. Puede usar estos modelos como un archivo comercial en línea y puede redirigir a las personas a esta página para que pueda ponerse en contacto o ver sus enlaces de cartera. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.