Come progettare biglietti da visita attraenti con un'animazione capovolta su Divi

Rifat Divi Tutorials May 11, 2021

I biglietti da visita sono un modo popolare per introdurre un individuo aziendale a una persona. Trasporta tutte le informazioni necessarie su quell'individuo e fornisce le sue utili informazioni di contatto. Che ne dici di un biglietto da visita virtuale su un sito Web che capovolge e fa lo stesso lavoro?" Sarà sicuramente più dinamico e ad esso verranno collegati collegamenti sociali in modo che chiunque possa facilmente contattare l'individuo. Bene, questo sembra davvero interessante e impareremo a conoscere questo design oggi, su Divi! Quindi. cominciamo.

Anteprima progettazione

Oggi costruiremo questo progetto. Sembra interessante, eh?

Parte 1: Progettazione del biglietto da visita che si capovolge su Click

Aggiungi: Riga 1

Iniziare con l'aggiunta di una riga a una colonna alla sezione normale.

Aggiornare le impostazioni seguenti.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora
  • Equalizzare le altezze delle colonne: SI
  • Larghezza: 90%
  • Larghezza massima: 1200px

Aprire l'impostazione della colonna e aggiungerne un po' di spaziatura interna.

Imbottitura

  • Desktop - 30px in alto e in basso, 50px a sinistra e a destra.
  • Tablet - 30px in alto e in basso, 50px a sinistra e a destra.
  • Telefono - 15px in alto e in basso, 15px a sinistra e a destra

Aggiungere la classe CSS seguente dalla scheda avanzata. Questo codice funzionerà come trigger per fare clic per la nostra animazione di capovolgimento.

  • Classe CSS: colonna di schede

Clonazione di colonne

Colonna precedente ora duplicata. Ora abbiamo un layout a colonna e ognuno di essi ha la stessa spaziatura interna e classe CSS.

Costruire la scheda posteriore

Innanzitutto, creeremo il biglietto da visita che di solito sarà sul retro e verrà in primo piano quando cliccato. Qui metteremo tutte le informazioni su un individuo. La chiameremo scheda di ritorno. Per creare questo, allegheremo un divisore nella colonna 1. Quindi spegniamo la visibilità del divisore dall'impostazione del divisore perché useremo il divisore solo per allegare l'immagine alla scheda.

Colore sfondo

  • Colore sfondo: #322b3f

Sfumatura sfondo

  • Colore sinistro sfumatura sfondo: rgba(50,43,63,0.72)
  • Colore destro sfumatura sfondo: #322b3f
  • Tipo sfumatura: Radiale
  • Posizione finale: 34%
  • Posiziona sfumatura sopra immagine di sfondo: SI

Immagine di sfondo

  • Immagine di sfondo: [carica immagine o ritratto del membro del team]
  • Dimensioni immagine di sfondo: adatta
  • Posizione immagine di sfondo: Centro

Dimensionamento

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

Ombra scatola

  • Box Shadow: vedi screenshot
  • Posizione verticale ombreggiatura scatola: 0px
  • Forza sfocatura ombreggiatura scatola: 50px

Classe e posizione CSS

Ora aggiungi la classe CSS al divisore e aggiorna la posizione.

  • Classe CSS: back-card
  • Posizione: Assoluto

Aggiungi: logo sulla scheda posteriore

Abbiamo la nostra carta posteriore in atto, aggiungeremo il logo su di essa ora.

Ora carica il logo. Le dimensioni dovrebbero essere di circa 60px*60px.

Classe CSS

  • Classe CSS: contenuto della scheda

Posizione

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

Aggiungi: Nome titolare carta

Ora aggiungi un modulo di testo sotto il modulo logo alla scheda per il nome. E aggiorna il nome della persona che vuoi presentare.

Apportare le seguenti opzioni nella scheda Progettazione.

  • Tipo di carattere testo: Poppins
  • Colore testo testo: #ffffff
  • Dimensioni testo testo: 28px (desktop e tablet), 22px (telefono)
  • Spaziatura lettere: 1px
  • Allineamento testo: destra

Aggiungi: La posizione lavorativa

Duplicare il modulo di testo precedente per aggiungere la posizione del processo. Modificare il contenuto del corpo e apportare modifiche alla scheda progettazione.

  • Stile carattere testo: TT
  • Dimensioni testo testo: 16px (desktop e tablet), 14px (telefono)
  • Margine: 15px inferiore

Aggiungi: Nome società

Per aggiungere il nome della società, duplicare il modulo di testo precedente e modificare il contenuto del corpo.

  • Spessore carattere testo: Leggero
  • Stile carattere testo: predefinito
  • Dimensioni testo testo: 22px (desktop e tablet), 18px (telefono)
  • Allineamento testo: Sinistra

Aggiungi: Numero contatto

