Les widgets sont les principaux éléments constitutifs d'un site. Ils 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 widgets, vous pouvez créer une expérience utilisateur dynamique et engageante.
Il existe plusieurs méthodes pour ajouter des widgets. Cela varie également selon que vous utilisiez l'éditeur classique, le mode flex ou l'éditeur 2.0. Voici comment ajouter des widgets :
Pour ajouter des widgets depuis la bibliothèque de widgets :
-
-
Pour trouver un widget, utilisez la barre de recherche ou sélectionnez une catégorie pour accéder rapidement au widget souhaité.
-
Les widgets personnalisés du compte et du site se trouvent dans Personnalisé catégorie du panneau Widget.
-
-
Cliquez et faites glisser le widget vers l'emplacement de votre choix sur le site. Un indicateur de placement 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 figurant dans l'indicateur de placement 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 de celle-ci.
-
Insérer dans une nouvelle colonne. Une nouvelle colonne sera ajoutée et le widget sera placé à l'intérieur de celle-ci.
Note
Avec Editor 2.0, les widgets ne peuvent être ajoutés qu'aux colonnes existantes, il n'est pas possible d'en créer de nouveaux en plaçant un widget.
Pour ajouter des widgets depuis le canevas :
-
Cliquez avec le bouton droit sur un widget et sélectionnez Ajouter un widget ci-dessous dans le menu contextuel pour ajouter des widgets juste en dessous du widget actuel (Éditeur classique uniquement).
-
En mode Flex ou Editor 2.0, cliquez sur le bouton plus (+) icône dans le menu flottant.
-
Si vous cliquez avec le bouton droit sur une colonne, cliquez surAjouter, et sélectionnezAjouter un widget ci-dessous
(Pertinent pour le mode Classic, le mode Flex et Editor 2.0)
-
-
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.
-
Cliquez sur le plus + icône dans le menu flottant.
-
Si vous cliquez avec le bouton droit sur une colonne, cliquez sur Ajouter et sélectionnez Ajouter un widget ci-dessous.
Le panneau multimédia vous permet de glisser-déposer facilement des médias (images, vidéos et icônes) sur le canevas et d'ajouter un widget en même temps. Par exemple, si vous ajoutez une image depuis le panneau multimédia au canevas, un widget d'image est automatiquement ajouté. Pour en savoir plus, consultez Panneau multimédia.
Pour ajouter une image, une icône ou un widget vidéo à partir du panneau multimédia :
-
(Facultatif) Utilisez les filtres pour vous aider à localiser le média souhaité. Ou cliquez sur Télécharger des médias pour ajouter de nouveaux médias.
-
Cliquez et faites glisser le média souhaité sur le canevas. Notez que les images ne peuvent pas être placées dans les widgets Store Catalog ou Product Gallery ne figurent pas dans widgets connectés à des pages dynamiques.
Vous pouvez personnaliser les widgets pour ajuster le contenu, l'apparence et la mise en page de votre site. La modification des widgets vous permet de mieux contrôler les fonctionnalités de votre site et leur comportement.
La plupart des widgets disposent d'une zone dédiée à leur contenu ainsi qu'à leur design.
La plupart des widgets de l'éditeur disposent d'options de conception qui vous permettent de personnaliser l'apparence du widget pour votre site. Les widgets n'ont pas tous les mêmes options. Par exemple, certains widgets ne vous permettent pas de modifier l'espacement intérieur, d'autres ne vous permettent pas de modifier l'espacement extérieur.
Les paramètres de conception courants sont les suivants.
Pour les widgets contenant du texte, vous pouvez modifier les styles de texte. Toutes les modifications que vous apportez à un widget spécifique remplaceront le style du texte du thème
Styles de texte dans Editor 2.0
La taille du texte définie dans des widgets spécifiques (éditeur de texte, formulaire de contact, navigation, affaires, widgets Click to email, Click to call et Button) s'ajustera automatiquement en fonction de la taille de l'écran. Sur ordinateur, 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 à une taille inférieure à 16 px sur mobile ou tablette. Et il ne s'ajustera pas à plus de 60 pixels sur une tablette ou à 40 pixels sur un mobile. Cela permet de s'assurer que le texte est toujours lisible et proportionné à chaque taille d'écran.
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 par taille d'écran.
Vous trouverez ci-dessous des exemples de la manière dont la taille du texte sera ajustée dans différents scénarios :
-
Si vous définissez la taille du texte à 40 pixels sur ordinateur, le texte sera automatiquement réduit à 34 pixels sur la tablette et à 32 pixels sur le mobile.
-
Si vous définissez la taille du texte sur 16 pixels sur ordinateur, elle ne sera pas réduite de 85 % à 13 pixels sur tablette, ou de 80 % à 12 pixels sur mobile, car cette taille est trop petite pour être lue et inférieure au minimum de 16 pixels. Au lieu de cela, la taille du texte restera la même à 16 pixels sur toutes les tailles d'écran.
-
Si vous définissez la taille du texte à 100 pixels sur le bureau, elle s'ajustera à 60 pixels sur la tablette puisque c'est le maximum, au lieu de 85 pixels, ce qui représenterait 85 % de la taille du texte du bureau. La taille du texte mobile s'ajustera également à 40 pixels puisque c'est le maximum, au lieu de 80 pixels, ce qui représenterait 80 % de la taille du texte de bureau
Les options de mise en page sont généralement spécifiques à certains widgets. Pour sélectionner l'une 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 leSélectionnez la mise en pagemenu. 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 widget.
Exemple de section de mise en page dans le Design onglet (Éditeur classique):
Exemple de section de mise en page dans le panneau de conception (Éditeur 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
-
Bordure. Modifiez la largeur de la bordure à l'aide du curseur ou de la zone de texte. Cliquez sur l'icône représentant un engrenage (
) 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 de 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 les angles arrondis d'un widget. Cliquez sur l'icône représentant un engrenage (
-
Ombres. Activez ou désactivez une ombre pour ce widget
-
Texte. Définissez différents aspects du texte, tels que la famille de police, l'épaisseur de la police, etc.
Les widgets 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 thématique. En outre, vous pouvez choisir entre les différentes dispositions des boutons, modifier le style des boutons (largeur, hauteur) et le texte des boutons (police, taille du texte) et ajuster l'espacement intérieur et extérieur
Toutes les modifications que vous apportez dans l'éditeur de conception remplaceront les styles définis au niveau du bouton du thème. Si vous souhaitez revenir au style du bouton du thème,Rétablir le style du thème.
-
Si des modifications sont apportées au bouton (qui remplaceront les styles définis au niveau du bouton thématique), une boîte d'indication sera toujours présente sur le style du bouton principal ou secondaire.
-
Si vous cliquez sur le style de bouton qui n'a pas de boîte d'indicateur, le style défini au niveau du bouton de thème sera réinitialisé.
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 du cadre extérieur définit l'espacement extérieur pour son propre côté (haut, bas, gauche ou droite), et chaque chiffre du cadre intérieur définit l'espacement intérieur pour son propre côté (haut, bas, gauche ou droite).
Pour des informations détaillées, voir Espacement extérieur et intérieur
Les animations d'entrée vous permettent d'animer des widgets et des widgets de page lors de 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 que les visiteurs se concentrent, comme un numéro de téléphone ou un bouton de contact
En outre, vous pouvez contrôler le début et la fin de l'animation à l'écran à l'aide duFaites défilerparamètres.
Pour ajouter une animation :
-
Naviguez jusqu'au Animation section.
-
Sélectionnez un Gâchette et Animation.
-
(Facultatif) Personnalisez l'animation. Par exemple, la direction d'où il entre.
Exemple de configuration d'animation :
Pour réinitialiser l'animation, cliquez sur Rétablir les paramètres par défaut.
Si vous utilisez l'animation Scroll, vous pouvez cliquer sur Suspendre l'animation dans le panneau latéral pour suspendre toutes les animations pendant que vous travaillez dans l'éditeur. L'animation restera sur le site en direct et en mode aperçu.
Note
Les animations définies pour les tailles d'écran de bureau ou de tablette sont liées et seront identiques. Cependant, le mobile est distinct et les animations configurées pour les ordinateurs de bureau et les tablettes ne seront pas appliquées.
Lorsque vous ajoutez des animations, tenez compte des points suivants :
-
Trop d'animations peuvent désorienter ou distraire les utilisateurs, utilisez-les donc avec parcimonie.
-
Lorsque vous supprimez une animation, n'oubliez pas que les animations peuvent être appliquées à des lignes ainsi qu'à des widgets. Par conséquent, l'animation que vous voyez a peut-être été ajoutée à un endroit inattendu.
Pour supprimer des animations :
Note
Si un élément ne possède pas d'animation, celle-ci 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étecter d'éventuelles animations.
Utilisez l'IA pour créer rapidement des widgets de site personnalisés sans quitter l'éditeur. Notez que les widgets de site sont spécifiques au site sur lequel ils ont été créés et ne peuvent pas être utilisés sur d'autres sites de votre compte. Tous les widgets de site personnalisés que vous créez sont stockés dans le panneau Widgets situé sous Personnalisé catégorie pour un accès facile.
Note
Cette fonctionnalité est disponible pour les administrateurs et les membres du personnel dotés du Copilote autorisation.
Pour créer un widget de site personnalisé dans l'éditeur :
-
À partir du panneau de widgets, vous pouvez générer un widget personnalisé de site de la manière suivante :
-
Entrez une invite. Vous pouvez utiliser le @ symbole pour faire référence à une collection spécifique. Notre IA peut récupérer les collections de votre site et leur structure, ce qui lui permet de créer des widgets qui affichent leur contenu.
-
Cliquez Des idées à essayer pour parcourir une bibliothèque d'invites prédéfinies. Utilisez cette invite pour sélectionner l'invite souhaitée.
-
Remixez un widget prêt à l'emploi. Cliquez pour sélectionner le widget souhaité, puis cliquez sur Remixer. Le widget remixé est ajouté au Personnalisé section du panneau du widget et est prêt à être glissé et déposé sur le canevas.
Notez que Copilote une autorisation est requise pour remixer un widget.
-
-
Si vous avez saisi une invite, une nouvelle fenêtre s'ouvre sur le côté droit de l'écran. Selon la complexité de la demande, l'IA peut mettre quelques instants à générer votre widget. Lorsque le widget est créé, cliquez sur Emmenez-moi là-bas.
-
À partir du Personnalisé section du panneau Widget, faites glisser et déposez le widget sur le canevas.
-
(Facultatif) Si vous devez apporter des modifications au widget, cliquez sur l'icône à trois points sur la fiche du widget personnalisé du site et sélectionnez l'une des options suivantes :
-
Modifier avec Copilot
-
Modifier le nom et l'icône
-
Gérer dans Workspace (Plans personnalisés uniquement)
-
Archive
-
Les widgets fixes vous permettent de garder un widget visible à tout moment, même lorsqu'un visiteur fait défiler la page vers le bas, tandis que les widgets épinglés restent sur leur élément parent (colonne ou colonne intérieure) tant que l'élément parent est dans la fenêtre d'affichage.
Les widgets peuvent être définis comme fixes ou épinglés dans Poste section du panneau de conception.
Les widgets fixes vous permettent de garder un widget visible à tout moment, même lorsqu'un visiteur fait défiler la page vers le bas. Utilisez des widgets fixes pour que les appels à l'action importants restent fixes, visibles et cliquables sur toutes les pages du site
Pour corriger un widget :
-
Recherchez le widget souhaité, puis cliquez dessus et faites-le glisser sur le canevas.
-
Cliquez sur le widget pour ouvrir le menu flottant, puis sélectionnezModifier le design. Cela ouvre le panneau de conception sur le côté droit de l'écran. Faites défiler l'écran vers le bas jusqu'àPostesection du panneau de conception.
-
Cliquez pour agrandirType de postemenu et sélectionnezFixé. Cette modification s'applique à toutes les tailles d'écran, mais vous pouvez la modifier si nécessaire. Une fois que vous avez sélectionné la position, vous ne pouvez pas passer de Fixe à Épinglée. En effet, lorsque vous sélectionnez Fixe, le widget est supprimé de son conteneur d'origine afin qu'il reste visible à l'écran lorsque l'utilisateur fait défiler la page. Si vous deviez passer de Fixed à Pinned, l'éditeur ne saurait pas dans quel conteneur placer le 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 d'affichage
-
Dans leEspacementmenu, utilisezParamètres de marge pour définir l'emplacement du widget dans la fenêtre d'affichage. Cette configuration est particulièrement importante si vous avez deux widgets fixes dans la même position de la fenêtre d'affichage
-
Pour afficher le widget uniquement sur la page en cours, activezAfficher uniquement sur cette pagebasculer.
Les widgets épinglés restent attachés à leur élément parent (colonne ou colonne intérieure) tant que l'élément parent est dans la fenêtre d'affichage. S'il y a plus d'un widget épinglé dans la même position, le widget du haut sera le premier widget
Note
L'option Épingler n'est pas disponible dans les grilles avancées.
Pour épingler un widget :
-
Recherchez le widget souhaité, puis cliquez dessus et faites-le glisser sur le canevas.
-
Cliquez sur le widget pour ouvrir le menu flottant, puis sélectionnezModifier le design. Cela ouvre le panneau de conception sur le côté droit de l'écran.
-
Dans le panneau de conception, faites défiler l'écran jusqu'àPostesection.
-
Cliquez pour agrandirType de postemenu et sélectionnezÉpinglé. Cela garantit que votre widget reste fidèle à son élément parent (colonne ou colonne intérieure) tant que l'élément parent se trouve dans la fenêtre d'affichage. Cette modification s'applique à toutes les tailles d'écran, mais vous pouvez la modifier si nécessaire
-
Dans lePostesection, 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 d'affichage. Si elles sont définies depuis le bureau, les autres tailles d'écran auront les mêmes valeurs, mais elles peuvent être remplacées par taille d'écran si nécessaire. Si l'en-tête collant est activé, le décalage sera basé sur la hauteur d'en-tête par défaut. Si vous activez un en-tête permanent 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, à tout moment, vous déplacez le widget épinglé 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 Editor 2.0 (anciennement connu sous le nom d'éditeur All-Flex). Pour identifier la version actuelle de votre éditeur, voirComment identifier la version de l'éditeur utilisée par votre site .
Définissez si le widget est aligné à gauche, à droite ou au centre de sa zone.
Certains widgets se comportent de manière très différente selon les vues. Vérifiez la façon dont votre widget s'affiche 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 surAligner à gauche,Aligner le centre, ou Aligner à droite icône.
Pour les options d'alignement en mode Flex ou Editor 2.0, voir Concevez avec Flex.
Sélectionne le conteneur dans lequel se trouve le widget, ce qui vous permet de le trouver et de le modifier facilement.
Éditeur classique:Cliquez avec le bouton droit sur le widget, puis cliquezSélectionnez un conteneur, et sélectionnezColonneouRangée.
Éditeur 2.0 :Cliquez avec le bouton droit sur le widget, puis cliquez Sélectionnez une couche et sélectionnez le contenant souhaité.
Un widget peut être copié et collé à un autre emplacement. L'option Coller n'apparaît que si un widget a été copié.
Cliquez avec le bouton droit sur le widget, puis cliquez surCopierouColler.
Sinon, dans Editor 2.0, cliquez sur le Icône dupliquée dans le menu flottant.
Avertissement
Nous vous déconseillons de copier-coller les formulaires de contact, car cela entraîne généralement des problèmes lors de la duplication du formulaire de contact.
Utilisez la fonction de masquage sur l'appareil pour modifier votre contenu en fonction de l'appareil utilisé par votre visiteur pour accéder à votre site Web. Par exemple, affichez un widget d'appel en un clic pour les utilisateurs mobiles ou un formulaire de contact pour les utilisateurs de bureau
Widgets masqués par Masquer sur l'appareil fonctionnalité ne sont pas supprimées.
Éditeur classique
Cliquez avec le bouton droit sur le widget, puis cliquez Masquer sur l'appareil, sélectionnez un appareil. La présence d'une icône représentant un œil dans le panneau latéral indique que des éléments sont 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.
Éditeur 2.0
Les éléments ne peuvent être masqués que sur les appareils en cours de modification.
Pour masquer un élément : dans le panneau latéral, cliquez sur Couches, passez la souris sur l'élément souhaité et cliquez sur Icône de l'œil. Si des éléments sont masqués sur l'appareil que vous êtes en train de modifier, ils seront indiqués dans le panneau des calques par une icône en forme d'œil barré.
Note
contenu masqué peut toujours apparaître dans le code du site en ligne (après la publication/la republication). Cela est attendu et est dû à la technologie utilisée.
Les liens d'ancrage vous permettent de rediriger 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 vers une section spécifique à laquelle vous souhaitez faire référence.
Cliquez avec le bouton droit sur le widget, puis cliquez surDéfinir comme ancre.
Pour plus d'informations sur les ancres, voir Actions et options du canevas.
Bien qu'il puisse y avoir des différences en fonction de l'objectif d'une application ou d'un widget personnalisé, les widgets créés à l'aide de 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 être soumises à un processus d'assurance qualité rigoureux de la part de l'équipe Duda.
Pour une réponse plus détaillée, consultez la section FAQ du Présentation de l'App Store article.
Consultez les ressources suivantes pour les widgets personnalisés et le générateur de widgets :
Note
-
Si vous recherchez un widget personnalisé, mais que vous avez besoin d'un développeur, un expert Duda pourra peut-être vous aider. Pour plus d'informations sur le programme Experts, voir Les experts de Duda. Pour découvrir les experts, rendez-vous sur experts.duda.co.
-
Le support Duda ne peut pas résoudre les problèmes liés aux widgets personnalisés.