Cum se creează un glisor de comparare a imaginilor în Elementor

Succesul oricărui design web de astăzi depinde în mare măsură de cât de eficient își comunică vizual mesajele și ideile utilizatorilor. Glisorul pentru compararea imaginilor este un concept puternic care poate ridica puterea vizuală a povestirii site-ului dvs. la nivelul următor. Puteți face cu ușurință aceste glisoare folosind un instrument WordPress.

Elementor vă poate ajuta în acest sens. Acest plugin puternic de generare de pagini vă permite să creați slidere de comparare a imaginilor uimitoare și captivante pe site-ul dvs. fără nicio codificare. În această postare pe blog, vom acoperi un tutorial detaliat care explică cum să creați un glisor de comparare a imaginilor în Elementor.

Înainte de aceasta, vom discuta pe scurt ce este glisorul de comparare a imaginilor și câteva dintre cazurile sale speciale de utilizare.

Ce este glisorul de comparare a imaginilor?

Glisorul de comparare a imaginilor este un element web care permite utilizatorilor și vizitatorilor să vizualizeze două imagini una lângă alta și să le compare cu un separator. Puteți vedea efectul glisând separatorul înainte și înapoi. Această caracteristică/element web vă permite să prezentați vizual scenariile înainte și după orice produs sau informații, evidențiind diferențele dintre acestea.

Câteva cazuri speciale de utilizare ale glisorului de comparare a imaginilor

Mai jos, am enumerat câteva cazuri speciale de utilizare în care glisorul de comparare a imaginilor vă poate îmbunătăți povestirea vizuală. Aruncă o privire rapidă la ele pentru inspirație.

• Înainte și după comparație vizuală

Acest lucru este util în special în industrii precum modă, fitness, frumusețe, design, renovare a casei etc., unde puteți arăta transformarea rezultată dintr-un produs sau serviciu.

• Evidențiați Editare fotografie

Dacă sunteți fotograf sau designer grafic, vă puteți prezenta abilitățile de editare comparând fotografiile editate și needitate.

• Rezultate de la tratamente și transformări

Această caracteristică este folosită în industria frumuseții pentru a afișa rezultatele tratamentelor faciale și ale pielii, tunsorilor, transformărilor și produselor cosmetice utilizate.

• Explicați îmbunătățirea caracteristicilor

Dezvoltatorii de software pot folosi această caracteristică pentru a demonstra modificările aduse îmbunătățirii vizuale a oricărui software, aplicație web, temă sau aplicație mobilă.

• Afișează modificările istorice

În domeniul arhitecturii, puteți spune vizual cum vor arăta diferit orașele urbane după dezvoltare. În plus, puteți prezenta și modul în care s-au schimbat împrejurimile în timp.

Cum se creează un glisor de comparare a imaginilor în Elementor: Ghid pas cu pas

Elementor este extrem de popular pe piață, cu peste 7 milioane de utilizatori activi, care crește necontenit. Dacă ați visat vreodată să vă proiectați site-ul web pe WordPress fără nicio codificare manuală, cu siguranță vă veți îndrăgosti de acest generator de pagini datorită bogăției sale de caracteristici și ușurinței de utilizare.

Cu toate acestea, Elementor în sine nu are instrumentul sau funcția de comparare a imaginilor. Dar nu-ți face griji! HappyAddons, un supliment puternic al Elementor, are un widget numit „Image Compare”, pe care îl puteți folosi la fel ca și cum beți sucul preferat. Să începem tutorialul.

Pasul 01: Instalați Elementor și HappyAddons pe site-ul dvs

La început, asigurați-vă că aveți următoarele pluginuri instalate și activate pe site-ul dvs. web.

• Elementor
• HappyAddons

Nu aveți nevoie de versiuni premium pentru această funcție, deoarece HappyAddons o oferă gratuit.

Pasul 02: Deschideți o postare/pagină cu Elementor

Acum, deschideți postarea/pagina dorită cu Elementor pentru care doriți să creați o secțiune de comparare a imaginilor. Elementor Canvas se va deschide pe ecranul dvs.

Pasul 03: Creați o secțiune pentru widgetul de comparare a imaginilor pe pânză

Dacă ați folosit deja Elementor, știți cum să creați o nouă secțiune pentru a adăuga widget-uri. Îl arătăm în continuare de dragul noilor utilizatori.

Faceți clic pe pictograma plus (+) din Elementor Canvas.

Apoi, selectați o structură de coloane în funcție de lățimea secțiunii Comparare imagini.

