Création de descriptions de services contextuelles en survol avec Divi
Publié: 2019-07-20La création de descriptions de services contextuelles en survol peut être un moyen efficace d'informer et d'impliquer les utilisateurs avec des informations supplémentaires. Tout comme une info-bulle, ces descriptions contextuelles révéleront plus d'informations sur votre service en survol. Mais avec Divi, vous disposez de la suite complète d'outils de conception disponibles dans le constructeur Divi pour créer de superbes conceptions pop-out sans aucun CSS personnalisé supplémentaire.
Dans ce tutoriel, nous allons vous montrer à quel point il est facile de créer des descriptions de services pop-out sur votre site Web Divi. L'astuce consiste à positionner vos modules de manière à ce qu'ils glissent les uns derrière les autres et ressortent chaque fois que vous ajustez la largeur de la rangée en survol.
Commençons!
Aperçu
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 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 !
Abonnez-vous à notre chaîne Youtube
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 ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous aurez besoin des éléments suivants :
- Le thème Divi installé et actif
- Une nouvelle page créée pour construire à partir de zéro sur le front-end (constructeur visuel)
- Images à utiliser pour le contenu fictif. Nous utiliserons quelques-uns de notre pack de mise en page Investment Company pour ce didacticiel.
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Création des descriptions de services contextuelles sur Hover avec Divi
Créer la section et la ligne
Tout d'abord, créez une nouvelle section régulière avec une ligne à une colonne.
Avant d'ajouter des modules, mettez à jour les paramètres de ligne comme suit :
Ajoutez une image d'arrière-plan sombre ou une couleur d'arrière-plan sombre. J'utilise une image d'arrière-plan abstraite du pack de mise en page de la société d'investissement. Mais si vous ne voulez pas l'utiliser, vous pouvez simplement ajouter une couleur d'arrière-plan de #161c29.
- Largeur de gouttière : 1
- Largeur : 100 %
- Hauteur : 320 px (ordinateur de bureau), automatique (tablette et téléphone)\
- Remplissage : 0px en haut, 0px en bas
Ajouter un module de présentation
Ajoutez ensuite un module de présentation à votre ligne.
Et mettez à jour les paramètres du module de présentation comme suit :
- Titre : Service
- Icône : voir capture d'écran
Supprimez également le contenu du corps par défaut.
- Image d'arrière-plan : ajoutez une image d'environ 320 pixels sur 215 pixels
- Taille de l'image d'arrière-plan : Ajuster
- Position de l'image d'arrière-plan : en haut au centre
- Couleur d'arrière-plan du dégradé gauche : rgba(31,72,192,0,61)
- Dégradé de fond à droite : #161c29
- Position de départ : 34 %
- Position finale : 71 %
- Placer le dégradé au-dessus de l'image d'arrière-plan : OUI
- Couleur de l'icône : #ffffff
- Alignement du texte : au centre
- Police du titre : Archivo
- Couleur du texte du titre : #ffffff
- Taille du texte du titre : 38 px
- espacement des lettres du titre : 4px
- Largeur maximale : 320px
- Alignement du module : centre
- Hauteur : 320px
- Rembourrage : 68px haut
- Coins arrondis : 10px
- Indice Z : 1
L'ajout de la valeur z index 1 est crucial pour s'assurer que le module de présentation reste au-dessus des autres modules qui seront éventuellement empilés derrière lui.
Ajouter un module d'appel à l'action
Ensuite, nous devons ajouter un module d'appel à l'action qui sera positionné à gauche du module de présentation.
Ce sera la première des deux zones de contenu qui finiront par apparaître en survol.
Nous devons maintenant supprimer la couleur d'arrière-plan par défaut et mettre à jour les paramètres de conception comme suit :
- Alignement du texte : à gauche
- Police du titre : Archivo
- Taille du texte du titre : 22px
- Largeur : 320px
- Alignement du module : à gauche (ordinateur de bureau), au centre (tablette et téléphone)
- Hauteur : 320 px (ordinateur de bureau), automatique (tablette et téléphone)
- Marge : -320px (ordinateur de bureau), 0px (tablette et téléphone)
- Rembourrage : 40 pixels en haut, 40 pixels à gauche, 40 pixels à droite
Dupliquez le module d'appel à l'action et alignez-le sur la droite
Pour créer le deuxième bloc de contenu qui apparaîtra à droite du texte de présentation, nous pouvons déployer le mode d'affichage filaire et dupliquer le module d'appel à l'action. Ouvrez ensuite les paramètres du doublon et mettez à jour l'alignement du module vers la droite.
Voici à quoi devrait ressembler le design jusqu'à présent.
Création du bouton
Le dernier élément que nous devons ajouter à notre conception est le bouton. Vous pouvez ajouter un bouton dans l'un des modules d'appel à l'action si vous le souhaitez. Mais pour ce design j'ai pensé qu'il serait préférable d'ajouter un bouton qui reste visible en bas de notre rangée.
Pour créer le bouton, déployez le module de vue filaire et ajoutez un module de bouton directement sous le deuxième module d'appel à l'action afin qu'il soit le dernier module de la ligne/colonne.
Ouvrez les paramètres du module de boutons, puis basculez le mode d'affichage du bureau afin de modifier visuellement le bouton.
Ajoutez le texte du bouton « En savoir plus ».
Mettez ensuite à jour le style du bouton comme suit :
- Alignement des boutons : centre
- Couleur du texte du bouton : #ffffff
- Couleur d'arrière-plan du bouton : #1f48c0
- Largeur de la bordure du bouton : 0px
- Rayon de bordure de bouton : 10px
- Espacement des lettres des boutons : 4px
- Police des boutons : Archivo
Il ne nous reste plus qu'à positionner notre bouton.
- Marge (bureau): -25px haut
- Marge (tablette et téléphone): 25px en haut, 50px en bas
- Indice Z : 2
La valeur d'index z de 2 garantira que le bouton reste au-dessus du module de présentation (qui a un index z de 1).
Création de l'effet de survol pop-out
Le principal effet de survol dont nous avons besoin pour accomplir les descriptions de service pop-out consiste à modifier la largeur de la ligne lors du survol. Pour ce faire, nous devrons donner à notre ligne une largeur étroite par défaut. Cela entraînera l'empilement des modules les uns derrière les autres et restera caché derrière le module de présentation. Ensuite, nous élargirons la largeur de la ligne au survol afin d'exposer les deux modules d'appel à l'action cachés.
Ouvrez les paramètres de ligne et mettez à jour la largeur comme suit :
- Largeur maximale (bureau): 320px
- Largeur maximale (survol): 1080px
- Largeur maximale (tablette et téléphone) 1080px
Ensuite, pour une touche finale, ajoutez un rayon de bordure à la ligne et mettez à jour l'option de débordement de visibilité sur visible afin que le bouton ne soit pas masqué.
- Coins arrondis : 10px
- Débordement horizontal : visible
- Débordement vertical : visible
Résultat final
Consultez les descriptions de service pop-out jusqu'à présent.
Et le voici sur l'écran de la tablette et du téléphone.
Plus d'options de conception à essayer
C'est toujours amusant d'expérimenter avec plus d'options de conception maintenant que nous avons la configuration de base en place. Voici quelques suggestions que vous pouvez essayer pour vos descriptions de service pop-out.
Ajout d'une couleur d'arrière-plan de section
Si vous le souhaitez, vous pouvez ajouter une couleur d'arrière-plan à la section qui correspond à la couleur/image d'arrière-plan de la ligne pour un design pop-out unique.
Accédez aux paramètres de ligne et mettez à jour les éléments suivants :
- Couleur d'arrière-plan : #161c29
Vérifiez ensuite le résultat.
Utiliser seulement deux modules
Si vous souhaitez une sortie plus compacte en utilisant seulement deux modules, vous pouvez supprimer l'un des modules d'appel à l'action, puis aligner le module de présentation sur la gauche afin que les deux deviennent visibles au survol.
Pour ce faire, déployez le mode d'affichage filaire. Supprimez ensuite le premier module d'appel à l'action directement sous le module de présentation.
Après cela, mettez à jour le module de présentation avec un alignement de module à gauche.
- Alignement du module : à gauche (ordinateur de bureau), au centre (tablette)
Enfin, diminuez la largeur maximale de la rangée en survol pour la rendre plus compacte. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
- Largeur maximale (survol): 700px
- Largeur maximale (tablette): 700px
Voici le résultat final.
Et le voici sur fond blanc.
Dernières pensées
La création de descriptions de services contextuelles en survol est un moyen unique d'engager les visiteurs avec votre contenu. Cette fonctionnalité fonctionne un peu comme une info-bulle sophistiquée et informative regorgeant de toutes les capacités de conception de Divi. Et c'est assez facile à faire. Une fois les modules dimensionnés et positionnés, il ne vous reste plus qu'à ajuster la largeur de la rangée en survol. N'hésitez pas à expérimenter différents modules et contenus pour encore plus d'applications. Si quoi que ce soit, j'espère que cela vous donnera un peu plus d'inspiration pour en faire plus avec Divi.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!