Créer des designs de boutons Divi uniques à l'aide d'un module de texte

Créer des designs de boutons Divi uniques à l'aide d'un module de texte vous a peut-être déjà traversé l'esprit. Si oui, vous êtes plus créatif que vous ne le pensez ! Avec la sortie des options de survol dans Divi, tous les modules peuvent être rendus cliquables. Cela ouvre la porte à l'utilisation de n'importe quel module (avec tous ses paramètres de conception intégrés) en tant que CTA ou bouton cliquable. Un module de texte, par exemple, vous permet d'ajouter autant de texte que vous le souhaitez au module dans différents formats. De plus, le module de texte propose également des options de conception robustes pour personnaliser les coins arrondis afin de créer des formes uniques.

Dans ce tutoriel, je vais explorer quelques conceptions de boutons Divi uniques qui sont possibles à l'aide d'un module de texte.

Commençons!

Aperçu

Voici quelques exemples de conceptions de boutons que nous allons créer facilement avec le module de texte.

Il s'agit d'un bouton avec du texte sur deux lignes…

Il s'agit d'un bouton utilisant un élément de liste…

Ceci est un bouton utilisant des coins créatifs…

Créer des designs de boutons Divi uniques à l'aide d'un module de texte

Abonnez-vous à notre chaîne Youtube

#1 Créer un bouton avec plusieurs lignes de texte

Comme mentionné précédemment, le module de texte permet une quantité illimitée de texte, il serait donc facile de créer un bouton avec seulement deux lignes de texte en utilisant le module de texte dans plusieurs formats. À l'aide du wysiwyg ou de l'éditeur de texte, vous pouvez ajouter du texte de paragraphe, des en-têtes, des liens, des listes et des guillemets. Et la meilleure partie du module de texte est que vous pouvez cibler et styliser chacun de ces formats de texte individuellement à l'aide de l'interface utilisateur à onglet intégrée aux paramètres de conception du générateur visuel.

Cela facilite vraiment l'ajout de plusieurs lignes de texte, puis le style de chaque ligne de texte séparément pour une disposition de bouton unique.

Voici un exemple rapide de la façon de configurer le module de texte en tant que bouton avec plusieurs lignes de texte.

Si vous ne l'avez pas déjà fait, créez une nouvelle page et déployez le générateur visuel. Choisissez l'option « Créer à partir de zéro ». Créez ensuite une nouvelle section sur une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne.

Pour le contenu textuel, utilisez l'onglet html et saisissez ce qui suit :

<h3>Contact Us</h3>
<h4>WE CAN HELP</h4>

Il existe de nombreux styles d'arrière-plan différents que nous pouvons ajouter à notre module, mais pour cet exemple, ajoutons un simple arrière-plan dégradé :

Dégradé de fond à gauche : #FEE140
Dégradé de fond à droite : #FA709A

Passez ensuite à l'onglet conception et utilisez l'interface utilisateur de l'onglet d'en-tête pour styliser les balises d'en-tête h3 et h4 comme suit :

Titre 3 Poids de la police : Ultra gras
Titre 3 Style de police : TT
Titre 3 Couleur du texte : #ffffff
Titre 4 Style de police : TT
Titre 4 Couleur du texte : #ffffff
Titre 4 Taille du texte : 16px

Il ne nous reste plus qu'à dimensionner le module de texte pour qu'il ressemble davantage à un bouton. Pour ce faire, mettez à jour les éléments suivants :

Largeur : 230 pixels
Rembourrage personnalisé : 1 em en haut, 0,5 em en bas, 2 em à gauche, 2 em à droite

Depuis la sortie des nouvelles options de survol de Divi, tous les modules peuvent devenir cliquables comme un bouton. Pour ce faire, retournez dans l'onglet contenu et entrez une URL de lien de module.

Voici le résultat final.

En tant qu'effet de survol, vous pouvez ajouter une ombre de boîte qui balaie le bouton, appliquant finalement une nouvelle couleur d'arrière-plan pour remplacer le dégradé.

Pour ce faire, ouvrez les paramètres du module de texte et mettez à jour les éléments suivants :

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 0 px (par défaut), 230 px (survol)
Position verticale de l'ombre de la boîte : 0px
Couleur de l'ombre : rgba(0,0,0,0) (par défaut), #fee140 (survol)

Voici à quoi cela ressemble en vol stationnaire.

#2 Création d'un bouton d'élément de liste

Parce que les modules de texte vous permettent d'ajouter des listes (non ordonnées ou ordonnées) au contenu, vous pouvez profiter de cette fonctionnalité pour créer un bouton de liste. Fondamentalement, tout ce que vous avez à faire est de créer une liste avec un élément de liste à l'intérieur de la zone de contenu. Enveloppez ensuite votre élément de liste dans une balise d'en-tête afin de pouvoir styliser l'élément de liste à puces et le texte d'en-tête séparément.

Si vous ne l'avez pas déjà fait, créez une nouvelle page et déployez le générateur visuel. Choisissez l'option « Créer à partir de zéro ». Créez ensuite une nouvelle section sur une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne.

Ajoutez ensuite le code html suivant dans l'onglet texte de vos paramètres de contenu :

<ol><li><h3>Contact Us</h3></li></ol>

Il est important d'envelopper le texte de l'élément de liste dans une balise d'en-tête afin que nous puissions styliser la puce/le numéro de l'élément de liste séparément du texte.

