Accueil Divi Comment créer un CTA accrocheur et un effet hover avec Divi

Comment créer un CTA accrocheur et un effet hover avec Divi

PAr WPF
boutons Divi

Création de modèles de boutons Divi uniques à l’aide d’un module de texte

La création de conceptions 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 savez! Avec la publication des options de survol dans Divi, tous les modules peuvent être rendus cliquables. Cela ouvre la porte à l’utilisation de tout module (avec tous ses paramètres de conception intégrés) en tant que bouton ou bouton CTA 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 permettant de personnaliser les angles arrondis afin de créer des formes uniques.

Aperçu

Voici quelques exemples de modèles de boutons que nous créerons facilement avec le module de texte.

C’est un bouton avec du texte sur deux lignes…

Paramètres de conception avancés:

Ceci est un bouton utilisant un élément de la liste…

Ceci est un bouton utilisant des coins créatifs…

1 Créer un bouton avec plusieurs lignes de texte

Comme mentionné précédemment, le module de texte autorise 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 de 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 mettre en forme chacun de ces formats de texte individuellement à l’aide de l’interface utilisateur à onglets intégrée aux paramètres de conception du générateur visuel.

Il est donc très facile d’ajouter plusieurs lignes de texte, puis d’appliquer séparément chaque ligne de texte pour une disposition de bouton unique.

Voici un exemple rapide sur la manière de configurer le module de texte en tant que bouton avec plusieurs lignes de texte.

Si ce n’est déjà fait, créez une nouvelle page et déployez le générateur de visuels. Choisissez l’option “Construire à partir de zéro”. Créez ensuite une nouvelle section sur une ligne d’une colonne. Ajoutez ensuite un module de texte à la ligne.

Pour le contenu du texte, utilisez l’onglet html et entrez les informations suivantes:

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

Il y a beaucoup de styles de fond différents que nous pouvons ajouter à notre module, mais pour cet exemple, tet’s ajoute un simple fond dégradé:

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

Accédez ensuite à l’onglet Conception et utilisez l’interface utilisateur de l’onglet En-tête pour attribuer un style aux balises d’en-tête h3 et h4 comme suit:

Titre 3 Taille de la police: Ultra Gras
Titre 3 Style de police:
Titre TT 3 Couleur du texte: #ffffff
Titre 4 Style de police:
Titre TT 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: 230px
Rembourrage sur mesure: 1em en haut, 0.5em en bas, 2em à gauche, 2em à droite

Depuis la publication des nouvelles options de survol de Divi, tous les modules peuvent devenir cliquables, tout comme un bouton. Pour ce faire, retournez à l’onglet Contenu et entrez l’URL du lien du module.

Voici le résultat final.

En tant qu’effet de survol, vous pouvez ajouter une ombre encadrée qui recouvre le bouton, puis appliquer 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 la capture d’écran
Box Shadow Position horizontale: 0px (par défaut), 230px (survol)
Box Shadow Position verticale: 0px
Couleur des ombres: 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

Les modules de texte vous permettant d’ajouter des listes (non ordonnées ou ordonnées) au contenu, vous pouvez en tirer parti 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 dans la zone de contenu. Ensuite, placez l’élément de votre liste dans une balise d’en-tête afin de pouvoir styler séparément l’élément de liste et le texte de l’en-tête.

Si ce n’est déjà fait, créez une nouvelle page et déployez le générateur de visuels. Choisissez l’option “Construire à partir de zéro”. Créez ensuite une nouvelle section sur une ligne d’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:

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

Il est important d’envelopper le texte de l’élément de la liste dans une balise de titre afin que nous puissions styler la puce / le numéro de l’élément de la liste séparément du texte.

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

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

Liste ordonnée Police: Exo 2
Liste ordonnée Police: Light
Liste du texte
commandé: 00000000 Liste du texte commandé: 20px
Espacement entre les lettres de la liste ordonnée: 5px
Type de style de la liste ordonnée: decimal- Leading-Zero Style de la
liste ordonnée Position: En dehors de l’
élément de la liste tiret: 2em

Sous la catégorie Texte de titre, cliquez sur l’onglet H3 et mettez à jour les éléments suivants:

Heading 3 Police: Exo 2
Heading 3 Poids de la police: Semi Gras
Heading 3 Style de police: TT
Heading 3 Couleur du texte: # 0c71c3
Heading 3 Taille du texte: 26px
Heading 3 Hauteur de ligne: 0.3em

Ensuite, changez la largeur du module et donnez-lui une bordure et un espacement à faire ressembler à un bouton:

Largeur (du module): 262px
Alignement du module: centre
Rembourrage sur mesure: 2em en haut, 0px en bas, 2em à gauche, 2em à 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 styles de liste (tels que Upper Roman) pour des conceptions uniques de boutons de liste.

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

Pour cette prochaine conception, nous allons tirer parti 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 d’angle pour créer des boutons de forme unique. Dans cet exemple, je vais configurer notre module pour qu’il ressemble à un bouton feuille.

Si ce n’est déjà fait, créez une nouvelle page et déployez le générateur de visuels. Choisissez l’option “Construire à partir de zéro”. Créez ensuite une nouvelle section sur une ligne d’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:

0102<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 styler indépendamment.

Ajoutez ensuite un fond dégradé avec une couleur plus «semblable à une feuille».

Dégradé de fond à gauche: # 7cda24 Dégradé de
fond à droite: # 26e051 Sens du
dégradé: 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
Titre 3 Police: Oswald
Titre 3 Poids: Léger
Titre 3 Style de police: TT
Titre 3 Couleur du texte: #ffffff
Titre 3 Taille du texte: 27px
Titre 4 Police: Oswald
Titre 4 Police: TT
Titre 4 Couleur du texte: #ffffff

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

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

Enfin, nous pouvons ajouter nos coins arrondis personnalisés pour donner au module une forme de feuille, puis ajouter une ombre en forme de boîte pour rendre la feuille plus vivante. Pour ce faire, mettez à jour les éléments suivants:

Commencez par déverrouiller l’option des coins arrondis pour pouvoir attribuer des valeurs individuelles à chaque coin.

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

Ajoutez ensuite une ombre de boîte…

Box Shadow: voir la capture d’écran
Box Shadow Position horizontale: 25px
Box Shadow Position verticale: -4px
Box Shadow Spread Force: -12px
Couleur des ombres: 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 de coins arrondis pour placer le design du bouton dans le sens opposé au survol:

Et voici à quoi ressemble l’effet de survol.

Espérons que ce tutoriel vous aidera à penser à de nouvelles conceptions de boutons divi créatives à l’aide du module texte. 

Auteur Jason Champagne

Related Articles

Laisser un commentaire