Come progettare biglietti da visita con Flip Animation su Click per mostrare la tua squadra in Divi

La progettazione di biglietti da visita che si aprono al clic può essere un'aggiunta creativa a qualsiasi sezione o pagina dei membri del team sul tuo sito web. I biglietti da visita sono già un metodo familiare e intuitivo per fornire informazioni concise su una persona che lavora per un'azienda. Quindi ha senso offrire lo stesso design sul web. Inoltre, le informazioni fornite su ciascuna carta possono diventare ancora più dinamiche e interattive, consentendo all'utente di copiare informazioni e/o fare clic sui collegamenti all'interno del biglietto da visita.

In questo tutorial, ti mostreremo come progettare un biglietto da visita unico in Divi che ha anche la funzionalità di capovolgersi al clic per rivelare le informazioni sulla persona, proprio come un vero biglietto da visita.

Facciamo un salto e iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nella tua libreria Divi, vai alla libreria Divi.

Fare clic sul pulsante Importa.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il layout della sezione sarà disponibile in Divi Builder.

Passiamo al tutorial, vero?

Cosa ti serve per iniziare

Per iniziare, dovrai fare quanto segue:

1. Se non l'hai ancora fatto, installa e attiva il tema Divi.
2. Crea una nuova pagina in WordPress e usa Divi Builder per modificare la pagina sul front-end (visual builder).
3. Scegli l'opzione "Crea da zero".

Successivamente, avrai una tela bianca per iniziare a progettare in Divi.

Progettare un biglietto da visita che si ribalta al clic in Divi

Le impostazioni di riga e colonna

Per iniziare, crea una riga a una colonna nella sezione normale.

Apri le impostazioni della riga e aggiorna quanto segue:

• Equalizza le altezze delle colonne: S
• Larghezza: 90%
• Larghezza massima: 1200 px

Apri le impostazioni per la colonna e assegnagli un po' di riempimento come segue:

• Imbottitura (Desktop e Tablet): 30px in alto, 30px in basso, 50px a sinistra, 50px a destra
• Imbottitura (telefono): 15 px in alto, 15 px in basso, 15 px a sinistra, 15 px a destra

Nella scheda Avanzate, aggiungi la seguente Classe CSS alla colonna:

• Classe CSS: colonna-carta

Questa classe servirà come obiettivo nel nostro codice per attivare l'evento click che causerà l'animazione di capovolgimento in seguito.

Duplica colonna

Ora che abbiamo una configurazione di una colonna, duplica la colonna in modo da avere un layout a due colonne con ogni colonna con lo stesso riempimento e classe CSS.

Costruire la carta posteriore

Il primo elemento del design del biglietto da visita è quello che chiameremo la carta posteriore che fungerà da sfondo del biglietto da visita con le informazioni della carta. Per creare la carta anteriore, aggiungi un divisore alla colonna 1.

Apri le impostazioni del divisore e fai clic per rendere il divisore NON visibile. Stiamo usando solo il divisore per un'immagine di sfondo per il biglietto da visita.

Quindi aggiorna le seguenti opzioni:

Colore di sfondo

• Colore di sfondo: #322b3f

Gradiente di sfondo

• Colore di sfondo sfumato a sinistra: rgba (50,43,63,0.72)
• Colore di sfondo sfumato a destra: #322b3f
• Tipo di gradiente: radiale
• Posizione finale: 34%
• Posiziona il gradiente sopra l'immagine di sfondo: S

Immagine di sfondo

