Divi Plugin Highlight: Divi Sensei Before After Slider

Sliderele înainte și după sunt o modalitate excelentă de a permite vizitatorilor să compare două imagini. După cum sugerează și numele, pot fi imagini înainte și după ce ceva este schimbat, cum ar fi pierderea în greutate, o imagine retușată, o cameră decorată, o mașină pictată etc. Bineînțeles, sunt utile pentru mult mai mult decât înainte și după fotografii. Acestea pot fi folosite pentru a compara grafica, produsele, destinațiile de vacanță și multe altele.

În acest articol, vom arunca o privire la glisorul Divi Sensei Before and After, un modul glisant înainte și după pentru Divi Builder, vom vedea ce poate face și vă vom ajuta să decideți dacă aveți nevoie de acest plugin terță parte în Divi trusa de scule.

Modulul glisant Divi Sensei Before and After

Încărcați și instalați pluginul Divi Sensei Before and After în mod normal. Trei nu sunt setări de parcurs. După ce încărcați și activați pluginul, veți vedea un nou modul adăugat la Divi Builder numit Sensei Before and After Slider.

Modulul afișează o imagine anterioară în partea stângă și o imagine ulterioară în partea dreaptă. Afișează o bară glisantă în centru, pe care utilizatorii o pot apuca și glisa dintr-o parte în alta. Plasând cursorul peste imagini se afișează înainte și după etichete și se adaugă o suprapunere. Aveți controlul proiectării asupra fiecăruia dintre aceste elemente.

Să aruncăm o privire la caracteristicile și opțiunile pentru glisor. Pentru aceste exemple, folosesc imagini de pe Unsplash.com.

Fila Conținut

Fila Conținut vă permite să adăugați o imagine înainte, după imagine și etichete. În acest exemplu, am adăugat două versiuni diferite ale aceleiași imagini pentru a crea imaginea înainte și după. Acest lucru este util pentru a afișa rezultatele unei fotografii retușate. Opțiunile includ, de asemenea, setările standard pentru link, fundal și etichetă de administrator.

De asemenea, oferă câmpuri în care puteți modifica textul etichetelor înainte și după. Plutesc peste imagini pentru a dezvălui etichetele. Acestea se afișează numai în modul implicit, dar puteți schimba acest lucru.

Fila de proiectare

Fila Proiectare include setări pentru glisor, etichete și suprapunere. Include, de asemenea, setările standard pentru dimensionare, spațiere, margine, umbră cutie, filtre, transformare și animație.

Glisor

Setările glisorului vă permit să alegeți direcția glisorului între orizontală și verticală, să setați decalajul de pornire pentru a determina de unde începe imaginea glisorului și să schimbați culorile glisorului, mânerului, fundalului mâinii și pictogramei mânerului. Am ajustat fiecare dintre aceste setări în exemplul de mai sus.

Etichete

Pentru etichete, puteți să le afișați întotdeauna sau să le afișați numai pe hover și să ajustați fundalurile și fonturile. Culorile de fundal includ culori solide și ajustări ale opacității. Puteți regla fundalurile individual, dar nu vă permite să reglați culorile textului individual. De asemenea, puteți alege fonturile, puteți modifica dimensiunile, stilul, alinierea, înălțimea liniei, adăugați o umbră etc. Înălțimea liniei setează dimensiunea fundalului.

În exemplul de mai sus, am specificat culorile fundalului și fontului, am modificat dimensiunea fonturilor și dimensiunea înălțimii liniei. De asemenea, le-am setat să se afișeze întotdeauna astfel încât să fie vizibile fără ca utilizatorul să fie nevoit să treacă peste imagini pentru a le vedea.

Acoperire

Suprapunerea este activată în mod implicit. Îl puteți dezactiva, regla culoarea și regla opacitatea. Culoarea implicită este negru cu 50% opacitate.

Am selectat albastru în acest exemplu și am lăsat opacitatea la 50%. Permiterea afișării imaginii în timp ce plasați cursorul pare să funcționeze cel mai bine. Indiferent dacă utilizați o culoare deschisă sau întunecată și cantitatea de opacitate pe care ați setat-o ​​va fi determinată de culorile din imagine și de modul în care doriți să utilizați suprapunerea.

Pentru acest exemplu, am folosit o schemă de culori alb-negru. Textul suprapus și al etichetei este alb, iar elementele glisante sunt negre. Am redus opacitatea fundalurilor etichetei pentru a le întuneca. Le-am lăsat la dimensiunile lor implicite.

Divi Sensei Exemple glisante înainte și după

