Voulez-vous créer un menu plein écran dans Elementor ? Si oui, cet article va vous montrer comment. Il n’y a pas besoin de module complémentaire pour créer un menu plein écran dans Elementor. Tout ce dont vous avez besoin est Elementor Pro.
La version pro d’Elementor est livrée avec un constructeur de popups qui vous permet de créer de magnifiques popups. Vous pouvez utiliser cette fonctionnalité pour créer un menu plein écran dans Elementor.
Si vous ne voyez pas ce dont nous souhaitons parler aujourd’hui, consultez cette vidéo.
Comment créer un menu plein écran dans Elementor ?
Avant de commencer, assurez-vous que vous avez mis à niveau votre Elementor vers la version pro. Une fois que vous êtes prêt, allez dans Modèles -> Popups. Créez un nouveau modèle de popup en cliquant sur le bouton Ajouter nouveau.
Donnez un nom à votre modèle de popup et cliquez sur le bouton CREER UNMODELE.
Elementor propose des dizaines de modèles de popup parmi lesquels vous pouvez choisir. Dans ce tutoriel, nous allons créer le modèle à partir de zéro. Il suffit donc de fermer la bibliothèque des modèles pour ouvrir l’éditeur d’Elementor.
Avant de commencer à créer le modèle de popup, définissez d’abord la mise en page. Pour ce faire, ouvrez les paramètres de la fenêtre popup en cliquant sur l’icône d’engrenage dans le coin inférieur gauche.
Dans le bloc Mise en page, sous l’onglet Paramètres, réglez la largeur sur 100 VW et la hauteur sur Adapter à l’écran. Vous pouvez également définir les effets d’animation d’entrée et de sortie.
Après avoir défini la mise en page, commencez à créer le modèle en ajoutant une nouvelle section. Vous pouvez ajouter tous les éléments que vous voulez au modèle. Pour ajouter les éléments de menu, vous pouvez utiliser le widget Nav Menu ou le widget Liste d’icône.
Découvrez aussi : Comment définir une position personnalisée pour le menu mobile dans Elementor
Dans ce guide, nous utiliserons le widget Liste d’icône.
Modifiez chaque élément de la liste. Vous pouvez ajouter l’étiquette de l’élément de menu dans le champ Texte et ajouter le lien dans le champ Lien.
Allez dans l’onglet Style pour donner du style aux listes. Vous pouvez définir l’espace entre les éléments de la liste et l’alignement dans le bloc Liste. Pour définir la taille et la couleur de l’icône (si vous utilisez des icônes), vous pouvez ouvrir le bloc Icône. Pour définir la typographie (taille de la police, famille de polices, style de police) et la couleur du texte des éléments de la liste, vous pouvez ouvrir le bloc Texte.
Si vous le souhaitez, vous pouvez modifier l’arrière-plan de la section. Pour personnaliser le bouton de fermeture du popup, ouvrez à nouveau les paramètres du popup et allez dans l’onglet Style. Ouvrez le bloc Bouton de fermeture et vous verrez quelques options pour personnaliser le bouton de fermeture comme la couleur d’arrière-plan, la taille et la position.
Une fois que vous avez terminé de créer le modèles du popup, cliquez sur l’icône de la flèche à côté du bouton PUBLIER et sélectionnez Conditions d’Affichage.
Définissez l’endroit où vous souhaitez que le popup apparaisse en cliquant sur le bouton AJOUTER UNE CONDITION et cliquez sur le bouton SUIVANT pour définir le déclencheur.
Activez l’option Au Clic et cliquez sur ENREGISTRER & FERMER.
Appel du modèle de popup
Une fois que le modèle de popup est prêt, vous pouvez l’appeler. Comme vous souhaitez créer un menu plein écran, vous pouvez créer un entête avec Elementor ou modifier un entête existant.
Lisez ce post pour en savoir plus sur la façon de créer un entête personnalisé avec Elementor.
Vous pouvez appeler le modèle de popup que vous venez de créer avec n’importe quel widget Elementor qui propose une option pour ajouter un lien, comme un bouton, une icône, une boîte d’icônes, un texte, une image, etc…
Dans ce tutoriel, nous utilisons le widget Boite d’icône. Sélectionnez le widget pour passer en mode d’édition. Sous l’onglet Contenu du panneau de gauche, recherchez le champ dans lequel ajouter le lien.
Définissez le lien comme dynamique et sélectionnez Popup.
Sélectionnez le modèle de popup que vous venez de créer en cliquant sur l’icône de la clé à molette.
Publiez/Mettre à jour votre modèle d’entête.
Obtenez Elementor Pro Maintenant !!!
Conclusion
Voila ! C’est tout pour cet article qui vous montre comment créer un menu plein écran dans Elementor. Si vous avez des soucis sur comment y arriver faites le nous savoir dans les commentaires.
Cependant, vous pourrez aussi consulter nos ressources, si vous avez besoin de plus d’éléments pour mener à bien vos projets de création de sites internet, en consultant notre guide sur la création de blog WordPress ou celui sur Divi : le meilleur thème WordPress de tous les temps.
Mais en attendant, partagez cet article sur vos différents réseaux sociaux.
…
