Cum să creați carduri Flip cu orice modul din Divi fără un plugin

Flip Cards sunt o modalitate distractivă pentru utilizatori de a interacționa cu site-ul dvs. web. Nu numai că oferă o animație cool, ci vă permite să oferiți informații suplimentare într-o locație concisă. În acest tutorial, vă voi arăta cum să transformați modulele Divi în cartele flip fără a utiliza un plugin! Cu această metodă, veți putea utiliza un modul Divi ca față a unui card și un alt modul Divi ca partea din spate a unui card. Puteți chiar să proiectați fiecare modul (față și spate) oricum doriți să utilizați divi builder. Funcționalitatea este realizată prin doar câteva fragmente de CSS (fără jquery).

Cred că veți fi surprinși de cât de simple și distractive pot fi aceste cărți.

Hai să ne scufundăm!

Sneak Peak

Iată un vârf al designului pe care îl vom construi astăzi.

Abonați-vă la canalul nostru Youtube

De ce aveți nevoie pentru acest tutorial

Tot ce veți avea nevoie pentru acest tutorial este Divi! Nu este nevoie de niciun plugin. Vom folosi, de asemenea, pachetul de aspect pentru dezvoltatori de aplicații, care este GRATUIT și disponibil în Divi Builder.

Ideea de bază explicată

Inspirația pentru acest concept a venit de fapt din acest exemplu de bază al modului de proiectare a cardurilor flip. Tot ce a fost nevoie a fost o mică reproiectare pentru a atribui clasele div rândurilor, coloanelor și modulelor Divi și apoi a curăța puțin CSS-ul.

Aspectul Divi constă dintr-o secțiune obișnuită cu patru rânduri cu o coloană. În fiecare rând, am adăugat două module blurb stivuite unul peste altul (deși orice modul Divi ar funcționa la fel). Blurbul superior servește drept partea din față a cardului flip, iar blurbul inferior servește ca partea din spate a cardului flip. Prin aplicarea secțiunii „display: flex”, rândurile sunt structurate orizontal ca coloane. Acest lucru permite cărților să fie aliniate unul lângă altul în patru coloane.

Iată cum arată configurarea înainte de a adăuga CSS personalizat.

Apoi am adăugat CSS personalizat la setările paginii și am adăugat clasele CSS corespunzătoare la fiecare rând, coloană și modul.

Asta e!

Crearea cardurilor Divi Flip folosind un aspect premade

Adăugarea aspectului premade la pagina dvs.

Pentru ca lucrurile să ruleze, continuați și creați o pagină nouă, dați-vă paginii un titlu, apoi faceți clic pentru a utiliza Divi Builder. Selectați opțiunea „Alegeți un aspect premade”. Din fereastra pop-up Încărcare din bibliotecă, selectați pachetul de aspect pentru dezvoltatori de aplicații și apoi faceți clic pentru a utiliza aspectul paginii de destinație pentru dezvoltatori de aplicații.

După ce aspectul se încarcă pe pagină, publicați-vă pagina, apoi faceți clic pe butonul „Construiți pe front-end”. Acum sunteți gata să începeți să creați Flip Cards.

Configurarea secțiunii, rândurilor și modulelor

Sub prima secțiune a aspectului, adăugați o nouă secțiune obișnuită cu un rând cu o coloană. Nu adăugați încă module. Deschideți setările rândului și actualizați următoarele:

Marjă personalizată: 20 px de jos
Împletire personalizată: 0 px sus, 0 px jos

Salvează setările.

Apoi copiați rândul de trei ori, astfel încât să aveți un total de patru rânduri în secțiune.

Acum deschideți setările secțiunii și adăugați următoarele elemente CSS personalizate la elementul principal:

display:flex;

Acest lucru schimbă rândurile pentru a se afișa orizontal, ceea ce convertește practic rândurile noastre în patru coloane, chiar dacă din punct de vedere tehnic acestea sunt încă rânduri Divi fiecare cu câte o coloană.

Adăugarea modulelor la rânduri

Aici aspectul nostru premade este util pentru acest tutorial. Vom folosi cele patru module de blurb din secțiunea superioară a aspectului pentru a porni proiectul cardurilor noastre flip. Folosind opțiunile de clic dreapta sau tastele scurte ctrl + c și ctrl + v (windows) și cmd + c cmd + v (mac), copiați și lipiți modulele premade în fiecare dintre rândurile pe care tocmai le-am creat. Asigurați-vă că fiecare rând are versiuni duplicate ale aceluiași modul.

Acum secțiunea dvs. ar trebui să arate astfel.

Proiectarea modulelor de card Flip față și spate

