Divi Plugin Highlight - Tilt Blurb Divi Module

Blurbs sunt populare în aspectele Divi. Acestea afișează text, imagini, pictograme și multe altele, ceea ce este excelent pentru prezentarea produselor și serviciilor. Ce se întâmplă dacă ai vrea să iasă mai mult în evidență și să ofere niște animații la cursă interesante? Animațiile obișnuite se pot face prin CSS, dar dacă v-ați dori ceva diferit? Un plugin numit Tilt Blurb Divi Module ar putea fi ceea ce căutați.

Ce este Tilt Blurb Module?

Tilt Blurb Module este un plugin terț de la Hadworm care adaugă un nou modul de blurb la Divi Builder (atât pentru Divi, cât și pentru Extra) care adaugă efecte de înclinare interesante, creând un aspect 3D. În acest punct de evidențiere a pluginului, vom arunca o privire la modul și vom vedea ce poate face. Am arătat câteva gif-uri, dar majoritatea vor fi imagini datorită dimensiunilor fișierelor gif-ului. Imaginile pentru exemple sunt preluate de pe Unsplash.com și de pe WordPress.org.

Instalarea Tilt Blurb Divi Module

Încărcați și activați pluginul în mod normal. În linkul Plugin din meniul tabloului de bord, veți găsi un nou element numit Licență Turb Blurb. Faceți clic pe acesta, introduceți cheia de licență și salvați modificările. Acest lucru vă va asigura că veți primi actualizări.

Un nou modul este adăugat la Divi Builder numit Tilt Blurb. Este colorat în violet în Divi Builder, așa că este greu de ratat. Îmi place când dezvoltatorii folosesc culori diferite pentru modulele lor, astfel încât să se distingă de modulele standard (pentru ceea ce merită).

Modulul include filele standard plus una nouă:

• Conținut - text, link, imagine și pictogramă, fundal, etichetă de administrator
• Setări înclinare - setări de înclinare, fundal de înclinare, straturi de înclinare
• Proiectare - imagine și pictogramă, text, text antet, text corp, margine, dimensionare, spațiere
• Avansat - CSS ID și clase, CSS personalizat, animație, vizibilitate

Setări înclinare

Pentru aceste exemple am adăugat un fundal și apoi am plasat o imagine mai mică ca prim-plan peste el pentru a crea efectele 3D. Și apoi am făcut cafea. Multă cafea.

Exemplu cu setări implicite

Iată un exemplu despre cum arată înclinarea 3D înainte de a modifica. Am adăugat un titlu, text, fundal și pictogramă. Înclinarea urmărește mouse-ul meu și diferențiază textul și pictograma de imagine, oferindu-i un aspect 3D. Pentru mine efectul de paralaxă a scăpat de fundal, așa că nu l-am folosit.

Dimensiune cu imagine

Aceasta dimensionează blurb-ul folosind o imagine ascunsă și centrează conținutul.

Tilt Blurb Size cu 2 imagini cu conținut float

Aceasta include două imagini - una pentru prim-plan și una pentru fundal. Imaginea și textul din prim-plan sunt în 3D utilizând funcția de conținut float.

Puteți regla cantitatea de float care funcționează ca un zoom, aducând conținutul din prim plan mai aproape de cititor. Această imagine folosește 200 pentru suma float, care este maximizată.

Cantitatea de înclinare

Glisorul pentru cantitatea de înclinare vă permite să controlați cât de mult se va înclina imaginea. Setarea implicită este 20. Aceasta folosește 100.

Perspectiva înclinării

Perspectiva Tilt aprofundează perspectiva. Cu cât numărul este mai mic, cu atât perspectiva este mai profundă. Valoarea implicită este 1000. Acest exemplu este 200.

Scala de înclinare

Tilt Scale este un nivel de zoom. Valoarea implicită este 1.1, ceea ce înseamnă că, la plimbare, imaginea este înmulțită cu 1.1. Acest exemplu este 2. Merge la 0, dar nivelul 0 a creat un zoom continuu înainte și înapoi care nu a funcționat pentru această imagine. Este posibil să fie nevoie de unele experimente pentru a-l face să facă ceea ce doriți.

