ELEMENTOR PRO : LE WIDGET OFF-CANVAS

Summary

Dans cette vidéo, Pierre Carbonel présente le widget Off-Canvas d'Elementor Pro, une fonctionnalité ajoutée dans la version 3.22 qui remplace les pop-ups traditionnels en offrant un panneau latéral coulissant pour afficher du contenu interactif sur une page. Il montre comment configurer ce widget pour afficher un formulaire de contact, personnaliser son apparence, ajuster sa position et ses animations, et l'utiliser avec un bouton pour une interaction fluide. Ce tutoriel s'adresse aux utilisateurs d'Elementor Pro désireux de simplifier la navigation et d'améliorer l'ergonomie de leurs sites.

Takeaways

• 😀 Le widget Off Canvas d'Elementor Pro a été ajouté dans la version 3.22 et permet de remplacer les pop-ups en offrant un contenu dans un panneau latéral coulissant.
• 😀 Ce widget est pratique pour afficher des contenus supplémentaires comme des formulaires de contact sans ajouter de nouvelles pages, simplifiant ainsi la gestion du site.
• 😀 L'utilisation de l'Off Canvas permet une meilleure interactivité et ergonomie, réduisant la complexité d'un site tout en améliorant l'expérience utilisateur.
• 😀 L'Off Canvas est intégré directement dans la page, ce qui simplifie son organisation par rapport aux pop-ups qui étaient stockées séparément.
• 😀 Pour configurer l'Off Canvas, on peut choisir sa position horizontale (gauche, centre, droite) et verticale (haut, milieu, bas), ainsi que sa largeur et hauteur en pourcentage ou en unités spécifiques comme VH.
• 😀 Il est possible de définir des animations d'entrée (par exemple, un glissement depuis la gauche) et de sortie (comme un retour à gauche), avec des durées ajustables.
• 😀 L'Off Canvas peut être configuré pour ne pas se fermer lorsqu'on clique sur l'overlay ou lorsque l'utilisateur appuie sur la touche Échappement, ce qui donne un contrôle total sur l'interaction.
• 😀 Le widget permet également de personnaliser l'overlay, en ajustant sa couleur, son opacité et même en ajoutant un dégradé ou une image de fond.
• 😀 Après avoir créé l'Off Canvas, il est possible de lier un bouton pour l'activer. Ce bouton peut être configuré avec une balise dynamique, sélectionnant l'Off Canvas comme action.
• 😀 Une fois configuré, l'Off Canvas s'affiche facilement à l'écran en cliquant sur le bouton, offrant ainsi une solution simple et rapide pour l'affichage de contenus supplémentaires comme des formulaires de contact.
• 😀 Le widget est hautement personnalisable et permet aux utilisateurs de définir leur propre design en utilisant les options de disposition, d'animation et de style proposées par Elementor Pro.

Q & A

Qu'est-ce que le widget 'Off Canvas' dans Elementor Pro ?

Le widget 'Off Canvas' permet de créer un panneau latéral coulissant qui s'affiche sur la page sans interrompre l'interaction de l'utilisateur avec le contenu principal. Il remplace les fenêtres pop-up traditionnelles et offre une meilleure ergonomie et interactivité.

Dans quelle version d'Elementor Pro le widget 'Off Canvas' a-t-il été introduit ?

Le widget 'Off Canvas' a été introduit dans la version 3.22 d'Elementor Pro.

Quels sont les principaux avantages de l'utilisation du widget 'Off Canvas' par rapport aux fenêtres pop-up classiques ?

L'un des principaux avantages est que le widget 'Off Canvas' est intégré directement à la structure de la page, ce qui simplifie son organisation et sa gestion. Il réduit la complexité du site, améliore l'interactivité et permet d'avoir des fenêtres jaillissantes plus fluides et moins intrusives.

Comment ajouter le widget 'Off Canvas' à une page dans Elementor ?

Dans Elementor, vous pouvez ajouter le widget 'Off Canvas' en recherchant 'Off Canvas' dans le panneau des widgets et en le faisant glisser dans la section de la page où vous souhaitez qu'il apparaisse.

Quels paramètres peuvent être ajustés pour personnaliser l'apparence du panneau 'Off Canvas' ?

Vous pouvez ajuster plusieurs paramètres, tels que la position horizontale (gauche, centre, droite), la position verticale (haut, milieu, bas), la hauteur (en VH pour utiliser 100% de la hauteur de la fenêtre), la largeur en pourcentage ou en unités personnalisées, ainsi que l'animation d'entrée et de sortie.

Comment définir l'animation d'entrée et de sortie pour le widget 'Off Canvas' ?

Dans les paramètres du widget, vous pouvez choisir l'animation d'entrée (par exemple, 'Slide In Left' pour faire glisser le panneau depuis la gauche) et l'animation de sortie (comme 'Slide Out Left'). Vous pouvez aussi ajuster la durée de l'animation pour qu'elle soit fluide mais rapide, comme 0,5 seconde.

Peut-on désactiver le fond d'écran (overlay) du widget 'Off Canvas' ?

Oui, vous pouvez désactiver l'overlay si vous ne souhaitez pas qu'il apparaisse derrière le panneau. Vous pouvez aussi personnaliser l'overlay en ajoutant une couleur, un dégradé, ou une image de fond, ainsi qu'en réglant son opacité.

Comment lier un bouton pour ouvrir le panneau 'Off Canvas' ?

Pour lier un bouton à l'activation du panneau 'Off Canvas', vous devez configurer le bouton en utilisant une balise dynamique et sélectionner l'action 'Off Canvas' dans les paramètres du bouton. Ensuite, choisissez le panneau 'Off Canvas' que vous avez créé pour qu'il s'affiche lorsque le bouton est cliqué.

Peut-on utiliser le widget 'Off Canvas' pour afficher différents types de contenu ?

Oui, le widget 'Off Canvas' peut être utilisé pour afficher différents types de contenu, comme des formulaires de contact, des menus, ou toute autre information que vous souhaitez présenter dans un panneau coulissant.

Quelles options de personnalisation existe-t-il pour l'intérieur du panneau 'Off Canvas' ?

À l'intérieur du panneau 'Off Canvas', vous pouvez ajouter divers éléments comme des titres, des images, des formulaires ou tout autre widget Elementor. Vous pouvez personnaliser la disposition et l'apparence de ces éléments, par exemple en modifiant leur position ou en ajoutant des bordures.