Comment créer un menu Elementor hors toile sans codage (4 étapes faciles)

Un menu hors toile embellira l’interface utilisateur de votre site Web. En outre, il est également capable de retenir vos visiteurs ou clients sur votre site. En dehors de cela, un menu hors toile Elementor ouvre également la porte à diverses opportunités commerciales.

Par conséquent, l’ajouter à votre site devient la plus grande nécessité si vous ne voulez pas compromettre l’UI et l’UX de votre site Web. Heureusement, il existe des options pour ajouter le menu hors toile Elementor dans WordPress, qui est entièrement gratuit.

Vous pouvez adopter n’importe lequel d’entre eux. Bien que l'utilisation d'ElementsKit soit l'option la plus appropriée et la plus simple car elle vous permet d'ajouter un menu hors canevas en quelques secondes.

Alors, explorons le processus le plus simple d'ajout d'un menu hors canevas à l'aide d'ElementsKit. Mais avant cela, faisons un bref résumé de ce menu hors toile et de son importance.

Qu'est-ce qu'un menu hors canevas dans Elementor ?

Un menu hors toile est un menu déroulant qui apparaît du côté de votre site Web en cliquant sur une icône, une image ou un texte. Il s'agit d'un menu modéré qui améliore l'expérience utilisateur d'un site Web sur des appareils mobiles ou des petits écrans, car vous pouvez simplifier la section d'en-tête en l'utilisant.

Pourquoi utiliser le menu hors toile d'Elementor ?

Le principal avantage de ce menu hors toile est qu'il peut économiser beaucoup d'espace sur votre site Web dont vous avez besoin pour afficher le menu d'en-tête. Par conséquent, dans le cas de l'affichage de sites Web avec meilleure interface utilisateur sur les petits écrans, vous devez exiger ce menu hors canevas.

Cependant, vous pouvez promouvoir des remises spéciales sur ce menu hors toile. De plus, la présentation de réductions sur le menu hors toile permettra d'attirer l'attention des visiteurs de votre site Web.

En dehors de cela, il convient également à l’affichage de certaines sections du menu hors toile. Par exemple, vous pouvez afficher certains produits à prix réduit et rendre votre promotion plus remarquable et plus convertie.

Depuis plus de la moitié des visiteurs du site utilisez un mobile pour visiter un site, vous devez utiliser ce menu hors toile sur votre site pour multipliez vos opportunités d'affaires. De plus, l’objectif du menu hors canevas sera rempli s’il est utilisé pour les utilisateurs mobiles.

Parallèlement à cela, un menu hors toile présente également d'autres avantages. Vous pouvez l'utiliser à diverses fins et donner orientation vers vos objectifs commerciaux en l'utilisant de manière appropriée.

Puisque vous connaissez toutes les opportunités du menu hors canevas, plongeons-nous dans le processus d'ajout de celui-ci à votre site en suivant la méthode la plus simple.

Étapes pour créer un menu hors toile Elementor

Malgré les nombreux avantages de l’utilisation du menu hors canevas d’Elementor, vous aurez besoin de quelques secondes pour l’ajouter à votre site WordPress. En plus de cela, c'est 100% gratuit pour ajouter le menu hors toile Elementor en utilisant ElementsKit. Parce que vous trouverez un widget gratuit dédié appelé « Header Offcanvas » dans ElementsKit.

L'ajout d'un menu hors canevas à l'aide de ce widget ne nécessitera aucun codage. De plus, vous pouvez personnaliser ce menu à votre guise sans aucune limitation. En outre, vous pouvez ajouter un menu hors canevas en suivant la méthode la plus simple qui comprend seulement 4 étapes. Parcourir le 4 étapes faciles et ajouter un menu hors toile sur votre site WordPress :

Étape 1 : Installez un plugin de menu hors canevas.

Pour bénéficier du widget de menu hors canevas d'ElementsKit, vous devez d'abord l'installer. Pour installer le plugin de menu hors canevas, cliquez sur Ajouter un nouveau option sous Plugins et rechercher ElementsKit dans le champ de recherche. Après avoir vu ElementsKit, appuyez sur Installer maintenant bouton et Activer plus tard.

Étape 2 : Activez le widget d'en-tête hors toile.

