Comment positionner les boutons de manière absolue pour créer des dispositions de boutons uniques dans Divi

Les options de position intégrées de Divi sont un outil de conception pratique pour le positionnement précis de tout élément Divi, y compris les boutons. La plupart du temps, nous nous appuyons sur la position statique par défaut d'un bouton qui suit le flux du document (ou de la page). Cependant, si nous savons comment positionner les boutons de manière absolue, nous pouvons créer des dispositions de boutons uniques et pratiques pour notre contenu Divi.

Dans ce tutoriel, nous allons vous montrer comment créer 4 dispositions de boutons différentes qui accentueront de manière unique le module Blurb de Divi. Cela vous sera utile lorsque vous utiliserez des textes de présentation sur votre site Web.

Commençons.

Aperçu

Découvrez cet aperçu rapide des quatre dispositions de boutons que nous allons construire dans ce didacticiel.

Téléchargez GRATUITEMENT les mises en page des boutons Divi

Pour mettre la main sur les designs de disposition des boutons 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 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 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.

Création de la disposition des boutons n°1 : boutons inférieurs doubles

Pour la première de nos quatre dispositions de boutons, nous allons créer deux boutons inférieurs sous un module de présentation. C'est une excellente option pour présenter du contenu (comme des services) qui nécessite deux CTA. De plus, c'est un excellent moyen de garder vos boutons collés au bas des colonnes de hauteurs égales.

Pour commencer, ajoutez une ligne à deux colonnes (un demi-moitié) à la section.

Paramètres de ligne

• Utiliser une largeur de gouttière personnalisée : OUI
• Largeur de gouttière : 2
• Égaliser les hauteurs de colonne : OUI
• Largeur : 100 %
• Marge : 50px en bas
• Remplissage : 0px en haut, 0px en bas

Paramètres de la colonne 1

• Couleur de fond : #2e3858
• Rembourrage : 50 pixels en bas

Ce rembourrage inférieur créera l'espace nécessaire pour l'ajout des boutons positionnés de manière absolue.

Conception de module de présentation

Ensuite, ajoutez un module de présentation à la colonne 1.

Ensuite, téléchargez une image dans le module de présentation comme suit :

Accédez aux paramètres de conception et mettez à jour les éléments suivants :

• Alignement Image/Icône : Gauche
• Police du titre : PT Sans
• Poids de la police du titre : gras
• Couleur du texte du titre : #ffffff
• Taille du texte du titre : 38 px
• Espacement des lettres du titre : 2px
• Couleur du corps du texte : #ffffff
• Largeur de l'image : 40 %
• Largeur du contenu : 100 %
• Largeur : 100 %
• Remplissage : 50px, haut, 50px bas, 30px gauche, 30px droite

Ajout des boutons à double fond

Bouton #1 Conception

Ajoutez un nouveau module de bouton sous le module de présentation.

Mettez ensuite à jour les paramètres des boutons comme suit :

• Taille du texte du bouton : 16px
• Couleur du texte du bouton : #ffffff
• Couleur d'arrière-plan du bouton : #2dc3a3
• Largeur de la bordure du bouton : 0px
• Rayon de la bordure du bouton : 0px
• Espacement des lettres des boutons : 2px
• Police des boutons : PT Sans
• Poids de la police du bouton : gras
• Style de police des boutons : TT
• Marge : 0px en bas
• Rembourrage : 1 em en haut, 1 em en bas, 1,5 em à gauche, 2,5 em à droite

Bouton #1 Positionnement Absolu

Pour positionner le bouton absolument en bas à gauche de la colonne, mettez à jour les éléments suivants :

• Position : Absolu
• Emplacement : en bas à gauche

Divi rend cela facile avec la grille de localisation cliquable intégrée. Puisque nous voulons que le bouton soit aligné au bas de la colonne, aucune valeur de décalage n'est nécessaire.

Bouton #2 Conception et position

Pour créer le bouton #2, dupliquez le module de boutons précédent.

Le doublon sera empilé directement au-dessus du bouton précédent, donc si vous utilisez le constructeur visuel, il peut sembler que rien ne s'est passé. Cliquez pour ouvrir les paramètres du module de boutons et mettre à jour les éléments suivants :

• Couleur d'arrière-plan : #df4570

• Emplacement de la position : en bas à droite

Effacez maintenant la colonne 2 actuellement vide et dupliquez la colonne 1 pour obtenir également une conception en double exacte dans la colonne de droite.