Per aggiungere il numero di contatto dell'individuo. aggiungere un modulo blurb sotto il modulo di testo aziendale. aggiornare il contenuto del corpo con il numero di telefono e aggiungere un'icona.

Dalle impostazioni di progettazione aggiornare quanto segue:

  • Colore icona: #20BFAC
  • Posizionamento immagine/icona: Sinistra
  • Usa dimensione carattere icona: SI
  • Dimensione carattere icona: 20px
  • Carattere corpo: Poppins
  • Colore testo corpo: #ffffff
  • Dimensione corpo testo: 16px
  • Margine: 10px inferiore

Aggiungi: Indirizzo di posta elettronica

Duplicare il modulo blurb precedente e aggiornare il contenuto del corpo come indirizzo di posta elettronica. Quindi, aggiornare l'icona come busta.

Aggiungi: Il sito Web

Fai come abbiamo fatto per la sezione e-mail. Copiare il modulo blurb precedente e modificare il contenuto.

Aggiungi: Icone dei social media

Il modulo finale che aggiungeremo sulla scheda posteriore è il modulo di follow dei social media. Aggiungere questo modulo nell'ultimo modulo blurb.

Dalle impostazioni, rendi trasparente ogni icona social e aggiungi un URL se ne hai bisogno. Per rendere trasparenti tutte le icone, apri ogni modulo di social media e trascina la barra contrassegnata bianca verso il basso. Cambierà il fare il lavoro.

Inoltre, dalla scheda progettazione, allinea le icone dei social media a destra.

Aggiungi: stessa classe a tutti i moduli

Poiché il posizionamento e la personalizzazione di tutti i nostri moduli sono stati eseguiti, ora li selezioneremo utilizzando la funzione di selezione multi-selezione di Divi e aggiungeremo una classe CSS comune. In linea con questa classe CSS, aggiungeremo codice CSS che mostrerà l'oggetto prima del contenuto della scheda tramite animazione a capovolgimento.

  • Classe CSS: contenuto della scheda

Tenere premuto "Cmd" o "Ctrl" e fare clic sugli elementi per selezionarli. Quindi fare clic su una impostazioni da qualsiasi modulo ed effettuare la regolazione.

Costruire la carta anteriore

La nostra carta posteriore è fatta e ora lavoraremo sulla scheda frontale che si siederà al posto della scheda posteriore e nasconderà il suo contenuto nella parte posteriore. Proieremo la scheda frontale attraverso un modulo immagine nella colonna 2 che sostituirà la scheda nella colonna 1. All'inizio aggiungeremo un modulo immagine sulla colonna 2 e aggiungeremo un logo (60px*60px) al modulo.

Ora, apri le impostazioni del modulo divisore dalla scheda posteriore e copia lo sfondo.

Ora apri le impostazioni dell'immagine per la scheda frontale e incollala.

Nella sezione progettazione aggiornare la spaziatura dell'immagine come segue:

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

Impostazioni avanzate

Dalla scheda avanzata, assegnare a questa immagine una classe CSS.

  • Classe CSS: prima scheda

Aggiungere il CSS personalizzato nell'elemento principale.

height: 100%;
width: 100%;

Inoltre, aggiornare le impostazioni di posizione.

  • Posizione Assoluta
  • Indice Z: 13

Ora, al termine della scheda frontale, trascinarla sul modulo della scheda posteriore nella colonna 1.

Parte 2: Aggiunta di codice personalizzato

Infine, aggiungeremo del codice CSS e JQuery personalizzato per portare l'animazione flip al nostro design di biglietti da visita. Per questo, aggiungere un modulo di codice sotto la colonna 1.

Aggiungi: codice CSS

Ora aggiungi il codice qui sotto all'interno del modulo di codice. Assicurati di conservare quindi all'interno di un tag Style.

.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;
}

Aggiungi: Codice JQuery

Aggiungere il codice JQuery riportato di seguito sotto il codice CSS. Non dimenticare di tenerli all'interno dei tag 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 altri biglietti da visita

Per aggiungere altri biglietti da visita dei tuoi compagni di squadra, dobbiamo clonare la colonna tutte le volte che ti serve. Tuttavia, assicurati di aver eliminato i moduli di codice dalle schede clonate perché avere due moduli di codice interromperà il design.

Ora modifica ogni carta in base a ogni persona che vuoi presentare qui.

Vista finale

Dopo tutto il lavoro che abbiamo fatto, il nostro design assomiglia a questo. Fai clic su ogni scheda e capovolgerà e mostrerà informazioni sull'individuo. Quindi, fai clic all'esterno e tornerà alla sua posizione precedente.

Conclusione

Il biglietto da visita interattivo è un ottimo modo per visualizzare i tuoi compagni di squadra sul sito web. Puoi usarlo per mostrare informazioni sui nostri progetti, condividere idee e molti altri! Premi condividi se trovi utile questa esercitazione e se hai domande o domande, puoi commentare di seguito.