Descărcați un design unic de urmărire socială cu 5 palete de culori pentru Divi

Site-urile și rețelele sociale merg adesea mână în mână. Rețelele sociale sunt folosite pentru a direcționa traficul către site-uri web, dar și opusul este valabil, mai ales dacă doriți să creșteți implicarea pe rețelele dvs. sociale. De aceea, majoritatea site-urilor web includ link-uri către rețelele lor sociale pe diverse pagini. Puteți merge cu modul clasic și puteți adăuga pictograme sau puteți încerca o abordare mai unică.

Am creat un design de urmărire socială uimitor și creativ pe care îl puteți descărca și utiliza pe orice site web pe care îl construiți folosind Divi. În plus, v-am oferit și 5 palete de culori diferite, care arată minunat pentru acest design.

Să ajungem la asta!

previzualizare

Să începem prin a arunca o privire asupra diferitelor variante ale acestui design și a vederii pe diferite dimensiuni ale ecranului.

Descărcați gratuit Designul Social Follow

Pentru a pune mâna pe designul social follow cu 5 palete de culori diferite, va trebui mai întâi să le descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Palete de culori

Vă vom ghida pas cu pas în procesul respectiv. Dar înainte de a face acest lucru, mergeți mai departe și alegeți o paletă de culori la alegere și păstrați codurile de culoare aproape. Ne vom referi la numărul de culoare de-a lungul tutorialului.

Paleta # 1

• Culoare # 1: # D09CF1
• Culoare # 2: # 00e2df

Paleta # 2

• Culoare # 1: # ffa0a0
• Culoare # 2: # 10007f

Paleta # 3

• Culoare # 1: # ff3273
• Culoare # 2: # 050042

Paleta # 4

• Culoare # 1: # f954ee
• Culoare # 2: # 00aeff

Paleta # 5

• Culoare # 1: # ffca3a
• Culoare # 2: # ff6005

Recreați designul de urmărire socială de la zero

Adăugați secțiunea nr. 1

Fundal de gradient

Începeți prin adăugarea unei secțiuni obișnuite la o pagină nouă sau existentă. Deschideți setările secțiunii și aplicați un fundal de gradient:

• Culoare 1: Culoare # 1 (Găsiți în Paleta de culori)
• Culoare 2: Culoare # 2 (Găsiți în Paleta de culori)
• Tipul gradientului: radial
• Direcție radială: centru
• Poziția inițială: 6%

Imagine de fundal

Apoi, încărcați modelul de fundal pe care îl puteți găsi accesând folderul descărcat> Model de fundal . Combinați modelul de fundal cu următoarele setări de fundal:

• Dimensiunea imaginii de fundal: dimensiunea reală
• Poziția imaginii de fundal: Centrul de jos
• Repetarea imaginii de fundal: Spațiu

Divizor de top

Deschideți apoi setările divizorului și adăugați un divizor superior.

• Stil divizor: Găsiți în listă
• Culoare divizor: rgba (72,0,79,0.08)
• Înălțimea împărțitorului: 500 px
• Flip divizor: vertical

Separator inferior

Adăugați și un separator inferior.

• Stil divizor: Găsiți în listă
• Culoare divizor: #FFFFFF
• Înălțimea împărțitorului: 500 px

Spațiere

Apoi, accesați setările de spațiere și adăugați o umplutură personalizată.

• Căptușeală superioară: 220 px
• Căptușeală inferioară: 329 px

Animaţie

În cele din urmă, adăugați o animație subtilă la secțiune.

• Stil de animație: Slide
• Direcția animației: Jos
• Intensitatea animației: 2%
• Animație Opacitate de pornire: 100%

Adăugați rând

Structura coloanei

Acum putem adăuga un rând nou folosind următoarea structură de coloane:

Adăugați un modul de text

Adauga continut

Singurul modul de care avem nevoie în acest rând este un modul de text. Adăugați un titlu și un paragraf în caseta de conținut.

