Come creare flip card con qualsiasi modulo in Divi senza plug-in

Le Flip Card sono un modo divertente per gli utenti di interagire con il tuo sito web. Non solo fornisce una fantastica animazione flip, ma ti consente anche di offrire informazioni aggiuntive in un'unica posizione concisa. In questo tutorial, ti mostrerò come trasformare i moduli Divi in ​​schede a fogli mobili senza utilizzare un plug-in! Con questo metodo, sarai in grado di utilizzare un modulo Divi come parte anteriore di una carta e un altro modulo Divi come parte posteriore di una carta. Puoi persino progettare ogni modulo (fronte e retro) come preferisci usando il divi builder. La funzionalità viene realizzata tramite pochi frammenti di CSS (no jquery).

Penso che rimarrai sorpreso da quanto possa essere semplice e divertente costruire queste carte.

Immergiamoci!

Sneak Peak

Ecco un'anteprima del design che costruiremo oggi.

Iscriviti al nostro canale Youtube

Cosa ti serve per questo tutorial

Tutto ciò di cui avrai bisogno per questo tutorial è Divi! Nessun plug-in necessario. Utilizzeremo anche l'App Developer Layout Pack che è GRATUITO e disponibile all'interno di Divi Builder.

L'idea di base spiegata

L'ispirazione per questo concetto è venuta in realtà da questo esempio di base su come progettare le carte a fogli mobili. È bastato un po' di reingegnerizzazione per assegnare le classi div a righe, colonne e moduli Divi e quindi ripulire un po' il CSS.

Il layout Divi è costituito da una sezione regolare con quattro righe di una colonna. In ogni riga, ho aggiunto due moduli blurb impilati uno sopra l'altro (anche se qualsiasi modulo Divi funzionerebbe altrettanto bene). Il contrassegno superiore funge da parte anteriore della carta ruotabile e il contrassegno inferiore funge da retro della carta ruotabile. Applicando “display:flex” alla sezione, le righe vengono strutturate orizzontalmente come colonne. Questo permette alle carte di essere allineate una accanto all'altra in quattro colonne.

Ecco come appare la configurazione prima di aggiungere il CSS personalizzato.

Quindi ho aggiunto il CSS personalizzato alle impostazioni della pagina e ho aggiunto le classi CSS corrispondenti a ogni riga, colonna e modulo.

Questo è tutto!

Creazione di Divi Flip Card utilizzando un layout predefinito

Aggiungere il layout predefinito alla tua pagina

Per far funzionare le cose, vai avanti e crea una nuova pagina, assegna un titolo alla pagina e quindi fai clic per utilizzare Divi Builder. Seleziona l'opzione "Scegli un layout predefinito". Dal popup Carica dalla libreria, seleziona il pacchetto layout sviluppatore app e quindi fai clic per utilizzare il layout della pagina di destinazione sviluppatore app.

Una volta che il layout viene caricato nella pagina, pubblica la tua pagina e quindi fai clic sul pulsante "Crea sul front-end". Ora sei pronto per iniziare a creare le Flip Cards.

Impostazione della sezione, delle righe e dei moduli

Sotto la prima sezione del layout, aggiungi una nuova sezione regolare con una riga a una colonna. Non aggiungere ancora alcun modulo. Apri le impostazioni della riga e aggiorna quanto segue:

Margine personalizzato: 20 px in basso
Imbottitura personalizzata: 0px in alto, 0px in basso

Salva le impostazioni.

Quindi duplica la riga tre volte in modo da avere un totale di quattro righe nella sezione.

Ora apri le impostazioni della sezione e aggiungi il seguente CSS personalizzato all'elemento principale:

display:flex;

Questo cambia le righe da visualizzare orizzontalmente, il che sostanzialmente converte le nostre righe in quattro colonne anche se tecnicamente sono ancora righe Divi ciascuna con una colonna.

Aggiunta dei moduli alle righe

È qui che il nostro layout prefabbricato torna utile per questo tutorial. Utilizzeremo i quattro moduli blurb nella sezione superiore del layout per avviare il design delle nostre schede a fogli mobili. Usando le opzioni del tasto destro o i tasti di scelta rapida ctrl+c e ctrl+v (Windows) e cmd+c cmd+v (mac), copia e incolla i moduli predefiniti in ciascuna delle righe che abbiamo appena creato. Assicurati che ogni riga abbia versioni duplicate dello stesso modulo.

Ora la tua sezione dovrebbe assomigliare a questa.

Progettazione dei moduli flip card anteriore e posteriore

