Descargue un diseño de seguimiento social único con 5 paletas de colores para Div

Los sitios y las redes sociales a menudo van de la mano. Las redes sociales se utilizan para dirigir el tráfico a los sitios web, pero lo contrario es válido, especialmente si desea aumentar su participación en sus redes sociales. Por lo tanto, la mayoría de los sitios web incluyen enlaces a sus redes sociales en varias páginas. Puede ir con el modo clásico y puede agregar iconos o probar un enfoque más único. Hemos creado un diseño de seguimiento social sorprendente y creativo que puede descargar y usar en cualquier sitio web que cree usando Div. Además, también le ofrecí 5 paletas de colores diferentes, que se ven muy bien para este diseño.
¡Vamos a eso! Vista previa Comencemos por echar un vistazo a las diferentes variantes de este diseño y visión en diferentes tamaños de pantalla.

Descargue el diseño social de seguimiento de forma gratuita para poner su mano en el diseño de seguimiento social con 5 paletas de colores diferentes, primero debe descargarlas 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 el 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!
Color Blades Te guiaremos paso a paso en ese proceso. Pero antes de hacer esto, continúe y elija una paleta de colores y mantenga los códigos de color cerca. Nos referiremos al número de color a lo largo del tutorial.
Paleta # 1
Color # 1: # D09CF1

Color # 2: # 00e2df
Paleta # 2
Color # 1: # FFA0A0

Color # 2: # 10007F
Paleta # 3
Color # 1: # FF3273

Color # 2: # 050042
Paleta # 4
Color # 1: # F954ee

Color # 2: # 00eff
Paleta # 5
Color # 1: # FFCA3a

Color # 2: # FF6005
Recree el diseño de seguimiento social desde cero Agregue la sección no. 1 fondo de gradiente Comience agregando una sección regular a una página nueva o existente. Abra la configuración de la sección y aplique un fondo de gradiente:
Color 1: Color # 1 (encontrar en la paleta de colores)
Color 2: Color # 2 (encontrar en la paleta de colores)
Tipo de gradiente: radial
Dirección radial: centro
Posición inicial: 6%
Imagen de fondo luego Cargue el modelo de fondo que puede encontrar accediendo al modelo de fondo descargado> Modelo de fondo. Combine el modelo de fondo con la siguiente configuración de fondo: Tamaño de imagen de la pared: tamaño real

Posición de la imagen de fondo: el centro inferior
Repetir la imagen de fondo: espacio
El divisor superior luego abra la configuración del divisor y agregue un divisor superior.
Estilo divisor: encontrar en la lista

Color divisor: RGBA (72,0,79,0.08)
Altura del divitor: 500 PX
Divisor de flip: vertical
Separador inferior Agregue un separador inferior.
Estilo divisor: encontrar en la lista

Color divisor: #ffffff
Altura del divitor: 500 PX
Extienda luego, acceda a la configuración del espacio y agregue un relleno personalizado.
Revestimiento superior: 220 PX

Finamiento inferior: 329 PX
La animación eventualmente agrega una animación sutil a la sección.
Estilo de animación: diapositiva

Dirección de la animación: Down
Intensidad de animación: 2%
Opacidad de animación para comenzar: 100%
Agregar fila La estructura de la columna Ahora podemos agregar una nueva fila utilizando la siguiente estructura de columna:
Agregue un módulo de texto Agregar contenido La única forma en que necesitamos en esta fila es un módulo de texto. Agregue un título y párrafo al cuadro de contenido.

Configuración de texto Entonces, acceda a la configuración del texto y realice algunos cambios.

Tamaño de texto: 16 PX

Altura de la línea de texto: 2em
Orientación de texto: centro
Color de texto: Abierto
Configuración de texto H1 / H2 cambia y la configuración del título que ha elegido.
Fuente del título: Rubik

Estilo de fuente de título: mayúscula
Tamaño de texto ante: 100 PX (escritorio), 42 PX (tableta), 32 PX (teléfono)
Altura de la línea de dirección: 1.2em
Dimensión reduce el ancho del módulo. Poco: 71%
Alineación del módulo: centro

Agregue la sección 2 justo debajo de la sección anterior, continúe y agregue una nueva sección habitual. No es necesario cambiar la configuración de la sección.
Agregue la fila La estructura de la columna Agregue una fila utilizando la siguiente estructura de columnas:
Dimensión Entonces, gire el ancho completo en la configuración del tamaño.

Haga esta fila ancho completo: sí

Agregue el módulo de imagen a la columna 2 Cargue El modelo es hora de comenzar a agregar módulos. Comience agregando un módulo de imagen en la segunda columna. Cargue el modelo que coincida con la paleta de colores que ha elegido. Puede encontrar todas las variedades de modelos accediendo a la carpeta descargada> automóviles.

Cambio de dimensión y tamaño del módulo de imagen.
Ancho: 82% (escritorio), 100% (tableta y teléfono)

Alineación del módulo: centro

Espacio para superponer el módulo de imagen y la sección anterior, agregue un margen negativo al módulo de imagen.
Margen superior: -300px
Agregue los módulos de blurb a la columna 3 Agregar contenido ¡Ahora podemos agregar todas las redes sociales! Para crearlos, usamos módulos de propaganda. Continúe y agregue el primer módulo de propaganda a la tercera columna y cambie el contenido.

