Cum să creați un dispozitiv mobil de urmărire socială frumos cu Divi (descărcare gratuită!)

Când vă creați site-ul personal, vă ajută să aveți o pagină de biografie de urmărire socială la care să puteți conecta cu ușurință. Face o carte de vizită online excelentă, cu un rezumat al ceea ce faci și unde oamenii îți pot vedea munca. Informațiile care sunt partajate în cadrul bios-urilor mobile de urmărire socială sunt, de obicei, limitate la imaginea, numele, titlul postului dvs., o descriere mică și linkuri de portofoliu. De asemenea, puteți adăuga un CTA suplimentar pentru a ajuta vizitatorii să ia legătura cu dvs.

În această postare, vă vom arăta cum să creați două biouri frumoase de urmărire socială mobilă folosind Divi. La sfârșitul tutorialului, vom distribui și fișierele JSON ale ambelor exemple, astfel încât să puteți începe imediat.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra celor două exemple pe care le vom recrea de la zero.

Exemplul 1

Exemplul 2

Începeți să recreați exemplul nr. 1

Adăugați o secțiune nouă

Culoare de fundal

Să începem cu primul exemplu! Creați o pagină nouă sau deschideți una existentă și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și adăugați o culoare de fundal alb.

• Culoare fundal: #ffffff

Spațiere

Apoi, accesați setările de spațiere ale secțiunii și faceți câteva modificări. Veți observa că valorile diferă în funcție de dimensiunea ecranului. Păstrăm același tip de design subțire pe diferite dimensiuni de ecran, modificând căptușeala din stânga și din dreapta pe măsură ce mergem.

• Căptușeală superioară: 50 px (desktop și tabletă), 0 px (telefon)
• Căptușeală inferioară: 50 px (desktop și tabletă), 0 px (telefon)
• Căptușeală stângă: 36vw (desktop), 23vw (tabletă), 0vw (telefon)
• Căptușeală dreaptă: 36vw (desktop), 23vw (tabletă), 0vw (telefon)

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și adăugați o culoare de fundal.

• Culoare fundal: # 333333

Dimensionare

Apoi, accesați setările de dimensionare din fila de proiectare și eliminați tot spațiul personalizat dintre coloană și rând.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Box Shadow

De asemenea, adăugăm o umbră de casetă pentru a crea o anumită adâncime pe dimensiuni mai mari ale ecranului.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați un modul de imagine

Incarca imaginea

E timpul să începeți să adăugați module! Începeți cu un modul de imagine care are un raport 1: 1. Imaginea pe care o folosim, de exemplu, are lățimea și înălțimea de „500 px”.

Aliniere

După ce ați încărcat imaginea, accesați fila de proiectare și modificați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Reducem dimensiunea imaginii modificând lățimea în setările de dimensionare următoare.

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

Frontieră

De asemenea, transformăm imaginea într-un cerc adăugând „50vw” la fiecare colț din setările de margine. În plus, vom adăuga un chenar alb folosind următoarele setări:

• Lățimea chenarului: 8 px
• Culoare margine: #ffffff

Box Shadow

Nu în ultimul rând, adăugați o umbră de cutie pentru a crea un design dimensional.

• Box Shadow Vertical Position: 40 px
• Puterea neclarității umbrei cutiei: 100 px
• Culoare umbră: # 000000

Adăugați modulul de text nr. 1

Adăugați conținut H3

Treci la modulul următor! Adăugați un modul de text chiar sub modulul de imagine cu un conținut H3.

Setări text H3

Continuați accesând fila de proiectare și modificând setările de text H3.

• Rubrica 3 Font: Deschideți Sans
• Titlul 3 Greutate font: Semi Bold
• Titlul 3 Aliniere text: centru
• Rubrica 3 Culoarea textului: #ffffff
• Titlul 3 Înălțimea liniei: 0,1em

Spațiere

De asemenea, adăugăm câteva margini superioare pentru a crea spațiu între modulul imagine și acest modul text.

• Marja superioară: 30 px

Adăugați modulul de text nr. 2

Adauga continut

Următorul modul de care avem nevoie este un alt modul de text. Adăugați titlul postului dvs. în caseta de conținut.

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Font text: Deschideți Sans
• Greutatea fontului textului: regulat
• Culoarea textului: # 919191
• Orientare text: centru

Adăugați modulul de text nr. 3

Adauga continut

Continuați adăugând un alt modul de text cu o scurtă descriere a dvs.

Setări text

Accesați setările de text și faceți câteva modificări.

