4 façons d’ajouter des modules de boutons Divi côte à côte

Il existe de nombreux cas où l’on peut souhaiter ajouter des boutons Divi côte à côte. Pour les en-têtes des pages de destination, il est bon de proposer une incitation à l'action accrocheuse. Les doubles boutons sont un moyen populaire de procéder. Comme pour tout ce qui concerne Divi, il existe plusieurs façons d’atteindre le résultat souhaité. Il existe plusieurs façons de placer vos boutons dans Divi les uns à côté des autres. Vous pouvez utiliser des colonnes, ajouter du CSS ou ignorer complètement l’utilisation du module natif de boutons Divi.

Passons en revue quatre méthodes (et un cinquième conseil en bonus !) pour vous aider à faire en sorte que vos boutons dans Divi fonctionnent bien les uns avec les autres. À l’aide du Portfolio Layout Pack GRATUIT de Divi, nous explorerons les différentes façons d’y parvenir.

Installer la mise en page de la page de destination de Divi Portfolio

Pour commencer, nous allons installer la mise en page. Nous devons d’abord créer une nouvelle page dans WordPress. Depuis le tableau de bord WordPress, survolez l’élément de menu Pages dans le menu de gauche. Ensuite, nous cliquons sur Ajouter nouveau .

Une fois dans l’éditeur WordPress par défaut Gutenberg, définissez un titre pour votre nouvelle page. Ensuite, cliquez sur le bouton violet Utiliser Divi Builder .

Trois options vous seront alors proposées. Nous allons cliquer sur le bouton violet du milieu, Parcourir les mises en page .

Cela ouvrira la vaste bibliothèque de mises en page de Divi, qui contient des pages prédéfinies parmi lesquelles vous pourrez choisir. Nous sélectionnerons le Portfolio Layout Pack.

Dans le pack de mise en page du portefeuille, sélectionnez la mise en page À propos .

Ensuite, cliquez sur le bouton bleu Utiliser cette mise en page . Attendez que la mise en page s'installe sur votre nouvelle page. Enfin, cliquez sur le bouton vert Publier pour rendre votre page et votre nouvelle mise en page actives.

Nous travaillerons avec la section d'en-tête noire de la mise en page pour la plupart de notre didacticiel. Allons creuser !

Comment ajouter des boutons Divi côte à côte

Vous pouvez ajouter des Divi Buttons côte à côte de différentes manières. Notre première méthode consistera à utiliser la structure de colonnes Divi par défaut.

Utilisez des colonnes pour ajouter des boutons Divi côte à côte

D'après notre mise en page, nous pouvons voir que notre section d'en-tête comporte deux colonnes. Nous allons repenser cette section avec une section spécialisée pour nous permettre d'ajouter deux modules de boutons côte à côte dans la première colonne.

Ajout d'une nouvelle section spécialisée

Tout d’abord, nous cliquons sur l’icône bleue plus . Cela nous permettra d'ajouter une autre section. Nous allons ajouter une section spécialisée, alors cliquez sur l'icône rouge et orange de la section spécialisée .

Après avoir cliqué sur cette icône, une sélection de sections vous sera présentée. Notez que, contrairement aux sections classiques, les sections spécialisées vous permettent de combiner différentes structures de colonnes au sein d'une colonne. C'est ce que nous utiliserons pour placer deux modules de boutons côte à côte. Sélectionnez la première combinaison de ligne et de colonne .

Cela nous permettra d'ajouter notre en-tête de page sur toute la largeur de la colonne. Cependant, cela nous permettra également de placer deux modules de boutons côte à côte en dessous. Alors que nous recréons l'en-tête par défaut dans ce pack de mise en page, nous appliquerons une couleur d'arrière-plan noire à la section. Passez la souris sur la section orange et sélectionnez l'icône d'engrenage pour ouvrir les paramètres de la section.

Faites défiler jusqu'à l'onglet Arrière-plan . Sélectionnez le sélecteur de couleurs et créez l'arrière-plan de la section #000000 . Cliquez sur la coche verte en bas de la zone des paramètres pour enregistrer votre choix de style.

