Divi Plugin Highlight: Slide-Ins ușoare

Easy Slide-Ins este un plugin terță parte pentru Divi și Extra care vă permite să creați slide-in-uri (și ferestre pop-up) folosind generatorul Divi. Slider-urile pot afișa orice poate fi construit cu Divi Builder. Declanșați diapozitivele cu un procentaj de derulare, intenție de ieșire, un buton cu mai multe locații și cu o clasă CSS. Include actualizări și demonstrații pe toată durata vieții.

În acest articol, vom analiza Easy Slide-Ins și vom vedea ce poate face și ușor de utilizat. De asemenea, vom arunca o privire la câteva dintre demonstrațiile incluse în plugin. Pluginul este disponibil de pe site-ul dezvoltatorului.

Instalarea Easy Slide-Ins

Mai întâi, dezarhivați fișierul. În dosar, veți găsi demonstrații, un fișier cu un link către documentație și pluginul Easy Slide-Ins.

Încărcați și activați pluginul în mod normal.

Un nou meniu este adăugat la tabloul de bord numit Easy Slide-Ins. Faceți clic pe acest meniu și introduceți cheia de licență.

Activarea licenței adaugă două elemente de meniu (Toate articolele și Adăugați noi) în care puteți vedea diapozitivele și creați diapozitive noi.

Crearea unui nou Slide-In

Dacă faceți clic pentru a adăuga un nou slide, se deschide un editor în care puteți utiliza Divi Builder pentru a crea slide-in-ul.

De asemenea, include o mulțime de setări. Sunt plasate sub Divi Builder. Alegeți poziția din stânga, dreapta, stânga sus, dreapta sus, stânga jos, dreapta jos, bara de sus, bara de jos, bara laterală stângă sau bara laterală dreaptă. Setați-l să se declanșeze automat pe scroll și alegeți cantitatea de scroll. De asemenea, îl puteți seta să se deschidă la intenția de ieșire. Setați culoarea de fundal, umbra cutiei și lățimea slide-in.

Afișați titlul și introduceți textul pentru a fi afișat. Alegeți fundalul și culorile textului, precum și familia fontului, dimensiunea și greutatea. Setați rotunjirea colțului, înălțimea etichetei și lățimea etichetei. Afișați pictograma de închidere și alegeți fundalul și culorile pictogramei și dimensiunea pictogramei.

Comenzile sunt intuitive de utilizat și înțeles. Există suficiente ajustări pentru a stiliza eticheta pentru a se potrivi site-ului dvs. web și pentru a controla modul în care funcționează prezentările.

Alte caracteristici sunt adăugate sau eliminate în funcție de opțiunile pe care le alegeți. Am selectat Box Shadow și oferă acum opțiuni pentru poziția orizontală și verticală, estomparea și intensitatea răspândirii și culoarea.

Fila Advanced vă permite să alegeți paginile în care poate fi afișat diapozitivul. Puteți selecta toate paginile, paginile individuale și toate postările. Puteți ascunde slide-in-ul pe anumite dispozitive.

Fila Câmpuri personalizate vă permite să adăugați câmpuri personalizate la fel ca orice pagină sau postare.

Exemple de diapozitive ușoare

Aceasta este pagina de contact din aspectul de gestionare a riscurilor. Folosesc acest lucru pentru a construi slide-in, astfel încât designul să se potrivească aspectului. Am setat să nu afișez bara laterală sau navigarea prin puncte. Puteți previzualiza la fel ca o pagină standard. După ce ați creat diapozitivul, publicați în mod normal.

Am activat eticheta în setări și am setat fundalul pe negru și textul pe alb. Am păstrat textul implicit (Contactați-ne). L-am setat să se afișeze în colțul din dreapta sus. Aceasta folosește înălțimea implicită, dar poate fi schimbată cu ușurință.

Dacă faceți clic pe etichetă, se deschide diapozitivul, care se afișează pe ecran, afișând formularul de contact din pachetul de aspect de gestionare a riscurilor. Dacă faceți clic din nou pe butonul Contactați-ne se închide slide-in-ul. Am lățimea slide-in setată la 500 pixeli, înălțimea etichetei la 150 și lățimea etichetei la 60.

Exemplul arată umbra casetei. Am schimbat locația în bara laterală dreaptă, care afișează butonul de închidere. Am schimbat culorile etichetei și butonul de închidere și am făcut colțurile etichetei mai rotunjite. Am setat, de asemenea, lățimea diapozitivelor la 600 de pixeli.

Pentru aceasta, am mutat eticheta în poziția superioară a barei. Am folosit culori din aspect și am schimbat lățimea la 122 pixeli și înălțimea la 40 pixeli. După cum puteți vedea în această imagine, eticheta rămâne în poziție pe scroll.

Se deschide în ecran complet și include butonul de închidere.

Pentru aceasta, am adăugat un nou slide-in în bara laterală stângă. L-am conceput pentru a se potrivi site-ului și am lăsat colțurile etichetei la pătrat. Folosesc marja superioară a etichetei cu 50%, care plasează partea superioară a etichetei în centrul înălțimii ecranului.