• Font text: Deschideți Sans
• Culoarea textului: # b7b7b7
• Înălțimea liniei de text: 1.6em
• Orientare text: centru

Dimensionare

Modificați și lățimea modulului.

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

Spațiere

Și adăugați niște margini de sus și de jos pentru a crea spațiu suplimentar.

• Marja superioară: 30 px
• Marja inferioară: 30 px

Adăugați un modul buton

Adăugați o copie

Următorul și ultimul modul de care avem nevoie în acest rând este un modul buton. Adăugați o copie.

Aliniere

Apoi, accesați fila de proiectare și schimbați alinierea butonului pentru a se potrivi cu modulele anterioare.

• Aliniere buton: centru

Setări buton

Continuați schimbând aspectul butonului în setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 13 px
• Culoarea textului butonului: #ffffff
• Culoare 1: # ad32ff
• Culoare 2: # 32baff
• Direcția gradientului: 96 grade
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 30 px
• Buton Font: Deschideți Sans
• Greutatea fontului: Ultra Bold
• Stilul fontului: majuscule

Spațiere

Adăugați câteva margini personalizate și umplere în continuare.

• Marja inferioară: 50 px
• Căptușeală superioară: 15 px
• Căptușeală inferioară: 15 px
• Căptușeală stângă: 50 px
• Căptușeală dreaptă: 50 px

Box Shadow

Și finalizați designul butoanelor adăugând o umbră de casetă.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0.69)

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor! Utilizați următoarea structură de coloane:

Fundal de gradient

Fără a adăuga încă module, deschideți setările rândului și adăugați un fundal de gradient:

• Culoare 1: # 1e1e1e
• Culoare 2: # 3f3f3f
• Tipul gradientului: radial
• Direcție radială: stânga sus
• Poziția inițială: 26%
• Plasați gradientul deasupra imaginii de fundal: Da

Imagine de fundal

Salvați următoarea imagine pe computer și utilizați-o ca imagine de fundal pentru rând:

Împreună cu următoarele setări de fundal:

• Dimensiunea imaginii de fundal: dimensiunea reală
• Poziția imaginii de fundal: Centru
• Repetarea imaginii de fundal: fără repetare
• Amestec de imagine de fundal: lumină puternică

Dimensionare

Apoi, accesați fila de proiectare și eliminați tot spațiul dintre coloane și rând. Acest lucru ne va ajuta să profităm din plin de spațiul pe rând pe care îl obținem.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Spațiere

Adăugați câteva căptușeli personalizate în continuare.

• Căptușeală superioară: 84 px
• Căptușeală inferioară: 84 px
• Căptușire stângă: 4vw (desktop), 7vw (tabletă), 14vw (telefon)
• Căptușeală dreaptă: 4vw (desktop), 7vw (tabletă), 14vw (telefon)

Box Shadow

Împreună cu o umbră de cutie.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,3)

Afişa

Pentru a ne asigura că toate pictogramele de urmărire socială apar una lângă cealaltă, vom adăuga o singură linie de cod CSS la elementul principal al rândului.

display: flex;

Adăugați modulul Social Media Follow în coloana 1

Aliniere

Primul modul de care avem nevoie în coloana 1 este un modul Social Follow Follow. După ce ați adăugat modulul, schimbați alinierea elementelor în fila de proiectare.

• Alinierea elementului: centru

Adăugați o rețea socială nouă

Continuați adăugând o nouă rețea socială. Pentru acest exemplu, folosim Dribbble.

Legătură

Adăugați un link la profilul dvs. Dribbble.

Fundal de gradient

Apoi, modificați fundalul de gradient utilizând următoarele setări:

• Culoare 1: # ea0061
• Culoare 2: # ea4c8d
• Direcția gradientului: 136deg

Spațiere

Și creșteți dimensiunea modulului adăugând niște umpluturi personalizate.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 20 px
• Căptușeală dreaptă: 20 px

Frontieră

De asemenea, transformăm modulul într-un cerc adăugând „20vw” la fiecare dintre colțurile din setările de margine.

Box Shadow

Nu în ultimul rând, adăugați o umbră de cutie.

• Box Shadow Vertical Position: 20 px
• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: # 000000

Adăugați modulul de text nr. 1 în coloana 1

Adauga continut

Adăugați un modul de text în prima coloană următoare.

Setări text

Schimbați setările de text.

• Font text: Deschideți Sans
• Greutatea fontului textului: Ultra Bold
• Culoarea textului: #ffffff
• Orientare text: centru

