Cel mai simplu mod de a adăuga glisorul Înainte și După pe site-ul dvs. web

Imaginile înainte și după sunt utilizate pe scară largă în scopuri de marketing într-o gamă foarte largă de industrii . Nu există cuvinte care să descrie mai bine efectul pe care îl are un anumit proces decât o imagine care arată exact cum arăta cineva sau ceva înainte și după acel proces. Chiar și în afacerile care nu se învârt pe produse ale căror efecte sunt vizibile, este posibil să utilizați această funcție într-un mod plin de umor.

Să presupunem că conduci un restaurant – ai putea arăta cum arată o persoană înainte de a mânca la palatul tău și cât de încântată arată după ce gustă delicatesele tale. Posibilitățile înainte și după ce oferă slider-ul în ceea ce privește reprezentarea beneficiilor și avantajelor produselor/serviciilor dumneavoastră sunt nelimitate . Totul depinde de imaginația ta.

Așa cum adăugarea efectului de paralaxă la paginile dvs. face site-ul dvs. să arate modern, glisorul înainte și după face greu de uitat, deoarece imaginile spun mai mult de 1000 de cuvinte.

În plus, puteți adăuga această funcție pe site-ul dvs. în întregime gratuit și de unul singur. În acest articol, vă vom arăta cum să creați un slider înainte și după cu popularul plugin gratuit Qi Addons pentru Elementor .

Rămâneți pe fază pentru a citi mai multe despre:

• Adăugarea sliderului înainte și după cu suplimente Qi pentru Elementor
• Explorarea opțiunilor avansate

Adăugarea sliderului înainte și după cu suplimente Qi pentru Elementor

Qi Addons pentru Elementor este un instrument intuitiv, gratuit, care vă permite să adăugați o gamă largă de elemente superbe site-ului dvs. fără efort. Vine cu o interfață foarte practică, ușor de utilizat și atât pentru începători, cât și pentru utilizatorii avansați, este ușor de utilizat. Ceea ce este deosebit de grozav la Qi este faptul că, pe lângă atâtea funcții utile, îți oferă și un strop de eleganță contemporană.

Procesul de instalare a suplimentelor QI pentru Elementor nu este diferit de orice altă instalare de plugin. Dacă aveți întrebări despre acesta, asigurați-vă că verificați linkul pe care l-am furnizat mai sus și ne puteți scrie și în secțiunea de comentarii.

Deoarece acesta este un plugin Elementor, asigurați-vă că treceți la editorul Elementor atunci când creați o nouă postare . Toate widget-urile Qi Addons vor fi afișate cu grijă în meniul de elemente din stânga . Pur și simplu derulați în jos meniul pentru a le găsi.

Widgetul Slider Înainte și După oferă o modalitate simplă și eficientă de a afișa două imagini în același cadru . Găsiți-l în meniul din bara laterală din stânga, tastând numele widget-ului în câmpul de căutare sau răsfoind widget-urile din meniu.

Pentru a adăuga glisorul de comparare Înainte/După, trageți și plasați elementul Elementor în locul dorit. Când widget-ul este adăugat, toate setările vor fi în partea stângă și în filele Conținut și Stil sunt toate opțiunile legate de glisor .

Acum, trebuie să adăugați imaginile înainte și după la glisor . În primul rând, adăugăm imaginea de dinainte - treceți cursorul peste câmpul de imagine și opțiunea Alegeți imagine se va afișa sau faceți clic doar pe pictograma plus mică din mijlocul câmpului.

Puteți alege o imagine din biblioteca media sau puteți încărca o imagine în biblioteca dvs. media dacă este necesar . Doar trageți și plasați fotografia selectată și-o în biblioteca media dacă nu este deja acolo, apoi selectați-o și alegeți.

După ce ați inserat imaginile dorite, puteți continua să personalizați glisorul înainte/după schimbând textul care se va afișa în cercul din mijlocul glisorului . Puteți scrie o instrucțiune aici, sau un mesaj mai captivant, depinde de dvs. și de stilul dvs. de site. De asemenea, puteți alege dacă doriți ca textul să fie aliniat vertical sau orizontal.

