Comment concevoir des cartes de visite avec Flip Animation en un clic pour présenter votre équipe dans Divi

Concevoir des cartes de visite qui se retournent au clic peut être un ajout créatif à n'importe quelle section ou page des membres de l'équipe sur votre site Web. Les cartes de visite sont déjà une méthode familière et intuitive pour fournir des informations concises sur une personne travaillant pour une entreprise. Il est donc logique de proposer ce même design sur le Web. De plus, les informations fournies sur chaque carte peuvent devenir encore plus dynamiques et interactives, permettant à l'utilisateur de copier des informations et/ou de cliquer sur des liens dans la carte de visite.

Dans ce tutoriel, nous allons vous montrer comment concevoir une carte de visite unique dans Divi qui a également la fonctionnalité de retourner au clic pour révéler les informations sur la personne, tout comme une vraie carte de visite.

Allons-y et commençons !

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Concevoir une carte de visite qui se retourne au clic dans Divi

Les paramètres de ligne et de colonne

Pour commencer, créez une ligne à une colonne dans la section normale.

Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

• Égaliser les hauteurs de colonne : OUI
• Largeur: 90%
• Largeur maximale : 1200px

Ouvrez les paramètres de la colonne et donnez-lui un peu de remplissage comme suit :

• Rembourrage (ordinateur de bureau et tablette) : 30 px en haut, 30 px en bas, 50 px à gauche, 50 px à droite
• Rembourrage (téléphone) : 15px en haut, 15px en bas, 15px à gauche, 15px à droite

Sous l'onglet avancé, ajoutez la classe CSS suivante à la colonne :

• Classe CSS : colonne-card

Cette classe servira de cible dans notre code pour déclencher l'événement de clic qui provoquera l'animation de retournement plus tard.

Colonne en double

Maintenant que nous avons une configuration de colonne, dupliquez la colonne afin que nous ayons une disposition à deux colonnes avec chaque colonne ayant le même remplissage et la même classe CSS.

Construire la carte arrière

Le premier élément de la conception de la carte de visite est ce que nous allons appeler la carte arrière qui servira de fond de carte de visite avec les informations de la carte. Pour créer la carte avant, ajoutez un séparateur à la colonne 1.

Ouvrez les paramètres du diviseur et cliquez pour rendre le diviseur NON visible. Nous n'utilisons le séparateur que pour une image de fond pour la carte de visite.

Mettez ensuite à jour les options suivantes :

Couleur de l'arrière plan

• Couleur de fond : #322b3f

Dégradé de fond

• Couleur d'arrière-plan du dégradé gauche : rgba (50,43,63,0,72)
• Couleur de fond de dégradé à droite : #322b3f
• Type de dégradé : Radial
• Position finale : 34 %
• Placer le dégradé au-dessus de l'image d'arrière-plan : OUI

Image de fond

• Image d'arrière-plan : [télécharger l'image ou le portrait du membre de l'équipe]
• Taille de l'image d'arrière-plan : ajustement
• Position de l'image d'arrière-plan : Centre

Dimensionnement

• Largeur : 100 %
• Hauteur minimale : 300 px
• Hauteur : 100 %

Boîte ombre

• Box Shadow : voir capture d'écran
• Position verticale de l'ombre de la boîte : 0px
• Force de flou d'ombre de boîte : 50px

Classe CSS et position absolue

Ajoutez ensuite la classe CSS suivante au séparateur :

• Classe CSS : carte arrière

Et mettez à jour la position en absolu :

• Position : Absolu

Création du logo de la carte arrière

Une fois la carte arrière (diviseur) en place, nous pouvons commencer à ajouter nos éléments d'information sur la carte. Pour commencer, nous allons ajouter un logo dans le coin supérieur gauche.

Ajoutez un module image sous le module diviseur/dossier.

Ensuite, téléchargez une image de logo d'environ 60 pixels sur 60 pixels.

Mettez ensuite à jour l'image avec une classe CSS et une position absolue comme suit :

Classe CSS

• Classe CSS : contenu de la carte

Position