Agregue un enlace Agregue un enlace a la página social a continuación.
Elija el icono también elija el icono.

El color del sótano continúa accediendo a la configuración de fondo y utilizando un color de fondo ligeramente transparente.


Color de fondo: RGBA (255.255.255.0.79)

Icono de configuración Entonces, cambie la configuración del icono. Aquí, usamos uno de los colores oficiales de Instagram.

Icono de color: # FB3958
Colocación de íconos: izquierda

Configuración de texto de título Luego realice algunos cambios en la configuración del título
Color de texto del título: # FB3958
Altura de la línea de título: 1.7em

Espacio para crear una superposición de diseño, agregaremos algunos valores de espaciado.
Margen superior: -170px (escritorio), -800 (tableta), -700 (teléfono)
Margen izquierdo: -60% (escritorio), 0% (tableta y teléfono)
Margen derecho: 60% (escritorio), 0% (tableta y teléfono)

Revestimiento superior: 20 px
Finamiento inferior: 20 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
También jugaremos una frontera con la configuración de la frontera.
Borde superior izquierdo: 20 px
Izquierda a la izquierda: 20 PX
El ancho del borde recto: 5 px

Color de borde derecho: # FB3958
Box Shadow Agregar una sombra de caja le dará al elemento de diseño una cierta profundidad.
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -11px
Animación Eventualmente, utilizamos un estilo de animación deslizante para imitar el efecto de notificación móvil con el que las personas están familiarizadas.

Estilo de animación: diapositiva
Dirección de la animación: izquierda
Modo de cálculo de Clona Tres veces Para ahorrar tiempo, clonaremos el módulo de la propaganda tres veces. Luego cambiaremos cada uno de los duplicados para crear el resultado deseado.

Elimine el margen superior negativo de los duplicados para mantener una buena imagen general, comenzaremos eliminando el margen personalizado negativo de cada uno de los duplicados.
Configuración única del módulo de propaganda módulo n.
Elija el icono seleccionar y otro icono.

Ícono de configuración Cambie el color del icono para que coincida con la red social que representan.

Configuración del texto del título Use el mismo color para el color del texto del título.

El color del texto del título: # 3B5998

Espacio para crear otra superposición en el otro lado del teléfono, cambie los valores de espaciado.

Margen izquierdo: -170% (escritorio), 0% (tableta y teléfono)
Margen derecho: 170% (escritorio), 0% (tableta y teléfono)

Borde luego cambia la configuración del borde.
Esquina superior derecha: 20 px

Esquina en la parte inferior derecha: 20 px
Ancho del borde izquierdo: 5 PX
Color del borde izquierdo: # 3B5998

La animación hace que este módulo de propaganda se deslice en el otro lado, con un pequeño retraso.
Dirección de la animación: correcto
Animación de retraso: 100 ms
Módulo de propaganda # 3 Modificación Copiar El tercer módulo de blurbs también necesita una copia diferente.
Elija el icono Elija otro icono más.

Ícono de configuración Cambia el color del icono en uno que coincida con la red social que representan.
Icono de color: # 1da1f2
Configuración del texto del título Use el mismo color para el color del texto del título.

Color de texto del título: # 1DA1F2

La espartación modifica y se establece la espacios.

Margen izquierdo: -80% (escritorio), 0% (tableta y teléfono)
Margen derecho: 80% (escritorio), 0% (tableta y teléfono)

El borde cambia el color del borde en la configuración del borde.
Color de borde derecho: # 1DA1F2

La animación finalmente agrega un pequeño retraso a la animación que ya existe.
Retraso de animación: 200 ms
Módulo de propaganda # 4 Modificación de copia Para el último módulo de blurb, comenzamos a cambiar el contenido.

Elija el icono Seleccione otro icono social en la siguiente imagen y configuración del icono. La configuración del icono hace que el color del icono coincida con la red social mostrada.
Icono de color: # 0077b5

Configuración de texto de título Use el mismo color para el texto del título.
Color de texto del título: # 0077B5

Espacio empuje el módulo de la propaganda en el lado izquierdo usando diferentes configuraciones de espacio.

Margen izquierdo: -180% (escritorio), 0% (tableta y teléfono)

Margen derecho: 180% (escritorio), 0% (tableta y teléfono)
Borde luego cambia la configuración del borde.

Esquina superior derecha: 20 px
Esquina en la parte inferior derecha: 20 px

Ancho del borde izquierdo: 5 PX
Color del borde izquierdo: # 0077B5
Por último, pero no menos importante, agregue una dirección de animación diferente y un cierto retraso en la animación a este módulo de propaganda.

Dirección de la animación: correcto
Animación de retraso: 300 ms
Vista previa ahora, que hemos dado todos los pasos, para echar un vistazo final al resultado.
Pensamientos finales En esta publicación, compartimos un diseño de seguimiento social único que puede descargar de forma gratuita. También te ofrecí 5 paletas de colores diferentes que puedes aplicar. Siéntase libre de usar archivos JSON en cualquier sitio web de Divic que cree para mejorar la participación social a través de su sitio web. Si tiene alguna pregunta o sugerencia, asegúrese de dejar un comentario en la sección de comentarios a continuación.