Setări text

Apoi, accesați setările de text și faceți câteva modificări.

• Dimensiune text: 16 px
• Înălțimea liniei de text: 2em
• Orientare text: centru
• Culoarea textului: deschis

Setări text H1 / H2

Modificați și setările titlului pe care l-ați ales.

• Font de titlu: Rubik
• Stilul fontului de titlu: majuscule
• Dimensiune text antet: 100 px (desktop), 42 px (tabletă), 32 px (telefon)
• Înălțimea liniei de direcție: 1.2em

Dimensionare

Reduceți lățimea modulului în continuare.

• Lățime: 71%
• Alinierea modulului: centru

Adăugați secțiunea 2

Chiar sub secțiunea anterioară, continuați și adăugați o nouă secțiune obișnuită. Nu este nevoie să modificați setările secțiunii.

Adăugați rând

Structura coloanei

Adăugați un rând folosind următoarea structură de coloane:

Dimensionare

Apoi, faceți rândul lățime completă în setările de dimensionare.

• Faceți acest rând lățime completă: Da

Adăugați modulul de imagine în coloana 2

Încărcați macheta

E timpul să începeți să adăugați module! Începeți prin adăugarea unui modul de imagine în a doua coloană. Încărcați macheta care se potrivește cu paleta de culori pe care ați ales-o. Puteți găsi toate varietățile de machete accesând folderul descărcat> Mașini .

Dimensionare

Modificați și dimensiunea modulului de imagine.

• Lățime: 82% (desktop), 100% (tabletă și telefon)
• Alinierea modulului: centru

Spațiere

Pentru a suprapune modulul de imagine și secțiunea anterioară, adăugați o marjă negativă la modulul de imagine.

• Marja superioară: -300px

Adăugați Blurb Module în coloana 3

Adauga continut

Acum putem adăuga toate rețelele sociale! Pentru a le crea, folosim Blurb Modules. Continuați și adăugați primul modul Blurb la a treia coloană și schimbați conținutul.

Adăugați un link

Adăugați un link către pagina socială în continuare.

Alege pictograma

Alegeți și pictograma.

Culoare de fundal

Continuați accesând setările de fundal și folosind o culoare de fundal ușor transparentă.

• Culoare fundal: rgba (255.255.255,0.79)

Setări pictograme

Apoi, modificați setările pictogramei. Aici, folosim una dintre culorile oficiale Instagram.

• Culoare pictogramă: # fb3958
• Plasarea pictogramelor: stânga

Setări text titlu

Apoi faceți câteva modificări la setările pentru textul titlului.

• Titlu Greutate font: Semi Bold
• Culoarea textului titlului: # fb3958
• Înălțimea liniei de titlu: 1.7em

Spațiere

Pentru a crea o suprapunere cu macheta, vom adăuga câteva valori de spațiere.

• Marja superioară: -170px (desktop), -800 (tabletă), -700 (telefon)
• Marja stângă: -60% (desktop), 0% (tabletă și telefon)
• Marja dreaptă: 60% (desktop), 0% (tabletă și telefon)
• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Frontieră

Ne vom juca și cu setările de frontieră.

• Marginea din stânga sus: 20 px
• Marginea din stânga jos: 20 px
• Lățimea marginii drepte: 5 px
• Culoare margine dreaptă: # fb3958

Box Shadow

Adăugarea unei umbre de cutie va da elementului de design o anumită adâncime.

• Puterea neclarității umbrei cutiei: 80 px
• Puterea răspândirii umbrei cutiei: -11px

Animaţie

În cele din urmă, folosim un stil de animație slide-in pentru a imita efectul de notificare mobil cu care oamenii sunt familiarizați.

• Stil de animație: Slide
• Direcția animației: Stânga

Modul Clona Blurb de trei ori

Pentru a economisi timp, vom clona modulul Blurb de trei ori. Apoi, vom modifica fiecare dintre duplicate pentru a crea rezultatul dorit.

