Les menus superposés en plein écran sont parfaits pour les sites de petite taille contenant moins de pages, ou peuvent être utilisés pour étendre la navigation en masquant et en affichant davantage de liens. Utilisez le menu PowerPack Widget menu avancéVous trouverez plus d'informations à ce sujet dans le Elementor Créez facilement des menus superposés hors du canevas et en plein écran sans écrire de code.
Étape 1 : Ajouter le widget Elementor Advanced Menu
Avant d'ajouter le widget, déterminez d'abord où vous voulez qu'il apparaisse. Si vous souhaitez que le menu superposé n'apparaisse que sur une seule page (une page de connexion, par exemple), vous pouvez ajouter le widget directement à cette page afin que le menu n'apparaisse que sur cette page.
Si vous souhaitez que le menu prioritaire apparaisse sur l'ensemble du site ou sur chaque page, vous pouvez ajouter le widget à un en-tête personnalisé construit avec Elementor afin que le menu apparaisse partout où se trouve l'en-tête, généralement sur l'ensemble du site.
Il suffit d'ouvrir la page ou l'en-tête dans l'éditeur Elementor et de glisser-déposer le widget Advanced Menu de PowerPack à sa place.
Étape 2 : Configuration du menu superposé en plein écran
Ensuite, sélectionnez le menu que vous souhaitez afficher dans la liste des menus de WordPress.
Ensuite, faites défiler les options jusqu'à ce que vous trouviez la section "Réponse". Sélectionnez "du début à la fin"comme point d'arrêt et changez le type de menu en "Plein écran".
Vous pouvez également modifier l'alignement des boutons, leur style, etc. à partir des paramètres donnés. Après avoir effectué les modifications dans l'onglet contenu, votre menu plein écran ressemblera à ce qui suit :
Étape 3 : Personnaliser le style du menu superposé en plein écran
menu principalDans cette section, vous pouvez définir les styles des éléments du menu principal, tels que la couleur du texte, la typographie, les marges intérieures, etc.
menu déroulant: Vous pouvez ici ajuster le style des éléments du menu déroulant, y compris la typographie, la couleur du texte, la couleur de l'arrière-plan, la bordure, le rayon de la bordure, la marge intérieure et le séparateur.
bouton de basculementLe menu superposé en plein écran est déclenché par le basculement d'une icône ou d'un bouton, que vous pouvez personnaliser dans cette section. Vous pouvez modifier la couleur, l'arrière-plan, la taille, l'épaisseur, la bordure et les étiquettes (si les étiquettes sont activées dans l'onglet "Contenu"). Ces paramètres ne s'appliquent qu'aux boutons à bascule.
réactifMenu : Ici, vous pouvez ajuster la façon dont le menu apparaît sur différents appareils. Avant de commencer les réglages, cliquez sur le bouton de basculement pour déclencher le menu afin d'avoir un aperçu des modifications apportées en temps réel.
- alignement: Modifie l'alignement du menu au centre.
- Couleurs de l'arrière-plan et des liensModifie la couleur d'arrière-plan du menu et la couleur du lien (élément de menu).
- effet de survolPour les sous-menus, vous pouvez également personnaliser la couleur, les marges intérieures, etc. Pour les sous-menus, vous pouvez également personnaliser la couleur, les marges intérieures, etc.
- cadreLes bordures peuvent être modifiées facilement (couleur, largeur, etc.).
- Fermer l'icône: Permet de régler la couleur et la taille de l'icône de fermeture.
Résumé :
Les menus superposés en plein écran sont une solution de navigation adaptée aux petits sites web pour masquer et afficher plus de liens et étendre les fonctionnalités de navigation. Avec PowerPack Advanced Menu Widget et Elementor, vous pouvez créer des menus superposés hors du canevas et en plein écran sans écrire de code. En quelques étapes simples, vous pouvez décider où placer les menus, sélectionner les menus à afficher et définir la façon dont les menus réagissent et comment ils sont stylisés. Les options de personnalisation comprennent des éléments de menu principal, des menus déroulants, des boutons à bascule et des paramètres réactifs pour garantir que les menus s'affichent correctement sur différents appareils. Cet outil flexible et puissant vous permet d'offrir une expérience de navigation professionnelle et attrayante sur votre site web.