I due moduli impilati in ogni riga verranno utilizzati come fronte e retro delle carte a fogli mobili. Il modulo superiore in ogni riga fungerà da anteriore e il modulo inferiore fungerà da retro. Poiché il design della carta anteriore (modulo superiore) è già stato realizzato grazie al nostro layout predefinito, tutto ciò che dobbiamo fare è regolare il design e il contenuto della carta posteriore (modulo inferiore).

Utilizzando la funzione di selezione multipla Divi, seleziona tutti i moduli in basso in ogni riga e quindi apri le impostazioni dell'elemento per personalizzare tutti e quattro i moduli contemporaneamente.

Ora possiamo aggiornare le opzioni delle impostazioni degli elementi per modellare la versione posteriore delle nostre carte a fogli mobili. Aggiorna le impostazioni dell'elemento come segue:

Contenuto: "Questa è una descrizione".
Colore di sfondo: #00a2fa
Colore del testo: chiaro

Aggiunta di classi CSS e CSS personalizzate

Ora è il momento per il CSS personalizzato che ci darà la funzionalità della carta a fogli mobili. Apri le impostazioni della pagina e aggiungi il seguente CSS personalizzato:

@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);
}
}

Nota che le classi CSS di cui sopra sono denominate in un modo che dovrebbe aiutarti a capire cosa sta facendo ciascuna. È anche un utile indicatore di dove dobbiamo aggiungere quelle classi CSS ai nostri elementi Divi. Ad esempio, la classe "flip-box-row" ha lo scopo di modellare ciascuna delle quattro righe; quindi, ogni riga deve avere quella classe CSS.

Aggiunta di classi CSS agli elementi Divi

Utilizzando Multiselect, seleziona tutti e quattro i moduli superiori (schede anteriori) in ciascuna delle righe. Quindi aggiungi la seguente classe CSS:

Classe CSS: flip-box-front

Quindi, usa multiselect per selezionare tutti e quattro i moduli in basso (carte posteriori) in ciascuna delle righe e aggiungi la seguente classe CSS a quei moduli:

Classe CSS: flip-box-back

Infine, usa multiselect per selezionare tutte e quattro le righe e assegna loro le seguenti classi CSS:

Classe CSS: flip-box-row
Colonna Classe CSS: flip-box-column

Progetto finale su desktop

Con tutte le nostre classi CSS aggiunte, le nostre schede a fogli mobili sono perfettamente funzionanti. Guarda il design finale sul desktop.

Personalizzazione del design per dispositivi mobili

Nel codice CSS personalizzato che abbiamo già aggiunto alle impostazioni della pagina, è presente una query multimediale che limita la funzionalità della carta a fogli mobili solo al desktop. Tuttavia, dobbiamo ancora nascondere le versioni anteriori delle nostre schede a fogli mobili su tablet e smartphone e assicurarci che le nostre righe si impilano bene quando si regolano le larghezze del browser.

Per nascondere i moduli blurb della nostra scheda frontale, usa la selezione multipla per selezionare tutti i moduli superiori (schede anteriori) in ogni riga (questo sarà più semplice in modalità di visualizzazione wireframe poiché le cose si sposteranno nel generatore di front-end) e aggiorna quanto segue:

Disabilita su: telefono e smartphone

Quindi apri le impostazioni della sezione e aggiungi un'altra riga di CSS all'elemento principale oltre a quella aggiunta in precedenza:

flex-wrap:wrap;

Ciò assicurerà che le righe si accumulino sul dispositivo mobile.

Ora diamo un'occhiata al progetto definitivo su tablet e smartphone.

Opzione bonus: carte a fogli mobili verticali!

Se vuoi che le tue carte a fogli mobili si capovolgano verticalmente anziché orizzontalmente, devi solo cambiare due lettere (letteralmente) nel CSS personalizzato. Apri le impostazioni della pagina e individua i due punti in cui viene utilizzato "trasformare: ruotareY(180°)". Quindi sostituire "Y" con "X". Se non hai già indovinato, questo cambia la rotazione per ruotare sull'asse X anziché sull'asse Y.

Roba piuttosto interessante! Controlla il risultato.

Pensieri finali

Non è necessario ricorrere a un plug-in per creare Flip Card di bell'aspetto in Divi. Con questo tutorial, hai un framework per creare innumerevoli design e combinazioni di contenuti di flip card. Non dimenticare che puoi scegliere due moduli qualsiasi per fungere da fronte e retro delle tue carte. Quindi sentiti libero di essere creativo!

Spero di esserti stato utile e non vedo l'ora di sentirti nei commenti qui sotto.

Saluti!