Une fois notre section créée et stylisée, nous cliquerons sur l’icône verte plus dans la première colonne . Ensuite, nous allons sélectionner une disposition à une colonne .

Une fois notre première ligne en place, nous allons faire glisser le contenu de la première colonne de la section d'en-tête initiale dans cette ligne.

Nous ferons de même avec le contenu de la deuxième colonne. Nous cliquons sur l'icône de flèche de déplacement et faisons glisser le module image et le module texte dans la deuxième colonne de la nouvelle section spécialisée que nous venons de créer.

Après avoir déplacé les modules dont nous avons besoin de la section d'origine, nous pouvons les supprimer. Survolez le menu de la section et cliquez sur l'icône de la poubelle . Cela supprimera la section avec sa ligne.

Ajouter des modules de boutons

Dans la première colonne de notre section spécialité, nous cliquerons sur l'icône verte plus pour ajouter une deuxième ligne à cette colonne. Nous allons sélectionner l'icône de mise en page à deux colonnes .

Ensuite, nous ajouterons un module bouton à chacune des colonnes de cette nouvelle ligne. Pour ce faire, cliquez sur l'icône plus grise , puis sélectionnez l'icône du module de boutons pour ajouter un bouton à la première colonne.

Styliser le module de boutons

Dans l'onglet Contenu, mettez à jour le texte du bouton pour refléter vos besoins. Dans notre cas, nous avons modifié le texte pour dire Mon CV.

Ensuite, cliquez sur l'onglet Conception , puis cliquez sur l'onglet Bouton . Utilisez les paramètres suivants pour styliser le bouton.

Paramètres de conception des boutons :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 14 px
• Couleur du texte du bouton : #000000
• Fond du bouton : #ffffff
• Largeur de la bordure du bouton : 0 px
• Police du bouton : Archivo
• Style de police des boutons : Toutes en majuscules
• Afficher l'icône du bouton : Oui
• Icône du bouton : par défaut
• Emplacement de l'icône du bouton : à droite

Maintenant, nous allons ajouter du remplissage à notre module de boutons. Ensuite, on clique sur l'onglet Espacement . Donnez au bouton les paramètres de remplissage suivants.

Paramètres de conception d'espacement :

• Rembourrage supérieur et inférieur : 16 px
• Remplissage gauche et droit : 24 px

Cliquez sur la coche verte pour enregistrer vos options de style.

Créer un deuxième module de boutons

Il est temps de créer et de placer notre deuxième bouton à côté de notre premier bouton. Tout d’abord, survolez le premier bouton et cliquez sur l’icône de copie . Cela dupliquera le module.

Ensuite, faites glisser le module dupliqué vers la deuxième colonne.

Maintenant que notre deuxième module de boutons est dans la colonne , cliquons sur l'icône d'engrenage . Cela ouvrira les paramètres de ce bouton.

Dans l'onglet Contenu, modifiez le texte du bouton en fonction de vos besoins.

Une fois dans les paramètres du module bouton, mettez à jour le texte du bouton . Enfin, cliquez sur la coche verte pour enregistrer vos modifications sur le deuxième bouton.

Au final, vous aurez deux modules de boutons, côte à côte.

Utiliser CSS pour placer les boutons Divi côte à côte

Une autre façon d’ajouter des boutons Divi côte à côte consiste à utiliser CSS. Avec une seule ligne de CSS, nous pouvons réaliser des boutons doubles côte à côte dans Divi. Tout d’abord, préparons notre section.

Préparer notre section

Semblable à notre méthode précédente, nous devrons ajuster notre section. Dans ce cas, nous utiliserons une section Divi classique au lieu d’une section spécialisée. Pour commencer, nous cliquons sur l’icône plus orange et sélectionnons l’icône bleue de la section régulière .

Maintenant que notre nouvelle section a été créée, nous allons ajouter des lignes et des colonnes. Nous sélectionnerons les deux colonnes, icône de mise en page 50% + 50% .

