Cum se adaugă o cutie flip în WordPress cu elementor

Tendința în designul web evoluează aproape zilnic. Pentru a rămâne relevant și competitiv pe piață, adaptarea constantă la aceste modificări este obligatorie pentru toți proprietarii de site -uri. Chiar și câțiva ani în urmă, elementele web statice au fost suficiente pentru a atrage atenția utilizatorului și a vizitatorilor.

Dar acum, majoritatea designerilor își construiesc site -urile folosind elemente interactive pentru a stimula implicarea. Elementele web interactive sunt proiectate într -un mod care să răspundă acțiunilor utilizatorilor, cum ar fi clicuri, capturi, mișcări și defilări, pentru a crea o experiență captivantă. Flip Box este un astfel de element interactiv.

În această postare tutorial, vom acoperi un ghid pas cu pas despre cum să adăugați cutii flip la WordPress cu Elementar. Sper că veți găsi această postare cu adevărat utilă și merită timp. Începeți!

Ce este o cutie flip? Cazurile sale de utilizare în designul web

O casetă Flip este un widget interactiv Elementar care vă permite să afișați conținut atât pe partea din față, cât și pe cele din spate ale unei casete, care se scurge atunci când a trecut sau a făcut clic. Acesta combină apelul vizual cu mișcarea dinamică pentru a atrage atenția utilizatorului, în timp ce prezintă două straturi de informații.

Acest widget este extrem de util atunci când trebuie să acoperiți o mulțime de informații într -un spațiu limitat. Widgetul oferă o mulțime de opțiuni de personalizare, astfel încât să puteți alinia designul său cu brandul site -ului dvs. Să aruncăm o privire la modul în care funcționează cutiile flip în videoclipul scurt atașat mai jos.

Utilizați cazuri de flip box în design web

• Repere de serviciu sau caracteristici cu pictograme pe față și descrieri pe spate
• Membrii echipei prezintă o fotografie în față și bio/informații de contact pe spate
• Comparația caracteristicilor produsului într -un format compact și interactiv
• Apeluri la acțiuni care dezvăluie butoane sau link-uri atunci când sunt răsturnate
• Portofoliu afișează cu miniaturi de proiect pe față și rezumate pe spate
• Planuri de prețuri cu nume de plan în față și liste de caracteristici pe partea flip

Cum se adaugă o cutie flip în WordPress cu elementor

Pentru a începe procesul, trebuie să aveți următoarele pluginuri pe site -ul dvs. Obțineți -le făcând clic pe linkurile atașate mai jos.

• Element
• Happyaddons
• HappyAddons Pro

După ce sunt instalate și activate pe site -ul dvs., începeți să urmați tutorialul descris mai jos despre cum să utilizați widgetul Flip Box.

Pasul 01: Deschideți pânza elementar

Deschideți postarea sau pagina cu Canvas Elementar unde doriți să adăugați widgetul Flip Box.

Pasul 02: Selectați o secțiune pentru adăugarea widgetului Flip Box

Creați o secțiune, definind numărul de coloane, astfel încât să puteți adăuga widgetul Flip Box peste ele.

Găsiți widgetul Flip Box pe panoul Elementar. Trageți -l și aruncați -l în secțiunea respectivă de pe pânza elementar.

Veți vedea că widgetul Flip Box este adăugat pe pânză cu un conținut manechin.

Pasul 03: Selectați o presetare pentru caseta Flip

O presetare este un stil de design salvat pe care îl puteți aplica rapid pe widget -uri. Widgetul Flip Box vine cu mai multe presetări pe care le veți vedea pe bara laterală din dreapta.

Selectați orice presetare doriți. Veți vedea că stilul este aplicat instantaneu pe widget -ul dvs.

Pasul 04: Adăugați conținut în partea din față a widgetului

După cum s -a spus deja, widgetul Flip Box vă permite să adăugați conținut în ambele părți. Să adăugăm acum conținut în partea din față. Extindeți secțiunea din față .

Puteți seta o imagine, rezoluție de imagine, titlu, etichetă HTML pentru titlu, descriere și aliniere pentru widget. Fă -o singur.

Puteți vedea că am adăugat un anumit conținut (o imagine, un titlu și o descriere) în partea din față a casetei flip.

Pasul 05: Adăugați conținut în partea din spate a widgetului

În același mod, extindeți secțiunea din spate a widgetului. Puteți adăuga un media, un titlu, o descriere și un buton, definind alinierea acestora. Faceți lucrurile necesare după cum doriți.

Puteți vedea că am adăugat și un conținut aici.

Pasul 06: Configurați setările pentru widgetul Flip Box

Apoi, extindeți secțiunea Setări . Veți obține opțiuni pentru a configura tipul de animație, direcția flip și durata.

Pasul 07: Stilizați cutia Flip

Vino în fila Style . Veți primi patru secțiuni aici. Prima secțiune este comună .

