Widget Elementor Off-Canvas pour Panneaux et Menus Slide-Out (Pro)
Le contenu hors toile est un widget Master Addons Pro qui place un bouton sur la page et ouvre un panneau lorsqu'un visiteur clique dessus Le panneau affiche un modèle Elementor enregistré, afin que vous puissiez y mettre un menu, un formulaire de contact, des filtres ou une promo et réutiliser le même modèle sur d'autres pages Choisissez où le panneau apparaît, comment il s'anime et comment le bouton se rapproche Les visiteurs le ferment avec l'icône de fermeture, en cliquant sur la superposition ou en appuyant sur Échap.
Comment ajouter un panneau hors toile dans Elementor
Vous avez besoin d'Elementor et d'un actif Maître Addons Pro licence.
- Aller à Modèles, modèles enregistrés: créez un modèle, créez le contenu du panneau et publiez-le.
- Modifier la page, rechercher Contenu hors toile et faites-le glisser là où le bouton doit apparaître.
- Dans Sélectionnez Modèle: choisissez le modèle que vous avez enregistré.
- Choisissez un Position et définissez la largeur ou la hauteur.
- Choisissez une animation d'entrée et une durée.
- Définissez le bouton Titre ou icône, puis stylisez le bouton, l'en-tête et le conteneur dans l'onglet Style.
Voir le Paramètres de contenu hors toile guide pour chaque option.
Position, taille et animation du panneau
Position offre les panneaux Droit, Gauche, Haut, Bas, Milieu et Relatif Les panneaux Gauche, Droite et Milieu obtiennent une Largeur en px, % ou vw, et les panneaux Haut, Bas et Milieu obtiennent une Hauteur en px, % ou vh, chacun réglable par appareil. Animation d'entrée est Fade, Slide ou Grow, et seul Fade fonctionne avec Relative Les panneaux gauche, droit et supérieur ont également un Type d'entrée de couverture ou de poussée. Définissez le Durée d'animation en quelques secondes, et allumez Ouvert par Défaut si le panneau doit commencer ouvert.
- Un panneau gauche ou droit avec le menu de votre site pour les écrans plus petits.
- Un panneau supérieur pour une courte annonce ou un formulaire de recherche.
- Un panneau central comme modal simple pour un formulaire d'inscription.
Déclencheur, En-tête et Styling de conteneur
Le bouton de déclenchement peut afficher un titre, une icône ou les deux, avec les paramètres de distance d'icône et d'alignement Style sa couleur, couleur d'arrière-plan et couleur de bordure pour Normal et Hover, plus Box Shadow, Typography, SVG Size, Padding, Border Type et Border Radius À l'intérieur du panneau, le En-tête la section style l'icône de fermeture et le titre d'en-tête facultatif, et Reverse Header échange ses places Le Conteneur la section définit l'arrière-plan du panneau, la bordure, le rembourrage, la couleur de superposition ainsi que la couleur et la largeur de la barre de défilement.
- Un bouton hamburger uniquement icône dans un en-tête.
- Un bouton texte “Contactez-nous” qui ouvre un formulaire.
- Une couleur de superposition de marque qui atténue la page derrière le panneau.
Contenu hors toile Elementor Pro vs addons Master hors toile
Un menu hors-toile est l'utilisation la plus courante Ce widget ne construit pas le menu lui-même, donc vous placez d'abord un widget de menu dans un modèle Si vous avez seulement besoin du menu, les modules complémentaires principaux Menu Nav widget a également une disposition Hamburger avec un type hors toile dans Pro, qui saute l'étape de modèle Utiliser le contenu hors toile lorsque le panneau doit contenir plus qu'un menu, tel qu'un logo, des coordonnées et des liens sociaux.
| Caractéristique | Elementor Pro hors toile | Contenu hors toile des modules complémentaires principaux |
|---|---|---|
| Prix | Besoins d'Elementor Pro | Besoins de Master Addons Pro |
| Contenu du panneau | Construit à l'intérieur du widget en mode édition | Un modèle Elementor enregistré que vous pouvez réutiliser |
| Comment ça s'ouvre | Tout bouton ou lien utilisant l'action Off-Canvas | Le propre bouton de déclenchement du widget |
| Position | Horizontal et vertical Début, Centre ou Fin | Droite, Gauche, Haut, Bas, Moyen ou Relatif |
| Animation | Animations d'entrée et de sortie | Fade, Slide ou Grow, avec Couverture ou Push |
| Fermeture | Overlay et Esc, chacun peut être désactivé ; peut verrouiller le défilement de la page | Fermez l'icône, cliquez sur la superposition ou évitez |
| En-tête intégré | Non | Titre de l'en-tête et icône de fermeture |
| Ouvrir par défaut | Pas un paramètre de widget | Oui |
Elementor Pro gagne quand n'importe quel lien sur la page devrait ouvrir le panneau ou quand vous voulez quitter les animations Master Addons convient quand un modèle devrait apparaître derrière un bouton prêt à l'emploi sur plusieurs pages Pour un panneau de recherche, voir aussi le Recherche widget.
Comment créer un menu hors toile dans Elementor
Un menu hors-toile est l'utilisation la plus courante Le widget ne construit pas le menu lui-même, vous placez donc d'abord un widget de menu dans un modèle.
- Créez un modèle enregistré et ajoutez un widget de menu, tel que les modules complémentaires Master gratuits Menu Nav définir sur une disposition verticale.
- Publier le modèle.
- Dans votre en-tête, ajoutez du contenu hors toile et sélectionnez ce modèle.
- Définissez la position sur gauche ou droite, la largeur sur environ 320 px et l'animation d'entrée sur Glisser.
- Désactivez Afficher le titre, activez Afficher l'icône et choisissez une icône de barres pour que le bouton ressemble à un hamburger.
- Utilisez la visibilité réactive d'Elementor pour afficher ce bouton uniquement sur tablette et mobile si l'en-tête du bureau conserve son menu normal.
Questions fréquemment posées pour le contenu hors toile
Le widget Contenu hors toile est-il gratuit ?
Le contenu n° hors toile fait partie de Maître Addons Pro. Le plugin gratuit ne l'inclut pas.
Comment ajouter du contenu au panneau hors toile ?
Construisez d'abord le contenu en tant que modèle Elementor enregistré, tel qu'un menu, un formulaire ou une promo, puis choisissez ce modèle dans la liste déroulante Sélectionner un modèle du widget Vous pouvez réutiliser un modèle dans plusieurs panneaux.
Puis-je construire un menu hors toile avec ?
Oui. Mettez un widget de menu tel que les modules complémentaires principaux Menu Nav dans un modèle enregistré, sélectionnez-le dans Contenu hors toile, définissez Position sur Gauche ou Droite et utilisez une icône de barres pour le bouton Pour un menu seul, la disposition Nav Menu Hamburger dans Pro a son propre type hors toile.
Le contenu du panneau ralentit-il ma page ?
Le modèle est rendu dans la page lorsqu'il se charge, puis caché jusqu'à ce que le bouton soit cliqué Un panneau avec quelques widgets ajoute peu de poids, mais les curseurs lourds ou les vidéos à l'intérieur se chargent avec la page, alors gardez les modèles de panneau légers.
Widgets et extensions d'éléments tendance
Construisez des sites Web sophistiqués en moins de temps.
Glassmorphisme
Extras de conteneurs
Modèles
![Modules principaux Extension de duplicateur de messages/pages pour le lien de ligne Elementor : MA Duplicator dans la liste des pages WordPress créant une ébauche de page de destination - [Dupliqué n° 128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicateur de messages/pages
