Divi Plugin Highlight - Owl Carousel Pro

Publicat: 2017-09-03

Ați dorit vreodată să afișați postări, proiecte, tipuri de postări personalizate și imagini într-un carusel folosind Divi Builder? Postările și imaginile sunt afișate de obicei într-un glisor, care afișează o postare sau o imagine la un moment dat, dar dacă doriți un carusel real care să afișeze mai multe postări simultan? Puteți face acest lucru cu ușurință cu un plugin numit Owl Carousel Pro.

Owl Carousel Pro este un plugin terță parte care adaugă două module noi la Divi Builder. Primul afișează tipuri de postări, cum ar fi proiecte, postări și tipuri de postări personalizate. Al doilea este un carusel de imagine care concurează cu editorul vizual pentru a adăuga orice tip de conținut doriți.

Există o versiune gratuită a pluginului disponibilă. Arunc o privire asupra versiunii pro, care adaugă mai multe funcții noi, inclusiv:

  • tipuri de postări personalizate
  • afișează câmpuri personalizate
  • interogare personalizată
  • modificați dimensiunea miniaturii
  • modificați numărul de imagini afișate
  • deschide imaginea în lightbox

Imaginile pentru exemple sunt preluate de pe Unsplash.com.

Instalarea Owl Carousel Pro

Încărcați și activați pluginul în mod normal. Veți vedea apoi două module noi în Divi Builder: DP Owl Carousel și DP Owl Image Carousel. Modulele sunt colorate diferit de modulele standard Divi pentru a le ajuta să se deosebească. Aceasta este preferința mea pentru module terțe, deoarece le face mai ușor de găsit.

Carusel DP Owl

DP Owl Carousel afișează postări și proiecte și tipuri de posturi personalizate într-un carusel. Acesta va afișa ultimele dvs. 10 postări sau din categoriile sau etichetele pe care le selectați. Fila Conținut include setări pentru conținut și elemente. Fila de proiectare include text, textul titlului postării, meta textul postării, textul extrasului postului, textului personalizat, spațierii, săgeții, comenzilor și miniaturilor.

Fila avansată conține setările CSS așteptate, dar adaugă și acțiune de clic, animație (determină momentul pentru derulare), fundal și vizibilitate. Culorile de fundal din ambele module sunt de o singură culoare, deci nu există gradiente sau imagini disponibile. În mod normal, nu aș căuta în fila avansată decât dacă aș dori să folosesc CSS, așa că aș fi ratat aceste setări, așa cum mă așteptam să fie în fila conținut.

Puteți crea o interogare personalizată (exemple date pe site) sau puteți utiliza setările din modul pentru a controla ceea ce este afișat. Include mai multe setări pentru controlul afișajului, cum ar fi numărul de postări, un număr de compensare, numele tipului de postare personalizat, categorii, etichete de inclus și etichete de excluziune. A adăugat automat tipurile mele de postări personalizate.

Interogările personalizate sunt adăugate la tema copilului dvs. în cadrul codului PHP (efectuați întotdeauna modificări PHP într-o temă copil și nu în tema părinte, astfel încât să nu vă pierdeți modificările atunci când tema se actualizează). Site-ul dezvoltatorului include câteva exemple.

Notă - încercați întotdeauna codul pe un site de test înainte de a-l adăuga pe site-ul dvs. live.

Exemple de carusel DP Owl

Acesta este designul standard (am adăugat un fundal pentru a-l evidenția). Afișează ultimele mele 10 postări în toate categoriile. Am inclus antetul Divi și post meta pentru a arăta cum arată în pagină. Dacă faceți clic pe oricare dintre imagini, veți ajunge la postare.

Acesta adaugă titlul, categoria și data. De asemenea, puteți afișa câmpuri personalizate dacă le aveți configurate.

Acesta arată titlul și extrasul postării folosind cele 270 de caractere implicite.

În acesta am setat extrasul postului la 70 de caractere.

În aceasta am dezactivat săgețile și comenzile. Animația funcționează în continuare, dar utilizatorii nu pot reda prin diapozitive.

În aceasta am schimbat dimensiunile și culorile fontului, am făcut săgețile roșii, am mărit dimensiunile comenzilor și le-am făcut violet, am mărit dimensiunea miniaturilor, am redus marja la 0 și am setat-o ​​să afișeze 3 imagini. A doua culoare pentru comenzi este o versiune mai închisă a culorii pe care am ales-o. A doua culoare este furnizată de plugin.

În acesta am adăugat un fundal în modul în sine și am schimbat marginea articolului, astfel încât fundalul să apară între postări. De asemenea, am schimbat culorile fontului și de această dată am ajustat înălțimea liniei și spațiul. Afișează 4 postări pe ecran și am redus dimensiunea miniaturilor. Am setat săgețile la mari și comenzile la mici.

