Les widgets sont les éléments clés d'un site web. Ils vous permettent d'ajouter et de gérer efficacement du contenu. Ils constituent des éléments essentiels qui améliorent la fonctionnalité et le design de votre site web. En intégrant différents types de widgets, vous pouvez créer une expérience utilisateur dynamique et attrayante.
Bibliothèque de widgets
La bibliothèque de widgets regroupe tous les widgets. Ils sont classés par catégories. Une fonction de recherche est également disponible en haut de la page.
Pour accéder à la bibliothèque de widgets, dans le panneau latéral, cliquez sur Widgets .
Ajouter un widget
Pour entrer dans l'éditeur :
- Connectez-vous à votre compte Guesty .
- Dans la barre de navigation supérieure, cliquez sur le sélecteur de mode et sélectionnez le mode Croissance .
- Cliquez sur Distribution .
- Cliquez sur la miniature des Sites Internet Guesty .
- À droite du site Web concerné, cliquez sur Modifier .
Ajouter des widgets à partir de la bibliothèque de widgets
Pour ajouter des widgets à partir de la bibliothèque de widgets :
- Dans le panneau latéral, cliquez sur Widgets pour ouvrir la bibliothèque de widgets.
- Les widgets peuvent être recherchés à l'aide de la barre de recherche en haut ou en faisant défiler les différentes sections de la bibliothèque.
- Cliquez et faites glisser le widget à l'emplacement souhaité sur le site. Un indicateur de positionnement bleu apparaît.
- Le widget apparaît à l’emplacement indiqué par l’indicateur de placement bleu.
Lorsque vous faites glisser et déposez un widget sur votre site, notez le texte 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 y sera placé.
Ajouter des widgets à partir du canevas
Pour ajouter des widgets à partir du canevas :
- Cliquez avec le bouton droit sur n’importe quel widget et sélectionnez Ajouter un widget ci-dessous dans le menu contextuel pour ajouter des widgets immédiatement sous le widget actuel.
- En mode Flex, cliquez sur l’icône plus (+) dans le menu flottant.
- Si vous faites un clic droit sur une colonne, cliquez sur Ajouter et sélectionnez Ajouter un widget ci-dessous.
- Choisissez parmi les quatre widgets les plus populaires ou cliquez sur « Plus de widgets » pour ouvrir le menu complet. Après avoir ajouté le widget, vous pouvez le modifier comme d'habitude.
Modifier le widget : contenu et conception
Vous pouvez personnaliser les widgets pour ajuster le contenu, l'apparence et la mise en page de votre site. Modifier les widgets vous permet de mieux contrôler les fonctionnalités de votre site et leur fonctionnement.
La plupart des widgets disposent d'une zone pour leur contenu ainsi que pour leur conception.
Zone de contenu
La zone de contenu est généralement l'endroit où le contenu d'un widget est configuré. Les sections et options disponibles dans la zone de contenu varient selon le widget. Par exemple, certains widgets permettent d'ajouter un lien, d'autres non.
Pour accéder à l'éditeur de contenu, faites un clic droit sur le widget et sélectionnez « Modifier le contenu » . Si vous êtes en mode flexible, l'option d'accès à l'éditeur de contenu est disponible dans le menu flottant.
Modifier la conception
La plupart des widgets de l'éditeur proposent des options de conception permettant de personnaliser leur apparence pour votre site. Cependant, les options ne sont pas toutes identiques. Par exemple, certains ne permettent pas de modifier l'espacement intérieur, tandis que d'autres ne permettent pas de modifier l'espacement extérieur.
Pour accéder à l'éditeur de conception, faites un clic droit sur l'élément, puis cliquez sur « Modifier la conception » . En mode flexible, sélectionnez « Modifier la conception » dans le menu flottant pour ouvrir le panneau de conception.
Voici les paramètres de conception courants.
Styles de texte
Pour les widgets avec texte, vous pouvez modifier les styles de texte. Toute modification apportée à un widget spécifique remplacera le style de texte du thème.
Si vous devez modifier la taille du texte par 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.
Voici des exemples de la manière dont la taille du texte s'ajustera dans différents scénarios :
- Si vous définissez la taille du texte à 40 px sur ordinateur, le texte sera automatiquement réduit à 34 px sur tablette et à 32 px sur mobile.
- Si vous définissez la taille du texte à 16 px sur ordinateur, elle ne sera pas réduite de 85 % à 13 px sur tablette, ni de 80 % à 12 px sur mobile, car cette taille est trop petite pour être lue et inférieure au minimum de 16 px. Au contraire, la taille du texte restera inchangée à 16 px sur toutes les tailles d'écran.
- Si vous définissez la taille du texte à 100 px sur ordinateur, elle sera ajustée à 60 px sur tablette, car c'est le maximum, au lieu de 85 px, qui correspondrait à 85 % de la taille du texte sur ordinateur. La taille du texte sur mobile sera également ajustée à 40 px, car c'est le maximum, au lieu de 80 px, qui correspondrait à 80 % de la taille du texte sur ordinateur.
Mise en page
Les options de mise en page sont généralement spécifiques à certains widgets. Pour sélectionner une mise en page parmi celles disponibles pour ce widget, cliquez sur la mise en page qui apparaît dans l'éditeur de design (ou cliquez sur la petite flèche à côté) pour ouvrir le menu « Sélectionner la mise en page » . Pour modifier la mise en page sélectionnée, cliquez sur celle que vous souhaitez utiliser ; elle sera mise à jour dans le widget.
Style
- 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.
- Bordure. Modifiez la largeur de la bordure à l'aide du curseur ou de la zone de texte. Cliquez sur l'icône en forme d'engrenage (design-gear.png) pour plus d'options.
- Arrière-plan. Utilisez une image ou une couleur d'arrière-plan pour ce widget via la boîte de dialogue « Choisir et placer 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 d'engrenage (design-gear.png) pour plus d'options.
- Ombres. Activez ou désactivez une ombre pour ce widget.
- Texte. Définissez différents aspects du texte, tels que la police, le poids, etc.
Boutons
Les widgets intégrant un bouton permettent de choisir si le bouton hérite du style principal ou secondaire défini dans le panneau de thème. De plus, vous pouvez choisir entre différentes dispositions de bouton, modifier le style (largeur, hauteur) et le texte (police, taille du texte), ainsi que l'espacement intérieur et extérieur.
Toute modification apportée dans l'éditeur de style remplacera les styles définis au niveau du bouton du thème. Pour revenir au style du bouton du thème, cliquez sur « Réinitialiser le style du thème » .
Boutons de thème principal et secondaire
- Si des modifications sont apportées au bouton (ce qui remplacera les styles définis au niveau du bouton du thème), une case indicatrice sera toujours présente sur le style du bouton principal ou secondaire.
- Si le style de bouton qui n'a pas la case indicatrice est cliqué, il réinitialisera le bouton au style défini au niveau du bouton de thème.
Espacement
Modifiez l'espacement intérieur (espacement à l'intérieur des bords du widget) et extérieur (espacement à l'extérieur des bords du widget). Chaque valeur du cadre extérieur définit l'espacement extérieur de son côté (haut, bas, gauche ou droite), et chaque valeur du cadre intérieur définit l'espacement intérieur de son côté (haut, bas, gauche ou droite).
Pour des informations détaillées, voir Espacement extérieur et intérieur
Animation
Les animations d'entrée vous permettent d'animer les widgets et les pages dès leur premier chargement sur votre site. Le mouvement et l'interactivité rendent votre site plus mémorable et peuvent mettre en valeur les sections sur lesquelles vous souhaitez attirer l'attention des visiteurs, comme un numéro de téléphone ou un bouton de contact.
De plus, 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 :
- Pour accéder à l'éditeur de conception, faites un clic droit sur l'élément, puis cliquez sur « Modifier la conception » . En mode flexible, sélectionnez « Modifier la conception » dans le menu flottant pour ouvrir le panneau de conception.
- Accédez à la section Animation.
- Sélectionnez un déclencheur ( entrée ou défilement ) et une animation.
- (Facultatif) Personnalisez l'animation (par exemple, la direction dans laquelle elle entrera).
Pour réinitialiser l'animation, cliquez sur Réinitialiser par défaut .
Si vous utilisez une animation de défilement, vous pouvez cliquer sur Pause de l'animation ( 
) dans le panneau latéral pour mettre en pause toutes les animations en mode édition. Les animations resteront actives en mode aperçu et sur le site en ligne.
Note :
Les animations configurées pour ordinateur et tablette sont liées et seront identiques. Cependant, les animations configurées pour mobile sont distinctes et ne s'appliquent pas aux versions ordinateur et tablette.
Considérations sur l'animation
Lorsque vous ajoutez des animations, gardez à l’esprit les points suivants :
- Trop d’animations peuvent désorienter ou distraire les utilisateurs, alors utilisez-les avec parcimonie.
- Lorsque vous supprimez une animation, n'oubliez pas que les animations peuvent être appliquées aux lignes ainsi qu'aux widgets. L'animation que vous voyez peut donc avoir été ajoutée à un endroit inattendu.
Supprimer les animations
Pour supprimer les animations :
- Pour accéder à l'éditeur de conception, faites un clic droit sur l'élément, puis cliquez sur « Modifier la conception » . En mode flexible, sélectionnez « Modifier la conception » dans le menu flottant pour ouvrir le panneau de conception.
- Accédez à la section Animation.
- Cliquez sur le menu déroulant Animation et sélectionnez Aucun .
Note :
Si un élément n'a pas d'animation, elle peut être appliquée à l'un des conteneurs dans lesquels se trouve l'élément. Il est recommandé de vérifier tous les conteneurs pour d'éventuelles animations.
Alignement
Définissez si le widget est aligné à gauche, à droite ou au centre de sa zone.
Certains widgets se comportent très différemment selon les vues. Vérifiez l'affichage de votre widget dans chaque vue après l'avoir ajouté pour vous assurer qu'il s'affiche correctement.
Pour définir l'alignement, cliquez avec le bouton droit sur le widget, puis cliquez sur une icône Aligner à gauche , Aligner au centre ou Aligner à droite .
Sélectionner le conteneur
Sélectionnez le conteneur dans lequel se trouve le widget, vous permettant de le trouver et de le modifier facilement.
Cliquez avec le bouton droit sur le widget, cliquez sur Sélectionner un conteneur et sélectionnez Colonne ou Ligne .
Copier et coller
Un widget peut être copié et collé à un autre emplacement. L'option « Coller » n'apparaît que si vous avez un widget copié.
Cliquez avec le bouton droit sur le widget, puis cliquez sur Copier ou Coller .
Nous ne recommandons pas de copier et coller des formulaires de contact, car cela entraîne généralement des problèmes dans le formulaire de contact dupliqué.
Masquer sur l'appareil
Utilisez la fonctionnalité « Masquer sur l'appareil » pour adapter votre contenu à l'appareil utilisé par vos visiteurs pour accéder à votre site web. Par exemple, affichez un widget d'appel pour les utilisateurs mobiles ou un formulaire de contact pour les utilisateurs d'ordinateur.
Les widgets masqués par la fonction Masquer sur l'appareil ne sont pas supprimés.
Cliquez avec le bouton droit sur le widget, cliquez sur Masquer sur l'appareil , dans l'éditeur classique, sélectionnez un appareil.
Si une icône en forme d'œil ( 
) est présente dans le panneau latéral, cela indique que des éléments masqués sont présents sur l'appareil en cours de modification. Pour les afficher, cliquez sur l' icône en forme d'œil .
Note :
Du contenu masqué peut encore apparaître dans le code du site en ligne (après publication/republication). Ceci est normal et dû à la technologie utilisée.
Modifier le widget HTML/CSS
Vous permet de modifier le code HTML ou CSS du widget. Nous ne recommandons cette option que si vous maîtrisez ces langages.
Cliquez avec le bouton droit sur le widget, puis cliquez sur Modifier HTML/CSS .
Définir le widget comme ancre
Les liens d'ancrage vous permettent de rediriger les visiteurs vers une section spécifique de la page, facilitant ainsi leur déplacement sur une page plus longue ou vers une section spécifique que vous souhaitez consulter. Pour plus d'informations sur les ancres, consultez la section « Balises d'ancrage et liens » .
Cliquez avec le bouton droit sur le widget, puis cliquez sur Définir comme ancre .
Supprimer le widget
Pour supprimer un widget et le supprimer de tous les appareils, cliquez avec le bouton droit sur le widget, puis cliquez sur Supprimer .
FAQ et Résolution de problèmes des widgets
Quelle est la différence entre les applications et les widgets personnalisés ?
Bien qu'il puisse y avoir des différences en fonction de ce qu'une application ou un widget personnalisé tente d'accomplir, les widgets créés avec notre générateur de widgets ne sont pas nécessairement meilleurs que les widgets créés par nos partenaires d'applications.
Les applications doivent également répondre à des normes strictes et subir un processus d'assurance qualité rigoureux par l'équipe Guesty.
Pour une réponse plus détaillée, consultez la section FAQ dans l'article de vue d'ensemble de l'App Store .