Passez maintenant à l'onglet de conception et terminez la conception du module de texte en tant que bouton :

Dans la catégorie des paramètres de texte, sélectionnez l'onglet liste ordonnée et mettez à jour les éléments suivants :

Police de la liste ordonnée : Exo 2
Poids de la police de la liste commandée : léger
Couleur du texte de la liste commandée : #000000
Taille du texte de la liste commandée : 20px
Espacement des lettres de la liste ordonnée : 5px
Type de style de liste ordonnée : decimal-leader-zero
Position de style de liste ordonnée : à l'extérieur
Retrait de l'élément de la liste ordonnée : 2em

Sous la catégorie Titre du texte, cliquez sur l'onglet H3 et mettez à jour les éléments suivants :

Police du titre 3 : Exo 2
En-tête 3 Poids de la police : semi-gras
Titre 3 Style de police : TT
Titre 3 Couleur du texte : #0c71c3
Titre 3 Taille du texte : 26px
En-tête 3 Hauteur de ligne : 0.3em

Ensuite, modifiez la largeur du module et donnez-lui une bordure et un espacement pour qu'il ressemble à un bouton :

Largeur (du module): 262px
Alignement du module : centre
Rembourrage personnalisé : 2 em en haut, 0 px en bas, 2 em à gauche, 2 em à droite
Coins arrondis : 10px2em
Largeur de la bordure : 1px
Couleur de la bordure : #000000
Style de bordure : solide

Et n'oubliez pas d'ajouter un lien vers votre module vers l'URL désignée de votre choix.

Voici la conception finale.

N'hésitez pas à explorer de nouveaux types de style de liste (comme Upper Roman) pour des conceptions de boutons de liste uniques.

#3 Créer un bouton avec des coins créatifs (comme une feuille)

Pour cette prochaine conception, nous allons profiter du paramètre de conception des coins arrondis dans un module de texte. L'idée de base est de définir différentes valeurs de rayon de coin pour créer des boutons de forme unique. Dans cet exemple, je vais façonner notre module pour qu'il ressemble à un bouton feuille.

Si vous ne l'avez pas déjà fait, créez une nouvelle page et déployez le générateur visuel. Choisissez l'option « Créer à partir de zéro ». Créez ensuite une nouvelle section sur une ligne à une colonne. Ajoutez ensuite un module de texte à la ligne.

Ouvrez les paramètres du module de texte et entrez le code html suivant dans l'onglet texte de la zone de contenu :

<h3>grow</h3>
<h4>with us</h4>

Cela nous permet de placer le texte du bouton sur deux lignes (en réduisant la largeur verticale) et de les styliser indépendamment.

Ajoutez ensuite un arrière-plan dégradé avec une couleur plus « feuilletée ».

Couleur de fond dégradé à gauche : #7cda24
Couleur de fond dégradé à droite : #26e051
Direction du gradient: 90deg

Passons maintenant aux paramètres de conception pour centrer notre texte et styliser les balises de titre. vous devrez sélectionner l'onglet h3 pour concevoir l'en-tête h3 et sélectionner l'onglet h4 pour concevoir l'en-tête h4 :

Orientation du texte : centre
Police de la rubrique 3 : Oswald
Titre 3 Poids de la police : Léger
Titre 3 Style de police : TT
Titre 3 Couleur du texte : #ffffff
Titre 3 Taille du texte : 27px
Police de la rubrique 4 : Oswald
Titre 4 Style de police : TT
Titre 4 Couleur du texte : #ffffff

Continuez à mettre à jour la conception pour donner à votre module de texte la largeur et l'espacement appropriés pour un bouton.

Largeur: 178px
Alignement du module : centre
Rembourrage personnalisé : 2 em en haut, 2 em en bas, 1 em à gauche, 1 em à droite

Enfin, nous pouvons ajouter nos coins arrondis personnalisés pour donner au module une forme de feuille, puis ajouter une ombre de boîte pour rendre la feuille plus vivante. Pour effectuer cette mise à jour, procédez comme suit :

Déverrouillez d'abord l'option des coins arrondis afin de pouvoir attribuer des valeurs individuelles à chaque coin.

Coin supérieur gauche : 100 pixels
Coin inférieur droit : 100 pixels

Ensuite, ajoutez une ombre de boîte…

Box Shadow : voir capture d'écran
Position horizontale de l'ombre de la boîte : 25px
Position verticale de l'ombre de la boîte : -4px
Force de propagation de l'ombre de la boîte: -12px
Couleur de l'ombre : rgba(0,0,0,0.25)

N'oubliez pas d'ajouter votre URL de lien de module afin que votre module soit lié à l'emplacement souhaité.

Voici la conception finale.

Pour un effet de survol, vous pouvez alterner les valeurs des coins arrondis pour placer le design du bouton dans la direction opposée au survol :

Et voici à quoi ressemble l'effet de survol.

Dernières pensées

Il est toujours agréable de sortir des sentiers battus de temps en temps lorsqu'il s'agit de concevoir des sites Web avec Divi. Espérons que ce didacticiel aidera à penser à de nouvelles conceptions de boutons Divi à l'aide du module de texte. En fait, je suggérerais d'explorer d'autres modules (comme le module Blurb) pour encore plus d'options de conception.

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

À votre santé!