Comment créer et ajouter un bouton CTA au menu d’un modèle DIVI | Thèmes élégants
Comme tout le monde le sait, Divi est un modèle utilisé sur la plate – forme WordPress et avec lui, vous pouvez faire tout ce que vous pouvez imaginer et ce que vous ne pouvez pas. Puisqu’on pourrait dire que leurs créations n’ont pas de limites. Et pour vous montrer un peu plus, tout ce que vous pouvez faire avec ce modèle. Nous vous avons apporté l’article suivant qui vous expliquera comment créer et ajouter un bouton CTA au menu d’un modèle DIVI, Elegant Themes.
Ce template est devenu actuellement le plus utilisé par les utilisateurs et ceci en raison de sa manipulation aisée et qu’il ne faut pas repartir de zéro. Comme vous le feriez avec d’autres modèles de conception de pages Web . Il ne serait pas non plus nécessaire de convertir en HTML et ici vous pouvez voir un exemple , qui se traduit également par un gain de temps substantiel.
Notre objectif principal étant de vous montrer le bon fonctionnement de ces outils. Avec Divi, nous vous avons appris à formater un formulaire Contact Form 7.
Comment créer et ajouter un bouton CTA au menu d’un modèle DIVI
Avant de commencer, nous devons vous dire que l’ajout d’un bouton CTA ou d’un appel à l’action dans le menu principal s’avère très important et simple. Tout comme l’ajout d’un lien sur le téléphone , et cela en fait un bouton spécial, avec des fonctionnalités spéciales. Et cela devrait attirer l’attention d’une manière différente du reste des boutons que nous trouverons dans le menu principal.
Ce bouton peut être utilisé pour de nombreuses actions telles que commenter un enregistrement, vendre un produit, demander des informations, etc. Une fois ce point clarifié, nous allons aller sur notre site Web et ensuite nous nous positionnerons dans le menu de gauche. Là, nous allons faire un clip dans l’onglet Apparence puis dans les Menus.
Cette action nous mènera à la fenêtre Menus et nous voulons qu’un nouveau bouton apparaisse dans la structure du menu. Ensuite, nous allons à l’option Liens personnalisés et écrivons le type de lien, qui pourrait être Réservations. Et dans l’URL, nous mettons le caractère numérique (#) et enfin nous faisons un clip dans l’option de menu Ajouter à.
Maintenant, la prochaine chose que nous devons faire est d’aller dans la partie supérieure droite de la fenêtre et nous allons sélectionner l’onglet Options d’écran. Lorsque vous faites cela, certaines options seront affichées et dans la section Afficher les propriétés avancées du menu. Nous devons confirmer que l’option Classes CSS est sélectionnée , si ce n’est pas le cas, nous la sélectionnons.
Une fois cela fait, nous allons dans l’option de menu Enregistrer et faisons un clip, puis nous allons sur le bouton créé, qui dans ce cas est Réservations. Et nous allons faire un clip dans la flèche qui se trouve à sa droite, ce faisant, plusieurs options apparaîtront et nous irons aux Classes CSS facultatives. Et nous allons écrire le cta- menu suivant et pour finir nous faisons un clip dans le menu Save .
Saisie du code pour créer et ajouter un bouton CTA au menu
Une fois que cela est fait, nous allons retourner dans le panneau latéral gauche et nous allons faire un clip dans l’onglet Divi puis dans les Options du thème. Cela nous mènera à la fenêtre et nous ferons défiler vers le bas jusqu’à ce que nous trouvions l’option CSS personnalisée. Là, nous devons coller le code suivant:
.cta-menu à {
bordure: 2px solide #fff;
rembourrage: 10px! important;
rayon de la bordure: 25px;
arrière-plan: # ffcd02;
couleur: #fff! important;
}
.cta-menu a: hover {
bordure: 2px solide # ffcd02;
arrière-plan: # ef5555;
couleur: # 000! important;
opacité: 1! important;
}
Ce code ajoutera un format à notre bouton , tel que la couleur, la séparation interne, la bordure, etc. dans le premier code, il montre l’apparence du bouton et le deuxième code montre l’apparence qu’il aura lorsque nous le survolons. Après cela, nous n’allons pas à la fin de la fenêtre et nous allons faire un clip dans l’option Enregistrer les modifications.
Il ne nous restera plus qu’à aller sur notre site Web et à actualiser la page, afin que nous puissions voir le bouton créé. Et de cette manière didactique et simple, nous avons conclu un autre tutoriel qui vous a aidé à créer et à ajouter un bouton CTA au menu d’un modèle DIVI.