Disposition des boutons #1 Résultat

Découvrez le résultat. Notez que le contenu de la colonne de droite pousse la colonne plus loin dans la page, mais parce que nos boutons sont positionnés de manière absolue, ils continuent à épouser le bas pour un joli design symétrique.

Création de la disposition des boutons n° 2 : boutons à trois côtés

Pour la prochaine disposition des boutons, nous allons positionner trois boutons à droite d'un module de présentation dans une seule colonne.

Pour démarrer cette conception de mise en page de bouton suivante, dupliquez la ligne précédente.

Paramètres de présentation

Mettez à jour les paramètres de présentation comme suit :

• Couleur d'arrière-plan : #df4570
• Largeur de l'image : 60 %
• Largeur : 56 % (ordinateur de bureau et tablette), 100 % (téléphone)

Cela créera la pièce dont nous avons besoin à droite du texte de présentation pour ajouter notre disposition à trois boutons.

Bouton de positionnement #1

Pour positionner le bouton 1, ouvrez les paramètres du bouton vert dans le coin inférieur gauche et mettez à jour les éléments suivants :

• Position : absolue (ordinateur de bureau et tablette), relative (téléphone)
• Emplacement : en haut à droite
• Décalage vertical : 20 % (ordinateur de bureau et tablette), 0 % (téléphone)
• Décalage horizontal : 5 % (ordinateur de bureau et tablette), 0 % (téléphone)

Bouton de positionnement #2

Pour positionner le bouton #2, dupliquez le bouton que vous venez de positionner. Vous pouvez supprimer le bouton rouge en bas à droite car nous n'en aurons pas besoin.

Ensuite, ouvrez les paramètres du bouton dupliquer et mettez à jour les éléments suivants :

• Couleur d'arrière-plan : #df4570

Puis déplacez un peu le bouton vers le bas en augmentant le décalage vertical.

• Décalage vertical : 35 %

Bouton de positionnement n°3

Enfin, répétez le processus une fois de plus en dupliquant le bouton précédent et en mettant à jour ce qui suit :

• Couleur d'arrière-plan : #3599e5
• Décalage vertical : 50 %

Disposition des boutons n° 2 Résultat

Découvrez le résultat final de la disposition à trois boutons.

Création de la disposition des boutons n°3 : boutons dispersés et mis à l'échelle

Pour cette prochaine mise en page, nous allons positionner les boutons un peu plus sporadiquement, puis ajuster la taille de quelques boutons à l'aide de l'échelle de transformation.

Pour commencer, dupliquez la ligne précédente contenant la disposition à trois boutons.

Paramètres de présentation

Ensuite, ouvrez les paramètres du module de présentation dans la colonne 1 et mettez à jour les éléments suivants :

• Largeur: 60%

• Couleur de fond : Transparent
• Largeur: 60%
• Alignement du module : Centre

• Alignement du texte : au centre
• Alignement du module : centre

• Largeur de la bordure : 2px
• Couleur de la bordure : rgba(255,255,255,0.15)

• Taille du texte du texte : 20px

• Marge : 50px haut

Bouton #1 Positionnement

• Décalage vertical : 8%
• Décalage horizontal : -7%

Bouton #2 Positionnement

• Emplacement du poste : en haut à droite
• Décalage vertical : 34 %
• Décalage horizontal : -10%

• Échelle de transformation : 80 %

Bouton #3 Positionnement

• Emplacement du poste : en bas à droite
• Décalage vertical : -3%
• Décalage horizontal : 5 %

• Échelle de transformation : 138 %

Paramètres de ligne

• Largeur de gouttière : 4
• Largeur : 80 % (bureau)

Disposition des boutons #3 Résultat

Découvrez le résultat final.

Création de la disposition des boutons n° 4 : boutons à tirette

Pour cette dernière disposition des boutons, nous allons créer des tirettes en haut à droite du texte de présentation.

Pour démarrer la conception, dupliquez la rangée de la disposition de boutons #2.

Paramètres de colonne

Ensuite, mettez à jour les paramètres d'arrière-plan de la colonne 1 comme suit :

• Couleur d'arrière-plan (bureau) : aucune (par défaut)
• Couleur d'arrière-plan (téléphone) : #2e3858

Sous l'onglet Avancé, mettez à jour l'option de visibilité afin que le débordement soit masqué sur l'écran du téléphone.