Voyant que notre section a été créée, donnons-lui un fond noir, semblable à la section précédente. Cliquez sur l'icône d'engrenage dans le menu de la section bleue. Ensuite, cliquez sur l'onglet Arrière-plan . Sélectionnez l'icône Couleur d'arrière-plan et définissez la couleur d'arrière-plan sur #000000 .

Cliquez sur la coche verte pour enregistrer le style de notre section. Ensuite, déplacez tous les modules de la section spécialité vers cette nouvelle section. Enfin, nous cliquerons sur l'icône de la corbeille dans notre section précédente et supprimerons la section spécialisée.

Notez que les modules de boutons ne sont pas encore côte à côte. Ils reposent les uns sur les autres. Changeons cela avec du CSS.

Ajouter du CSS pour que nos boutons Divi soient placés les uns à côté des autres

Pour commencer, nous cliquons sur l’icône d’engrenage de la ligne.

Cliquez sur l'onglet Avancé puis sur l'onglet ID CSS et Classes CSS. Définissez une classe CSS pour la ligne. Dans notre cas, nous lui donnerons un nom de classe côte à côte-1.

Ensuite, cliquez sur l'icône de coche verte pour enregistrer les ajouts à la ligne . Maintenant, nous cliquons sur le bouton cercle violet au milieu de l’écran.

Ensuite, cliquez sur l'icône d'engrenage violette . Cela ouvrira les paramètres de la page.

Dans les paramètres de la page, cliquez sur l'onglet CSS personnalisé . Une fois sur place, ajoutez la ligne CSS suivante :

/* Side by Side Buttons v1 */
.side-by-side .et_pb_button_module_wrapper {
display: inline-block;
margin-right: 25px;
}

La valeur de la marge droite peut être ajustée pour augmenter ou diminuer l'espace entre les deux boutons. Une fois que vous êtes satisfait, cliquez sur la coche verte pour sauvegarder votre travail !

Utiliser Flex Box pour ajouter des boutons Divi côte à côte

Si vous le souhaitez, vous pouvez également utiliser Flexbox pour placer vos modules de boutons les uns à côté des autres. Pour commencer, attribuons une classe CSS différente à notre colonne. Pour commencer, cliquez sur l'icône d'engrenage dans notre ligne.

Dans la boîte modale de la ligne, cliquez sur l'icône d'engrenage de la première colonne.

Dans les paramètres de la colonne, cliquez sur l'onglet Avancé . Ensuite, ajoutez une classe CSS de .side-by-side-2 à la colonne . Cliquez sur l'icône de coche verte pour enregistrer vos modifications.

Ensuite, nous reviendrons à l’écran des paramètres de la page. Cliquez sur le bouton rond violet avec trois points au centre de l'écran.

Ensuite, cliquez sur l'icône d'engrenage violette .

Dans nos paramètres de page, cliquez sur l'onglet Avancé et utilisez l'extrait CSS suivant :

/* Side by Side Buttons v2 */
.side-by-side-2 {
display: flex;
flex-wrap: wrap;
gap: 15px;
}

La propriété column-gap peut être ajustée pour ajouter plus d'espacement entre les différents modules au sein de la colonne. Voici le look final !

Option non traditionnelle : utilisez le module d'en-tête pleine largeur.

Il est possible d’avoir deux boutons dans Divi côte à côte sans utiliser deux Button Modules distincts. Le module d’en-tête Divi Fullwidth a la possibilité d’y ajouter deux boutons. Voyons comment nous pourrions imiter les sections que nous avons créées ci-dessus avec un seul module.

Ajouter une section et un module pleine largeur

Tout d’abord, nous devrons ajouter une section pleine largeur à notre page. Cliquez sur l'icône bleue plus . Ensuite, sélectionnez l’icône violette de section pleine largeur .

Parmi les modules pleine largeur disponibles, cliquez sur l'icône En-tête pleine largeur .