Adăugați modulul de text nr. 2 în coloana 1

Adauga continut

Adăugați altul sub cel anterior.

Setări text

Modificați și setările de text ale acestui modul.

• Font text: Deschideți Sans
• Culoarea textului: # 898989
• Dimensiune text: 11 px
• Orientare text: centru

Clonați module în coloana 1 De două ori și plasați duplicatele în coloanele rămase

După ce ați terminat de personalizat toate modulele din coloana 1, puteți continua și le puteți clona de două ori. Plasați duplicatele în cele două coloane rămase ale rândului.

Schimbați rețelele sociale

Desigur, va trebui să schimbați rețelele sociale.

Schimbați legăturile de rețea socială

Împreună cu linkurile.

Schimbați fundalurile gradientului rețelelor sociale

Și fundalurile de gradient de rețea.

• Culoare 1: # 0043ff
• Culoare 2: # 00 în față

• Culoare 1: # ea2c59
• Culoare 2: # fed270

Începeți să recreați exemplul nr. 2

Adăugați o secțiune nouă

Culoare de fundal

Trecem la următorul exemplu! Adăugați o nouă secțiune cu o culoare de fundal albă.

• Culoare fundal: #ffffff

Spațiere

Adăugați câteva căptușeli personalizate în continuare.

• Căptușeală superioară: 50 px (desktop și tabletă), 0 px (telefon)
• Căptușeală inferioară: 50 px (desktop și tabletă), 0 px (telefon)
• Căptușeală stângă: 36vw (desktop), 23vw (tabletă), 4vw (telefon)
• Căptușeală dreaptă: 36vw (desktop), 23vw (tabletă), 4vw (telefon)

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, accesați fila de proiectare a setărilor rândului și modificați setările de dimensionare.

• Faceți acest rând lățime completă: Da
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1

Adăugați un modul de imagine

Incarca imaginea

E timpul să începeți să adăugați module! Primul modul de care avem nevoie este un modul de imagine cu un raport 1: 1.

Aliniere

Schimbați alinierea imaginii.

• Aliniere imagine: centru

Dimensionare

Modificați și lățimea.

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

Frontieră

Și adăugați „20px” la fiecare dintre colțurile din setările de margine.

Box Shadow

Completați designul imaginii adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 51 px
• Culoare umbră: rgba (0,0,0,0.37)

Adăugați modulul de text nr. 1

Adăugați conținut H3

Următorul modul de care avem nevoie este un modul de text. Adăugați un conținut H3 la alegere.

Setări text H3

Modificați setările de text H3 din fila design.

• Rubrica 3 Font: Deschideți Sans
• Titlul 3 Greutate font: Ultra Bold
• Titlul 3 Stilul fontului: majuscule
• Titlul 3 Aliniere text: centru
• Rubrica 3 Culoarea textului: # 000000
• Rubrica 3 Spațierea literelor: -1 px
• Rubrica 3 Înălțimea liniei: 0.9em

Spațiere

Adăugați câteva margini superioare în continuare.

• Marja superioară: 30 px

Adăugați modulul de text nr. 2

Adauga continut

Adăugați un alt modul de text.

Setări text

Modificați setările de text.

• Font text: Deschideți Sans
• Culoarea textului: # 919191
• Orientare text: centru

Adăugați rândul # 2

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândului și schimbați culoarea de fundal a rândului.

• Culoare fundal: #ffffff

Coloana 2 Culoare fundal

Adăugați și o culoare de fundal la a doua coloană.

• Coloana 2 Culoare fundal: #efefef

Aliniere

Asigurați-vă că utilizați alinierea rândului din stânga.

• Alinierea rândurilor: la stânga

Dimensionare

Accesați setările de dimensionare următoare și efectuați câteva modificări.

• Utilizați lățimea personalizată: da
• Unitate: %
• Lățime personalizată: 67%
• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da

Spațiere

De asemenea, adăugăm câteva umpluturi personalizate rândului și coloanelor sale.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px
• Coloana 1 Căptușeală superioară: 20 px
• Coloana 1 Căptușeală inferioară: 20 px
• Coloana 2 Căptușeală superioară: 20 px
• Coloana 2 Căptușeală inferioară: 20 px

Frontieră

Adăugați „14 px” în colțurile din stânga sus, din dreapta sus și din colțul din stânga jos.

Box Shadow

Și completați designul rândului adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,17)

Adăugați modulul Social Media Follow în coloana 1

Aliniere