Dans la deuxième étape, vous devez visitez ElementsKit >> ElementsKit et cliquez sur les WIDGETS section.

Depuis la zone des widgets, activer le widget « Header Offcanvas » et appuyez sur ENREGISTRER LES CHANGEMENTS bouton.

Étape 3 : Ajoutez Elementor hors du menu Canvas.

Il est maintenant temps d'ajouter un menu hors canevas à votre site Web Elementor. Pour faire ça, cliquez sur Ajouter un nouveau option sous Posts et donner un titre au poste. Après cela, cliquez sur Modifier avec Elementor bouton pour ajouter le menu hors canevas dans WordPress.

Cela vous redirigera vers le tableau de bord Elementor, où vous devrez recherchez le widget Header Offcanvas et après l'avoir trouvé, faites-le glisser et déposez-le sur le plus icône.

Maintenant, cliquez sur l'icône du hamburger pour ajouter des menus ou des éléments à votre menu hors toile.

Alors cliquez sur Modifier le contenu option et ajoutez les éléments que vous désirez à votre menu. Cela vous mènera au zone de widgets à partir d'où vous pouvez ajouter différents éléments à votre menu hors toile pour ajouter des variations.

Par exemple, rechercher le menu vertical et faites-le glisser et déposez-le sur l'icône plus, tout comme le widget d'en-tête hors toile. Après cela, suivez le même processus pour ajouter des éléments à votre menu hors toile.

Après avoir ajouté un widget de menu vertical, sélectionner le menu vous souhaitez afficher sur votre menu hors toile Elementor et le personnaliser en conséquence. Lorsque toutes vos personnalisations sont terminées, cliquez sur la mise à jour bouton.

Après avoir ajouté des éléments à votre menu d'en-tête hors canevas, vous pouvez personnaliser et mettre à jour les domaines suivants :

• Couleur de superposition : À partir de là, choisissez la couleur de votre menu hors toile.
• Type de menu : Vous trouverez des icônes, du texte et des icônes avec des options de texte. Sélectionnez ce que vous souhaitez afficher à la place du menu d’en-tête hors toile.
• Icône: Si vous choisissez l'icône dans le type de menu, cette section sera visible à partir de laquelle vous devrez sélectionner une icône.

Juste à côté de l’onglet Contenu, vous trouverez un onglet style. Cliquez sur l'onglet Style et personnalisez les éléments ci-dessous pour votre menu hors toile :

• Couleur.
• Couleur de l'arrière plan.
• Survolez la couleur.
• Couleur d’arrière-plan au survol.
• Couleur de bordure pour le survol.
• Taille de l'icône.
• Type de bordure.
• Alignement.
• Boîte ombre.
• Rayon de la frontière.
• Rembourrage.
• Marge.

Après édition hors toile ; vous devez modifier la largeur, le type d'arrière-plan, la position et le remplissage du panneau hors toile. Enfin, appuyez sur Publier lorsque vous avez terminé la personnalisation.

Étape 4 : Dernier aperçu de l'en-tête du menu du canevas.

Voici l'aperçu ou l'exemple de votre menu hors toile préparé avec ElementsKit. Cependant, vous pouvez y ajouter d'autres variantes en personnalisant votre menu hors canevas à partir de la zone des widgets.

Commencez avec le menu d'en-tête hors canevas

L'utilisation d'un menu hors toile rendra votre site plus interactif et engageant car cela peut économiser beaucoup d'espace sur votre site WordPress. En plus, c'est parfait pour avoir une meilleure UI et UX sur les petits écrans. Néanmoins, l’ajout d’un menu hors canevas est super simple et rapide.

Tout ce dont vous avez besoin est d'adopter les quatre étapes ci-dessus et vous êtes prêt à profiter des excellents avantages et opportunités du menu d'en-tête hors toile. Ci-dessus, nous avons utilisé ElementsKit car il offre l'option la plus simple pour ajouter ce menu.

Parallèlement, vous trouverez de nombreuses fonctionnalités si vous utilisez ElementsKit. Comme c'est un module complémentaire tout-en-un pour Elementor qui offre toutes les options pour rendre votre site Web transparent et compétitif. Alors, utilisez le meilleur plugin pour ajouter un menu hors canevas sur votre site Web Elementor.