Divi Plugin Highlight: Next Image Effect Pro

Next Image Effect Pro este un plugin terță parte pentru Divi care adaugă o mulțime de efecte de trecere a imaginii care vă ajută să atrageți atenția asupra imaginilor și linkurilor dvs. Pluginul adaugă 7 module la Divi Builder, fiecare cu propriul set de modele și efecte. În acest articol, vom analiza Next Image Effect Pro și vom vedea ce poate face.

Următoarea instalare Image Effect Pro

Cumpărați și descărcați pluginul de pe Divi Marketplace. Urmați acești pași pentru ao instala:

1. În tabloul de bord WordPress, accesați Plugin-uri > Adăugați un nou
2. Încărcați pluginul de pe computer
3. Faceți clic pe Instalare acum
4. După instalarea pluginului, faceți clic pe Activați

Apoi, va trebui să activați licența. Accesați Plugins > Image Effect Pro License . Introduceți cheia de licență și salvați modificările.

Modulele Image Effect Pro următoare

Image Effect Pro adaugă un set de module la Divi Builder care include combinații stilizate de imagini și text. Acestea adaugă sute de efecte de hover și combinații de direcție. Opțiunile de stilare a textului includ controale independente pentru titluri, text de focalizare, conținut și fundalurile acestora.

Modulele includ:

• Plasați imaginea circulară
• Image Hover Box
• Efect pictogramă imagine
• Efect Mega Image
• Plasare minimă a imaginii
• Derulează imaginea următoare
• Ultimul cursor de imagine

Plasați imaginea circulară

Circular Image Hover are două secțiuni principale: imaginea și textul (hover content). Am adăugat o imagine dreptunghiulară. Afișează imaginea în forma sa originală, dar apoi o face circulară. Dacă imaginea ar fi pătrată, acesta ar fi un cerc perfect.

Setările de proiectare pentru imagine includ poziția umbrelor casetei, intensitatea și culoarea.

Textul include o secțiune pentru a adăuga titlul și conținutul. Le puteți stiliza în setările de proiectare. Am mărit dimensiunile în acest exemplu.

Fundalul subtitrării poate fi fie o culoare solidă, fie un gradient. Acesta folosește gradientul implicit.

Are 19 efecte de plutire cu 4 opțiuni de direcție pentru fiecare efect. Acesta este efectul 1. Efectele au diferite moduri de a face tranziția imaginii și de a transfera conținutul. Acestea includ zoom-uri, flip-uri, diapozitive și multe altele.

Image Hover Box

Caseta Hover Image include, de asemenea, imaginea cu conținut hover. Nu schimbă forma imaginii.

De asemenea, include suprapunerea (sau fundalul care se afișează și arată ca o suprapunere) și adaugă un fundal de antet. Ambele fundaluri pot include culori solide și degradate. Acest exemplu folosește fundalul suprapus implicit. Am schimbat culoarea fundalului antetului și am mărit dimensiunea textului.

Are 13 efecte diferite, inclusiv flip-uri, diapozitive, decolorări, măriri, etc. Mai multe dintre efecte adaugă opțiuni pentru direcții. Acesta este efectul 1.

Efect pictogramă imagine

Image Icon Effect adaugă un element de plutire care afișează un titlu și focalizează textul peste imagine. La fel ca celelalte, puteți schimba culoarea de fundal fie cu o culoare solidă, fie cu un gradient și include mai multe efecte de plutire. Efectele de hover din aceasta aduc granițe și arată deosebit de elegant. Acesta este efectul Zoe hover.

Ceea ce îl deosebește pe acesta este icoanele. Puteți adăuga 4 pictograme diferite și le puteți deschide în aceeași fereastră sau într-o fereastră nouă.

Setările pictogramei includ culoare, dimensiune, spațiu, înălțimea liniei, culoarea fundalului, umbră, margine etc. În acest exemplu, am adăugat o culoare de fundal și am redus înălțimea liniei pentru a crea o linie. Am adăugat și o umbră. Acesta este efectul Hera.

Acesta este efectul Hover Terry. Am schimbat culorile titlului și ale textului de focalizare și am folosit setările pentru dimensiunile fontului și pictogramele din exemplul anterior.

Efect Mega Image

Mega Image Effect este un alt card pe 2 fețe, cu o imagine pe o parte și conținut pe cealaltă. Partea frontală afișează o imagine în mod normal.

Partea din spate a cardului afișează conținutul ca fiind normal și include ajustări ale fontului și ale fundalului. Ceea ce îl diferențiază este capacitatea de a adăuga un buton.

Aveți control complet asupra designului butoanelor, inclusiv aceleași opțiuni de culoare solidă și gradient ca fundalul standard. Acest exemplu arată un gradient pentru fundalul butonului.

Aveți control deplin asupra stilului butonului pentru fonturi și fundal. Am ajustat fontul și chenarul în acest exemplu. Fiecare element al modulului are, de asemenea, ajustări de spațiu. Am adăugat 20 de pixeli în partea de jos a butonului. Fiecare dintre module are aceste ajustări de spațiu.