Viteza de înclinare

Tilt Speed ​​controlează viteza pe care o mișcă imaginea în timp ce plasați cursorul. Cu cât numărul este mai mic, cu atât se mișcă mai repede. Valoarea implicită este 100. Aceasta este 5000. Sunt parțial efectului lent.

Tilt Reverse

Tilt Reverse modifică direcția de înclinare. În mod normal, înclinarea se îndepărtează de mouse. Reverse înclină imaginea către mouse.

Tilt Glare

Tilt Glare adaugă un efect de strălucire care urmează mouse-ului. Cantitatea de orbire este reglabilă. Imaginea de mai sus folosește .8, care este setarea implicită. Acest lucru este minunat pentru a crea efecte de iluminare.

Raza de frontieră

Raza chenarului modifică forma chenarului. Valoarea implicită este 40. Aceasta este setată la 100, suma maximă.

Fundal înclinat

Tilt Background vă permite să setați o culoare de fundal și efecte de margine.

Fundal înclinat

Un efect secundar al culorii de fundal Tilt este că creează o strălucire frumoasă în jurul imaginii.

Reglați culoarea de fundal Tilt, lățimea chenarului, stilul chenarului de fundal, lățimea chenarului și culoarea umbrelor chenarului și casetei.

Distanță de fundal înclinată

Distanța de fundal înclinată reglează distanța umbrei. Este setat la -50 în mod implicit. Acest exemplu folosește -25.

Acest exemplu folosește o distanță de fundal înclinată de 0 și o opacitate de .3, care creează o suprapunere peste fundal.

Inclinați dimensiunea / scara fundalului

Tilt Background Size / Scale modifică distanța fundalului de înclinare. Valoarea implicită este 1.04. Acesta este 1.2.

Straturi de înclinare

Tilt Layers aplică aceeași imagine de mai multe ori ca mai multe straturi, creând un efect 3D solid. Poate folosi o imagine sau o culoare de fundal și puteți regla adâncimea stratului. Am aplicat imaginea de mai sus cu o adâncime a stratului de 50.

Imaginea pe care am aplicat-o este văzută aici ca graniță. Am ajustat cantitatea de înclinare pentru a ușura vizualizarea.

După cum era de așteptat, partea de jos a imaginii arată diferit. Acesta este un mod excelent de a adăuga o anumită textură la margine. O adâncime mai mică a stratului va face marginea mai subțire.

Acesta folosește o adâncime de strat de 10.

Acest exemplu folosește atât straturi de fundal de înclinare, cât și straturi de înclinare.

Iată un logo WordPress 3D care pare să fie încorporat în cristal. Am încărcat sigla în zona de imagine Imagine și pictogramă, am setat cantitatea de înclinare la 100, am folosit reflexul de înclinare implicit, am adăugat sigla la imaginea stratului sub Straturi de înclinare, am setat o adâncime a stratului de 50 și am setat culoarea stratului la alb și aproape complet transparent.

Iată sigla fără culoare de strat. Părțile sunt mai greu de văzut.

Licență, asistență și documentație

Pluginul poate fi utilizat pe site-uri web nelimitate pentru dvs. și clienții dvs. Include 6 luni de sprijin. Documentația este furnizată pe site-ul dezvoltatorului. Acesta include instrucțiuni despre cum să creați unele dintre exemplele care sunt spectacole pe site-ul web. Aș dori să văd și mai multe exemple, cum ar fi modul în care au fost făcute logo-urile.

Gânduri finale

Tilt Blurb Module oferă o mulțime de efecte de înclinare interesante, ceea ce creează un aspect 3D frumos pentru imagini, pictograme și text. Este o modalitate excelentă de a crea CTA-uri, coperți de cărți 3D și imagini de produs. Tilt Blurb Module este atât inovator, cât și intuitiv. Dacă doriți să adăugați câteva efecte de înclinare frumoase la blurbs, Tilt Blurb Module merită să aruncați o privire.

Vrem sa auzim de la tine. Ați încercat Tilt Blurb Divi Module? Spuneți-ne ce părere aveți despre asta în comentariile de mai jos.

Imagine prezentată prin hobbit / shutterstock.com