Divi Plugin Highlight: Divi Ribbon Module

Divi Ribbon Module este un plugin terță parte pentru Divi care adaugă o panglică stilabilă la conținutul modulului. Adăugați o imagine, un buton, un titlu, un conținut și un stil pentru fiecare element cât de detaliat doriți. Folosiți-l pentru a evidenția vânzarea unui produs, pentru a crea un îndemn sau pentru a atrage atenția asupra oricărui element. În acest punct culminant al pluginului Divi, vom arunca o privire la modulul Divi Ribbon și vom vedea ce poate face.

Instalarea modulului Divi Ribbon

1. Accesați și descărcați pluginul
2. În tabloul de bord WordPress, accesați Plugin-uri > Adăugați un nou
3. Faceți clic pe Încărcare plugin
4. Selectați fișierul comprimat de pe computer
5. Faceți clic pe Instalare acum
6. Când vedeți „Plugin-ul instalat cu succes”, faceți clic pe Activare plugin
7. Accesați Instrumente > Divi Ribbon Plugin License și introduceți cheia de licență

Divi Ribbon Module

Un nou modul este adăugat la Divi Builder numit Divi Ribbon. Modulul creează un blurb (completat cu un titlu, conținut, pictogramă, imagine și butoane) și plasează o panglică pe acel blurb. Aveți control asupra plasării și stilării panglicii, precum și asupra celorlalte elemente din modul. Blurbul include în mod implicit o umbră de cutie.

Fila Conținut panglică Divi

Fila Conținut include setările principale, rotația blurbului, imaginea și pictograma, linkul, fundalul și eticheta de administrator. Setările principale oferă selecții pentru tipul de panglică, locație, text, titlu și conținut.

Setări principale

Există 7 tipuri de panglici pentru a alege. Funcționează în același mod și includ același conținut, dar afișează forme diferite. Formele includ panglici cu capete furculite, panglici care se întind pe blurbs, panglici laterale sau superioare și au diferite tipuri de capete, cum ar fi furculițele sau cercurile. Acest lucru vă oferă o mulțime de opțiuni de afișare.

Fiecare dintre tipurile de panglică are opțiuni de localizare diferite, în funcție de abilitățile lor de afișare. Acest exemplu arată panglica de colț. Poate fi plasat în partea stângă sus sau dreapta sau în partea stângă jos sau dreapta.

Forked poate fi afișat în stânga sau în dreapta sus.

Lățimea completă poate fi afișată deasupra sau dedesubt.

Unele dintre tipurile de panglici au alte opțiuni care se deschid atunci când le selectați. Acest exemplu arată panglica cu lățime completă. Puteți regla locația și înălțimea acestuia.

Panglica laterală include ajustări pentru locație, lățime și înălțime. Toate comenzile sunt glisoarele standard Divi, deci sunt ușor de utilizat.

Titlul și conținutul sunt adăugate la card. Zona de conținut are file pentru vizual și text și pot include suporturi media, linkuri, cod și coduri scurte.

Rotire Blurb

Rotația Blurb adaugă o opțiune de întoarcere 3D care arată conținutul după ce cardul rotește pe lateral și o imagine și o pictogramă de afișat pe font.

Adăugați imagini din biblioteca dvs. media și pictograme din listă. Imaginea / pictograma va fi afișată mai întâi, iar apoi cardul va răsuci pentru a afișa conținutul pe hover. De asemenea, puteți adăuga imagini ca fundal.

Buton

Butonul include text, link, opțiuni pentru ferestre, umplere și margine. Am adăugat o margine stângă pentru a scoate butonul de sub panglică.

Fila Proiectare panglică Divi

Fila Proiectare panglică Divi include setări pentru imagine și pictogramă, rotație, text, dimensionare, panglică, textul titlului, textul corpului, butonul, spațierea, chenarul, filtrele, transformarea și animația.

Imagine și pictogramă

Setările pentru imagine și pictogramă vă permit să reglați lățimea imaginii, chenarul, umbra casetei, culorile, modul de amestecare etc.

Rotație

Setările de rotație vă permit să reglați culoarea feței. Acesta este fundalul din spatele imaginii. Dezactivați marginea originală a cardului, astfel încât să puteți crea propria dvs. Reglați pictograma de rotație. Are o mulțime de opțiuni pentru pictogramă. Adăugați o culoare a pictogramei, fundalul, chenarul și utilizați o dimensiune a fontului pre-rotație.

La început, a fost puțin confuz faptul că ajustarea pictogramei a fost aici în locul setărilor pentru imagine și pictogramă, dar are sens să se afle în această secțiune. Ar fi logic să plasați aici și setările imaginii, dar sunt atât de multe încât are nevoie de o filă separată.

Spațiere text