• Débordement horizontal (téléphone) : masqué
• Débordement vertical (téléphone) : masqué

Positionnez le bouton de tirette #1

Nous pouvons maintenant utiliser les trois boutons actuellement dans la colonne comme boutons de tirette. Ouvrez les paramètres du bouton du haut et mettez à jour les éléments suivants :

• Décalage vertical : 0px
• Décalage horizontal : 0px

Puisque nous allons utiliser le bouton pour un onglet, nous devons faire de la place pour la bonne icône afin qu'elle ait l'air centrée chaque fois qu'elle dépasse du module de présentation. Allez-y et mettez à jour le remplissage des boutons comme suit :

• Rembourrage : 2 em à gauche, 3 em à droite

Ajoutez ensuite le CSS personnalisé suivant à l'élément After :

padding-left: 10px;

Ensuite, mettez à jour le décalage horizontal sur le téléphone comme suit :

• Décalage horizontal (téléphone): -134px

Cela masquera le côté gauche du bouton à l'extérieur de la colonne sur l'écran du téléphone afin que le bouton complet s'affiche au survol/clic.

Positionnement du bouton à tirette #2

Pour positionner le deuxième bouton coulissant, dupliquez le bouton précédent et mettez à jour la couleur d'arrière-plan du duplicata.

• Couleur d'arrière-plan : #df4570

Ensuite, mettez à jour la position comme suit :

• Décalage vertical : 63px

Mettez ensuite à jour les options de position suivantes pour l'affichage du téléphone :

• Poste (téléphone) : parent
• Décalage vertical (téléphone) : 0%

Tirette de positionnement Bouton #3

Enfin, pour positionner le troisième bouton tirette, dupliquez le module de boutons précédent. Ensuite, ouvrez les paramètres du module de bouton en double et mettez à jour les éléments suivants :

• Couleur d'arrière-plan : #3599e5
• Décalage vertical : 126px

Une fois le troisième bouton en place, utilisez la fonction de sélection multiple de Divi en maintenant Cmd (ou Ctrl) enfoncé et en cliquant sur chacun des modules de boutons.

Ensuite, ouvrez les paramètres de l'un des modules de boutons et ajoutez la traduction de transformation suivante au survol.

• Transformer traduire l'axe X (survol): 68%

Cela mettra à jour les trois boutons avec la fonctionnalité de tirette en survol en la déplaçant vers la droite de 68 %.

Positionnement du module Blurb

Cette disposition des boutons nécessite que le module de présentation masque partiellement les trois boutons. Par conséquent, nous allons donner au texte de présentation une largeur de 100 %, puis utiliser la marge de droite pour exposer la partie nécessaire des onglets du bouton. Ensuite, tout ce que nous avons à faire est de donner au texte de présentation un indice Z élevé pour nous assurer qu'il se trouve au-dessus des boutons.

Ouvrez les paramètres du module de présentation et mettez à jour les éléments suivants :

• Largeur: automatique
• Marge : 50px à droite
• Position : Relatif
• Indice Z : 11

Mettez ensuite à jour la couleur d'arrière-plan.

• Couleur de fond : #2e3858

Paramètres de ligne

Une fois que les boutons de présentation et d'onglet sont terminés, ouvrez les paramètres de ligne et mettez à jour la largeur pour donner à ces onglets un peu d'espace pour se déplacer.

• Largeur: 80%

Supprimez la colonne 2, puis dupliquez la colonne 1 afin d'avoir le même design dans chacune.

Ouvrez ensuite les paramètres de la colonne 1 et attribuez-lui l'index Z suivant :

• Indice Z : 12

Cela garantira que les boutons de la première colonne ne seront pas cachés derrière le contenu de la colonne 2 lors du survol.

Si vous le souhaitez, vous pouvez mettre à jour les icônes de chaque bouton en fonction de vos besoins.

Disposition des boutons n° 4 Résultat

Découvrez le résultat final de la disposition des boutons de tirette.

Résultats finaux

Dernières pensées

Le positionnement des boutons ouvre absolument la porte à des dispositions de boutons sans fin dans Divi. Espérons que ce tutoriel vous aide à comprendre comment utiliser au mieux la position absolue dans Divi. D'autres fonctionnalités intégrées utiles, telles que les options de transformation et l'index Z, permettent de concevoir des boutons parfaitement positionnés.

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

À votre santé!