În prima coloană, vom avea nevoie de un modul Social Media Follow. Schimbați alinierea elementelor.

• Alinierea elementului: centru

Adăugați o rețea socială nouă

Apoi, adăugați o rețea socială nouă. Folosim Dribbble.

Legătură

Adăugați linkul în portofoliul dvs. Dribbble.

Fundal de gradient

Și schimbați fundalul de gradient al rețelei sociale.

• Culoare 1: # ea0061
• Culoare 2: # ea4c8d
• Direcția gradientului: 136deg

Spațiere

Adăugați câteva valori de umplere personalizate în continuare.

• Căptușeală superioară: 20 px
• Căptușeală inferioară: 20 px
• Căptușeală stângă: 20 px
• Căptușeală dreaptă: 20 px

Frontieră

Și adăugați „10px” la fiecare dintre colțurile rețelei sociale.

Box Shadow

Completați designul modulului adăugând o umbră subtilă de casetă.

• Puterea neclarității umbrei cutiei: 80 px
• Culoare umbră: rgba (0,0,0,0,3)

Adăugați modulul de text nr. 1 în coloana 2

Adauga continut

Adăugați un modul de text la a doua coloană.

Setări text

Modificați setările de text în consecință:

• Font text: Deschideți Sans
• Greutatea fontului textului: Ultra Bold
• Culoarea textului: # 000000
• Orientare text: centru

Spațiere

Creați spațiu adăugând o margine de sus în continuare.

• Marja superioară: 10 px

Adăugați modulul de text nr. 2 în coloana 2

Adauga continut

Al doilea modul de care avem nevoie în coloana 2 este un alt modul de text.

Setări text

Schimbați setările de text.

• Font text: Deschideți Sans
• Culoarea textului: # 898989
• Dimensiune text: 11 px
• Orientare text: centru

Clona rândul # 2

După ce ați terminat modificarea rândului, puteți continua și clona o dată.

Module swap

Schimbați modulele în continuare.

Adăugați Coloana 1 Culoare de fundal

Apoi, adăugați o culoare de fundal a coloanei 1 la rândul duplicat.

• Coloana 1 Culoare fundal: #dbdbdb

Eliminați Culoarea 2 Culoarea de fundal

Eliminați apoi culoarea de fundal a coloanei 2.

Schimbați alinierea rândurilor

Schimbați și alinierea rândurilor.

• Alinierea rândurilor: corect

Schimbați dimensiunea rândului

Împreună cu lățimea personalizată din setările de dimensionare.

• Lățime personalizată: 66,99%

Schimbați marginea rândului

De asemenea, ne asigurăm că „14 px” este atribuit doar în colțurile din dreapta sus și din dreapta jos.

Schimbați rețeaua de urmărire socială

Continuați schimbând rețeaua socială.

Schimbați fundalul degradării rețelei de urmărire socială

Împreună cu fundalul de gradient.

• Culoare 1: # 0043ff
• Culoare 2: # 00 în față

Clonați ambele rânduri de urmărire socială

După ce ați terminat ambele rânduri de urmărire socială, puteți clona fiecare dintre ele.

Schimbați marginea duplicatului nr. 1

Schimbați colțurile rotunjite ale primului duplicat.

Schimbați rețeaua de urmărire socială a duplicatului nr. 1

Alături de rețeaua socială.

Schimbați fundalul de gradient al duplicatului nr. 1

Și fundalul de gradient.

• Culoare 1: # ea2c59
• Culoare 2: # fed270

Schimbați marginea duplicatului # 2

Continuați schimbând și colțurile rotunjite ale celui de-al doilea duplicat.

Schimbați rețeaua de urmărire socială a duplicatului nr. 2

Alături de rețeaua socială.

Schimbați fundalul de gradient al duplicatului nr. 2

Și, încă o dată, fundalul de gradient care este atribuit rețelei sociale.

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

Descărcați The Mobile Social Follow Bios GRATUIT

Pentru a pune mâna pe secțiunile gratuite de urmărire socială pentru mobil, va trebui mai întâi să o 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 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!

previzualizare

Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului ambelor exemple pe care le-am recreat.

Exemplul 1

Exemplul 2

Gânduri finale

În această postare, v-am arătat cum să creați biografii uimitoare de urmărire socială pentru dispozitive mobile. Puteți utiliza aceste modele ca fișă de vizită online și puteți redirecționa persoanele către această pagină, astfel încât să poată lua legătura sau să vă vadă linkurile din portofoliu. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!