Comment créer un large menu mobile Divi sur WordPress

Créer un menu mobile large pour votre site WordPress à l'aide de Divi peut améliorer considérablement l'expérience utilisateur sur les appareils mobiles. Le menu hamburger par défaut ne répond souvent pas aux besoins de navigation complexes. Cet article vous guidera dans la personnalisation de votre menu Divi pour créer un menu mobile pleine largeur à la fois fonctionnel et visuellement attrayant. Nous explorerons l'utilisation du générateur de thèmes, l'ajustement du module de menu et l'application de CSS personnalisé pour obtenir le résultat souhaité. Que vous travailliez avec un thème enfant ou directement dans le personnalisateur de thèmes de Divi, ces techniques vous aideront à créer une navigation adaptée aux mobiles qui se démarque du menu Divi par défaut.

Pourquoi utiliser le menu Wide Divi sur les appareils mobiles

Dans le monde actuel où le mobile est roi, il est essentiel d'optimiser la navigation de votre site Web pour les appareils mobiles. Si le menu Divi par défaut avec son icône hamburger fonctionne bien pour les sites simples, un menu mobile large peut offrir plusieurs avantages:

1. Visibilité améliorée : un menu large utilise toute la largeur de l'écran, ce qui rend les éléments de menu plus visibles et plus faciles à lire sur les écrans plus petits.
2. Expérience utilisateur améliorée : en affichant davantage d'options à la fois, les utilisateurs peuvent naviguer sur votre site plus efficacement sans avoir à ouvrir et fermer à plusieurs reprises un menu hamburger compact.
3. Possibilités de personnalisation : un large menu mobile permet une plus grande personnalisation des styles de menu, y compris la couleur d'arrière-plan, la taille de la police du menu et même l'incorporation d'icônes de médias sociaux.
4. Cohérence de la marque : vous pouvez conserver l'identité visuelle de votre site sur les versions de bureau et mobiles en personnalisant le menu mobile pour qu'il corresponde à votre conception globale.
5. Clics réduits : les utilisateurs peuvent accéder à tous les éléments du menu principal sans appuis supplémentaires, simplifiant ainsi leur parcours sur votre site.
6. Polyvalence : les menus larges peuvent accueillir des structures de navigation plus complexes, y compris les méga menus, qui sont difficiles à mettre en œuvre dans un menu mobile traditionnel.
7. Conception distinctive : un menu personnalisé distingue votre site de ceux qui utilisent le menu Divi par défaut, augmentant potentiellement l'engagement et la rétention des utilisateurs.

En tirant parti du générateur de thèmes de Divi et en appliquant du CSS personnalisé, vous pouvez créer un menu mobile qui non seulement a fière allure, mais améliore également l'expérience utilisateur mobile globale de votre site WordPress.

Comment créer un menu mobile Divi large

Pour ceux qui connaissent les tutoriels de Divi Theme Builder, une fonctionnalité courante manquant dans l'en-tête par défaut est l'option de menu plein écran. Bien que difficile à développer, ce tutoriel étape par étape est conçu pour aider les utilisateurs à créer une expérience de menu plein écran attrayante.

CodeWatcher propose une vaste collection de tutoriels Divi, offrant des solutions aux problèmes auxquels les utilisateurs de Divi sont souvent confrontés. Cherchez-en plus.

En-tête du générateur de thèmes

Pour que cela fonctionne, le module Menu doit être utilisé dans un modèle d'en-tête de Theme Builder. Vous êtes prêt à commencer si vous connaissez déjà le Divi Theme Builder.

La première étape consiste à accéder à Divi > Générateur de thèmes et à ajouter ou modifier le modèle d'en-tête. Pour appliquer le menu à l'ensemble du site, utilisez le premier modèle pour créer un en-tête global. Si vous préférez qu'il apparaisse sur des pages spécifiques ou si vous souhaitez le tester, créez un nouveau modèle et appliquez un en-tête personnalisé.

Réglage du module de menu

Une fois dans le modèle d'en-tête, commencez par ajouter une ligne à une seule colonne et insérez le module Menu. Bien qu'aucun ajustement obligatoire ne soit requis pour les paramètres du module Menu, il existe quelques ajustements recommandés:

1. Définissez la couleur du texte sous l’onglet Conception > Bascule Texte du menu.
2. Augmentez la taille de la police du texte dans l’onglet Conception > Bascule Texte du menu et ajustez-la pour le bureau, la tablette et le téléphone.
3. Définissez la hauteur de la ligne de texte sur 1,2em.
4. Personnalisez la couleur du menu hamburger dans l’onglet Conception > Bascule Icônes.
5. Augmentez la taille de la police de l'icône du menu hamburger dans l'onglet Conception > Bascule Icônes.

Ces ajustements sont facultatifs, mais ils peuvent vous aider à obtenir rapidement un design impressionnant. Faites défiler vers le bas pour voir une capture d'écran du menu créé : c'est vraiment époustouflant !

