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.
Free Elementor n'a pas de widget hors-toile Elementor Pro en a ajouté un dans la version 3.22, et il a besoin des fonctionnalités Flexbox Containers et Elements imbriqués activées Ce widget est l'option Master Addons Pro : il ouvre n'importe quel modèle enregistré, de n'importe quel côté, derrière un bouton que vous stylisez une fois.
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 poste 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.
Contenu hors toile en un coup d'œil
| Réglage | Ce qu'il fait |
|---|---|
| Source du contenu | Un modèle Elementor enregistré : page, section ou conteneur (le dépôt répertorie tous les éléments de la bibliothèque à l'exception des kits) |
| Postes | Droite, Gauche, Haut, Bas, Milieu, Relatif (une liste déroulante sous le bouton) |
| Animation d'entrée | Fade, Slide ou Grow ; Supports relatifs Fade seulement |
| Type d'entrée | Couvrir glisse le panneau sur la page ; Poussez déplace la page à travers Poussez est offert pour Haut, Gauche et Droite |
| Taille | Largeur en px, % ou vw pour Gauche, Droite, Moyen et Relatif ; Hauteur en px, % ou vh pour Haut, Bas, Milieu et Relatif ; les deux par appareil |
| Se ferme avec | L'icône de fermeture, un clic sur la superposition ou la touche Échap ; Entrez ou L'espace sur l'icône de fermeture focalisée fonctionne également |
| figurants | Ouvert par défaut, Durée de l'animation en secondes, titre de l'en-tête avec en-tête inversé, verrouillage du défilement de la page lorsqu'il est ouvert, un bouton de déclenchement stylisable avec texte, icône ou les deux |
| Ouvre à partir de | Le bouton propre du widget uniquement (pas de sélecteur CSS ni de déclencheur externe) |
| Besoins | Elementor (gratuit ou Pro) plus Master Addons Pro |
Position, taille et animation du panneau
poste 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.
Couvrir et Pousser sont les deux Types d'Entrée Avec Couvrir le panneau glisse sur la page et la superposition atténue ce qu'il y a derrière elle Avec Pousser toute la page se déplace sur la largeur du panneau, de sorte que le contenu reste visible à côté du menu Pousser est disponible pour les panneaux Haut, Gauche et Droite ; Bas, Milieu et Relatif couvrent toujours.
- 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 |
| poste | 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.
Widgets associés : Menu Nav pour le menu à l'intérieur du panneau, le Méga Menu extension pour les menus à en-tête volumineux, Créateur Popup pour les couches temporisées ou à intention de sortie, Onglets pour la commutation de contenu en place, et Conditions d'affichage pour afficher le déclencheur sur les pages choisies uniquement.
Menu plein écran dans Elementor
Un menu plein écran est la position du milieu avec la largeur réglée sur 100 vw et la hauteur sur 100 vh. Mettez un modèle avec un grand menu vertical à l'intérieur, choisissez l'entrée Fade pour que le calque apparaisse en place et donnez au conteneur un fond solide pour que rien ne transparaisse. L'icône fermée se trouve dans l'en-tête du panneau et la touche Échap ferme également le calque.
Un détail de la feuille de style : les panneaux sont plafonnés à 90 % de la fenêtre, donc un panneau de 100 vw par 100 vh laisse une marge tout autour Ajouter cette règle dans le CSS personnalisé de la page pour supprimer le capuchon :
.jltma-offcanvas-wrap .jltma-offcanvas-content { max-width: 100% !important; max-height: 100% !important; }
Le pas à pas avec les captures d'écran est dans comment créer un menu plein écran dans Elementor.
Menu latéral coulissant (navigation dans la barre latérale)
Pour un menu latéral, définissez Position à gauche ou à droite et la largeur en px, environ 320 px pour un menu et 400 px pour un panneau avec les coordonnées Choisissez Pousser quand la page doit s'écarter et rester lisible, ou Couvrir quand le panneau doit s'asseoir dessus Le modèle peut contenir le Menu Nav widget dans sa disposition verticale, un logo, quelques lignes de contact et un bouton.
Une barre latérale qui reste visible tout le temps est un travail différent Construisez-le avec une disposition de conteneur à deux colonnes et conservez ce widget pour le panneau qui glisse sur demande Le Guide de menu côté élémentor couvre les deux.
Exemples de panneaux hors toile
Ouvrez chaque démo ci-dessous pour voir le panneau bouger : un panneau de contact à droite, un menu à gauche qui pousse la page vers le bas, un panneau déroulant qui utilise la position relative, une barre d'annonce depuis le bord supérieur, une feuille inférieure avec ouverture heures et un menu plein écran construit à partir de la position médiane.
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.
Dois-je utiliser un panneau hors toile ou une fenêtre contextuelle ?
Utilisez un panneau hors toile pour la navigation et pour le contenu demandé par un visiteur en cliquant, comme un menu, des filtres ou des coordonnées Utilisez une fenêtre contextuelle pour les messages chronométrés ou d'intention de sortie et pour les formulaires qui devraient interrompre Les deux pages de verrouillage défilent lorsqu'elles sont ouvertes.
Comment changer la vitesse d'animation ?
Définir la durée de l'animation dans l'onglet Contenu La valeur est en secondes, avec 0,6 comme valeur par défaut et une plage de 0 à 15. les valeurs inférieures ouvrent le panneau plus rapidement Le paramètre s'applique à chaque animation d'entrée et à la fois à la couverture et à la poussée.
Pourquoi mon panneau hors toile ne s'ouvre-t-il pas ?
Cochez trois choses Sélectionnez Modèle doit pointer vers un modèle publié, sinon le panneau imprime un avis au lieu du contenu Le déclencheur doit être le bouton propre du widget, car aucun autre élément ne peut l'ouvrir Et Ouvrir par défaut devrait être désactivé à moins que vous ne vouliez qu'il s'ouvre en charge.
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.
Puis-je ouvrir le panneau à partir de ma propre icône d'en-tête ?
Non. Le panneau s'ouvre uniquement à partir du bouton rendu par le widget, donc une icône ou un lien de menu existant ne peut pas le déclencher. Pour un menu d'en-tête qui s'ouvre à partir d'une icône de hamburger, utilisez plutôt la disposition Hamburger du widget Nav Menu avec le type Offcanvas.
Existe-t-il un widget gratuit hors toile pour Elementor ?
Le plugin gratuit d'Elementor n'en a pas Elementor Pro inclut un widget Off-Canvas de la version 3.22 lorsque Flexbox Containers et Nested Elements sont activés Le contenu Off-Canvas fait partie de Master Addons Pro et ouvre tout modèle enregistré, ce que le widget Pro ne fait pas.
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