Eliminați marja superioară negativă a duplicatelor

Pentru a menține o imagine de ansamblu bună, vom începe prin a elimina marja personalizată negativă a fiecăruia dintre duplicate.

Setări unice ale modulului Blurb

Blurb Module # 2

Modificare copiere

Deschideți al doilea modul Blurb din a treia coloană și modificați conținutul.

Alege pictograma

Selectați și o altă pictogramă.

Setări pictograme

Schimbați culoarea pictogramei pentru a se potrivi cu rețeaua socială pe care o reprezintă.

• Culoare pictogramă: # 3b5998

Setări text titlu

Folosiți aceeași culoare și pentru culoarea textului titlului.

• Culoarea textului titlului: # 3b5998

Spațiere

Pentru a crea o altă suprapunere pe cealaltă parte a telefonului, modificați valorile spațierii.

• Marja stângă: -170% (desktop), 0% (tabletă și telefon)
• Marja dreaptă: 170% (desktop), 0% (tabletă și telefon)

Frontieră

Modificați apoi setările de margine.

• Colțul din dreapta sus: 20 px
• Colțul din dreapta jos: 20 px
• Lățimea marginii stânga: 5 px
• Culoare margine stângă: # 3b5998

Animaţie

Faceți ca acest modul Blurb să se alunece și de cealaltă parte, cu o mică întârziere.

• Direcția animației: Corect
• Întârziere animație: 100 ms

Blurb Module # 3

Modificare copiere

Al treilea modul Blurb are nevoie și de o copie diferită.

Alege pictograma

Alegeți altă pictogramă în continuare.

Setări pictograme

Schimbați culoarea pictogramei într-una care se potrivește cu rețeaua socială pe care o reprezintă.

• Culoare pictogramă: # 1da1f2

Setări text titlu

Utilizați aceeași culoare pentru culoarea textului titlului.

• Culoarea textului titlului: # 1da1f2

Spațiere

Modificați și setările de spațiere.

• Marja stângă: -80% (desktop), 0% (tabletă și telefon)
• Marja dreaptă: 80% (desktop), 0% (tabletă și telefon)

Frontieră

Schimbați și culoarea chenarului în setările chenarului.

• Culoare margine dreaptă: # 1da1f2

Animaţie

În cele din urmă, adăugați o mică întârziere la animația care există deja.

• Întârziere animație: 200 ms

Blurb Module # 4

Modificare copiere

Pentru ultimul modul Blurb, începem schimbând conținutul.

Alege pictograma

Selectați o altă pictogramă socială în setările Imagine și pictogramă următoare.

Setări pictograme

Faceți ca culoarea pictogramei să se potrivească cu rețeaua socială afișată.

• Culoare pictogramă: # 0077B5

Setări text titlu

Folosiți aceeași culoare pentru textul titlului.

• Culoarea textului titlului: # 0077B5

Spațiere

Împingeți modulul Blurb în partea stângă utilizând și diferite setări de spațiu.

• Marja stângă: -180% (desktop), 0% (tabletă și telefon)
• Marja dreaptă: 180% (desktop), 0% (tabletă și telefon)

Frontieră

Apoi, modificați setările de margine.

• Colțul din dreapta sus: 20 px
• Colțul din dreapta jos: 20 px
• Lățimea marginii stânga: 5 px
• Culoare margine stângă: # 0077B5

Animaţie

Nu în ultimul rând, adăugați o direcție de animație diferită și o anumită întârziere a animației la acest modul Blurb.

• Direcția animației: Corect
• Întârziere animație: 300 ms

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului.

Gânduri finale

În această postare, am împărtășit un design unic de urmărire socială pe care îl puteți descărca gratuit. De asemenea, v-am oferit 5 palete de culori diferite pe care le puteți aplica. Simțiți-vă liber să utilizați fișierele JSON pe orice site web Divi pe care îl creați pentru a spori implicarea socială prin intermediul site-ului dvs. web. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!