Après avoir ajouté notre en-tête pleine largeur, cliquons sur son icône d'engrenage pour commencer à styliser et ajouter du contenu au module.

Ajout de contenu au module

Dans l'onglet Contenu du module, nous pouvons utiliser le contenu des modules ci-dessus pour remplir les champs du module d'en-tête pleine largeur.

Le positionnement des modules et des éléments sera différent ; cependant, tous les éléments – le texte, le titre, le sous-titre, l’image et le corps du texte sont présents. Ce qui a utilisé plus de 5 modules peut être réalisé avec un seul, tout en gardant les boutons Divi côte à côte.

Styliser le module d'en-tête pleine largeur

Maintenant que le contenu des modules a été saisi dans le module Fullwidth Header, nous pouvons continuer et supprimer la section précédente. Cliquez sur l'icône de la poubelle dans le menu de la section bleue .

Commençons par styliser notre module d'en-tête pleine largeur pour qu'il corresponde à notre pack de mise en page. Sous l’onglet Conception, cliquez sur l’onglet Image . Ensuite, définissez les coins arrondis sur 500 px pour tous les coins.

Ensuite, cliquez sur l'onglet Texte du titre . Définissez le niveau de titre du titre sur h4 . Laissez tous les autres paramètres à leurs valeurs par défaut.

Ensuite, passez au texte du sous-titre. Cliquez sur l'onglet Texte du sous-titre et utilisez les paramètres suivants pour le styliser.

Paramètres de conception du texte des sous-titres :

• Poids de la police des sous-titres : gras
• Taille du texte des sous-titres : 48 px
• Hauteur de la ligne de sous-titre : 1,3 em

Pour l'onglet Bouton, nous utiliserons les mêmes paramètres pour le bouton un et le bouton deux que ceux utilisés pour les modules de boutons individuels. Vous pouvez trouver ces paramètres ci-dessous.

Paramètres de conception des boutons :

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 14 px
• Couleur du texte du bouton : #000000
• Fond du bouton : #ffffff
• Largeur de la bordure du bouton : 0 px
• Police du bouton : Archivo
• Style de police des boutons : Toutes en majuscules
• Afficher l'icône du bouton : Oui
• Icône du bouton : par défaut
• Emplacement de l'icône du bouton : à droite
• Rembourrage des boutons :
  • Haut et bas : 16 px
  • Gauche et droite : 24 px

Pour terminer notre style de ce module, nous revenons à l'onglet Contenu. Ici, nous définissons la couleur d'arrière-plan du module sur #000000 .

Bien que le module Fullwidth Header ne ressemble pas exactement à l’en-tête de la mise en page, il s’en rapproche assez. On voit à quel point il est simple d’utiliser un seul module pour mettre deux boutons Divi l’un à côté de l’autre.

Option bonus : utilisez un plugin tiers

Vous pouvez vous tourner vers Divi Marketplace pour vous aider également à placer les boutons Divi les uns à côté des autres. Les plugins comme Divi Plus, Divi Flash et Divi Supreme Pro disposent tous de modules qui vous permettent de placer 2 boutons ou plus les uns à côté des autres. Vous pouvez envisager de rechercher sur Divi Marketplace pour voir si un plugin tiers peut vous aider à créer des boutons plus attrayants pour votre prochain projet.

Emballer le tout ensemble

Divi permet de personnaliser ses modules natifs grâce à ses outils intégrés ou CSS. Que vous utilisiez une section régulière ou l'une des sections spécialisées, vous pouvez ajouter des boutons les uns à côté des autres. CSS vous permet d'être technique dans votre conception sans sacrifier la facilité d'utilisation. Si vous préférez ne pas gérer plusieurs modules, vous constaterez que le module Fullwidth Header peut vous aider à placer les boutons les uns à côté des autres. Enfin, vous pouvez également parcourir Divi Marketplace pour trouver des plugins dotés de boutons doubles ou multiples ou de modules d'appel à l'action qui vous permettront de placer vos boutons les uns à côté des autres.