Cum să creezi suprapuneri și efecte de hover pentru flipbox în WordPress

Doriți să adăugați suprapuneri de flipbox și efecte de hover pe imagini pe site-ul dvs. WordPress?

Chiar dacă folosiți o temă WordPress de înaltă calitate, s-ar putea să vă simțiți limitat de opțiunile de personalizare. În acest caz, puteți folosi flipbox-uri și hover-uri pe imagini pentru a adăuga efecte animate atrăgătoare pe site-ul dvs.

În acest articol, vă vom arăta cum să adăugați suprapuneri pentru flipbox și efecte de hover pentru imagini pe site-ul dvs. WordPress.

Ce este un Flipbox?

Un flipbox este o casetă care se răstoarnă atunci când plasați cursorul mouse-ului peste ea. Puteți adăuga acest efect de hover la conținut precum imagini și casete de text.

Similar altor conținuturi animate, cum ar fi GIF-uri și slider-e responsive, efectul flipbox îl poate face mai interactiv și mai captivant. De exemplu, ați putea afișa o fotografie a autorului și numele, apoi să folosiți o animație flipbox pentru a dezvălui biografia acestuia atunci când un cititor trece cu mouse-ul peste ea.

Dacă sunteți un freelancer WordPress, atunci puteți afișa logo-urile clienților dvs. și apoi puteți folosi o animație de flip pentru a dezvălui un link către fiecare proiect.

Deși aceste efecte animate pot îmbunătăți experiența utilizatorului pe site-ul dvs., este important să nu exagerați. Un număr mare de animații poate deveni copleșitor și confuz și poate chiar afecta performanța site-ului dvs..

Acestea fiind spuse, să vedem cum puteți adăuga suprapuneri de flipbox și efecte de hover pe imagini pe site-ul dvs. WordPress.

Cum să creezi suprapuneri de flipbox și efecte de hover în WordPress

Există multe moduri diferite de a adăuga animații în WordPress, inclusiv utilizarea constructorului de pagini SeedProd sau scrierea de cod personalizat.

Cu toate acestea, cea mai bună modalitate de a crea efecte flipbox și hover este utilizând pluginul Flipbox – Awesomes Flip Boxes Image Overlay. Acest plugin gratuit vine cu mai multe stiluri diferite de flipbox, prezentând un amestec de imagini, text și butoane de apel la acțiune.

Crearea unui nou Flipbox

Primul lucru pe care va trebui să-l faceți este să instalați și să activați pluginul Flipbox – Awesomes Flip Boxes Image Overlay. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

Odată ce plugin-ul este instalat și activat, puteți crea primul dvs. flipbox accesând Flip Box » Create New.

Aceasta arată toate șabloanele diferite pe care le puteți utiliza.

Dacă nu doriți să utilizați niciunul dintre aceste modele, faceți clic pe „Importă șabloane”.

Dacă vedeți un șablon pe care doriți să îl utilizați, atunci continuați și faceți clic pe „Import” pentru a-l adăuga la blogul dvs. WordPress sau la site-ul web.

După ce ați ales un design, trebuie să faceți clic pe butonul său „Create Style”.

În fereastra pop-up care apare, introduceți un nume pentru designul flipbox-ului. Acesta este doar pentru referința dvs., deci puteți folosi orice doriți.

Puteți alege, de asemenea, ce aspect să utilizați, făcând clic pe 1, 2 sau 3.

După ce ați terminat, faceți clic pe „Salvează”.

Adăugați conținut la Flipbox-ul dvs.

Puteți schimba aspectul flipbox-ului folosind filele General, Front și Backend.

Puteți schimba fonturile, spațierea și marginile. Majoritatea acestor setări sunt auto-explicative, așa că merită să le parcurgeți pentru a vedea ce efecte diferite puteți crea.

Când sunteți mulțumit de aspectul casetei, este timpul să adăugați conținut. Pur și simplu derulați la previzualizarea flipbox-ului din partea de jos a ecranului și plasați mouse-ul peste el.

Când apare, faceți clic pe butonul „Edit”.