Dacă doriți să reglați locul în care va apărea granița dintre imaginea înainte și după imaginea pe glisor, puteți introduce valoarea Offset dorită în câmpul . Valoarea implicită este 50%, ceea ce înseamnă că chenarul implicit este chiar în mijlocul imaginii. Iată cum poate arăta glisorul dacă ajustați offset-ul:

Acum, este timpul pentru o reglare mai fină a glisorului înainte-după. Să vedem ce mai poți personaliza pentru ca glisorul să arate așa cum trebuie să arate. Faceți clic pe fila Stil pentru a explora mai multe opțiuni .

Dacă doriți să mutați mânerul circular din centrul imaginii, utilizați glisorul pentru a regla valoarea decalajului superior al mânerului . Veți vedea imediat modificările live, astfel încât să puteți decide cu ușurință ce funcționează cel mai bine pentru dvs. Veți ajusta, de asemenea, dimensiunea cercului în același mod, precum și chenarul dintre versiunea înainte/după a imaginii .

Puteți, de asemenea, să faceți clic pe Culoarea textului Nabdle pentru a crea nuanța de culoare pentru textul din cerc , alegeți și fontul textului în același mod . În cele din urmă, puteți personaliza și culoarea cercului în același mod.

Explorarea opțiunilor avansate

În fila Avansat, veți găsi mai multe opțiuni pentru a face glisorul mai atractiv și mai atrăgător. Aceste opțiuni nu sunt exclusive numai pentru acest widget, sunt opțiuni implicite Elementor pe care le puteți folosi pentru a edita și alte widget-uri pe o pagină.

Să ilustrăm unele dintre cele mai interesante. Simțiți-vă liber să testați toate opțiunile, deoarece veți vedea toate modificările pe care le faceți în direct, astfel încât să puteți afla instantaneu ce face fiecare opțiune la glisor și dacă funcționează pentru dvs.

Dacă deschideți meniul Avansat, veți vedea opțiunile pentru setarea marjei și a umpluturii . Veți observa o pictogramă mică de laptop lângă fiecare opțiune care vă permite să setați valori diferite pentru marjă și umplutură pe diferite dispozitive - laptop, tabletă sau mobil.

Efectele de mișcare sunt deosebit de interesante și aveți o gamă foarte largă de mai mult de 35 de efecte de mișcare din care să alegeți. Aveți, de asemenea, posibilitatea de a seta diferite animații pentru a fi afișate pe diferite dispozitive . După ce alegeți tipul de animație, puteți, de asemenea, să îi ajustați durata și întârzierea, dacă considerați că este necesar.

Acum faceți clic pe fila Transformare pentru a descoperi mai multe efecte pe care le puteți utiliza . De la rotire la înclinare și răsturnare orizontală și verticală, există multe lucruri pe care le puteți face pentru a schimba afișarea glisorului.

În fila Border, veți găsi opțiuni care vă vor permite să decorați partea laterală adăugând chenaruri de imagine umbră în culorile pe care le selectați . De asemenea, puteți alege să adăugați un efect de umbră în jurul casetei de diapozitiv și să setați rezultatul efectului de umbră.

Opțiunile din fila Mască sunt foarte utile. Puteți seta aici ca glisorul să fie afișat în diferite forme - cerc, floare, schiță, triunghi, blob, hexagon sau chiar să adăugați o formă personalizată. De asemenea, este posibil să reglați dimensiunea și poziția formei selectate.

Acordați o atenție deosebită filei Responsive , deoarece acest lucru este foarte posibil să alegeți ca glisorul să nu fie afișat pe dispozitivele selectate .

Iată cum arată glisorul pe pagină după ce l-am ajustat pentru nevoile noastre:

In concluzie

După cum puteți vedea, adăugarea glisorului înainte și după pe paginile dvs. nu este știință rachetă. Acum vă puteți lăsa imaginația să zboare și să creați o reprezentare vizuală impresionantă a efectelor pe care le pot produce munca, produsele sau serviciile dvs. În cazul în care aveți o întrebare, un comentariu sau o întrebare de orice fel, nu ezitați să ne contactați în orice moment.

Sperăm că acest articol a fost de ajutor. Dacă v-a plăcut, nu ezitați să consultați și câteva dintre aceste articole!

• Cum să vă personalizați formularul de contact 7 Stilați în mod simplu
• Cum să evidențiați textul în WordPress în mod ușoară
• Cum se creează fluxul de etape utilizând elementul Elementor Process Widget