Ce modèle est devenu actuellement le plus utilisé par les utilisateurs et cela est dû à sa gestion facile et au fait qu'il ne faut pas repartir de zéro. Comme vous le feriez avec d'autres modèles de website conception. Il ne serait pas non plus nécessaire de convertir en HTML et vous pouvez voir un exemple ici, ce qui se traduit également par un gain de temps important.
Car notre objectif principal est 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 o call to action dans le menu principal s'avère très important et simple. Tout comme ajouter un raccourci à votre téléphone, et cela en fait un bouton spécial, avec des fonctions 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. Après avoir clarifié ce point, nous irons sur notre site puis nous nous positionnerons dans le menu de gauche. Là, nous allons créer un clip dans l'onglet Apparence puis dans le menu.
Cette action nous conduira à la Fenêtre des 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 insérons le caractère numérique (#) et créons enfin un clip dans l'option de menu Ajouter à.
Maintenant, la prochaine chose à faire est d'aller en haut à droite de la fenêtre et nous sélectionnerons l'onglet Options d'écran. Lorsque vous faites cela, certaines options apparaîtront et dans la section Afficher les propriétés avancées du menu. Nous devons vérifier que l'option cours CSS est sélectionné, sinon, nous le sélectionnons.
Cela fait, allons à l'option de menu Enregistrer et créons un clip, puis allons au bouton créé, qui dans ce cas est Réservations. Et nous allons créer un clip dans la flèche qui se trouve à sa droite, lorsque nous ferons cela plusieurs options apparaîtront et nous irons dans Classes CSS facultatives. Et nous écrirons le cta-menu suivant et pour finir nous créerons un clip sur le menu Enregistrer.
Entrez le code pour créer et ajouter un bouton CTA au menu
Cela fait, nous allons revenir au panneau latéral gauche et créer un clip dans l'onglet Divi puis dans Options du thème. Cela nous amènera à la fenêtre et nous ferons défiler jusqu'à ce que nous trouvions l'option CSS personnalisée. Là, nous devons coller le code suivant :
.cta-menu a {
bordure : solide 2px #fff ;
rembourrage : 10px ! importante ;
rayon des bords : 25px ;
arrière-plan : # ffcd02 ;
couleur : #fff ! important ;
}
.cta-menu a : survolez {
bordure : solide 2px # ffcd02 ;
arrière-plan : # ef5555 ;
couleur : # 000 ! important;
opacité : 1 ! important;
}
Codice Questo ajoutera un format à notre bouton, comme la couleur, la séparation intérieure, la bordure, etc. dans le premier code, il montre à quoi ressemble le bouton et le deuxième code montre à quoi il ressemblera lorsque nous passerons la souris dessus. Après cela, nous n'irons pas au bout de la fenêtre et nous créerons un clip dans l'option Enregistrer les modifications.
Maintenant, nous n'aurons 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 à un menu de modèles DIVI.