CSS personnalisé pour la section

Maintenant, au lieu d'ajouter une classe CSS directement au module, nous allons appliquer la classe CSS personnalisée à la section bleue. Il s'agit de la même section où le module Menu a été ajouté à l'étape précédente.

Pour ce faire, ouvrez les paramètres de la section, accédez à l'onglet Avancé et développez le bouton bascule CSS et ID personnalisés. Dans le champ de saisie Classe CSS, saisissez « pa-fullscreen-menu

Voici maintenant la partie la plus importante du tutoriel : les extraits de code gratuits ! Ce code remplit plusieurs fonctions, il est donc recommandé de se référer à la fois au tutoriel vidéo et aux commentaires de code pour une compréhension complète. Sinon, n'hésitez pas à simplement copier et coller le code.

/*align the hamburger menu to the right right*/

.pa-fullscreen-menu .et_pb_menu__wrap {
	justify-content: flex-end !important;
}


/*hide the desktop version of the menu*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_pb_menu__menu {
	display: none !important;
}


/*show the mobile version of the menu on desktop*/

.pa-fullscreen-menu .et_pb_menu__wrap .et_mobile_nav_menu {
	display: block !important;
	align-items: center !important;
}


/*style the opened menu*/

.pa-fullscreen-menu .opened #mobile_menu1 {
	width: 100vw !important;
	position: fixed !important;
	top: 0em !important;
	left: 0vw !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	flex-direction: column !important;
	opacity: 1 !important;
	visibility: visible !important;
	transition: visibility 0.3s, opacity 0.3s ease-in-out;
	padding: 0 !important;
}


/*style the closed menu*/

.pa-fullscreen-menu .closed #mobile_menu1 {
	background-color: #fff !important;
	text-align: center !important;
	width: 100vw !important;
	position: fixed !important;
	left: 100vw !important;
	top: 0em !important;
	height: 100vh !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-direction: column !important;
	transition: visibility 0.3s, opacity 0.3s, left 1s, ease-in-out;
	opacity: 0 !important;
	visibility: hidden !important;
}


/*remove the bullet points from the list items*/

.pa-fullscreen-menu #mobile_menu1 li {
	list-style: none !important;
	text-align: center !important;
	width: 100%
}


/*move the menu to the top above other elements*/

.pa-fullscreen-menu .et_pb_menu__wrap span.mobile_menu_bar {
	z-index: 999999 !important;
}


/*change the opened menu icon*/

.pa-fullscreen-menu .et_pb_menu__wrap .opened .mobile_menu_bar:before {
	content: "\4d" !important;
}


/*make the hamburger menu fixed position on mobile*/

.pa-fullscreen-menu .opened .mobile_menu_bar {
	position: fixed !important;
}


/*remove the default blue border top on the mobile menu*/

.pa-fullscreen-menu .et_mobile_menu {
	border-top: none;
}


/*remove the default background color on menu items*/

.pa-fullscreen-menu .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*remove the default hover background color and adjust opacity*/

.et_mobile_menu li a:hover {
	background-color: transparent;
	opacity: 1;
}


/*remove the default border bottom on menu items*/

.pa-fullscreen-menu .et_mobile_menu li a {
	border-bottom: none;
}

Vous pouvez appliquer les codes via les systèmes suivants:

• Plugin Divi Assistant : si vous utilisez le plugin Divi Assistant, collez le code dans l'onglet CSS de la fenêtre de code personnalisé de Divi Visual Builder.
• Thème enfant : ajoutez le code au fichier style.css pour ceux qui utilisent un thème enfant . Si vous n'avez pas de thème enfant, vous pouvez soit en générer un directement sur votre site, soit télécharger le thème enfant gratuit fourni.
• Intégration des options du thème Divi: Vous pouvez également coller le code dans la zone Divi > Options du thème > Code CSS personnalisé.

Et c'est fait !

Pour conclure

La création d'un menu mobile large pour votre site WordPress Divi améliore l'expérience utilisateur sur les appareils mobiles tout en préservant l'attrait esthétique de votre site. En utilisant le générateur de thèmes Divi, en ajustant le module de menu et en appliquant un CSS personnalisé, vous pouvez transformer le menu hamburger par défaut en une puissante navigation pleine largeur.

Cette personnalisation améliore non seulement la visibilité et l'accessibilité, mais permet également une plus grande flexibilité de conception, en incorporant des éléments tels que des icônes de réseaux sociaux et des couleurs d'arrière-plan personnalisées. N'oubliez pas que la clé du succès réside dans l'équilibre entre fonctionnalité et design. Que vous soyez un développeur chevronné ou un novice de Divi, ces techniques fournissent les outils nécessaires pour créer un menu mobile qui se démarque dans le paysage numérique encombré.