Divi Plugin Highlight - Image Intense

Image Intense este un plugin premium de la terți de către cei de la Superfly, care adaugă un nou modul Divi Builder atât pentru Divi, cât și pentru Extra. Noul modul combină caracteristici de la trei module Divi (module de imagine, text și butoane) și apoi adaugă noi caracteristici pentru a adăuga suprapunere și efecte de plutire la imagini. Funcțiile includ 22 de tranziții de trecere a imaginii, butoane, setări de opacitate, moduri de amestecare, linkuri text și multe altele.

Image Intense este o modalitate excelentă de a adăuga micro-interacțiuni care oferă cititorilor feedback și atrag atenția asupra îndemnului dvs. (CTA). Animațiile includ mărirea sau micșorarea imaginii, întinderea imaginii, comprimarea imaginii, adăugarea unei suprapuneri, glisarea peste, dezvăluirea textului etc.

În acest punct de evidențiere a pluginului, vom arunca o privire la ceea ce poate face pluginul. Imaginile sunt preluate de pe Unsplash.com.

Instalare și setări

Pluginul adaugă un modul la Divi Builder. Pentru a instala modulul, pur și simplu încărcați și activați pluginul. Utilizați Divi Builder în mod normal și plasați modulul Image Intense în aspectul dvs. Poate fi folosit în locul unui modul de imagine.

Setările generale includ adresa URL a imaginii, dimensiunea suportului, stilul de deplasare, titlurile, subtitrarea, orientarea subtitrării, butonul, direcția animației etc. Acestea sunt setări familiare și includ o scurtă descriere. Setările noi includ linkuri către documentație pentru mai multe informații.

Titlurile suprapuse pot utiliza marcaje. Aici puteți adăuga linkuri, îngroșa textul etc.

Setările de proiectare avansate includ lățimea imaginii, modul de amestecare a amestecului, opacitatea, opacitatea la deplasare, gradientul de suprapunere personalizat etc. Include fonturile, fundalul, marginea, culoarea și opțiunile de umplere așteptate, precum și CSS personalizat .

Exemple - Punerea intensă a imaginii la lucru

Pentru a vedea ce poate face, am creat mai multe machete și am adăugat mai multe module Image Intense. Iată o privire la unele dintre animații și caracteristici.

Animații și dimensiuni ale imaginii

În acest exemplu, puteți vedea dimensiunea decupată a imaginilor cu două titluri suprapuse. Imaginea din stânga folosește setarea decupată de 400 x 516 pentru dimensiunea suportului și Auckland pentru animație.

Imaginea se micșorează ușor și arată o suprapunere cu un mesaj. Culoarea și dimensiunea fontului pot fi ajustate dacă este necesar.

Imaginea din dreapta este mărită și include mesajul într-o suprapunere. Aceasta este mai evidentă a diferenței. Folosește stilul Hover din Ierusalim .

Imaginea din centru folosește stilul de planare Douala .

Puteți vedea în această imagine cadrul mutat în partea de jos a imaginii și afișează acum mesajul.

Imaginea din centru folosește stilul de suprapunere Madison .

Puteți vedea aici cum plasează o suprapunere peste imagine care reduce opacitatea păstrând în același timp focalizarea pe zona înconjurată care include mesajul.

Mod Blend Mix

Modul Mix Blend este un mod ușor de a aplica atributele CSS imaginii. Acesta combină culoarea modulului cu fundalul său. Poate crea unele efecte sălbatice, iar unele setări funcționează mai bine cu anumite culori, deci acest lucru va necesita unele experimente. Este posibil ca unele dintre funcții să nu funcționeze cu toate browserele, deci veți dori să utilizați această caracteristică cu prudență.

Imaginea din centru folosește modul Mixed Blend numit Hard Light .

Acesta folosește Luminozitatea . De asemenea, am adăugat un buton în partea de jos centrală și am configurat stilul personalizat.

Opacitate

Opacitatea este cât de transparentă este o imagine. Cu cât o imagine este mai opacă, cu atât are mai puțină transparență. Opacitatea este realizată și de stilul de animație și de modul de amestecare pe care îl alegeți. Le puteți folosi în diferite combinații pentru a vedea ce tipuri de efecte puteți crea. Puteți aplica diferite niveluri de opacitate imaginii normale și imaginii cu mouse-ul.

Aceasta este imaginea normală, fără opacitate. Folosesc dimensiunea originală completă pentru setarea dimensiunii media.

Aici imaginea se deplasează. Am stabilit ratingul de opacitate la 0,6. Acesta folosește stilul Hover Cali .

Acesta folosește o imagine mare de 1024 × 1024 fără decupare și o opacitate a imaginii de 0,4. Ambele titluri suprapuse utilizează etichete HTML. Folosesc etichete pentru puternic, accent și pauză. Folosește stilul de hover Portland .

Am setat opacitatea hover la 1, astfel încât imaginea să fie dezvăluită pe hover.