Puteți seta o înălțime și o rază de bordură pentru widgetul Flip Box din secțiunea comună.

Apoi, extindeți secțiunea din față . Puteți personaliza căptușeala, tipul de frontieră, umbra cutiei, tipul de fundal, distanțarea și redimensionarea imaginii din această secțiune.

În același mod, prin extinderea secțiunii din spate , puteți să -i stilizați căptușirea, tipul de frontieră, umbra de cutie, tipul de fundal, culoarea și tipografia.

Sper că le poți face singure. Am schimbat tipografia și greutatea textului pentru widget -ul nostru pentru a explica acest tutorial.

Pasul 08: Personalizați butonul

Butonul este afișat pe partea din spate a cutiei Flip. Prin extinderea secțiunii din spate - buton , puteți configura lățimea de frontieră, culoarea de frontieră, raza de frontieră, umbra cutiei, tipografia, culoarea și culoarea de fundal a butonului.

Fă -o singur.

Pasul 09: Faceți sensibilitatea widget -ului Flip Box

Cu excepția cazului în care widget -urile Elementar sunt optimizate pentru tablete și dispozitive mobile, site -ul dvs. poate fi rupt pe ecrane mai mici, ceea ce duce la o experiență slabă a utilizatorului și la rate mai mari de respingere.

Faceți clic pe opțiunea Mod Responsive din partea de jos a panoului Elementar. Acesta va apărea opțiunile swtich beteen diferite dimensiuni de ecran (desktop, tabletă și mobil).

Selectați dimensiunea ecranului mobil. Apoi, personalizați aspectul și elementele de pe caseta de flip în așa fel încât să se potrivească pentru dimensiunea ecranului. Faceți -o și pentru ecranul tabletei.

Astfel, în același mod, creați cât mai multe casete de flip pe care doriți pentru site -ul dvs. Elementar.

Bonus: Ce mai poți face cu HappyAddons

Pe lângă crearea Flip Box, puteți face multe alte lucruri cu pluginul HappyAddons. Haideți să aruncăm o privire rapidă la ceea ce puteți face mai mult cu pluginul de ce trebuie să îl luați în considerare în lista dvs. scurtă.

• Construirea tematică

Construirea tematică este o caracteristică gratuită a HappyAddons, care este premium în Elementar. Cu HappyAddons Theme Builder, puteți crea anteturi, subsoluri, șabloane de postare pe blog, pagini de arhivă și o setare de condiții.

• Integrarea WooCommerce

Are nouă widget -uri pentru WooCommerce. Sunt grilă de produse, carusel de produse, grilă de categorii de produse, carusel de categorii de produse, produs unic, mini cărucior, coș, checkout și bara de transport. Cu ei, puteți extinde și mai mult puterea site -urilor dvs. de comerț electronic.

• Integrarea social media

HappyAddons vă oferă aceste widget -uri de socializare - pictogramă socială, cota socială, feed Twitter, feed Facebook, carusel de feed Twitter și feed Instagram. Cu ei, puteți conecta site -ul dvs. web la platformele sociale populare pentru distribuirea conținutului.

• Proiectarea paginii infografice

HappyAddons include diverse widget -uri, cum ar fi graficul de bar, graficul de linie, diagrama de plăcintă și gogoși, graficul de zonă polară și graficul radar. Folosindu -le bine, puteți crea postări și pagini infografice uimitoare pe site -ul dvs. WordPress. Verificați cum să creați o pagină web infografică.

• Creative

Happyaddons are în prezent peste 25 de widget-uri creative care sunt utile în crearea de site-uri web atrăgătoare. Unele dintre cele mai populare widget -uri creative sunt cardul, efectul de imagini, factorul de distracție, grupul de stivă de imagini, grila justificată, butonul creativ, imaginea lichid, derularea textului și o pagină nav.

Așadar, după ce aveți pluginul HappyAddons, nu numai că puteți adăuga cutii de flip, ci și alte elemente, după cum am menționat mai sus. Deci, cu siguranță HappyAddons ar putea merita cu adevărat banii tăi.

Închiderea!

Sper că v -a plăcut acest tutorial. Deși este un widget simplu și ușor de utilizat, poate îmbunătăți cu adevărat apelul și estetica site -ului dvs. web. Cu toate acestea, pentru a obține cel mai bun rezultat, există mai multe cele mai bune practici de care trebuie să țineți cont în timp ce utilizați acest widget.

Nu supraaglomerați partea din față sau din spate. Utilizați pictograme clare, text concis și distanță suficientă. Testați și reglați pentru tablete și vizualizări mobile pentru a evita pauzele de amenajare. Dacă partea din spate are un buton sau un link, asigurați -vă că iese în evidență și este ușor de atins. Potriviți stilul Flip Box cu culorile, fonturile și brandul site -ului dvs.

Dacă vă confruntați cu probleme în timp ce utilizați acest plugin, nu ezitați să ne contactați cu caseta de chat sau cu sistemul de asistență.