Comment créer un panneau de signalisation 3D avec des effets de survol dans Divi
Publié: 2019-05-13Nous savons tous qu'un bon site Web permet aux visiteurs de trouver facilement et rapidement ce qu'ils recherchent. Et, cela aide toujours si vous pouvez rendre votre contenu plus attrayant. Dans ce didacticiel, je vais vous montrer comment concevoir un panneau de signalisation 3D qui engagera les utilisateurs et leur permettra de trouver facilement ce qu'ils recherchent d'une manière unique. Pour ce faire, nous utiliserons les options de transformation de Divi et la propriété perspective css sur plusieurs modules de présentation pour créer l'effet 3D des panneaux pivotés sur un message.
Commençons!
Aperçu
Téléchargez GRATUITEMENT la mise en page des panneaux de signalisation 3D
Pour mettre la main sur le design 3D Sign Post 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 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.
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 sur votre page, extrayez simplement le fichier zip et faites glisser le fichier json dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Abonnez-vous à notre chaîne Youtube
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Assurez-vous que le thème Divi est installé et actif sur votre site WordPress.
- Si vous souhaitez créer votre propre image de publication, vous aurez besoin d'un éditeur de photos comme Photoshop, Gimp ou Sketch. Ou vous pouvez utiliser l'image fournie dans le téléchargement gratuit de la mise en page pour cette conception ci-dessus.
- En dehors de cela, nous allons tout construire à partir de zéro sur le front-end du Divi Builder.
Création de l'image pour le poteau de signalisation
Le moyen le plus simple de créer un panneau de signalisation pour cette conception consiste à créer un petit bloc d'image reproductible que nous pouvons ajouter en tant qu'image d'arrière-plan qui se répète verticalement dans la section ou la ligne de la page. Si vous souhaitez ignorer cette étape, vous pouvez importer la mise en page json incluse dans le téléchargement gratuit ci-dessus pour commencer. Mais si vous souhaitez créer le vôtre avec une couleur personnalisée de votre choix, voici comment procéder.
Pour cet exemple, je vais utiliser Photoshop, mais le processus est également très similaire pour d'autres éditeurs de photos populaires.
Dans Photoshop, cliquez pour créer un nouveau document avec une hauteur et une largeur personnalisées de 25 pixels.
Définissez la couleur de premier plan sur le noir (# 000000) ou sur la couleur de votre choix.
Sélectionnez ensuite l'outil Pot de peinture et cliquez à l'intérieur du calque carré vide pour peindre le carré en noir.
Ensuite, enregistrez votre image au format jpeg sur votre ordinateur. C'est l'image que nous utiliserons dans la conception pour créer le poteau pour notre conception de poteau de signalisation 3D.
Implémentation de la conception de poteaux de signalisation 3D dans Divi
Une fois que vous êtes prêt, assurez-vous de créer une nouvelle page, de donner un titre à la page et de déployer le Divi Builder sur le front-end. Sélectionnez l'option « Construire à partir de zéro ».
Votre toile vierge vous attend !
Créez maintenant une nouvelle section régulière avec une ligne à une colonne.
Personnalisation de la ligne
Avant d'ajouter un module, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Image d'arrière-plan : [insérer une image carrée personnalisée pour la publication]
Taille de l'image d'arrière-plan : taille réelle
Répéter l'image d'arrière-plan : répéter Y (verticalement)
Ensuite, mettez à jour les éléments suivants :
Largeur de gouttière : 1
Largeur maximale : 980 px
Rembourrage personnalisé : haut 2vw, bas 2vw
Ensuite, nous devons ajouter le CSS personnalisé suivant à l'élément principal de la colonne comme suit :
perspective: 1000px;
Cette propriété css de perspective est nécessaire pour obtenir l'effet 3D du signe (ou du texte de présentation) chaque fois que nous le faisons pivoter avec les options de transformation.
Pour plus d'informations à ce sujet, découvrez comment la perspective fonctionne avec les options de transformation de Divi.
Créer un panneau avec un module Blurb
Pour créer notre premier panneau sur notre panneau 3D, nous utiliserons un module de présentation. Allez-y et ajoutez un module de présentation à la ligne.
Ouvrez ensuite les paramètres du texte de présentation et mettez à jour le contenu du texte de présentation comme suit :
Diminuez le contenu fictif pour n'inclure que quelques lignes de texte.
Utiliser l'icône : OUI
Icône : flèche gauche (voir capture d'écran)
Couleur d'arrière-plan : #1a233f
Couleur de l'icône : #9eb3c2
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 : 80px
Orientation du texte : centre
Police du titre : Affichage Playfair
Couleur du texte du titre : #9eb3c2
Taille du texte du titre : 38 px (ordinateur de bureau), 26 px (téléphone)
Largeur maximale : 600 px
Alignement du module : Centre
Rembourrage personnalisé : 5 % en haut, 5 % en bas, 5 % à gauche, 5 % à droite
Coins arrondis : 20px
Largeur de la bordure : 3px
Couleur de la bordure : #21335e
Cela prend en charge le style de notre module de présentation, mais pour obtenir notre effet 3D, nous devons utiliser les options de transformation pour faire pivoter notre module de présentation. Pour effectuer cette mise à jour, procédez comme suit :
Transformation Rotation Axe X : 20 degrés
Dupliquer la ligne pour plus de signes
Maintenant que nous avons terminé l'une de nos conceptions de panneaux, nous pouvons dupliquer la rangée pour en faire plus. Chaque fois que nous dupliquerons la ligne, nous devrons simplement mettre à jour la rotation de transformation afin que les signes tournent à des degrés différents autour du poteau.
Allez-y, dupliquez la ligne et mettez à jour le module de présentation dans la nouvelle ligne comme suit :
Transformer Rotation Axe X: -30deg
Dupliquez la ligne pour créer un troisième signe et mettez à jour le module de présentation dans cette nouvelle ligne comme suit :
Transformation Rotation Axe X: 40deg
Changer la direction du deuxième signe
En ce moment, toutes les flèches pointent dans la même direction. Pour changer la direction de gauche à droite, nous devons mettre à jour un peu les paramètres du module de présentation.
Ouvrez les paramètres du module de présentation dans la deuxième rangée (celle du milieu) et mettez à jour les éléments suivants :
Icône : flèche droite (voir capture d'écran)
Orientation du texte : à gauche
Nous pouvons inverser l'ordre du contenu du texte de présentation afin que le texte soit à gauche et l'icône à droite. Pour ce faire, nous devons ajouter une seule ligne de CSS personnalisé à l'élément principal comme suit :
direction: rtl;
Maintenant, le contenu du texte de présentation est inversé et vous avez un panneau indiquant une nouvelle direction !
Faites pivoter les panneaux à leur état d'origine au survol
L'un des avantages de cette configuration est que vous pouvez facilement ajouter un état de survol pour ramener le module pivoté à la rotation d'origine (0 degré). Cela permet à l'utilisateur d'interagir avec le contenu et d'avoir une vue claire du texte lorsqu'il survole le module.
Puisque nous voulons ajouter le même état de survol aux trois modules de présentation, utilisez la multisélection pour sélectionner les trois modules de présentation et ouvrez les paramètres de l'un des modules pour afficher le modal des paramètres de l'élément. Ensuite, mettez à jour les éléments suivants :
Transformation Rotation Axe X (survol): 0deg
Enregistrez les paramètres et c'est tout !
Maintenant, découvrez la conception et les fonctionnalités jusqu'à présent.
Personnaliser notre section avec une image de fond
Pour notre dernière étape, nous pouvons ajouter une nouvelle image de fond à notre section. C'est facultatif bien sûr, mais la bonne image peut être vraiment cool, surtout si vous utilisez l'effet de parallaxe.
Ouvrez la section et ajoutez une nouvelle image d'arrière-plan. (J'utilise une image de notre pack de mise en page d'agence)
Ensuite, mettez à jour les éléments suivants :
Utiliser l'effet de parallaxe : OUI
Rembourrage personnalisé : 0px en haut, 0px en bas
Résultat final
Dernières pensées
La création d'un panneau de signalisation 3D ajoute vraiment un élément de conception créatif et attrayant à votre site qui peut vraiment faire ressortir votre contenu (littéralement). Et l'effet de survol permet à l'utilisateur de visualiser le contenu sans l'effet 3D pour une belle solution de repli. N'oubliez pas que vous pouvez facilement ajouter une URL de lien au module de présentation afin qu'il puisse servir d'élément de navigation cliquable si vous le souhaitez. Quoi qu'il en soit, j'espère que cela vous donnera de l'inspiration pour votre prochain projet.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!