Cele două module stivuite în fiecare rând vor fi folosite ca față și spate a cărților flip. Modulul superior din fiecare rând va servi drept față, iar modulul inferior va servi drept spate. Întrucât proiectarea cardului frontal (modulul superior) este deja realizat datorită aspectului nostru premade, tot ce trebuie să facem este să ajustăm designul și conținutul cardului posterior (modulul inferior).

Folosind funcția Divi multiselect, selectați toate modulele de jos din fiecare rând și apoi deschideți setările elementului pentru a personaliza toate cele patru module în același timp.

Acum putem actualiza opțiunile de setări ale elementelor pentru a stiliza versiunea din spate a cardurilor noastre flip. Actualizați setările elementului după cum urmează:

Conținut: „Aceasta este o descriere”.
Culoare fundal: # 00a2fa
Culoarea textului: deschis

Adăugarea de CSS personalizate și clase CSS

Acum este timpul pentru CSS-ul personalizat care ne va oferi funcționalitatea flip card. Deschideți setările paginii și adăugați următoarele CSS personalizate:

@media (min-width:981px){
.flip-box-row {
  background-color: transparent;
  width: 250px;
  height: 250px;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
}

Observați că clasele CSS de mai sus sunt denumite într-un mod care ar trebui să vă ajute să înțelegeți ce face fiecare. Este, de asemenea, un indicator util cu privire la locul în care trebuie să adăugăm acele clase CSS la elementele noastre Divi. De exemplu, clasa „flip-box-row” este menită să stilizeze fiecare dintre cele patru rânduri; prin urmare, fiecare rând trebuie să aibă acea clasă CSS.

Adăugarea de clase CSS la elementele Divi

Folosind Multiselect, selectați toate cele patru module de sus (cărți frontale) din fiecare rând. Apoi adăugați următoarea clasă CSS:

Clasa CSS: flip-box-front

Apoi, utilizați multiselect pentru a selecta toate cele patru module de jos (cărți din spate) din fiecare rând și adăugați următoarea clasă CSS la aceste module:

Clasa CSS: flip-box-back

În cele din urmă, utilizați multiselect pentru a selecta toate cele patru rânduri și acordați-le următoarele clase CSS:

Clasa CSS: flip-box-row
Coloana CSS Class: flip-box-column

Design final pe desktop

Cu toate clasele noastre CSS adăugate, cardurile noastre flip sunt complet funcționale. Verificați designul final pe desktop.

Personalizarea designului pentru mobil

În codul CSS personalizat pe care l-am adăugat deja la setările paginii, există o interogare media care limitează funcționalitatea cardului flip doar la desktop. Cu toate acestea, trebuie totuși să ascundem versiunile frontale ale cardurilor noastre flip pe tabletă și smartphone, precum și să ne asigurăm că rândurile noastre se stivuiesc frumos atunci când ajustăm lățimile browserului.

Pentru a ascunde modulele noastre de afișare a cardurilor frontale, utilizați multiselect pentru a selecta toate modulele superioare (cărțile frontale) din fiecare rând (acest lucru va fi mai ușor în modul de vizualizare wireframe, deoarece lucrurile se vor deplasa în cadrul constructorului frontal) și actualizați următoarele:

Dezactivați pe: Telefon și Smartphone

Apoi deschideți setările secțiunii și adăugați încă o linie de CSS la elementul principal, pe lângă cea adăugată anterior:

flex-wrap:wrap;

Acest lucru vă va asigura că rândurile se vor stiva pe mobil.

Acum, să verificăm designul final pe tabletă și smartphone.

Opțiune bonus: carduri verticale Flip!

Dacă doriți ca cardurile dvs. flip să se întoarcă vertical în loc de orizontală, trebuie doar să schimbați două litere (literalmente) în CSS personalizat. Deschideți setările paginii și localizați cele două locuri în care se folosește „transform: rotateY (180deg)”. Apoi înlocuiți „Y” cu „X”. Dacă nu ați ghicit deja, acest lucru modifică rotația pentru a se roti pe axa X în loc de axa Y.

Lucruri destul de cool! Verificați rezultatul.

Gânduri finale

Nu trebuie să recurgeți la un plugin pentru a crea Flip Cards cu aspect deosebit în Divi. Cu acest tutorial, aveți un cadru pentru a crea nenumărate modele și combinații de conținut flip card. Nu uitați că puteți alege oricare două module care să servească drept partea din față și din spate a cărților. Așadar, nu ezitați să fiți creativi!

Sper că acest lucru a fost de ajutor și aștept cu nerăbdare să primesc de la dvs. comentariile de mai jos.

Noroc!