Adăugarea unui gradient personalizat

În Setările de proiectare avansate am selectat Utilizarea gradientului de suprapunere personalizat . Aceasta deschide un nou set de opțiuni în care pot selecta culoarea gradientului de început și de sfârșit, orientarea gradientului și poziția de oprire de început și sfârșit atât pentru imaginea obișnuită, cât și pentru imaginea de deplasare.

Iată o privire asupra gradientului folosind stilul de suprapunere Madison .

Imaginea din stânga afișează o suprapunere înainte de deplasare.

La deplasare, suprapunerea este eliminată pentru a dezvălui imaginea. Acesta folosește stilul de zbor Hanoi .

Schimb de imagini

În acest exemplu am vrut să schimb o imagine cu alta. Acest lucru se face prin adăugarea unei imagini ca imagine de fundal a modulului în Setări avansate de proiectare .

Apoi setați nivelul de opacitate, astfel încât o imagine să se afișeze fără a se deplasa, iar cealaltă imagine să se afișeze la hover. Cel care se afișează pe hover va afișa și un mesaj.

Am ales această imagine ca imagine de fundal și am setat imaginea modulului să aibă o opacitate de 0.

La plimbare, pasărea colibri se transformă în vultur și afișează un mesaj. Acesta folosește stilul hover Kiev .

Amestecarea imaginilor

De asemenea, puteți amesteca cele două imagini ajustând opacitatea, astfel încât imaginea de fundal să se afișeze prin imaginea din prim-plan. Acest lucru poate crea unele efecte și mesaje interesante.

Acesta folosește stilul hover londonez . Am aranjat mesajele pentru a profita de plasarea lor. În acest exemplu, dimensiunea fontului titlului este setată la 24, iar dimensiunea fontului subtitrării este setată la 50.

Iată imaginea pe hover. Opacitățile pot fi, de asemenea, modificate pentru a le arăta pe amândouă, dar una poate fi mai proeminentă.

Adăugarea de linkuri la text

Linkurile pot fi adăugate la textul subtitrării. Acest lucru se face prin plasarea unui pseudo-cod scurt cu textul urmat de adresa URL. Shortcode-ul este furnizat în descrierea câmpului, astfel încât să puteți copia și lipi. Se vor folosi atribute href, target și class.

Acesta adaugă o legendă cu un link care poate duce cititorii la o pagină sau la o postare pentru mai multe informații.

Acest lucru este minunat pentru crearea CTA-urilor, pentru conectarea la postări sau pagini etc., pentru a conduce cititorii către conținutul dvs. Imaginile în sine pot fi făcute clicabile. Acest lucru îi poate duce la un portofoliu sau la o pagină despre sau despre pagina de contact.

Butoane

Puteți adăuga un buton la imagine pentru a crea un îndemn.

Imaginea din stânga folosește un gradient radial cu marcaj pentru text. Imaginea din dreapta afișează butonul cu efect de plutire. Ambele imagini folosesc margini negre. Am adăugat o suprapunere pentru fundalul butonului și am setat raza chenarului la 15. Acest exemplu folosește stilul hover Rochester .

Imaginea din stânga folosește un gradient vertical între două nuanțe de negru: prima cu 65% opacitate și a doua cu 19% opacitate (19%! Știu ... sunteți binevenit!).

Suprapunerile, butoanele și gradientele sunt excelente pentru crearea CTA-urilor.

Preț, licență și documentație

Acesta este un plugin premium. Este de 25 USD pentru un singur site plus un site de dezvoltare care vă permite să îl utilizați pe un site de dev în același timp în care îl utilizați pe site-ul dvs. live. Este de 45 USD pentru site-urile nelimitate .

Documentația este furnizată pe site-ul web și include exemple și o zonă demonstrativă unde puteți vedea efectele în direct. Asistența este asigurată de un sistem de bilete de asistență.

Gânduri finale

Image Intense este un modul excelent pentru adăugarea de imagini cu tranziții cu mouse-ul. Suprapunerile pot include gradiente, text, link-uri, diferite niveluri de opacitate și chiar swap de la o imagine la alta. Textul, butoanele, legăturile etc., au mai multe opțiuni de poziție și există o mulțime de opțiuni de tranziție dintre care puteți alege. Puteți face și mai multe adăugând propriul CSS.

Am găsit modulul intuitiv de utilizat. Dacă puteți utiliza un modul Divi, vă veți simți ca acasă cu acesta. Toate caracteristicile de stil sunt aici. Tranzițiile prin suprapunere sunt o modalitate excelentă de a adăuga ceva pizazz pe site-ul dvs. Divi. Dacă sunteți interesat să adăugați tranziții la imaginile dvs. atunci cred că veți găsi că Image Intense merită aruncată o privire.

Vrem sa auzim de la tine! Ați folosit Image Intense? Spuneți-ne despre experiența dvs. în comentariile de mai jos!

Imagine prezentată prin wowomnom / shutterstock.com