Se deschide din stânga. I-am dat o lățime de 1000 de pixeli, așa că acoperă o mare parte din ecranul meu. Diapozitivul Contact se afișează în continuare în partea de sus, chiar dacă meniul este acoperit de prezentarea buletinului informativ.

Sliderurile vă oferă o clasă de declanșare a butonului. Puteți utiliza acest lucru cu butoane pentru a deschide slide-in-ul.

Copiați clasa și lipiți-o în câmpul CSS Class al butonului.

Acum, făcând clic pe buton se deschide slide-in-ul. Nu trebuie să existe etichete nicăieri, dar se vor glisa din direcția în care ați plasat glisiera. Acesta a fost plasat în stânga, deci vine din stânga. Am setat lățimea la 1000 de pixeli.

Demonstrații ușoare pentru diapozitive

Fișierul de descărcare include 12 demonstrații. Acestea sunt machete pre-realizate (fișiere JSON) pe care le puteți încărca în biblioteca Divi. Importați-le în biblioteca Divi ca machete obișnuite. Acestea includ module cu stil, dar va trebui să configurați setările de proiectare. Iată câteva dintre ele.

Acesta este e-mail de colecție cu intenție de ieșire. Acesta include mai multe module de text, un formular de contact și un modul de imagine.

Iată cum arată pe ecran. Am lăsat totul în mod implicit aici, astfel încât butonul arată în continuare textul original, locația și stilul.

Acesta este e-mail de colecție cu intenție de derulare. Include o imagine de fundal, două module de text și un modul de e-mail.

Iată cum arată pe pagină folosind setările premade. Aceasta arată cât de receptiv este slide-in-ul (exact ceea ce ne-am aștepta, deoarece arată un aspect Divi). Dacă doriți să afișați mai multe imagini, lăsați diapozitivul să fie mai larg.

Acesta este Ghidul vizitatorilor. Include un modul de cod (pentru Google Maps), mai multe blurbs, text și un formular de contact.

Iată cum arată în pagină utilizând setările implicite.

Aceasta este o promoție cu o etichetă. Include un modul text, mai multe tabele de prețuri și un buton.

Iată cum arată pe ecran. L-am setat la 800 de pixeli, astfel încât să afișeze lățimea completă dacă diapozitivul a intrat. Am eliminat eticheta și am setat-o ​​să se afișeze atunci când derularea paginii atinge 60%.

Iată același aspect când este vizualizat cu Extra. Mă bucur să văd că funcționează excelent atât cu Divi, cât și cu Extra.

Preț și documentație ușoare pentru diapozitive

Easy Slide-Ins este disponibil de pe site-ul dezvoltatorului. Are două opțiuni de cumpărare:

• Site unic - 27 USD
• Site-uri nelimitate - 97 USD

Ambele licențe includ demonstrații și actualizări pe toată durata vieții.

Documentația este furnizată la pagina de documentare și asistență a dezvoltatorului. Pagina include o prezentare generală a fiecărui punct cu imagini pentru a le demonstra. Pagina include, de asemenea, un link către asistența prin e-mail.

Gânduri de sfârșit

Easy Slide-Ins facilitează crearea de slide-uri și popup-uri pentru Divi și Extra. Mi s-a părut ușor de utilizat. Nu am avut niciodată nevoie de documentație, dar este acolo dacă este nevoie. Este un mod interesant de a aduce elemente de pagină ascunse. Întrucât orice poate fi utilizat în slide-in, puteți afișa formulare de contact, înscrieri la buletinul informativ, apeluri la acțiune, videoclipuri, module de magazin etc. Poate fi un singur modul sau o pagină completă.

Îmi place că are mai multe opțiuni de declanșare. Ieșirea intenționată și declanșarea automată îl fac o alegere bună pentru crearea de ferestre pop-up de e-mail și CTA. Deschiderea făcând clic pe etichetă este un mod frumos de a le adăuga în mai multe locații de pe paginile dvs. Îmi place că puteți adăuga mai multe diapozitive pe o singură pagină și că puteți determina pe ce pagini se afișează. Adăugarea clasei CSS la butoane este o modalitate excelentă de a dezvălui informații atunci când vizitatorul alege să le vadă.

Puteți construi slide-in-ul din front-end, dar nu am văzut cum să accesez setările. Fără setări, nu aș putea muta etichetele și nu le pot vedea locația în timp real. A trebuit să încărc o pagină pentru a le vedea. Încă nu a fost dificil de utilizat, dar a fost un pic de presupuneri implicate. Acest lucru este atât de minor încât nu m-aș împiedica să îl folosesc sau să îl recomand.

Dacă sunteți în căutarea unui mod simplu și intuitiv de a crea slide-in-uri folosind Divi Builder, Easy Slide-Ins merită o privire.

Vrem sa auzim de la tine. Ați încercat Easy Slide-Ins pentru Divi? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin ByEmo / shutterstock.com