Comment dupliquer le menu principal d'Elegant Theme avec Divi

Le nouveau menu Thèmes élégants a été une demande populaire pour les développeurs de dupliquer sur leurs propres sites. La principale caractéristique du menu est le bouton d'appel à l'action (CTA) qui attire l'attention des visiteurs en changeant les couleurs et en s'animant lors du défilement de la page. Avoir ce type de bouton CTA sur votre site augmentera probablement le taux de clics et les conversions.

Aujourd'hui, je vais vous montrer comment dupliquer le menu principal d'Elegant Theme à l'aide de Divi. Pour implémenter le style et la fonctionnalité personnalisés du bouton, j'utiliserai une combinaison de CSS et de jQuery.

Commençons!

Mise en œuvre de la conception

Abonnez-vous à notre chaîne Youtube

Création du menu

Depuis le tableau de bord WordPress, accédez à Apparence → Menus . En haut de la page des menus, cliquez sur Options d'écran et cochez Classes CSS. Cela vous permettra d'ajouter une classe CSS personnalisée à vos éléments de menu.

Cliquez maintenant sur « Créer un nouveau menu » et donnez un nom à votre menu.

Cliquez sur le bouton « Créer un menu ».

Ensuite, ajoutez les liens de menu à votre nouveau menu. Étant donné que nous dupliquons le menu Thèmes élégants, j'ajoute les liens personnalisés suivants :

Thèmes
Plugins
Blog
Contact
Connexion
Inscrivez-vous pour télécharger

Une fois que vous avez terminé d'ajouter les liens à votre menu, sélectionnez le nouveau menu comme menu principal de votre site.

Afin de changer le lien du menu "Rejoindre pour télécharger" dans le bouton CTA, vous devrez y ajouter une classe CSS personnalisée afin de pouvoir le styler plus tard à l'aide de CSS. Pour ajouter la classe, cliquez sur la flèche à droite de l'élément de menu Join to Download pour afficher les options de configuration. Ajoutez une classe appelée « jointoday_button » dans la zone de texte Classes CSS.

Enregistrer le menu

Avec le menu créé et défini comme menu principal, il est temps d'ajouter le style au menu de navigation et au bouton CTA.

Styliser le menu de navigation

Nous devons d'abord modifier la taille du texte de votre barre de menu principale. Accédez à Personnalisateur de thème → En-tête et navigation → Barre de menu principale . Conservez tous les paramètres par défaut et modifiez la taille du texte à 15.

Le reste du menu de navigation sera stylisé à l'aide de CSS personnalisé. Sous Personnalisateur de thème, accédez à CSS supplémentaire et ajoutez le CSS personnalisé suivant (vous pouvez également les ajouter au fichier style.css de votre thème enfant) :

/*** remove shadow on main header***/
#main-header {
box-shadow: none;
}

/*** add shadow to fixed header ***/
@media (min-width: 981px) {
#main-header.et-fixed-header {
    box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -webkit-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
    -moz-box-shadow: 0 0 30px rgba(7, 51, 84, 0.17) !important;
}
}
/*** adjust padding on menu ***/
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 23px;
}
#top-menu li {
padding: 0 10px !important;
}

.et_header_style_left #et-top-navigation {
padding-top: 20px;
}

.et_header_style_left .et-fixed-header #et-top-navigation {
padding-top: 10px;
}

/*** style the menu button ***/
.jointoday_button a {
color: #f92c8b !important;
    line-height: 9px;
    font-weight: 600;
    padding: 13px 16px !important;
    text-transform: uppercase;
    font-size: 12px !important;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    display: block;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    border: 2px solid #f92c8b;
}

.jointoday_button a:hover {
    opacity: 1 !important;
    color: #fff !important;
    background-color: #f92c8b;
}

.et-fixed-header #top-menu .jointoday_button a:hover {
    background-color: #de20b3;
    border: 2px solid #de20b3;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

.et-fixed-header #top-menu .jointoday_button a {
    color: #fff !important;
    background-color: #f92c8b;
    box-shadow: 0px 5px 20px #d6dee4;
    -moz-box-shadow: 0px 5px 20px #d6dee4;
    -webkit-box-shadow: 0px 5px 20px #d6dee4;
    border: 2px solid #f92c8b;
}
.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a {
    background-color: #2cc2e6;
    border: 2px solid #2cc2e6;
    animation: highlight-nav .8s ease;
    -webkit-animation: highlight-nav .8s ease;
}

