widget sont les éléments clés d'un site, qui vous permettent d'ajouter et de gérer du contenu de manière efficace. Ils constituent des éléments essentiels qui améliorent à la fois la fonctionnalité et la conception de votre site web. En incorporant différents types de widget, vous pouvez créer une expérience dynamique et attrayante pour l'utilisateur.
Il existe plusieurs méthodes pour ajouter widget. Il varie également selon que vous utilisez l'Éditeur classique, le mode flex ou l'Éditeur 2.0. Voici comment vous pouvez ajouter widget:
Pour ajouter widget à partir de la bibliothèque widget:
-
Dans le panneau latéral, cliquez sur widget pour ouvrir la bibliothèque widget.
-
widget peuvent être recherchées à l'aide de la barre de recherche située en haut de la page ou en parcourant les différentes sections de la bibliothèque.
-
-
Cliquez sur le site widget et faites-le glisser jusqu'à l'endroit de votre choix dans le site. Un indicateur de placement bleu apparaît.
-
Le widget apparaît à l'emplacement indiqué par l'indicateur de placement bleu.
Lorsque vous glissez-déposez une page widget sur votre site, notez le texte dans l'indicateur d'emplacement bleu (éditeur classique uniquement) :
-
Insérer ici. Le widget sera ajouté à une ligne ou une colonne existante.
-
Insérer dans une nouvelle ligne. Une nouvelle ligne sera ajoutée et le widget sera placé à l'intérieur.
-
Insérer dans une nouvelle colonne. Une nouvelle colonne sera ajoutée et le widget sera placé à l'intérieur de celle-ci.
Remarque
Avec l'éditeur 2.0, widget ne peut être ajouté qu'à des colonnes existantes, il n'est pas possible d'en créer de nouvelles en plaçant une widget.
Pour ajouter widget à partir du canevas :
-
Cliquez avec le bouton droit de la souris sur n'importe quel site widget et sélectionnez Add widget below dans le menu contextuel pour ajouter widget immédiatement sous le site widget (éditeur classique uniquement).
-
En mode Flex ou dans l'Éditeur 2.0, cliquez sur l'icône plus(+) du menu flottant.
-
Si vous faites un clic droit sur une colonne, cliquez sur Ajouter, puis sélectionnez Ajouter widget ci-dessous.
(ConcerneClassic, Flex mode, et Editor 2.0)
-
-
Choisissez parmi les quatre sites les plus populaires widget ou cliquez sur More widget pour ouvrir le menu complet. Après avoir ajouté le site widget, vous pouvez le modifier comme d'habitude.
Vous pouvez personnaliser widget pour ajuster le contenu, l'apparence et la mise en page de votre site. L'édition de widget vous permet de mieux contrôler les fonctionnalités de votre site et leur comportement.
La plupart des sites widget disposent d'une zone pour le contenu et pour la conception.
La plupart des sites widget de l'éditeur disposent d'options de conception qui vous permettent de personnaliser l'apparence du site widget. Tous les sites widget n'ont pas les mêmes options. Par exemple, certains sites widget ne vous permettent pas de modifier l'espacement intérieur, d'autres ne vous permettent pas de modifier l'espacement extérieur.
Vous trouverez ci-dessous les paramètres de conception les plus courants.
Pour widget avec du texte, vous pouvez modifier les styles de texte. Toutes les modifications que vous apportez à un site widget spécifique remplaceront le style de texte du thème.
Dans l'Éditeur 2.0, la taille du texte définie dans certains sites widget (Éditeur de texte, Formulaire de contact, Navigation, Business, Click to Email, Click to Call, et Bouton widget) s'ajustera automatiquement en fonction de la taille de l'écran. Sur desktop, la taille du texte est de 100 %, sur tablette la taille du texte est réduite à 85 %, et sur mobile la taille du texte est réduite à 80 %. Cependant, par défaut, l'éditeur n'ajustera pas le texte pour qu'il soit plus petit que 16 px sur un mobile ou une tablette. Et il ne s'ajustera pas à une taille supérieure à 60 px sur tablette ou 40 px sur mobile. Cela permet de s'assurer que le texte reste lisible et proportionné à chaque taille d'écran.
Si vous souhaitez modifier la taille du texte en fonction de l'appareil, vous pouvez ajuster la taille du texte dans le texte du thème et le texte ne sera pas réduit en fonction de la taille de l'écran.
Vous trouverez ci-dessous des exemples d'ajustement de la taille du texte dans différents scénarios :
-
Si vous fixez la taille du texte à 40 px sur desktop, le texte sera automatiquement réduit à 34 px sur tablette et à 32 px sur mobile.
-
Si vous fixez la taille du texte à 16 px sur desktop, elle ne sera pas réduite de 85 % à 13 px sur tablette, ou de 80 % à 12 px sur mobile, car elle est trop petite pour être lue et inférieure au minimum de 16 px. Au lieu de cela, la taille du texte restera inchangée à 16 px sur toutes les tailles d'écran.
-
Si vous fixez la taille du texte à 100 px sur desktop, il sera ajusté à 60 px sur tablette puisque c'est le maximum, au lieu de 85 px, ce qui correspondrait à 85 % de la taille du texte sur desktop. La taille du texte mobile sera également ajustée à 40 px, puisque c'est le maximum, au lieu de 80px, ce qui correspondrait à 80 % de la taille du texte sur le site desktop.
Les options de mise en page sont généralement spécifiques à certains sites widget. Pour choisir parmi l'ensemble des options de mise en page disponibles pour ce widget, cliquez sur la mise en page qui apparaît dans l'éditeur de conception (ou cliquez sur la petite flèche à côté) pour ouvrir le menu Sélectionner une mise en page. Pour modifier la mise en page sélectionnée, cliquez sur la mise en page que vous souhaitez utiliser à la place et elle sera mise à jour dans le site widget.
Exemple de section de mise en page dans l'onglet Conception (éditeur classique) :
Exemple de section de mise en page dans le panneau de conception (Editor 2.0/Flex) :
-
Couleur. Cliquez sur l'icône de couleur ronde à droite du nom du paramètre pour ouvrir le sélecteur de couleurs et modifier la couleur.
-
Frontière. Modifiez la largeur de la bordure à l'aide du curseur ou de la zone de texte. Cliquez sur l'icône en forme de roue dentée (
) pour plus d'options.
-
Contexte. Utilisez une image ou une couleur d'arrière-plan pour ce widget à l'aide de la boîte de dialogue Choisir et placer des images ou d'une URL de vidéo.
-
Largeur et hauteur. Utilisez le curseur ou la zone de texte pour modifier le nombre de pixels.
-
Coins arrondis. Augmentez ou diminuez l'arrondi des coins d'un widget. Cliquez sur l'icône en forme de roue dentée (
-
Ombres. Permet d'activer ou de désactiver une ombre pour ce widget.
-
Texte. Définissez divers aspects du texte, tels que la famille de polices, le poids des polices, etc.
widget qui intègrent un bouton offrent la possibilité de choisir si le bouton hérite du style de bouton principal ou secondaire défini dans le panneau de thème. De plus, tu peux choisir entre les différentes dispositions de boutons, apporter des modifications au style du bouton (largeur, hauteur) et au texte du bouton (police, taille du texte), et ajuster l’espacement intérieur et extérieur.
Toutes les modifications que vous apportez dans l'éditeur de design remplaceront les styles définis au niveau des boutons du thème. Si vous souhaitez revenir au style de bouton du thème, cliquez sur Rétablir le style du thème.
-
Si des modifications sont apportées au bouton (ce qui remplacera les styles définis au niveau du bouton thématique), une zone d'indicateurs sera toujours présente sur le style du bouton principal ou secondaire.
-
Si vous cliquez sur le style de bouton qui ne contient pas la zone d'indicateurs, le style défini au niveau du bouton thématique est rétabli.
Modifiez l'espacement intérieur (espacement à l'intérieur des bords du widget) et l'espacement extérieur (espacement à l'extérieur des bords du widget). Chaque chiffre de la case extérieure définit l'espacement extérieur pour son propre côté (haut, bas, gauche ou droite), et chaque chiffre de la case intérieure définit l'espacement intérieur pour son propre côté (haut, bas, gauche ou droite).
Pour plus d'informations, reportez-vous à la section Espacement extérieur et intérieur.
Les animations d'entrée vous permettent d'animer widget et la page widget lorsqu'elles sont chargées pour la première fois sur votre site. Le mouvement et l'interactivité rendent votre site plus mémorable et peuvent mettre en valeur les sections sur lesquelles vous voulez que les visiteurs se concentrent, comme un numéro de téléphone ou un bouton de contact.
En outre, vous pouvez contrôler où l'animation commence et se termine sur l'écran en utilisant les paramètres de défilement.
Pour ajouter une animation :
-
Naviguez jusqu'à la section Animation.
-
Sélectionnez un déclencheur ( entrée ou défilement) et une animation.
-
(Facultatif) Personnalisez l'animation (par exemple, la direction de l'entrée).
Exemple de configuration d'animation :
Pour réinitialiser l'animation, cliquez sur Rétablir la valeur par défaut.
Si vous utilisez une animation de défilement, vous pouvez cliquer sur Pause Animation () dans le panneau latéral pour mettre en pause toutes les animations pendant que vous êtes en mode édition. Les animations seront toujours actives en mode prévisualisation et sur le site réel.
Remarque
Les animations définies pour desktop et Tablet sont liées et seront identiques. Cependant, Mobile est séparé et les animations configurées pour desktop/Tablet ne s’appliqueront pas à eux.
Lorsque vous ajoutez des animations, gardez les éléments suivants à l'esprit :
-
Un trop grand nombre d'animations peut perturber ou distraire les utilisateurs, utilisez-les donc avec parcimonie.
-
Lorsque vous supprimez une animation, n'oubliez pas que les animations peuvent être appliquées aux lignes ainsi qu'à widget, de sorte que l'animation que vous voyez peut avoir été ajoutée à un endroit inattendu.
Pour supprimer les animations :
-
Naviguez jusqu'à la section Animation.
-
Cliquez sur le menu déroulant Animation et sélectionnez Aucune.
Remarque
Si un élément n'a pas d'animation, celle-ci peut être appliquée à l'un des conteneurs dans lesquels l'élément se trouve. Il est recommandé de vérifier que tous les conteneurs ne sont pas animés.
Note
Ces informations sont spécifiques à l'éditeur 2.0, anciennement connu sous le nom d'éditeur All-Flex. Pour identifier la version actuelle de l'éditeur, voir Comment identifier la version de l'éditeur utilisée par votre site.
Le site widget fixe vous permet de garder le site widget visible en permanence, même lorsque le visiteur fait défiler la page vers le bas, tandis que le site widget épinglé reste attaché à l'élément parent (colonne ou colonne intérieure) aussi longtemps que l'élément parent se trouve dans la fenêtre de visualisation.
widget peut être définie comme fixe ou épinglée dans la section Position du panneau de conception. Pour plus d'informations sur les sections du panneau de conception, reportez-vous à la section Conception avec Flex.
Le site widget fixe vous permet de garder le site widget visible en permanence, même lorsque le visiteur fait défiler la page vers le bas. Utilisez le site widget pour que les appels à l'action importants soient fixes, visibles et cliquables sur toutes les pages du site.
Faire fixer un widget:
-
Dans le panneau latéral, cliquez sur widget. Recherchez le widget souhaité, puis cliquez et faites-le glisser sur le canevas.
-
Cliquez sur le widget pour ouvrir le menu flottant et sélectionnez Modifier la conception. Cela ouvre le panneau de conception sur le côté droit de l'écran. Faites défiler vers le bas jusqu'à la section Position du panneau de conception.
-
Cliquez sur pour développer le menu Type de position et sélectionnez Fixe. Cette modification s'applique à toutes les tailles d'écran, mais vous pouvez l'ignorer si nécessaire. Une fois que vous avez sélectionné la position, vous ne pouvez plus passer de la position fixe à la position épinglée. En effet, lorsque vous sélectionnez Fixe, le site widget est retiré de son conteneur d'origine afin qu'il reste visible à l'écran lorsque l'utilisateur fait défiler la page. Si tu passais de Fixe à Épinglé, l'éditeur ne saurait pas dans quel conteneur placer le site widget. Si vous devez changer, vous devez d'abord revenir à la valeur par défaut. Le widget sera déplacé vers la première section de la fenêtre.
-
Dans le menu Espacement, utilisez les paramètres de marge pour définir l'emplacement du widget dans la fenêtre. Il est particulièrement important de configurer cette fonction si vous avez deux sites fixes widget dans la même position de visualisation.
-
Pour afficher le widget sur la page actuelle uniquement, activez la case à cocher Afficher sur cette page uniquement.
Le site widget est rattaché à l'élément parent (colonne ou colonne intérieure) tant que l'élément parent se trouve dans la fenêtre de visualisation. S'il y a plus d'un widget épinglé à la même position, le widget du dessus sera le premier widget.
Remarque
L'épinglage n'est pas une option dans les grilles avancées.
Pour épingler un widget :
-
Dans le panneau latéral, cliquez sur widget. Recherchez le widget souhaité, puis cliquez et faites-le glisser sur le canevas.
-
Cliquez sur le widget pour ouvrir le menu flottant et sélectionnez Modifier la conception. Cela ouvre le panneau de conception sur le côté droit de l'écran.
-
Dans le panneau de conception, faites défiler la page jusqu'à la section Position.
-
Cliquez sur pour développer le menu Type de position et sélectionnez Épinglé. Cela garantit que tu widget reste collé à son élément parent (colonne ou colonne intérieure) tant que l'élément parent se trouve dans la fenêtre de visualisation. Cette modification s'applique à toutes les tailles d'écran, mais vous pouvez l'ignorer si nécessaire.
-
Dans la section Position, configurez le décalage du widget. Le décalage correspond à l'endroit où le widget sera épinglé lors du défilement avant de quitter la fenêtre de visualisation. Si vous choisissez desktop, les autres tailles d'écran auront les mêmes valeurs, mais elles peuvent être modifiées pour chaque taille d'écran si nécessaire. Si l'en-tête collant est activé, le décalage sera basé sur la hauteur de l'en-tête par défaut. Si vous activez un en-tête collant après avoir défini le décalage, il ne sera pas automatiquement mis à jour et vous devrez revenir en arrière et ajuster manuellement le décalage.
Si, à un moment donné, vous déplacez l'épingle widget vers un autre élément parent (colonne ou colonne intérieure), les paramètres du panneau de conception, tels que le décalage, seront conservés.
Note
Ces informations sont spécifiques à l'éditeur classique et ne concernent pas l'éditeur 2.0 (anciennement connu sous le nom d'éditeur All-Flex). Pour identifier la version actuelle de l'éditeur, voir Comment identifier la version de l'éditeur utilisée par votre site.
Indique si le widget est aligné à gauche, à droite ou au centre de sa zone.
Certains sites widget se comportent de manière très différente selon les points de vue. Vérifiez la façon dont tu widget s'affiche dans chaque vue après l'avoir ajoutée pour vous assurer qu'elle s'affiche correctement.
Pour définir l'alignement, cliquez avec le bouton droit de la souris sur le widget et cliquez sur l'icône Aligner à gauche, Aligner au centre ou Aligner à droite.
Pour connaître les options d'alignement en mode Flex ou dans l'Éditeur 2.0, reportez-vous à la section Concevoir avec Flex.
Sélectionne le conteneur dans lequel se trouve le site widget, ce qui vous permet de le retrouver et de le modifier facilement.
Éditeur classique:cliquez avec le bouton droit de la souris sur le widget, cliquez sur Sélectionner le conteneur et sélectionnez Colonne ou Rangée.
Editor 2.0: Cliquez avec le bouton droit de la souris sur le widget, cliquez sur Sélectionner un calque et sélectionnez le conteneur souhaité.
Un widget peut être copié et collé à un autre endroit. L'option coller n'apparaît que si vous disposez d'un site widget qui a été copié.
Cliquez avec le bouton droit de la souris sur le widget, puis cliquez sur Copier ou Coller.
Dans l'Éditeur 2.0, vous pouvez également cliquer sur l'icône Dupliquer dans le menu flottant.
Attention
Nous vous déconseillons de copier et de coller les formulaires de contact, car cela entraîne généralement des problèmes dans le formulaire dupliqué.
Utilisez la fonction Masquer sur l'appareil pour modifier votre contenu selon l'appareil que votre visiteur utilise pour accéder à votre site Web. Par exemple, ajoutez le widget ClickToCall pour les utilisateurs mobiles, ou le widget Formulaire de contact pour les utilisateurs sur ordinateur.
widget masquées par la fonction Hide On Device ne sont pas supprimées.
Dans l'Éditeur classique, cliquez avec le bouton droit de la souris sur le widget, cliquez sur Masquer sur le périphérique, sélectionnez un périphérique (dans l'Éditeur 2.0, les éléments ne peuvent être masqués que sur les périphériques en cours d'édition).
Dans l'Éditeur 2.0, les éléments peuvent également être masqués dans le panneau des calques. Dans le panneau latéral, cliquez sur Calques, hover sur l'élément souhaité et cliquez sur l'icône Œil.
Si une icône en forme d'œil () est présente dans le panneau latéral, cela indique qu'il y a des éléments cachés sur l'appareil que vous êtes en train d'éditer (éditeur classique uniquement). Pour visualiser les éléments cachés, cliquez sur l'icône de l'œil.
Dans l'Éditeur 2.0, s'il y a des éléments cachés sur l'appareil que vous êtes en train d'éditer, ils seront indiqués dans le panneau des calques. Dans le panneau latéral, cliquez sur Calques. Les éléments cachés apparaissent désactivés avec une icône d'œil barré à côté ().
Remarque
Le contenu caché peut encore apparaître dans le code du site réel (après la publication/réédition). Cela est normal et dû à la technologie utilisée. Pour plus d'informations, consultez la section Performances et optimisation du site.
Les liens d'ancrage vous permettent d'envoyer les visiteurs vers une section spécifique de la page, ce qui leur permet de se déplacer plus facilement d'un endroit à l'autre sur une page plus longue ou de se rendre à une section spécifique à laquelle ils souhaitent faire référence. Pour plus d'informations sur les ancres, voir Actions et options du canevas.
Cliquez avec le bouton droit de la souris sur le widget, puis cliquez sur Définir comme ancrage.