Spațierea textului vă oferă marja și setările de umplere pentru titlu și textul corpului. În mod normal, panglica va fi afișată peste conținut. Acest lucru vă permite să reglați poziționarea textului în funcție de locația panglicii, dacă doriți ca acesta să fie vizibil. Am adăugat căptușeală atât pentru titlu, cât și pentru textul corpului în acest exemplu.

Setări panglică

Setările panglicii vă permit să schimbați culoarea, să adăugați o imagine care să umple panglica, să opriți capătul panglicii (pentru a opri stilul să nu se suprapună peste card), să reglați fonturile, să adăugați o umbră de text, să ajustați colțurile panglicii și marginea. Am schimbat culoarea panglicii în acest exemplu.

Imaginea va umple panglica. Am reușit să fac să funcționeze JPG-urile, dar funcționează bine. Vă recomand să alegeți o imagine care are deja dimensiunea dorită, astfel încât să aveți control asupra modului în care se afișează.

Dezactivarea capătului panglicii scapă de porțiunea care se îndoaie în spatele cărții, așa cum puteți vedea în stânga panglicii în acest exemplu.

Text

Titlul și textul corpului includ toate opțiunile așteptate. În acest exemplu, am mărit dimensiunea ambelor, am schimbat culoarea textului titlului și am centrat ambele.

Buton

Stilul butonului include toate opțiunile așteptate și adaugă o caracteristică pentru a afișa gradientul deasupra imaginii de fundal. În acest exemplu, am mărit dimensiunea fontului, am schimbat culoarea fontului și a chenarului, am rotunjit marginea, am dat fundalului un gradient și am adăugat o umbră.

Exemple de panglică Divi

Iată câteva exemple de aspectul Divi Ribbon în aspectele Divi.

Panglică de vânzare

Pentru primul exemplu, voi înlocui CTA din dreapta.

A fost realizat cu trei module: imagine, text și buton. Voi folosi același fundal, text și buton și îl voi recrea cu un singur modul Divi Ribbon.

Iată rezultatul folosind Divi Ribbon. Am adăugat imaginea, textul titlului și textul corpului pentru a se potrivi cu originalul. De asemenea, am adăugat panglica în colț și am mutat butonul în centru și am folosit culoarea chenarului din fundalul panglicii. Originalul a folosit imaginea din coloană. L-am eliminat și am adăugat imaginea la modul, dar ar funcționa în orice mod.

Nu am inclus imaginea zgârcită (un val triunghiular), dar ar putea fi adăugată cu ușurință în zona de conținut. Titlul ar trebui, de asemenea, să fie mutat în zona de conținut pentru a face ca grafica să apară deasupra titlului. Panglica On Sale o face să iasă mai mult în evidență.

Ultimele proiecte Ribbon

Pentru aceasta, am înlocuit o imagine cu modulul Divi Ribbon și am adăugat o panglică cu lățime completă ca CTA pentru a vedea cele mai recente proiecte. Panglica are o imagine de fundal și fonturi din aspect. Setarea implicită este umbra casetei. Am centrat textul.

Produs CTA Ribbon

Pentru acest exemplu, am adăugat un modul Divi Ribbon la secțiunea erou a paginii magazinului din aspectul Leather Company. Folosind o imagine din aspect, am înlocuit CTA de vânzare standard. Panglica și butonul folosesc culori din aspect. Am mutat panglica în colțul din dreapta jos și am îndepărtat capătul panglicii.

Aceasta este o secțiune de specialitate. Mă bucur să văd că funcționează bine în secțiunile de specialitate. Multe module terțe nu sunt întotdeauna compatibile cu acest tip de secțiune.

Test și cumpărare

Puteți achiziționa Divi Ribbon Module de pe site-ul dezvoltatorului pentru 11 USD pentru uz personal sau comercial pe un singur site web.

De asemenea, puteți testa pluginul înainte de a cumpăra pentru a vedea dacă acesta va funcționa pentru nevoile dvs. Link-ul pentru testarea pluginului se găsește pe pagina de vânzări a dezvoltatorului. Vă oferă acces complet la Divi Builder și la plugin, astfel încât să îl puteți stiliza după conținutul inimii. Vă recomand să încercați.

Gânduri de sfârșit

Divi Ribbon Module este un modul interesant pentru Divi Builder. Acesta include mai multe locuri pentru a adăuga imagini și puteți include un titlu, conținut, o pictogramă și un buton. Cu toate aceste caracteristici, funcționează excelent ca un blurb, chemare la acțiune, link produs, link blog, etc. Adăugați la aceasta o panglică stilabilă pentru a atrage atenția asupra vânzărilor sau a altor CTA-uri, iar acest plugin oferă opțiuni de stilare greu de realizat obțineți cu un singur modul.

Divi Ribbon Module funcționează excelent cu Visual Builder și Theme Builder. Este un plugin excelent, ușor de recomandat.

Vrem sa auzim de la tine. Ați încercat Divi Ribbon Module? Spuneți-ne despre experiența dvs. în comentarii.

Imagine prezentată prin Foxys Graphic / shutterstock.com