Să ne uităm la câteva exemple de moduri în care glisorul poate fi folosit și cum arată în aspectele Divi. Folosesc imagini de la Unsplash și cele care sunt disponibile în aspectele gratuite Divi care sunt încorporate în Divi. Voi identifica aspectele Divi pe care le folosesc pe măsură ce merg.

Comparație grafică

Pentru aceasta, am folosit elemente de design din pachetul de aspect Divi Video Game. Am dezactivat suprapunerea, am schimbat elementele glisante în verde și am făcut ca etichetele să fie afișate întotdeauna. Fundalul pentru etichete este albastru continuu. Am mărit dimensiunea fontului, am schimbat culoarea, am folosit familia de fonturi Rubik, am făcut mediul cu greutatea fontului și le-am făcut cu majuscule. Salutări dacă ați deținut sau ați jucat aceste sisteme de jocuri și știți de ce această comparație grafică inventată nu poate exista.

Așa arată în aspect. Este excelent pentru a face comparații precum această machetă a graficelor două mașini de joc diferite.

Servicii înainte și după portofoliu

Acest exemplu imită ideea unei camere înainte și după efectuarea renovării. Când cele două imagini au dimensiuni diferite, va folosi dimensiunea pentru imaginea mai mare, iar imaginea mai mică va arăta un spațiu. Va plasa înălțimile sau lățimile în mod egal și va completa restul ca spațiu gol. În acest exemplu, imaginea din dreapta este mai scurtă decât imaginea din stânga. Deși imaginile de aceeași dimensiune funcționează mai bine, totuși funcționează bine cu imaginile apropiate de aceeași dimensiune.

Am adăugat culori și fonturi din pachetul de aspect Home Improvement. Iată cum arată într-o porțiune a aspectului.

Iată cum arată cu suprapunerea. Am mutat glisorul într-o parte pentru a arăta mai mult din imaginea anterioară.

Pentru referință, iată imaginea cu mânerul mutat pentru a afișa mai mult din imaginea de după.

Compararea produsului

Pentru acest exemplu, înlocuiesc cele trei imagini de ceai din aspectul Tea Shop cu 3 glisoare DS B&A. Folosesc culori din aspect pentru butoane și comenzi glisante. Glisorul din mijloc este setat pe verticală doar pentru a fi diferit. Suprapunerea utilizează o culoare din aspect cu opacitate scăzută.

Iată cum arată în aspect. Acest lucru este excelent pentru a compara detaliile vizuale ale mai multor produse, locații multiple, culori multiple, pentru produsele care au mai multe opțiuni de afișat cu și fără opțiuni etc.

Compararea locațiilor

În acest exemplu, folosesc glisorul pentru a compara două locații. Nu trebuie să fie similare, ci doar ceva de comparat dintr-un motiv sau altul. Am adăugat culori din aspect pentru glisor și etichete, precum și fonturi pentru etichete. Am adăugat, de asemenea, o umbră de cutie pentru a o distinge de restul imaginilor.

Iată cum arată în pachetul de aspect Siteseeing folosind culori din aspect. Acesta este un bun exemplu al modului în care cele două imagini nu trebuie să fie înainte și după același lucru sau chiar lucruri similare. Acesta este un mod bun de a arăta locurile de nuntă, locurile de vacanță etc., pentru a ajuta cumpărătorii să aleagă între ele (sau să facă selecția mai dificilă, dar nu recomand asta ca obiectiv).

Cumpărare

Puteți achiziționa Divi Sensei înainte și după glisor pe Divi Marketplace. Costul este de 5 USD pentru utilizarea nelimitată a site-ului web și 1 an de asistență și actualizări. Acest preț include o garanție de 30 de zile de returnare a banilor.

Gânduri de sfârșit

Glisorul Divi Sensei Before and After este un modul simplu. De exemplu, glisorul nu are controale de lățime și etichetele nu includ margini, umbre de casetă, degrade etc., dar setările pe care le-a făcut au facilitat adaptarea stilului fiecărui aspect la care l-am adăugat. Pentru preț și pentru ceea ce poate face, nivelul de setări are sens și am reușit să obțin cu ușurință desenele pe care le doream.

Toate comenzile erau intuitive și nu m-am gândit niciodată să am nevoie de instrucțiuni. Puteți folosi chiar și alte etichete alt pentru imagini pentru a ajuta la îmbunătățirea SEO. Dacă sunteți interesat de un glisor înainte și după ce trebuie utilizat cu site-urile dvs. web Divi, glisorul Divi Sensei înainte și după ce merită luat în considerare.

Vrem sa auzim de la tine. Ați încercat Divi Sensei înainte și după Slider? Spuneți-ne ce părere aveți despre asta în comentariile de mai jos.

Imagine prezentată prin Elvetica / shutterstock.com