• Position : Absolu
• Décalage vertical : 30 pixels (ordinateur de bureau et tablette), 15 pixels (téléphone)
• Décalage horizontal : 50px (ordinateur de bureau et tablette), 10px (téléphone)

Le nom

Pour créer le nom de la carte de visite, ajoutez un nouveau module de texte sous l'image du logo.

Mettez à jour le contenu du corps avec le nom de la personne que vous souhaitez voir figurer sur la carte de visite.

Sous l'onglet Conception, mettez à jour les options de style de texte de paragraphe comme suit :

• Police de texte : Poppins
• Texte Couleur du texte : #ffffff
• Taille du texte : 28px (ordinateur de bureau et tablette), 22px (téléphone)
• Espacement des lettres : 1px
• Alignement du texte : à droite

Le poste (ou rôle)

Pour ajouter la position (ou le rôle) de la personne sur la carte, dupliquez le module de texte précédent avec le nom.

Mettez ensuite à jour le contenu du corps avec la position (ou le rôle) de la personne.

Mettez ensuite à jour les paramètres de conception pour le module de texte de position comme suit :

• Style de police de texte : TT
• Taille du texte : 16px (ordinateur de bureau et tablette), 14px (téléphone)
• Marge : 15px en bas

L'entreprise

Pour ajouter le nom de l'entreprise à la carte de visite, dupliquez le module de texte précédent (position).

Mettez ensuite à jour le contenu du corps avec le nom de la société.

Mettez ensuite à jour les paramètres de texte de l'entreprise comme suit :

• Poids de la police de texte : léger
• Style de police de texte : par défaut
• Taille du texte : 22px (ordinateur de bureau et tablette), 18px (téléphone)
• Alignement du texte : à gauche

Le numéro de téléphone

Pour créer le numéro de téléphone de la carte de visite, ajoutez un module de présentation sous le module de texte (société).

Mettez à jour le contenu du corps du texte de présentation (de téléphone) avec le numéro de téléphone que vous souhaitez voir figurer sur la carte.

Cliquez pour utiliser une icône de téléphone pour le texte de présentation.

Sous les paramètres de conception, mettez à jour les éléments suivants :

• Couleur de l'icône : rgba(162,71,232,0.6)
• Placement des images/icônes : à gauche
• Utiliser la taille de la police de l'icône : OUI
• Taille de la police de l'icône : 20 px
• Police de caractère : Poppins
• Couleur du corps du texte : #ffffff
• Taille du corps du texte : 16px
• Marge : 10px en bas

L'adresse e-mail

Pour afficher l'adresse e-mail sur la carte, dupliquez le module de présentation (téléphonique) et mettez à jour le contenu du corps avec l'adresse e-mail.

Mettez ensuite l'icône à jour en une icône d'enveloppe.

Le site Web

Pour afficher le site Web sur la carte, dupliquez le module de présentation (téléphonique) et mettez à jour le contenu du corps avec le site Web.

Mettez ensuite à jour l'icône avec une icône plus appropriée.

Les icônes de suivi des médias sociaux

Pour notre dernier contenu de carte, nous allons ajouter des icônes de suivi des médias sociaux à la carte. Pour ce faire, ajoutez un module de suivi des médias sociaux sous le texte de présentation (site Web).

Dans le modal Paramètres de suivi des médias sociaux, mettez à jour chacun des réseaux sociaux avec un fond transparent.

(vous pouvez également ajouter les URL des liens si nécessaire plus tard)

Donnez ensuite au module un alignement correct.

Ajouter la même classe CSS à tous les modules de contenu de carte

Une fois que nous avons fini de créer tous les modules de contenu de carte pour la carte de visite, nous devons donner à tous ces modules la même classe CSS. Pour ce faire, utilisez la fonction de sélection multiple pour sélectionner tous les modules de contenu de la carte (logo, nom, position, téléphone, e-mail, site Web et icônes de réseaux sociaux), puis ouvrez les paramètres de l'élément et ajoutez la classe suivante :

• Classe CSS : contenu de la carte

Nous allons cibler cette classe avec notre code CSS personnalisé pour masquer et afficher le contenu avant et après l'animation de retournement de la carte avant.

La carte avant