#main-header.et-fixed-header.et_highlight_nav #top-menu .jointoday_button a:hover {
    background-color: #f92c8b;
    border: 2px solid #f92c8b;
    box-shadow: 0px 5px 20px #aab9c3;
    -moz-box-shadow: 0px 5px 20px #aab9c3;
    -webkit-box-shadow: 0px 5px 20px #aab9c3;
}

@-webkit-keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}
@keyframes highlight-nav {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2)
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

/*** style the mobile menu links and button ***/
@media (max-width: 980px) {
.et_mobile_menu li {
text-align: center;
}

.et_mobile_menu li a {
border-bottom: none;
}
.et_mobile_menu li a:hover {
background-color: transparent;} 

.jointoday_button a {
border-bottom: 2px solid #f92c8b !important;
}
}

Tu as presque fini. Voyons à quoi ressemble le menu jusqu'à présent.

Notez que l'ombre sous le menu a été supprimée et ne s'affiche que lorsque la navigation fixe est activée lors du défilement vers le bas de la page. De plus, le bouton CTA a été conçu pour changer les couleurs lors de la navigation fixe.

Ajout du jQuery

Il ne reste plus qu'à ajouter le changement de couleur supplémentaire et l'animation d'impulsion au bouton lors du défilement vers un certain point de la page. Cette fonctionnalité supplémentaire attire davantage l'attention sur le bouton CTA lorsque l'utilisateur interagit avec le contenu. Afin d'ajouter cet effet, nous devons ajouter une classe CSS supplémentaire au bouton uniquement lorsque l'utilisateur fait défiler jusqu'à un point spécifique de la page. Dans ce cas, nous ajouterons la classe « et_highlight_nav » au menu lorsque l'utilisateur fait défiler jusqu'à un point supérieur à 50 pour cent du corps de la page. Cette classe sera supprimée une fois que l'utilisateur reviendra en haut de la page.

Vous pouvez accomplir cela en ajoutant du jQuery. Allez dans Divi → Options du thème , et sous l'onglet Intégration, ajoutez le jQuery suivant à la zone de texte « Ajouter du code à l'en-tête de votre blog » :

<script>
jQuery(document).ready(function($){
	jQuery(window).scroll(function() {    
	var   $main_header = jQuery('#main-header'),
		$body = jQuery('body'),
                scrollPercentage = 100 * (jQuery(this).scrollTop() / $body.height()),
                scroll = $(window).scrollTop(),
	    	objectPosition = $body.offset().top;

	    if (scroll < objectPosition) {
	        $main_header.removeClass("et_highlight_nav");
	    }
	    if (scrollPercentage >= 50){
	        $main_header.addClass("et_highlight_nav");
	    }
	});
});
</script>

La classe "et_highlight_nav" peut désormais être utilisée pour styliser le bouton CTA avec une animation d'impulsion et une couleur bleue. Puisque vous avez déjà ajouté le CSS personnalisé pour cet effet plus tôt, vous êtes prêt.

Consultez le menu maintenant.

Le bouton CTA devient maintenant bleu et clignote lorsque vous faites défiler la page plus bas et se réinitialise lorsque vous revenez en haut de la page.

Changer la couleur de votre bouton CTA

Étant donné que le bouton CTA utilise une classe CSS personnalisée, vous pouvez modifier le style du bouton pour qu'il corresponde à votre site en ajustant le CSS que vous avez ajouté précédemment. Remplacez simplement le code couleur par le vôtre. Voici les sections de CSS qui ciblent les différents styles de boutons :

Si vous changez la couleur de votre bouton, assurez-vous de changer la bordure inférieure de votre bouton sur mobile en changeant le CSS ici :

À quoi cela ressemble-t-il sur mobile ?

Le CSS personnalisé ajouté précédemment centrera vos éléments de menu et espacera correctement votre bouton CTA sur mobile, tout comme sur le menu mobile des thèmes élégants.

La police du menu

Pour ce tutoriel, j'utilise la police par défaut Open Sans comme police de menu. La police par défaut du site Elegant Themes (y compris le texte du menu) est une police appelée Poppins. Vous pouvez importer cette police à l'aide de Google Fonts en suivant les instructions de ce post précédent.

Dernières pensées

C'est ça! Vous avez dupliqué avec succès le menu principal des thèmes élégants. Et, vous pouvez ajuster le style de votre bouton CTA pour correspondre à la conception de votre site en ajustant le CSS personnalisé. Étant donné que les couleurs des boutons changent sur la navigation fixe et s'animent lors du défilement de la page, les utilisateurs sont plus susceptibles de remarquer le CTA qui aidera vos conversions.

J'espère que ce nouveau menu sera une fonctionnalité utile pour les projets à venir. Et j'ai hâte de vous entendre dans les commentaires ci-dessous.

Prendre plaisir!