Acest modul are prea multe efecte de plutire pentru a fi numărate. Numai efectele de imagine sunt impresionante, dar are și multe efecte de text. Puteți regla deplasarea imaginii și trecerea textului separat și setați momentul pentru efectul textului.

În acest exemplu se deplasează imaginea Parallel Left, efectul de text Zoom In și o mică întârziere a textului.

Plasare minimă a imaginii

Efectul minim de imagine este cel mai simplu modul din set. Afișează o imagine cu efecte de plutire.

Singura setare personalizată este efectele hover. Include 10 efecte din care puteți alege. Ne vom uita la câteva.

Acest exemplu este Scale Out Rotate. Imaginea este redusă și rotită puțin în starea sa normală. La plutire, imaginea se apropie și se rotește la starea sa normală.

Acesta este Blur. Imaginea este încețoșată până când plasați cursorul, apoi se dezlarește încet până când este clară.

Acesta este intermitent. O explozie de alb strălucește peste imagine și apoi se curăță în timp ce planezi.

Derulează imaginea următoare

Next Image Scroll plasează o suprapunere peste imagine și adaugă un buton în colțul din dreapta sus. Puteți regla culoarea butonului atât pentru culori solide, cât și pentru gradiente. Acest exemplu arată setările implicite.

De asemenea, puteți regla suprapunerea. Setați o culoare solidă sau un gradient. De asemenea, include tipuri de gradient și controale standard.

Poziția de fundal vă permite să afișați partea de sus sau de jos a imaginii.

Imaginea se deplasează în partea de sus sau în partea de jos a cursorului. În acest exemplu, modulul afișează partea de jos a imaginii și derulează până la partea de sus a imaginii pe hover.

Ultimul cursor de imagine

Ultimate Image Hover afișează dimensiunea și forma pe baza efectului pe care îl alegeți. Acesta este efectul 1. Acesta arată o porțiune a fotografiei într-o imagine înaltă dreptunghiulară. Acesta include titlul și textul focalizat, conținutul și o suprapunere. Suprapunerea include ajustări pentru culoare ca un solid sau un gradient.

La plimbare, suprapunerea se luminează și textul este dezvăluit.

Opacitatea imaginii vă permite să ajustați cantitatea de fundal care poate fi văzută. În acest exemplu, am redus opacitatea, am schimbat dimensiunea textului antetului și a focalizării, culoarea textului antetului, îndrăzneala textului de focalizare, am făcut ca textul de focalizare să fie cu majuscule și am adăugat o umbră de text textului de focalizare.

Acest modul are 24 de efecte de hover. Acestea afișează imaginea în diferite dimensiuni, niveluri de opacitate, plasarea textului și adaugă chenare.

Acesta este efectul 4. Afișează imaginea într-un pătrat și adaugă o margine în jurul interiorului care se suprapune pe capete.

Acesta este Efectul 5. Întunecă suprapunerea și adaugă o margine în jurul interiorului imaginii și afișează imaginea într-un pătrat.

Efectul 6 plasează titlul și textul de focalizare în partea de sus, cu o linie sub ele, iar conținutul în partea de jos.

Efectul 8 păstrează dimensiunea dreptunghiulară mare și adaugă o margine subțire.

Acesta este Efectul 10. La plimbare, imaginea se micșorează, linia devine un x și apare gradientul.

Următorul exemplu Image Effect Pro

Pentru un exemplu simplu, iată o privire asupra aspectului Divi Home Renovation cu modulul Ultimate Image Hover adăugat pentru a crea un CTA. Am adăugat-o în stânga imaginii și am folosit culori din aspect.

La plimbare, imaginea alunecă spre dreapta, CTA este dezvăluit, imaginea devine mai puțin opacă (ceea ce permite trecerea mai multor culori de fundal) și se adaugă un chenar. Acest exemplu folosește efectul hover 8.

Cumpărați Next Image Effect Pro

Next Image Effect Pro este disponibil pe piața Divi la prețul de 49 USD. Include utilizarea nelimitată a site-ului web, o garanție de 30 de zile pentru returnarea banilor și 1 an de asistență și actualizări.

Gânduri de sfârșit

Acesta este aspectul nostru la Next Image Effect Pro pentru Divi. Cele 7 module adaugă o mulțime de funcții de imagine care fac site-ul dvs. să iasă în evidență. Folosirea lor este intuitivă. Numărul de efecte și combinații între toate modulele este impresionant. Fiecare modul este unic, dar majoritatea adaugă imagini, titluri și conținut pentru a oferi o mulțime de posibilități de proiectare pentru CTA-uri, membrii echipei, mărturii, informații generale, informații de contact și multe altele.

Vrem sa auzim de la tine. Ați încercat Next Image Effect Pro? Spuneți-ne ce părere aveți despre asta în comentarii.

Imagine prezentată prin elenabsl / shutterstock.com