Puteți vedea că o nouă secțiune a fost adăugată la pânză. Vom adăuga și vom crea o secțiune de comparare a imaginilor în această coloană.

Pasul 04: Trageți și plasați widgetul de comparare a imaginilor în coloană

Introduceți Comparare imagine în caseta de căutare din partea de sus a panoului Elementor din partea stângă a pânzei Elementor.

Acum, trageți și plasați widgetul Comparare imagini în secțiunea creată cu puțin timp în urmă.

Puteți vedea că widgetul Comparare imagini a fost adăugat la pânză. În continuare, vom adăuga conținut la widget în pasul următor.

Notă: Dacă întâmpinați vreodată 500 de erori interne ale serverului, le puteți rezolva urmând acest ghid despre cum să remediați 500 de erori interne ale serverului.

Pasul 05: Adăugați imagini la widget

Trebuie să adăugați două imagini la widget, dintre care una poate fi versiunea anterioară sau originală, iar cealaltă este versiunea editată.

Accesați fila Conținut . Chiar sub filă, veți vedea secțiunea Imagini . Puteți adăuga două imagini, una pentru înainte și cealaltă pentru după. Adăugați imagini imediat.

Am adăugat două imagini la widget. Unul este ușor de calitate scăzută, iar celălalt este de top.

Treceți cursorul pe widget. Etichetele vor fi vizibile. Puteți schimba numele etichetelor utilizând opțiunea ascuțită din imaginea de mai jos. Fă-o dacă vrei.

Pasul 06: Personalizați setările pentru widgetul de comparare a imaginilor

Extindeți secțiunea Setări din fila Conținut. Veți avea patru opțiuni: raportul de vizibilitate, orientarea, ascunderea suprapunerii și mânerul de mutare. Puteți face următoarele lucruri cu ei.

• Raportul de vizibilitate – Prin creșterea sau scăderea raportului de vizibilitate, puteți repoziționa divizorul dintre imaginile widget-urilor.

• Orientare – Afișați separatorul, fie pe orizontală, fie pe verticală.

• Ascundere suprapunere – Afișează sau ascunde efectul de suprapunere.

• Mutați mânerul – Puteți controla modul în care utilizatorii vor explora imaginile înainte și după această opțiune.

Pasul 07: stilizați widgetul de comparare a imaginilor

Accesați fila Stiluri a widget-ului Comparare imagini. Veți primi opțiuni pentru a personaliza mânerul și elementele de etichetă.

Opțiunea Mâner vă va permite să personalizați aspectul mânerului între cele două imagini de pe ecran. Lucrurile pe care le puteți personaliza aici sunt mânerul, săgeata mânerului, înălțimea casetei, tipul chenarului, lățimea chenarului și raza chenarului .

Apoi, extindeți secțiunea Etichetă . Din această secțiune, puteți personaliza umplutura etichetei, poziția, tipul de chenar, raza chenarului, culoarea, culoarea de fundal, umbra casetei și tipografia .

Pasul 08: previzualizați widgetul de comparare a imaginilor

Vino în modul de previzualizare a paginii. Trageți mânerul widget-ului la stânga și la dreapta pentru a vedea dacă funcționează. În clipul video de mai jos, puteți vedea că widget-ul nostru funcționează frumos.

Astfel, puteți crea un glisor de comparare a imaginilor pe site-ul Elementor la fel ca un profesionist. Explorați acest ghid despre cum să adăugați balon explicativ în Elementor pentru a duce navigarea site-ului dvs. la o nouă înălțime.

Întrebări frecvente despre glisorul de comparare a imaginilor în Elementor

Până acum, am descris tutorialul și părțile teoretice ale discuției de astăzi. Vom răspunde acum la câteva întrebări pe care oamenii le pun de obicei online legate de subiectul de astăzi.

Închidere!

Sperăm că v-a plăcut acest tutorial. Folosind acest widget, acum puteți prezenta în mod eficient scenarii înainte și după ale produselor dvs. sau orice fel de povești și evoluții. Dar există câteva bune practici pe care trebuie să le țineți cont pentru a asigura performanțe optime și experiențe pentru utilizatori.

În primul rând, utilizați întotdeauna imagini de înaltă calitate, care sunt dimensionate și optimizate corespunzător. Comprimați-le înainte de a încărca, astfel încât să nu afecteze viteza de încărcare a site-ului dvs. În cele din urmă, înainte de a publica widget-ul, verificați că este perfect bine structurat pentru dispozitive mobile și tablete.