Maintenant que notre carte arrière est terminée avec tout le contenu de la carte en place, nous sommes prêts à créer la carte avant qui reposera sur la carte arrière et le contenu de la carte arrière. Pour ce faire, nous allons concevoir la carte avant à l'aide d'un module d'image dans la colonne 2. Ensuite, nous la déplacerons pour qu'elle repose sur la carte arrière dans la colonne 1.

Tout d'abord, ajoutez un module d'image à la colonne 2.

Téléchargez la même image de logo (60px par 60px) utilisée pour le logo de la carte arrière à utiliser comme image.

Ensuite, ouvrez les paramètres du module de carte arrière (diviseur) et copiez le design de l'arrière-plan.

Ensuite, ouvrez les paramètres d'image pour la carte avant que nous concevons et collez la conception d'arrière-plan dans l'option d'arrière-plan du module d'image.

Sous l'onglet Conception, mettez à jour l'espacement de l'image comme suit :

• Rembourrage (ordinateur de bureau et tablette) : 30 px en haut, 50 px à gauche
• Rembourrage (téléphone) : 15 pixels en haut, 10 pixels à gauche

Réglages avancés

Sous l'onglet avancé, donnez à l'image la classe CSS suivante :

• Classe CSS : carte avant

Ajoutez le CSS personnalisé suivant à l'élément principal :

[/css]
hauteur : 100 % ;
largeur : 100 % ;
[/css]

La mise à jour des options de position :

• Position absolue
• Indice Z : 13

La hauteur et la largeur personnalisées (combinées à la position absolue) font que le module contenant l'image (ou le logo) s'étend sur toute la hauteur et la largeur de la colonne parent. Ainsi, même s'il s'agit d'un module d'image, nous l'utilisons pour afficher deux images en couches (le logo et l'image d'arrière-plan) comme une jolie carte avant pour la conception de notre carte de visite.

N'oubliez pas de remplacer l'image de fond par une nouvelle. Dans ce cas, j'utilise un portrait différent de la même personne.

Une fois cela fait, faites glisser le module d'image de la carte avant vers la colonne 1. Il doit recouvrir complètement la carte arrière.

Le code personnalisé

La dernière étape consiste à ajouter des CSS et JQuery personnalisés pour compléter la fonctionnalité de création d'une animation de retournement de carte de visite en un clic.

Pour ajouter le code, ajoutez un module de code sous le module de suivi des médias sociaux dans la colonne 1.

Le CSS personnalisé

Collez le code CSS suivant entre les balises de 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;
}

Le JQuery

Sous le CSS, collez le JQuery suivant entre les balises de 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);

Création de cartes de visite supplémentaires

Pour créer des cartes de visite supplémentaires, il vous suffit de dupliquer la colonne contenant tous les modules que nous avons utilisés pour la construire. Une fois que vous avez dupliqué la colonne, vous devrez supprimer le module de code supplémentaire. Avoir deux modules de code avec du code en double ne fonctionnera pas.

Une fois la colonne/carte dupliquée, mettez simplement à jour les images d'arrière-plan et le contenu de la carte en utilisant les modules selon les besoins pour une nouvelle carte de visite.

Résultat final

Voici le résultat final de la conception de la carte de visite avec l'animation flip au clic. Lorsque vous cliquez sur l'image de la carte avant, elle se retournera et disparaîtra, le diviseur de la carte arrière se retournera également mais restera visible. Les informations de la carte s'effacent une fois l'animation flip terminée. Pour retourner la carte, il vous suffit de cliquer en dehors de la colonne contenant la carte. Je ne voulais pas que la carte se retourne à nouveau en cliquant sur la carte (comme une bascule) afin que l'utilisateur puisse cliquer sur les éléments de la carte.

Dernières pensées

Espérons que cette conception de carte de visite interactive vous aidera à être plus créatif dans la façon dont vous affichez la section ou les pages des membres de votre équipe sur votre site Web. En fait, cette technique ne se limite pas aux cartes de visite. Vous pouvez l'utiliser pour à peu près toutes les informations que vous souhaitez afficher. Essayez-le et voyez s'il convient à votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!