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.
Voici comment vous pouvez ajouter des widgets :
Pour ajouter widget à partir de 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 déplacez un widget sur votre site, faites attention au texte qui s'affiche dans l'indicateur de placement bleu :
-
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.
Pour ajouter widget à partir du canevas :
-
Cliquez avec le bouton droit de la souris sur n'importe quel site widget et sélectionnez Ajouter widget en dessous dans le menu contextuel pour ajouter widget immédiatement en dessous du site widget actuel.
-
Si vous faites un clic droit sur une colonne, cliquez sur Ajouter, puis sélectionnez Ajouter widget ci-dessous.
(Concerne le mode classique, le mode Flex et l'éditeur 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.
-
Cliquez sur l'icône plus + dans le menu flottant.
-
Si vous effectuez un clic droit sur une colonne, cliquez sur Ajouter et sélectionnez Ajouter un widget ci-dessous.
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.
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:
-
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.
-
Arrière-plan. Utilisez une image ou une couleur d'arrière-plan pour ce widget à l'aide de la boîte de dialogue Choix et placement des images ou l'URL d'une 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 du thème. En outre, vous pouvez choisir entre différentes dispositions de boutons, modifier le style (largeur, hauteur) et le 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 et une Animation.
-
(Facultatif) Personnalisez l'animation. Par exemple, la direction depuis laquelle il entre.
Exemple de configuration d'animation :
Pour réinitialiser l'animation, cliquez sur Rétablir la valeur par défaut.
Si vous utilisez l'animation Scroll, vous pouvez cliquer sur Pause Animation (Mettre en pause l'animation) dans le panneau latéral pour mettre en pause toutes les animations pendant que vous travaillez dans l'éditeur. L'animation restera sur le site en ligne et en mode aperçu.
Remarque
Les animations définies pour les tailles d'écran d'ordinateur de bureau ou de tablette sont liées et seront identiques. Cependant, la version mobile est distincte et les animations configurées pour ordinateur et tablette ne seront pas appliquées.
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.
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.
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.
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.
Faites un clic droit sur le widget, cliquez sur Masquer sur l'appareil et sélectionnez un appareil. 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 masqués sur l'appareil que vous êtes en train de modifier. Pour afficher les éléments masqués, cliquez sur l'icône en forme d'œil.
Les liens d'ancrage vous permettent de diriger les visiteurs vers une section spécifique de la page facilitant ainsi la navigation sur une page plus longue, ou vers une section spécifique à laquelle vous souhaitez faire référence.
Cliquez avec le bouton droit de la souris sur le widget, puis cliquez sur Définir comme ancrage.