Pentru a schimba titlul care apare pe fața flipbox-ului, îl poți tasta în câmpul „Titlu frontal”.

După aceea, puteți schimba pictograma frontală făcând clic pe câmpul „Pictogramă font” și apoi alegând o nouă imagine din fereastra pop-up care apare.

Apoi, puteți adăuga o imagine pe fața flipbox-ului. Pur și simplu faceți clic pe „Upload Image” și apoi alegeți un fișier din biblioteca media sau încărcați o imagine nouă de pe computerul dvs.

Dacă nu aveți deja o imagine pe care doriți să o utilizați, atunci o puteți crea folosind un software de design web precum Canva.

Când sunteți mulțumit de flipbox-ul frontal, este timpul să proiectați spatele. Pentru a începe, introduceți conținutul pe care doriți să îl afișați în caseta „Informații backend”.

Adesea, veți dori să folosiți un apel la acțiune pentru a trimite vizitatorii către o pagină relevantă, cum ar fi lista unui produs popular, informații despre prețuri sau alt conținut.

Pentru a schimba textul care apare pe butonul de apel la acțiune, pur și simplu tastați în „Text buton spate”. Apoi puteți adăuga URL-ul destinație în câmpul „Link”.

În final, apasă pe „Upload Now” pentru a schimba imaginea de fundal.

Când sunteți mulțumit de modul în care este configurată partea din spate a flipbox-ului, este timpul să faceți clic pe „Trimite”.

Previzualizarea se va actualiza acum pentru a afișa toate modificările dumneavoastră.

Creează multiple flipbox-uri

În acest moment, s-ar putea să dorești să adaugi mai multe casete făcând clic pe „+” în secțiunea „Adaugă noi flipbox-uri”.

Acest lucru vă permite să creați mai multe flipbox-uri cu același stil și apoi să le organizați în coloane și rânduri.

Acum puteți crea mai multe flipbox-uri urmând procesul descris mai sus.

De exemplu, ați putea crea un flipbox pentru fiecare dintre planurile dvs. de prețuri.

Adăugați Flipbox pe site-ul dvs. WordPress

Când sunteți mulțumit de flipbox, îl puteți adăuga pe site-ul dvs. WordPress folosind un shortcode pe care plugin-ul îl oferă automat.

În partea dreaptă a ecranului, copiați valoarea din caseta „Shortcode”.

Puteți adăuga acum flipbox-ul pe orice pagină, postare sau zonă pregătită pentru widget-uri folosind shortcode.

Pentru instrucțiuni pas cu pas despre cum să plasați shortcode-ul, vă rugăm să consultați ghidul nostru despre cum să adăugați un shortcode în WordPress.

Plugin-ul are, de asemenea, un widget de flipbox pe care îl puteți adăuga în orice zonă pregătită pentru widget-uri a temei dvs. WordPress.

Dacă ați creat mai mult de o animație flipbox, atunci va trebui să cunoașteți ID-ul. Pentru a obține aceste informații, puteți accesa Flip Box » Flip Box și căuta în coloana „ID”.

În imaginea următoare, ID-ul flipbox-ului este 1.

Când aveți aceste informații, accesați Aspect » Widget-uri.

Aici, trebuie să faceți clic pe butonul „+”.

Acum puteți tasta „Flipbox”.

Când apare widget-ul corect, pur și simplu trageți-l și plasați-l pe bara laterală, subsol sau o secțiune similară.

Widgetul Flipbox va afișa una dintre animațiile dvs. în mod implicit.

Pentru a afișa un alt flipbox în schimb, introduceți ID-ul acestuia în câmp.

Când sunteți mulțumit de aspectul widget-ului, faceți clic pe „Update”.

Pentru mai multe informații, consultați ghidul nostru despre cum să adăugați și să utilizați widget-uri în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați suprapuneri și efecte de hover pentru flipbox pe site-ul dvs. WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să creați o galerie de imagini, sau să vedeți selecția noastră de experți a celor mai bune plugin-uri de slider WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.