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 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.
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.
La taille du texte définie dans certaines pages du site widget (éditeur de texte, formulaire de contact, navigation, entreprise, cliquer pour envoyer un courriel, cliquer pour appeler et bouton widget) s'adaptera automatiquement à 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.
-
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 le panneau de 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.
-
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 du thème. En outre, vous pouvez choisir entre différentes dispositions de boutons, modifier le style du bouton (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 ( 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 le bureau et la tablette sont liées et seront identiques. Cependant, Mobile est séparé et les animations configurées pour Bureau/Tablette 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 :
- Cliquez sur l'élément pour ouvrir le menu flottant, puis cliquez sur l'option permettant de modifier la conception.
- 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.
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.
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 widget fixes 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.
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.
Les éléments ne peuvent être masqués que sur les appareils en cours d'édition.
Pour masquer un élément : dans le panneau latéral, cliquez sur Calques, hover sur l'élément souhaité et cliquez sur l'icône Œil. Si des éléments sont cachés sur le dispositif que vous êtes en train d'éditer, ils seront indiqués dans le panneau des calques par une icône en forme d'œil barré.
Remarque
Le contenu masqué peut toujours apparaître dans le code du site en ligne (après la publication / republication). Ce comportement est normal et est dû à la technologie utilisée.
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.
Commentaires
0 commentaire
Cet article n'accepte pas de commentaires.