Când modificați dimensiunea miniaturii, aceasta se va regla numai pentru a se potrivi cu numărul de postări afișate de dvs. Deci, dacă doriți ca imaginile să fie mai mari, va trebui să reduceți manual numărul de postări care se afișează.

Carusel de imagine DP Owl

Caruselul DP Owl Image afișează imagini într-un carusel. Vă permite să adăugați imagini și să afișați săgețile și comenzile. Setările de proiectare includ textul, textul titlului imaginii, textul conținutului imaginii, spațierea, săgeata, comenzile și miniaturile. Fila avansată este aceeași cu modulul DP Owl Carousel.

Puteți adăuga câte imagini doriți, să le deschideți într-o casetă lightbox și să le folosiți o versiune copiată a imaginii sau imaginea originală. Am ales în mod intenționat imagini de diferite dimensiuni pentru a vedea cum funcționează.

Imaginile se afișează frumos. Îmi place că puteți face link către o adresă URL sau le puteți deschide într-o casetă lightbox. Aș dori să văd suprapuneri adăugate la imagini, deoarece acest lucru ar îmbunătăți și mai mult experiența.

Exemple de carusel de imagine DP Owl

Iată cum arată modulul pe pagină folosind setările implicite. Am adăugat un fundal în secțiune pentru a-l ajuta să iasă în evidență.

În acest exemplu am adăugat titluri și text la imagini. De asemenea, am setat săgețile și comenzile la culori mari și schimbate pentru fiecare.

Acesta afișează 4 imagini. Am mărit dimensiunea imaginii și am redus marja articolului de la 8 la 4. Apoi am ajustat dimensiunile și culorile fonturilor, săgeților și comenzilor. Fonturile de titlu au spațiu crescut.

Acesta folosește un fundal întunecat cu culori noi pentru fonturi, controale și săgeți.

Iată cum arată imaginile atunci când le deschideți într-o casetă lightbox. Animația de defilare funcționează în continuare în fundal.

Tipuri de postări personalizate

În modulul Owl Carousel Pro asigurați-vă că interogarea personalizată este dezactivată (aceasta este utilizată numai dacă doriți să creați propriile filtre personalizate în loc să alegeți categoriile din listă) și alegeți tipul de postare sub Nume tip postare personalizată. Am instalat WooCommerce și acum am automat opțiunea Produs.

Fiecare dintre categoriile mele de produse sunt adăugate automat la lista de categorii. Acum pot derula în jos și selecta produsele pe care vreau să le afișez în carusel.

Produsele se vor afișa, dar pentru a afișa prețurile, trebuie să activez câmpul personalizat, alegeți câmpul de afișat și adăugați o etichetă pentru a afișa simbolul monetar dorit. Derulați în jos și activați Afișați câmpuri personalizate. Adăugați _preț la numele câmpurilor personalizate și $ la etichetele câmpului personalizat.

Acum am un carusel de produse care prezintă categoriile WooCommerce pe care le-am selectat. Am selectat să afișez 4 postări, am mărit dimensiunea imaginii, am schimbat culorile fontului pentru titlu, meta și câmpuri personalizate și am mărit dimensiunile fontului pentru titlu și câmpuri personalizate. În acest exemplu, afișez doar data meta, dar la fel ca postările obișnuite aș putea afișa oricare dintre informațiile meta și un extras.

Folosind Owl Carousel Pro cu Extra și pluginul Divi Builder

Owl Carousel Pro funcționează excelent și cu Extra. Acesta este caruselul de imagine.

Iată o privire asupra pluginului cu pluginul Divi Builder instalat pe tema WordPress Twenty Seventeen. Acesta afișează produsele mele WooCommerce.

Licență

Pluginul poate fi utilizat pe site-uri web nelimitate pentru dvs. și clienții dvs. Include 1 an de actualizări și asistență.

Gânduri finale

Owl Carousel Pro adaugă două module frumoase la Divi Builder care vă permite să afișați postări, proiecte, tipuri de posturi personalizate și imagini într-un carusel personalizabil. Sunt incluse majoritatea personalizărilor așteptate ale modulului Divi, precum și câteva caracteristici noi pentru a controla afișajul.

Am găsit că aproape toate caracteristicile și setările sunt intuitive. Am găsit filtrele personalizate confuze pentru utilizatorul obișnuit. Aș dori să văd câteva exemple complete de creare a filtrelor, deoarece acest lucru ar demonstra capacitățile vaste ale acestui plugin. Chiar dacă nu doriți să vă ocupați de cod, versiunea pro adaugă suficiente caracteristici pentru a face să merite să fie luată în considerare.

Am vrea să aflăm de la tine. Ați încercat Own Carousel Pro? Spuneți-ne despre experiența dvs. în comentarii.

Imagine prezentată prin gst / shutterstock.com