• Immagine di sfondo: [carica l'immagine o il ritratto del membro del team]
• Dimensione immagine di sfondo: fit
• Posizione immagine di sfondo: Centro

Dimensionamento

• Larghezza: 100%
• Altezza minima: 300 px
• Altezza: 100%

Scatola ombra

• Box Shadow: vedi screenshot
• Posizione verticale dell'ombra del riquadro: 0px
• Forza sfocatura ombra scatola: 50 px

Classe CSS e posizione assoluta

Quindi aggiungi la seguente classe CSS al divisore:

• Classe CSS: back-card

E aggiorna la posizione in assoluto:

• Posizione: Assoluta

Creazione del logo della carta sul retro

Con la carta posteriore (divisore) in posizione, possiamo iniziare ad aggiungere i nostri elementi di informazioni sulla carta. Per iniziare, aggiungeremo un logo nell'angolo in alto a sinistra.

Aggiungi un modulo immagine sotto il modulo divisore/scheda posteriore.

Quindi carica un'immagine del logo di circa 60 x 60 pixel.

Quindi aggiorna l'immagine con una classe CSS e una posizione assoluta come segue:

Classe CSS

• Classe CSS: contenuto della carta

Posizione

• Posizione: Assoluta
• Offset verticale: 30 px (desktop e tablet), 15 px (telefono)
• Offset orizzontale: 50 px (desktop e tablet), 10 px (telefono)

Il nome

Per creare il nome per il biglietto da visita, aggiungi un nuovo modulo di testo sotto l'immagine del logo.

Aggiorna il contenuto del corpo con il nome della persona che vuoi inserire nel biglietto da visita.

Nella scheda Progettazione, aggiorna le opzioni di stile del testo del paragrafo come segue:

• Carattere del testo: Poppins
• Colore del testo del testo: #ffffff
• Dimensione del testo del testo: 28 px (desktop e tablet), 22 px (telefono)
• Spaziatura lettere: 1px
• Allineamento del testo: a destra

La posizione lavorativa (o ruolo)

Per aggiungere la posizione (o il ruolo) della persona sulla carta, duplica il modulo di testo precedente con il nome.

Quindi aggiorna il contenuto del corpo con la posizione (o il ruolo) della persona.

Quindi aggiorna le impostazioni di progettazione per il modulo di testo di posizione come segue:

• Stile del carattere del testo: TT
• Testo Dimensioni testo: 16 px (desktop e tablet), 14 px (telefono)
• Margine: 15px in basso

L'azienda

Per aggiungere il nome dell'azienda al biglietto da visita, duplica il modulo di testo precedente (posizione).

Quindi aggiorna il contenuto del corpo con il nome dell'azienda.

Quindi aggiorna le impostazioni del testo aziendale come segue:

• Peso del carattere del testo: leggero
• Stile carattere testo: predefinito
• Testo Dimensioni testo: 22 px (desktop e tablet), 18 px (telefono)
• Allineamento del testo: a sinistra

Il numero di telefono

Per creare il numero di telefono per il biglietto da visita, aggiungi un modulo blurb sotto il modulo di testo (azienda).

Aggiorna il contenuto del corpo della descrizione (telefonica) con il numero di telefono che desideri venga visualizzato sulla scheda.

Fare clic per utilizzare l'icona di un telefono per la descrizione.

Nelle impostazioni di progettazione, aggiorna quanto segue:

• Colore icona: rgba(162,71,232,0.6)
• Posizionamento immagine/icona: a sinistra
• Usa la dimensione del carattere dell'icona: S
• Dimensione carattere icona: 20px
• Carattere del corpo: Poppins
• Colore del corpo del testo: #ffffff
• Dimensione del testo del corpo: 16px
• Margine: 10px in basso

L'indirizzo e-mail

Per mostrare l'indirizzo e-mail sulla scheda, duplica il modulo blurb (telefono) e aggiorna il contenuto del corpo con l'indirizzo e-mail.

Quindi aggiorna l'icona a un'icona a forma di busta.

Il sitoweb

Per mostrare il sito web sulla scheda, duplica il modulo blurb (telefono) e aggiorna il contenuto del corpo con il sito web.

Quindi aggiorna l'icona con un'icona più appropriata.

I social media seguono le icone

Per il nostro ultimo contenuto della carta, aggiungeremo le icone dei social media alla carta. Per fare ciò, aggiungi un modulo di follow sui social media sotto il blurb (sito web).

Nella modalità Impostazioni Segui social media, aggiorna ciascuno dei social network con uno sfondo trasparente.

(puoi anche aggiungere gli URL dei link se necessario in seguito)

Quindi dai al modulo un allineamento corretto.

Aggiungi la stessa classe CSS a tutti i moduli di contenuto della carta

Una volta che abbiamo finito di creare tutti i moduli del contenuto della carta per il biglietto da visita, dobbiamo dare a tutti quei moduli la stessa classe CSS. Per fare ciò, usa la funzione di selezione multipla per selezionare tutti i moduli di contenuto della carta (logo, nome, posizione, telefono, e-mail, sito web e icone dei social media), quindi apri le impostazioni dell'elemento e aggiungi la seguente classe:

• Classe CSS: contenuto della carta

Indirizzeremo a questa classe il nostro codice CSS personalizzato per nascondere e mostrare il contenuto prima e dopo l'animazione del ribaltamento della carta anteriore.

La carta anteriore

Ora che la nostra carta posteriore è terminata con tutto il contenuto della carta in posizione, siamo pronti per creare la carta anteriore che siederà sopra la carta posteriore e il contenuto della carta posteriore. Per fare ciò, progetteremo la carta anteriore utilizzando un modulo immagine nella colonna 2. Quindi la sposteremo per posizionarla sopra la carta posteriore nella colonna 1.

Innanzitutto, aggiungi un modulo immagine alla colonna 2.

Carica la stessa immagine del logo (60px per 60px) utilizzata per il logo della carta sul retro da utilizzare come immagine.

Quindi apri le impostazioni per il modulo della scheda posteriore (divisore) e copia il design dello sfondo.

Quindi apri le impostazioni dell'immagine per la scheda anteriore che stiamo progettando e incolla il design dello sfondo nell'opzione di sfondo del modulo immagine.

Nella scheda Progettazione, aggiorna la spaziatura dell'immagine come segue:

• Imbottitura (desktop e tablet): 30px in alto, 50px a sinistra
• Imbottitura (telefono): 15px in alto, 10px a sinistra

Impostazioni avanzate

Nella scheda Avanzate, assegna all'immagine la seguente Classe CSS:

• Classe CSS: carta frontale

Aggiungi il seguente CSS personalizzato all'elemento principale:

[/cs]
altezza: 100%;
larghezza: 100%;
[/cs]

L'aggiornamento delle opzioni di posizione:

• Posizione assoluta
• Indice Z: 13

L'altezza e la larghezza personalizzate (combinate con la posizione assoluta) fanno sì che il modulo contenente l'immagine (o il logo) occupi l'intera altezza e larghezza della colonna padre. Quindi, anche se è un modulo immagine, lo usiamo per visualizzare due immagini a strati (il logo e l'immagine di sfondo) come un bel biglietto da visita per il nostro design di biglietti da visita.

