Utilisation du module de menu pleine largeur de Divi par rapport au module de menu standard
Publié: 2022-06-06Une partie souvent négligée mais essentielle de tout site Web est le menu de navigation. La navigation est un élément clé pour créer une expérience utilisateur agréable. S'il est fait correctement, un menu peut grandement améliorer l'expérience utilisateur et faciliter la navigation de vos visiteurs sur le site Web.
Divi est livré avec 2 types de modules de navigation différents ; Menu pleine largeur et menu régulier. Dans cet article, nous discuterons et démontrerons certaines des différences entre le module de menu pleine largeur de Divi et le module de menu standard. Si vous vous êtes déjà demandé quel module utiliser pour votre site Web, nous espérons que cet article vous aidera à comprendre les principales différences et les cas d'utilisation de ces modules. Nous vous donnerons également des instructions étape par étape pour personnaliser la conception d'un menu pleine largeur et d'un module de menu régulier.
Commençons!
Aperçu
Bureau : module de menu pleine largeur
Bureau : module de menu standard
Mobile : module de menu pleine largeur
Mobile : module de menu standard
Principales différences entre le module de menu pleine largeur de Divi et le module de menu régulier
Voici un aperçu des principales différences entre un module de menu pleine largeur et un module de menu standard.
Conteneur de section régulier ou pleine largeur
Le module de menu pleine largeur nécessite une section pleine largeur dans Divi. Étant donné que la section est pleine largeur, tout module que vous ajoutez occupera toute la largeur de la page. Contrairement à la section de menu régulière, vous ne pouvez pas avoir plusieurs modules côte à côte. Le module de menu pleine largeur est idéal si vous souhaitez que le menu s'étende sur toute la largeur de la page et que vous n'ayez pas besoin de modules supplémentaires à côté.
Le module de menu régulier nécessite une section régulière dans Divi. Les sections régulières ont de nombreuses dispositions de lignes différentes, et vous pouvez utiliser n'importe quelle disposition avec le module de menu régulier. Cela vous permet d'inclure du contenu supplémentaire à côté du menu en utilisant les autres lignes pour créer une barre de menus plus complexe. Grâce aux nombreuses options de lignes de Divi, vous pouvez facilement créer des mises en page uniques pour votre barre de menus à l'aide du module de menu standard.
Paramètres de largeur intégrés par rapport à la modification du conteneur de lignes
L'autre différence clé entre les menus réguliers et pleine largeur est qu'ils ont différentes façons de modifier la largeur et l'espacement du module.
Le module de menu pleine largeur est livré avec certains paramètres intégrés pour modifier la largeur. Vous pouvez rendre le texte du menu en pleine largeur avec l'option "Créer des liens de menu en pleine largeur". Cela étend le module de menu pleine largeur au-delà de la largeur de contenu par défaut.
Pour obtenir un aspect similaire avec un module de menu standard, vous devez plutôt modifier les paramètres de la ligne contenante. Par exemple, modifiez la largeur, la largeur maximale et l'alignement de la ligne contenant le menu normal pour étendre le module de menu normal au-delà de la largeur de contenu par défaut.
Utilisation du module de menu pleine largeur de Divi par rapport au module de menu standard
Ce dont vous avez besoin pour commencer
Si vous souhaitez suivre ce tutoriel, installez et activez le thème Divi et assurez-vous d'avoir la dernière version de Divi sur votre site Web.
Maintenant, vous êtes prêt à commencer !
Conception d'un module de menu pleine largeur
Ajoutez une nouvelle page à votre site Web et donnez-lui un titre, puis sélectionnez l'option Utiliser Divi Builder.
Pour ce didacticiel, nous allons créer la conception à partir de zéro, alors sélectionnez l'option pour commencer la construction.
Lorsque vous créez une page vierge pour la première fois, elle est préchargée avec une section régulière. Ajoutez d'abord une section pleine largeur sous la section normale.
Ensuite, supprimez la section régulière de la page.
Ajoutez un module Menu pleine largeur à la ligne pleine largeur.
Ajoutez une couleur d'arrière-plan au menu pleine largeur.
- Arrière-plan : #4e7560
Ajoutez un logo au menu pleine largeur.
Ensuite, accédez aux options de texte du menu sous l'onglet Conception.
- Police du menu : Poppins
- Couleur du texte du menu : #FFFFFF
- Taille du texte du menu : 20 px
Ensuite, accédez aux paramètres du menu déroulant.
- Couleur de fond du menu déroulant : #FFFFFF
- Couleur de la ligne du menu déroulant : #7EAD70
- Couleur du texte du menu déroulant : #000000
Définissez l'arrière-plan du menu mobile et la couleur du texte.
- Couleur de fond du menu mobile : #FFFFFF
- Couleur du texte du menu mobile : #000000
Ensuite, modifiez les paramètres du menu Hamburger.
- Couleur de l'icône du menu hamburger : #FFFFFF
- Taille de la police de l'icône du menu hamburger : 40 px
Enfin, ajoutez un peu de rembourrage en haut et en bas.
- Rembourrage-Top : 10px
- Rembourrage en bas : 10px
Votre module de menu pleine largeur est maintenant terminé !
Concevoir un module de menu régulier
Ajoutez une nouvelle page à votre site Web et donnez-lui un titre, puis sélectionnez l'option Utiliser Divi Builder.
Sélectionnez Commencer la construction pour créer à partir de zéro.
La page est préchargée avec une section régulière vide. À cette section, ajoutez une couleur d'arrière-plan.
- Arrière-plan : #4e7560
Ensuite, retirez le rembourrage supérieur et inférieur.
- Rembourrage-Haut : 0px
- Rembourrage en bas : 0px
Ajoutez une nouvelle ligne avec la disposition illustrée ci-dessous.
Dans les paramètres de ligne, égalisez les hauteurs de colonne.
- Égaliser les hauteurs de colonne : Oui
Dans les paramètres CSS de l'élément principal sous l'onglet Avancé, ajoutez le CSS personnalisé suivant.
align-items:center;
Ajoutez un module de texte à la colonne la plus à gauche. Nous l'utiliserons pour afficher le nom du site Web au lieu de télécharger un logo. Il s'agit d'un avantage unique du module de menu standard car vous pouvez l'utiliser avec d'autres modules pour ajouter des éléments supplémentaires à la barre de menus.
- Texte H1 : « Blog Divi »
Définissez l'alignement du texte à gauche sur le bureau.
- Alignement du texte-Bureau : gauche
Définissez l'alignement du texte pour qu'il soit centré sur la tablette et le mobile.
- Alignement du texte - Tablette : centre
- Alignement du texte - Mobile : centre
Ensuite, accédez aux paramètres de texte d'en-tête.
- Police d'en-tête : Poppins
- Épaisseur de la police d'en-tête : Gras
- Couleur du texte d'en-tête : #FFFFFF
- Taille du texte d'en-tête : 40 px
Maintenant que le titre "Divi Blog" est terminé, ajoutons le module de menu régulier à la colonne centrale.
Supprimez la couleur de fond.
- Contexte : Aucun
Ensuite, accédez à l'onglet de conception. Sous Disposition, changez le style en Centré.
- Style : Centré
Nous pouvons maintenant modifier les styles de texte du menu.
- Police du menu : Poppins
- Couleur du texte du menu : #FFFFFF
- Taille du texte du menu : 20 px
Modifiez également les styles du menu déroulant.
- Couleur de la ligne du menu déroulant : #7EAD70
- Couleur du texte du menu déroulant : #000000
Ensuite, modifiez les paramètres du menu mobile.
- Couleur de fond du menu mobile : #FFFFFF
- Couleur du texte du menu mobile : #000000
Enfin, modifiez les paramètres du menu hamburger.
- Couleur de l'icône du menu hamburger : #FFFFFF
- Taille de la police de l'icône du menu hamburger : 40 px
Ceci complète le style du module de menu régulier. Pour terminer la conception du menu, ajoutons un bouton d'appel à l'action dans la colonne de droite. Tout d'abord, ajoutez le module de bouton.
Modifiez le texte du bouton.
- Bouton : "Essai gratuit de 30 jours"
Réglez l'alignement du bouton au centre.
- Alignement des boutons : centré
Définissez "Utiliser des styles personnalisés pour le bouton" sur Oui et modifiez la couleur du texte.
- Utiliser des styles personnalisés pour le bouton : Oui
- Couleur du texte du bouton : #FFFFFF
Définissez l'arrière-plan du bouton.
- Arrière-plan du bouton : #7EAD70
Définissez l'arrière-plan du bouton au survol sur orange.
- Arrière-plan du bouton au survol : #D19929
Ensuite, définissez la largeur, le rayon et la police de la bordure du bouton.
- Largeur de la bordure du bouton : 0 pixel
- Rayon de la bordure du bouton : 40 px
- Police du bouton : Poppins
Enfin, définissez le rembourrage gauche et droit.
- Rembourrage à gauche : 30px
- Rembourrage à droite : 30 px
Résultat final
Voyons maintenant le résultat final de nos modules de menu.
Bureau : module de menu pleine largeur
Bureau : module de menu standard
Mobile : module de menu pleine largeur
Mobile : module de menu standard
Dernières pensées
J'espère que cet article vous a aidé à comprendre certaines des principales différences entre le module de menu pleine largeur de Divi et le module de menu standard. Les deux sont incroyablement faciles à personnaliser pour créer de superbes menus pour votre site Web. Le module de menu pleine largeur prend la largeur de la page et est livré avec des options intégrées pour modifier et ajuster la largeur. D'autre part, le module de menu régulier peut être utilisé avec d'autres modules et est contenu dans une rangée, où la largeur et d'autres options de dimensionnement peuvent être modifiées. Utilisez-vous un module de menu pleine largeur ou un module de menu normal sur votre site ? Nous serions ravis de vous entendre dans les commentaires !