Certains contenus gagnent une place sur la page Le reste, un menu, une liste FAQ, un formulaire de contact, fonctionne mieux rangé jusqu'à ce que quelqu'un le demande Le Widget de contenu hors toile dans Maître Addons Pro masque n'importe quel modèle d'élément derrière un bouton et le glisse depuis le côté, le haut ou le bas de l'écran lorsque les visiteurs cliquent.
Vous choisissez un modèle enregistré, placez le bouton de déclenchement et choisissez la manière dont le panneau entre. Ce guide suit le widget du panneau Éléments jusqu'à un panneau FAQ coulissant fonctionnel sur la page en direct.
Ce que fait le widget Contenu hors toile #
Le widget place un bouton de déclenchement sur votre page et le relie à un panneau caché Le contenu du panneau est n'importe quel modèle de votre bibliothèque Elementor, donc un menu mobile, une méga FAQ, un résumé de panier ou un formulaire d'inscription fonctionnent tous de la même manière Lorsqu'un visiteur clique sur le bouton, le panneau glisse ou s'efface sur la page avec une superposition atténuée derrière lui et une icône fermée dans son en-tête.
Tout se passe dans un widget : le déclencheur, le panneau, l'animation et le style. Pas de plugin contextuel séparé, pas de codes courts de modèle.
Avant de commencer #
- wordpress avec Élémenteur installé et actif.
- Maître Addons Pro installé avec une licence active, puisque Off-Canvas Content est un widget Pro. Nouveau dans le plugin ? voir le guide d'installation.
- Un modèle Elementor enregistré à afficher à l'intérieur du panneau Construisez-en un sous Modèles dans votre tableau de bord d'abord ; la démo ici utilise une section FAQ toute faite.
Comment ajouter le widget Contenu hors toile #
Dans l'éditeur Elementor, recherchez le Éléments panneau pour Contenu hors toile(ou faites défiler vers la section Addons principaux, et faites-la glisser sur la page Un bouton de déclenchement bleu intitulé Click Here apparaît sur le canevas Le panneau lui-même reste caché jusqu'à ce que vous choisissiez un modèle et l'ouvriez.
Choisissez le modèle et configurez le panneau #
Le Contenu la section contient les paramètres de base du panneau.
- Sélectionnez Modèle : le modèle Elementor que le panneau affiche Toute section ou modèle de page enregistré apparaît dans cette liste déroulante.
- Titre et titre de l'en-tête : activez l'en-tête du panneau et tapez son étiquette, telle que “Explore FAQ” L'icône de fermeture vit dans le même en-tête.
- Poste : de quel bord provient le panneau Plus là-dessous.
- Largeur: quelle est la largeur du panneau en px, % ou vw, 300 px par défaut Les panneaux du haut ou du bas utilisent un Hauteur contrôlez en px, % ou vh à la place.
- Animation d'entrée et type d'entrée : comment arrive le panneau Fade, Slide ou Grow pour l'animation, Cover ou Push pour le type La couverture pose le panneau sur la page ; Push écarte la page pour faire de la place.
- Durée de l'animation : la vitesse d'entrée en secondes, 0,6 par défaut.
- Ouvert par défaut : démarrez la page avec le panneau déjà ouvert. Pratique lors de la conception, car vous pouvez styliser le panneau sans cliquer sur le déclencheur après chaque modification.
Configurer le bouton de déclenchement #
Le Bouton le groupe dans le même onglet contrôle le déclencheur. Afficher le titre et Titre définissez l'étiquette ; la démo la renomme de Cliquez ici à la question fréquemment posée. Aligner place le bouton à gauche, au centre ou à droite dans sa colonne.
Afficher l'icône ajoute une icône à côté de l'étiquette, et Sélectionnez Icône ouvre la bibliothèque d'icônes Elementor afin que vous puissiez choisir parmi Font Awesome ou n'importe quel jeu d'icônes que vous avez installé. Distance des icônes définit l'écart entre l'icône et le texte.
Choisissez d'où le panneau glisse #
Le poste dropdown propose six options : Droite, Gauche, Haut, Bas, Milieu et Relatif.
Droite et Gauche sont les panneaux de tiroir classiques Choisissez-en un et l'éditeur le prévisualise immédiatement : le panneau glisse avec votre modèle à l'intérieur, en-tête en haut, icône fermée prête.
Le haut et le bas échangent le contrôle de largeur contre un Hauteur curseur mesuré en hauteur de la fenêtre Une barre supérieure à 30 vh fonctionne comme un tiroir d'annonce mince.
Milieu centre le panneau comme un modal Relatif ancre le panneau au bouton de déclenchement lui-même, avec un Distance contrôle de l'écart, qui transforme le widget en une révélation de style déroulant Une note du panneau lui-même : seule l'animation Fade fonctionne avec la position Relative.
Définissez la largeur et l'animation d'entrée #
De retour sur une position latérale, la démo élargit le panneau à 500 pixels et commute le Animation d'entrée glisser avec le Type d'entrée sur Push. Avec Push, le contenu de la page se déplace au fur et à mesure que le panneau entre au lieu d'être couvert Gardez la durée environ une demi-seconde ; plus lent commence à avoir envie d'attendre.
Style le panneau #
Le modeler tab comporte trois sections : Bouton, En-tête, et Conteneur.
Bouton #
Style le déclencheur : arrière-plan, couleur du texte, typographie, bordure et remplissage, avec les états Normal et Hover La démo transforme le bleu par défaut en une marine sombre qui correspond à la page.
En-tête #
Style la bande en haut du panneau ouvert.
- En-tête inversé : échange le titre et ferme les côtés de l'icône, de sorte que le X se déplace de droite à gauche.
- Rembourrage: espace autour du contenu de l'en-tête.
- Fermer l'icône : couleur, arrière-plan, couleur de bordure, taille de police, taille de boîte et bordure pour le bouton X. Gardez la taille de la boîte à 24 ou plus si votre public est principalement sur les téléphones ; une cible de pression de 12 pixels est facile à manquer.
Conteneur #
Style le corps du panneau et ce qui l'entoure.
- Couleur de fond, couleur de bordure, ombre de boîte, type de bordure, rayon de bordure, rembourrage : la surface du panneau elle-même.
- Couleur de fond de superposition : la teinte sur le reste de la page pendant que le panneau est ouvert Une superposition sombre attire le focus sur le panneau.
- Barre de défilement : couleur et largeur de la barre de défilement pour les panneaux plus hauts que l'écran.
Le résultat sur la page #
Sur la page en direct, le bouton se trouve à l'endroit où vous l'avez placé Un clic fait glisser le panneau depuis le bord choisi, atténue la page derrière et montre votre modèle avec l'en-tête et l'icône de fermeture sur les visiteurs le ferment avec le X, en cliquant sur la superposition ou en appuyant sur Esc.
Cas d'utilisation courants #
- Menus mobiles et secondaires cela glisse par le côté sans encombrer la tête.
- FAQ et panneaux d'aide comme la démo, garder les réponses à un clic sur les pages de destination.
- Formulaires de contact ou de devis cela s'ouvre sur la page au lieu de vivre sur une page séparée.
- Tiroirs de chariot et de compte sur les pages de boutique, en utilisant un widget de panier ou de compte de WooCommerce ou un autre plugin.
- Barres d'annonce depuis le bord supérieur en utilisant la position supérieure avec une petite hauteur.
Conseils pour un meilleur panneau hors toile #
- Construisez le modèle en premier. Le widget répertorie uniquement les modèles enregistrés, alors concevez le contenu du panneau sous Modèles avant de faire glisser le widget.
- Faites correspondre la largeur au contenu. 300 pixels conviennent à un menu ; les formulaires et les listes FAQ respirent mieux autour de 450 à 500.
- Utilisez Push avec parcimonie. Cela semble frappant, mais déplacer toute la page peut sembler nerveux sur le contenu long. La couverture avec une superposition sombre est la valeur par défaut la plus calme.
- Rappelez-vous la règle Relative. Seule l'animation Fade fonctionne lorsque la position est définie sur Relatif.
- Vérifiez le panneau sur mobile. Un panneau de 500 pixels est plus large que de nombreux téléphones ; définissez une largeur plus petite pour le point d'arrêt mobile avec le contrôle réactif.
Foire aux questions #
Qu'est-ce que le widget Contenu hors toile dans Master Addons ?
Il s'agit d'un widget Elementor qui cache un modèle enregistré derrière un bouton de déclenchement et le glisse sous forme de panneau lorsqu'on clique dessus. Il gère le bouton, la position du panneau, l'animation d'entrée, la superposition et l'icône de fermeture dans un widget.
Puis-je afficher n'importe quel modèle Elementor dans le panneau ?
Oui. La liste déroulante Sélectionner un modèle répertorie tous les modèles enregistrés dans votre bibliothèque Elementor. Les menus, les sections FAQ, les formulaires et les mises en page personnalisées complètes se chargent tous à l'intérieur du panneau exactement comme prévu.
De quelles directions le panneau peut-il s'ouvrir ?
Six positions sont disponibles : droite, gauche, supérieure, inférieure, moyenne et relative. Les panneaux latéraux utilisent une largeur, les panneaux supérieur et inférieur utilisent une hauteur de fenêtre et Relative ancre le panneau au bouton de déclenchement avec un contrôle de distance.
Quelle est la différence entre Cover et Push ?
Couvrir fait glisser le panneau sur la page tandis qu'une superposition atténue l'arrière-plan Pousser déplace le contenu de la page de côté pour faire de la place au panneau La couverture est la valeur par défaut la plus sûre ; Pousser est plus dramatique mais change toute la mise en page.
Le panneau hors toile peut-il s'ouvrir automatiquement ?
Oui. Activer Ouvrir par défaut dans les paramètres Contenu et le panneau commence à s'ouvrir lorsque la page se charge Les visiteurs peuvent la fermer avec l'icône de fermeture en cliquant sur la superposition ou avec la touche Échap, et la rouvrir avec le bouton déclencheur.
Envelopper #
Le widget Contenu hors toile transforme n'importe quel modèle enregistré en un panneau coulissant : choisissez le modèle, placez le bouton de déclenchement, choisissez le bord et l'animation, et stylisez tout, du bouton à la barre de défilement, Il s'associe naturellement au Menu Nav widget pour la navigation mobile et avec widgets de formulaire pour les panneaux de clic pour contacter Parcourir l'ensemble complet de Widgets et extensions Master Addons pour voir ce qui est expédié d'autre dans la boîte, voir le Page du widget Contenu hors toile pour les démos et une comparaison avec le widget Elementor Pro Off-Canvas, et vérifiez le page de tarification pour les plans Pro.
