Proiectați o secțiune de caracteristici unice în Divi cu pictograme animate de contoare Circle

Majoritatea site-urilor web au nevoie de o secțiune de funcții bine concepută pentru a afișa caracteristicile produselor sau serviciilor. Deci, în acest tutorial, vă voi arăta cum să creați o secțiune de caracteristici unică în Divi. Pentru a face acest lucru, vom deveni puțin creativi cu modulul Divi's Circle Counter, pentru a adăuga animație pictogramelor dvs. de blurb. Și prin utilizarea unor spații personalizate, vă voi arăta cum puteți poziționa cu ușurință blurbs pentru a coincide frumos cu un fundal divizor. Designul final este atât curat, cât și unic. Și cu câteva atingeri minore, poate fi o completare excelentă la următorul dvs. proiect.

Să începem!

Trage cu ochiul

Iată o scurtă privire despre design și gif pentru a ilustra elementul de animație.

Crearea unei pagini noi și implementarea Visual Builder

Pentru a începe lucrurile, accesați tabloul de bord WordPress și accesați Pagini> Adăugare nouă. Apoi acordați-vă paginii un titlu și faceți clic pentru a utiliza Divi Builder. Apoi faceți clic pentru a utiliza Visual Builder. Vi se va solicita trei opțiuni. Alegeți opțiunea „Build From Scratch”.

Pânza ta goală așteaptă!

Crearea antetului secțiunii de caracteristici

Antetul de sus pentru secțiunea de caracteristici este destul de simplu. Elementul unic este umbra subtilă a casetei afișată dedesubt pentru a conferi puțină adâncime designului.

Pentru a-l crea, introduceți un rând cu o coloană în secțiunea obișnuită.

Apoi adăugați un modul text la rând și actualizați setările după cum urmează:

Conţinut:

<h1>Our Features</h2>
Everything you need.

Font text: Montserrat
Greutatea fontului textului: Semi Bold
Dimensiune text text: 22 px
Orientare text: centru
Greutatea fontului de titlu: Ultra Bold
Dimensiune text antet: 6vw (desktop), 50 px (tabletă), 30 px (smartphone)

Acum salvați setările și treceți la setările secțiunii și adăugați o umbră de casetă după cum urmează:

Box Shadow: vezi captura de ecran
Box Shadow Vertical Position: 19 px
Puterea neclarității umbrei cutiei: 80 px
Puterea răspândirii umbrei cutiei: -16px
Culoare umbră: rgba (136.150.171,0.13)

Salvează setările.

Lucruri destul de simple. Acum să trecem la partea distractivă.

Crearea secțiunii de caracteristici principale și proiectarea fundalului

Trebuie să adăugăm o nouă secțiune pentru a ne păstra caracteristicile. În mod normal, ați putea adăuga pur și simplu un nou rând la secțiunea anterioară, dar în acest caz trebuie să adăugăm un fundal divizor care este disponibil în elementul Secțiune.

Continuați și adăugați o nouă secțiune direct sub secțiunea pe care tocmai ați terminat-o. Apoi adăugați un aspect cu patru coloane la rând.

Vom adăuga blurbs la aceste coloane, dar deocamdată să actualizăm setările secțiunii noastre.

Pentru această secțiune, trebuie să îi oferim o lățime maximă personalizată. Acest lucru este important pentru a menține designul la locul său pe dimensiuni mai mari ale browserului. De asemenea, trebuie să adăugăm o secțiune Divider pentru a servi ca fundal care coincide cu aranjamentul blurbs-urilor noastre (mai multe despre acest lucru mai târziu).

Accesați setările secțiunii și actualizați următoarele:

Lățime: 1080px
Alinierea secțiunii: centru
Divizoare: Sus
Stil divizor: vezi captura de ecran
Culoare divizor: rgba (136.150.171,0.07)
Înălțimea împărțitorului: 52%

Salvează setările.

Acordarea secțiunii la o lățime personalizată (sau lățime maximă) de 1080px este practic modul în care rândurile dvs. sunt configurate în mod implicit într-o secțiune. Deci, în esență, realizăm întreaga noastră secțiune de mărimea unui rând implicit.

Adăugarea de Blurbs la rândul celor patru coloane