Non dimenticare di cambiare l'immagine di sfondo con una nuova. In questo caso, sto usando un ritratto diverso della stessa persona.

Una volta terminato, trascina il modulo immagine della carta anteriore sulla colonna 1. Dovrebbe coprire completamente la carta posteriore.

Il codice personalizzato

L'ultimo passaggio consiste nell'aggiungere alcuni CSS e JQuery personalizzati per completare la funzionalità di realizzare effettivamente l'animazione di capovolgimento del biglietto da visita al clic.

Per aggiungere il codice, aggiungi un modulo di codice sotto il modulo di follow sui social media nella colonna 1.

Il CSS personalizzato

Incolla il seguente codice CSS tra i tag di stile :

.card-column {
  perspective: 1400px;
}
.front-card:hover {
  cursor: pointer;
}

.front-card,
.back-card {
  transition: all 500ms ease-in-out;
  transform-style: preserve-3d;
}

.back-card {
  transform: rotateX(-180deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .back-card {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) !important;
}

.divi-transform-active .front-card {
  transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg);
  transform-origin: 50% 50%;
}

.card-content {
  transition: all 300ms ease-out 0ms;
}

.divi-transform-active .card-content {
  transition: all 300ms ease-out 500ms;
  opacity: 1 !important;
}

.divi-transform-active .front-card {
  opacity: 0;
  visibility: hidden;
}

Il JQuery

Sotto il CSS, incolla il seguente JQuery tra i tag di script

(function ($) {
  $(document).ready(function () {
    $cardColumn = $(".card-column");
    $cardContent = $(".card-content");

    $cardContent.css("opacity", "0");

    $cardColumn.on("click", function (e) {
      $(this).addClass("divi-transform-active");
      e.stopPropagation();
    });
    $(document).on("click", function (e) {
      if ($(e.target).is($cardColumn) === false) {
        $cardColumn.removeClass("divi-transform-active");
      }
    });
  });
})(jQuery);

Creazione di biglietti da visita aggiuntivi

Per creare biglietti da visita aggiuntivi, tutto ciò che devi fare è duplicare la colonna contenente tutti i moduli che abbiamo usato per costruirla. Una volta duplicata la colonna, sarà necessario eliminare il modulo di codice aggiuntivo. Avere due moduli di codice con codice duplicato non funzionerà.

Una volta che la colonna/scheda è stata duplicata, è sufficiente aggiornare le immagini di sfondo e il contenuto della scheda utilizzando i moduli necessari per un nuovo biglietto da visita.

Risultato finale

Ecco il risultato finale del design del biglietto da visita con l'animazione flip al clic. Quando fai clic sull'immagine della carta anteriore, si capovolgerà e scomparirà, anche il divisore della carta posteriore si capovolgerà ma rimarrà visibile. Le informazioni sulla carta vengono visualizzate al termine dell'animazione del ribaltamento. Per capovolgere la carta, tutto ciò che devi fare è fare clic all'esterno della colonna contenente la carta. Non volevo che la carta si capovolgesse di nuovo quando si fa clic sulla carta (come un interruttore) in modo che l'utente possa fare clic sugli elementi all'interno della carta.

Pensieri finali

Si spera che questo design interattivo per biglietti da visita ti aiuti a diventare più creativo nel modo in cui visualizzi la sezione o le pagine dei membri del tuo team sul tuo sito web. In realtà, questa tecnica non si limita ai biglietti da visita. Puoi usarlo per quasi tutte le informazioni che desideri visualizzare. Provalo e vedi se è adatto per il tuo prossimo progetto.

Non vedo l'ora di sentirti nei commenti.

Saluti!