Ați căutat vreodată să creați un monitor de progres vertical în loc de o bară de defilare tradițională? Dacă nu, atunci răsfoiți acest articol până la sfârșit pentru a afla cum să îl creați Elementor Pro.
Dar înainte de a aborda tema principală, să ne amintim mai întâi ce este un instrument de urmărire a progresului.
Un indicator de progres este un indicator de progres care informează utilizatorul despre progresul unui proces în desfășurare, cum ar fi instalarea unei aplicații, actualizarea, citirea unui articol etc. Și există două tipuri:
- le urmăritor liniar de progres
- le urmăritor de progres circular
De asemenea, puteți citi: Elementor: Cum să creați o carte de efect dintr-un portofoliu
În acest tutorial, vă vom arăta cum să inserați un indicator de progres vertical pas cu pas într-o secțiune care conține arhivele posturilor.
Creați un instrument de urmărire a progresului
În filă element din panoul de instrumenteElementor, tastați în bara de căutare Urmărirea progresului. Apoi trageți widgetul într-o secțiune.
Apoi apare un indicator de progres. În mod implicit, este orientat orizontal. Dar nu-ți face griji, vei vedea mai târziu cum să-l aranjezi vertical.
Indicatorul de progres fiind creat, să facem modificările necesare pentru a obține rezultatul dorit.
Vezi și: Elementor: Cum să creați o carte de efect dintr-un portofoliu
Editați conținutul monitorului de progres
Aici vei alege tipul de tracker și cu ce are legătură.
Setările principale sunt:
- tracker tipic: aici valoarea implicită este Orizontală. Cu toate acestea, atunci când derulați în jos în listă, tipul circulară vi se oferă și vouă. Păstrați valoarea implicită.
- Progres relativ la: în această a doua setare, alegeți valoarea selector. Această alegere va aduce o setare suplimentară: Selector.
- Selector: Acest câmp este destinat să primească identificatorul obiectului la care va fi atașat tracker-ul.
Să selectăm arhiva publicațiilor deoarece este elementul la care este atașat trackerul nostru.
În panoul de setări, accesați fila Avansat, apoi completați o valoare în câmp ID CSS.
Apoi, reveniți la panoul de urmărire și completați câmpul Selector din meniu cuprins.
În cele din urmă, setați orientarea indicatorului de progres la dreapta.
Schimbați stilul urmăritorului de progres
În acest pas, vom configura parametrii indicatorului de progres, precum și fundalul acestuia din urmă.
Începeți prin a seta indicatorul de progres.
- Ajustare culoarea progresului vă permite să alegeți între o progresie clasică și o progresie în gradient. În exemplul nostru, alegeți prima opțiune. Oricum, indiferent de alegere, apare setarea culoare.
- Set lare culoare folosind paleta globală de culori sau selectorul de culori.
- Tipul de chenar: aveți aici șase propuneri (nici unul, plin, dublu, punctat, punctat, groove). Optează pentru un chenar complet.
- Lățimea: Acest lucru este pentru a da grosime marginii indicatorului de progres.
- Raza frontierei: În mod implicit, indicatorul de progres arată ca un dreptunghi. Modificându-și raza, extremitățile sale devin rotunjite.
În cele din urmă, setați pârtii setări de fundal. Observați că sunt aproape aceleași setări care revin. Limitați-vă așadar la cele menționate anterior.
Schimbați opțiunile avansate de urmărire a progresului
Pentru a ne finaliza munca, vom seta următoarele file: efecte de mișcare, Transformare și CSS personalizate.
Să începem mai întâi cu fila CSS personalizate. Selectați-l, apoi introduceți următorul cod în câmpul corespunzător. Permite definirea lățimii trackerului. Deci, setează lățimea la 50% din înălțimea ferestrei.
Apoi, rotiți trackerul în direcția verticală. Pentru a face acest lucru, selectați submeniul Transformator, activați rotația, apoi introduceți 90 în câmpul gol. Acest lucru va roti widgetul nostru cu 90 de grade, oferindu-vă poziția verticală dorită.
Pentru a alinia widget-ul nostru la același nivel cu primele postări, aplicați un offset de 145.
La acest nivel, dacă derulăm pagina noastră, veți vedea că indicatorul nostru de progres dispare în timp ce derulăm cuprins.
Pentru a depăși această problemă, veți deschide fila Efecte de mișcare, apoi drop-down comanda Pin și selectați de mai jos.
De data aceasta, derulând în jos, putem vedea urmăritorul nostru de progres populând treptat pe măsură ce ne deplasăm prin arhiva noastră de postări.
Obțineți Elementor Pro acum!
Concluzie
Asa de ! Asta este pentru acest articol care vă arată cum să creați un monitor de progres vertical.
Adăugarea de elemente interactive, cum ar fi indicatorul de progres vertical, atunci când vă creați site-ul web poate duce cu adevărat la următorul nivel făcându-l mai intuitiv. În plus, acesta poate fi legat la o pagină întreagă sau la cuprins a unei publicații și chiar la orice alt element specific al unei pagini. A ști cum să-l folosești ar fi, prin urmare, un avantaj suplimentar.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