În acest moment putem merge mai departe și putem începe să adăugăm blurbs la fiecare dintre cele patru coloane. Faceți clic pe pictograma gri din prima coloană pentru a adăuga prima dvs. combinație. Actualizați conținutul din casetă pentru a include mai puțin text (2 propoziții), apoi alegeți să folosiți o pictogramă în locul unei imagini (am ales pictograma imagine).

Sub fila Proiectare, actualizați următoarele:

Culoare pictogramă: # 974450
Pictogramă cerc: DA
Culoare cerc: rgba (255,255,255,0,5)
Utilizați dimensiunea fontului pictogramei: DA
Pictogramă Dimensiune font: 48 px
Orientare text: centru

Salvează setările.

Acum copiați și lipiți modulul blurb în fiecare dintre coloanele rămase, astfel încât să aveți un blurb în fiecare coloană.

Puteți să vă întoarceți și să actualizați pictogramele dacă doriți în acest moment, dar nu trebuie.

Adăugați contoare de cercuri pentru a suprapune pictogramele Blurb

Pentru a adăuga animația la pictogramele noastre, vom suprapune fiecare pictogramă cu un contor de cercuri care are o valoare de număr diferită. Acest lucru va face ca animația cercului să crească treptat cu fiecare pictogramă pentru a arăta progresia. Cu toate acestea, puteți utiliza orice valoare nubmer doriți cu fiecare contor de cercuri.

Faceți clic pe pictograma gri „Adăugați un modul nou” de sub modulul blurb din prima coloană și apoi adăugați modulul contor.

Înainte de a începe să editați setările modulului cerc, continuați și trageți-l deasupra modulului de blurb. Acum puteți actualiza setările de conținut după cum urmează:

Ștergeți textul din caseta de titlu
Număr: 25

Apoi actualizați setările filei de proiectare după cum urmează:

Culoarea fundalului barei: # 974450 (aceeași culoare ca și pictogramele dvs. blurb)
Culoare text număr: rgba (0,0,0,0) (aceasta este complet transparentă, astfel încât să ascundă numărul)
Număr text Dimensiune: 0 px (pentru a scăpa de orice spațiu text nedorit din cadrul cercului)
Lățime: 109 px (aceasta a fost setată pe baza dimensiunii pictogramei pe care se va suprapune)
Alinierea modulului: centru
Marja de jos: -102px (acest lucru se va suprapune perfect cu pictograma)

Salvează setările.

Acum tot ce trebuie să faceți este să copiați și să lipiți modulul contorului de cercuri în fiecare dintre coloanele rămase și apoi să-l trageți în partea de sus a fiecărei coloane. După ce contoare de cercuri duplicate sunt la locul lor, actualizați al doilea număr de contoare de cercuri la 50, al treilea număr de contoare la 75 și al patrulea număr de contoare la 100. Rezultatul ar trebui să arate astfel după finalizarea animației.

Utilizați Radd Padding pentru a poziționa pictogramele pentru a coincide cu divizorul

Ultimul pas către acest design este poziționarea icoanelor pentru a coincide cu arcul fundalului divizor. Pentru a face acest lucru, trebuie să adăugăm câteva umpluturi personalizate pe rând. Deschideți setările rândului și actualizați următoarele:

Faceți acest rând lățime completă: DA
Coloana 2 Căptușeală personalizată: 9% sus (desktop), 0% sus (tabletă)
Coloana 3 Căptușeală personalizată: 9% sus (desktop), 0% sus (tabletă)

Asta e!

Verificați rezultatul final.

Observați cum pictogramele sunt acum animate de contorul de cercuri cu valori de număr diferite. Iar icoanele coincid cu fundalul divizorului.

Cum arată secțiunea de funcții pe mobil

Iată cum arată aspectul designului pe ecranele tabletelor și smartphone-urilor.

Gânduri finale

Elementele unice ale designului acestei secțiuni caracteristice sunt ușoare și subtile, ceea ce ar trebui să vă faciliteze încorporarea în propriile structuri cu câteva ajustări minore. Și dacă animațiile contorului de cercuri nu sunt ceașca dvs. de ceai, nu ezitați să le lăsați afară și pur și simplu utilizați pictograma cerc a modulului blurb. Sau puteți alege să utilizați numai contoare de cercuri cu valorile numerice vizibile pentru un aspect creativ pentru prezentarea statisticilor. În orice caz, sper că acest lucru vă va oferi câteva idei de explorat pe cont propriu.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!