Pour en savoir plus sur Site Theme, visitez Duda University
Le panneau Thème du site vous permet d'apporter des modifications qui affectent l'ensemble de votre site. Vous pouvez personnaliser le texte, les boutons, les images, l'arrière-plan et les widgets de navigation de votre site à partir du panneau de conception. Cela vous permet d'apporter rapidement et efficacement des modifications visuelles radicales, de réduire le temps de conception et de maintenir le style de votre site cohérent d'une page à l'autre.
Pour ouvrir le panneau Thème du site, dans le panneau latéral, cliquez sur Thème. Lorsque le panneau Thème du site est ouvert, le canevas est automatiquement réduit à 50 % afin que l'ensemble du canevas soit visible lors de l'ajustement des paramètres du thème du site. Si vous souhaitez revenir à l'affichage 100 % de la toile, cliquez sur le menu déroulant dans la barre supérieure et sélectionnez 100 %. La possibilité d'effectuer un zoom avant ou arrière est également disponible en mode prévisualisation.
Remarque
-
Les modifications que vous apportez à des pages ou à des sites widget spécifiques remplacent les thèmes définis dans le panneau Thème du site. Nous vous recommandons de choisir d'abord un thème pour votre site, puis de personnaliser les parties de votre site que vous souhaitez mettre en valeur ou qui vous semblent différentes des autres.
-
Avant mars 2023, le panneau Thème du site s'appelait Design global.
Cette section vous permet de contrôler le texte de votre site, pour les paragraphes comme pour les titres de toute taille (H1 à H6). Modifiez le style et l'apparence du texte sur l'ensemble de votre site. Vous pouvez modifier le type et la taille de police, et également choisir les paramètres du texte classique, des liens et des titres.
La modification de la taille, du style et de la couleur de la police, ainsi que d'autres modifications, aura une incidence sur les futurs paragraphes et autres types de texte, ainsi que sur le site widget actuellement connecté au texte du site et qui n'a pas fait l'objet de modifications manuelles.
Pour configurer le texte du thème :
-
Dans le panneau de gauche, cliquez sur Thème.
-
Cliquez sur la flèche située à côté de Texte.
-
Cliquez sur le type de texte souhaité. Vous avez le choix entre :
-
DFLT. Le thème sera défini pour tout le texte de widget qui n'est pas assigné à un titre ou à un style de paragraphe, comme la navigation widget. La couleur du texte du lien et le soulignement peuvent également être définis ici. En outre, vous avez la possibilité de personnaliser l'apparence des liens pour différents états, y compris l'état du lien par défaut, le lien surhover et le lien cliqué.
-
PAR. Cela permet de définir le thème du widget de texte.
-
Titres et sous-titres H1-H6.
-
-
Vous pouvez modifier la police, la graisse, la taille (pour ordinateur/tablette et mobile, séparément), la couleur, le format de la police, la direction, la hauteur de ligne, l'espacement entre les lettres et l'option "Tout en majuscules".
Lorsque vous apportez des modifications dans la zone de texte Thème, l'ensemble du texte sur le site qui ne fait pas l'objet de modifications de style individuelles et personnalisées est changé. Les modifications apportées manuellement à certains éléments sont prioritaires sur le thème du site. Aucune modification apportée au thème du site n'aura plus d'incidence sur le style de ces éléments. Cela concerne les paramètres de style individuels d’un certain élément du site, par exemple, si vous avez uniquement modifié la couleur du texte dans un widget H1 particulier de la zone de travail :
-
Si vous changez la taille de la police du H1 dans le thème du site, la taille de la police du H1 changera toujours dans le widget H1.
-
Si vous changez la couleur du H1 dans le thème du site, le H1 qui avait été modifié ne sera pas mis à jour avec le changement de couleur.
Vous pouvez mettre à jour le texte du thème dans les paramètres du texte en cliquant sur Thème, puis en sélectionnant Texte. Vous pouvez également cliquer sur un texte widget pour ouvrir le menu contextuel, cliquer sur le menu déroulant de sélection des titres et sélectionner Mettre à jour le thème. Cela ouvre les paramètres du texte du thème où vous pouvez faire des mises à jour.
L'éditeur propose une variété de polices de caractères à utiliser. Définissez une police de texte thématique ou choisissez de différencier votre texte en utilisant plusieurs polices différentes sur votre site. Pour ajouter des polices personnalisées à votre site, voir Polices personnalisées.
Pour afficher les polices disponibles et voir à quoi elles ressemblent :
-
Dans le panneau latéral, cliquez sur Thème, puis sur Texte.
-
Sélectionnez une police dans le menu déroulant Police .
Vous pouvez ajouter des polices personnalisées à partir de la bibliothèque de polices Google ou en téléchargeant des fichiers de polices personnalisées (TTF, OTF, EOT, WOFF2 ou WOFF). Pour de meilleures performances, il est recommandé d'utiliser des fichiers WOFF ou WOFF2 lors de l'ajout de polices personnalisées.
Remarque
-
Si vous n'avez qu'un fichier .otf ou .ttf nous vous recommandons d'utiliser un site externe tool comme FontSquirrel pour le convertir au format requis.
-
Afin de rester en conformité avec le RGPD, les polices d'écriture personnalisées sont chargées à partir de notre CDN, sans qu'il ne soit nécessaire de faire appel à l'API Google Fonts.
-
Si vous enregistrez un site en tant que modèle, il inclura toutes les polices personnalisées qui ont été ajoutées.
-
Si vous réinitialisez un site, les polices personnalisées sont supprimées.
Pour ajouter une police personnalisée :
-
Vous pouvez ajouter des polices personnalisées à partir des emplacements ci-dessous :
-
Dans le panneau latéral, cliquez sur Thème, puis sur Texte. Développez la section de texte souhaitée. À côté de la liste des polices, cliquez sur l'icône Ajouter & Gérer les polices (
).
-
Dans l'éditeur de conception d'un widget, pour tout élément de texte, cliquez sur l'icône Ajouter & Gérer les polices (
-
-
Choisissez parmi les options suivantes :
-
Polices Google. Sélectionnez une police dans la liste des polices Google. La police apparaît dans la liste des polices Google ajoutées ci-dessous. Pour supprimer une police, cliquez sur le X en regard de la police dans la liste. Veuillez noter que la liste peut déjà afficher les polices ajoutées au modèle. Il est recommandé de ne pas supprimer les polices de caractères du modèle.
-
Polices personnalisées. Cliquez sur Télécharger des polices pour télécharger un fichier de polices personnalisées. Plusieurs polices peuvent être sélectionnées en même temps. Pour supprimer une police, cliquez sur le X en regard de la police dans la liste.
-
-
Cliquez sur Terminé.
La police est alors ajoutée à la liste des polices du site.
Remarque
Les polices Adobe n'apparaissent pas dans la liste des polices. Vous devez ajouter la famille de polices au code.
Si vous supprimez une police actuellement utilisée sur le site, le texte reprendra la police par défaut. Vous ne pouvez pas supprimer les polices par défaut.
Pour supprimer les polices personnalisées d'un site :
-
Dans le panneau latéral, cliquez sur Thème, puis sur Texte. Développez la section de texte qui utilise la police personnalisée. À côté de la liste des polices, cliquez sur l'icône Ajouter & Gérer les polices (
-
Cliquez sur le X en regard de la police dans la liste pour la supprimer du site.
Si vous supprimez une police Google, vous devez republier le site pour que le changement prenne effet. Toutefois, si vous supprimez une police téléchargée, il n'est pas nécessaire de la republier pour que la modification prenne effet.
Les couleurs vous permettent de définir une palette de couleurs et de lier les couleurs individuelles à un ou à tous les sites widget avec des paramètres de couleur. La couleur de tout élément lié aux couleurs du thème sera automatiquement mise à jour lorsque la couleur liée sera modifiée dans les paramètres des couleurs du thème. Vous pouvez ainsi modifier rapidement les couleurs, ce qui permet de réduire le temps de conception et d'assurer la cohérence du style de votre site d'une page à l'autre.
Les propriétaires de comptes disposent automatiquement d'autorisations de thème du site et peuvent modifier, afficher et utiliser les couleurs du thème. Les membres de l'équipe et les clients qui ne disposent pas des autorisations de thème du site peuvent afficher et utiliser les couleurs du thème, mais pas les modifier.
Pour configurer les couleurs du thème :
-
Dans le panneau latéral, cliquez sur Thème, puis sélectionnez la flèche à côté de Couleurs.
-
Cliquez sur l'icône Plus en regard de Primaire, ou de tout autre paramètre à définir.
-
Tapez la valeur HEX ou RVB de la couleur souhaitée ou utilisez la pipette pour sélectionner une couleur.
Répétez ces étapes si nécessaire pour chaque couleur de thème. Ensuite, vous devez relier les couleurs à widget sur votre site.
Si le site ou le modèle n'a pas de couleurs déjà connectées, cela peut se faire automatiquement. Le générateur automatique de couleurs de thème analyse votre site et détecte les couleurs les plus fréquemment utilisées. Il génère une liste de couleurs à sélectionner, et une fois sélectionnées, ces couleurs deviennent les couleurs de votre thème et sont connectées à votre site widget.
Pour configurer automatiquement les couleurs du thème :
-
Dans le panneau latéral, cliquez sur Thème, puis sélectionnez la flèche à côté de Couleurs.
-
Cliquez sur Définir les couleurs du thème.
-
Cliquez sur Connecter pour moi ou je le ferai moi-même.
-
(Facultatif) Si vous avez sélectionné Je vais le connecter moi-même, cliquez sur l'icône Plus à côté de chaque couleur dans le panneau de conception et sélectionnez les couleurs individuellement.
-
Parmi les couleurs générées, sélectionnez celles que vous souhaitez utiliser.
-
Cliquez sur Enregistrer & Connect Colors.
Les couleurs s'afficheront dans la section Couleurs du panneau Thème du site.
Pour relier un widget à une couleur de thème :
-
Cliquez sur un widget pour ouvrir son menu de configuration.
-
Ouvrez les paramètres de couleur et sélectionnez l'une des couleurs du thème répertoriées en haut.
-
Répétez l'opération autant que nécessaire pour d'autres éléments.
-
(Facultatif) Si vous souhaitez modifier l'une des couleurs du thème, cliquez sur l'icône en forme de crayon (
) et les paramètres des couleurs du thème s'ouvriront pour que vous puissiez modifier la couleur souhaitée.
Une fois qu'un widget est connecté aux couleurs du thème, il sera automatiquement mis à jour lorsque la couleur du thème lié sera mise à jour.
Pour renommer les couleurs du thème :
-
Dans le panneau latéral, cliquez sur Thème, puis sur Couleurs.
-
hover sur le nom de la couleur souhaitée et cliquez sur l'icône du crayon. (
-
Saisissez un nouveau nom.
Le nouveau nom est automatiquement enregistré et apparaîtra lorsque vous survolerez la couleur dans le sélecteur de couleurs.
Vous pouvez déconnecter tout widget connecté à des couleurs de thème individuelles.
Vous pouvez déconnecter tout widget connecté à des couleurs de thème individuelles.
-
Dans le panneau latéral, cliquez sur Thème.
-
Cliquez sur Couleurs.
-
Cliquez sur l'icône des trois points horizontaux (
) à côté du texte Couleurs et sélectionnez Supprimer les couleurs du thème.
-
Sélectionnez les couleurs à supprimer, puis cliquez sur Supprimer les couleurs sélectionnées.
Cette section vous permet de définir le style des boutons primaires et secondaires de votre site widget. Sélectionnez l'une de nos mises en page de boutons et définissez le texte, la couleur d'arrière-plan, la bordure, l'état hover, les coins et les styles d'ombre.
Pour masquer le bouton Retour en haut de page sur les téléphones portables, activez la case à cocher dans la section Mise en page du site.
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.
Cette section vous permet de définir le thème des lignes et des colonnes en termes de couleur d'arrière-plan et d'espacement par défaut. Les modifications apportées à des lignes ou à des colonnes individuelles remplaceront les paramètres des lignes et des colonnes du thème.
Cette section vous permet de contrôler le style d'arrière-plan de votre site. Choisissez d'utiliser une couleur ou une image comme arrière-plan. Choisissez une image dans la galerie photo ou importez vos propres images pour réaliser un site Web au design unique. Ces modifications sont également prises en compte sur ordinateur et sur tablette.
Remarque
Pour plus d'informations sur les arrière-plans des éléments du site, voir Arrière-plans des éléments.
Pour personnaliser le fond de votre site :
-
Dans le panneau de gauche, cliquez sur Thème, puis sur la flèche située à côté de Arrière-plans.
-
Cliquez sur Arrière-plan par défaut.
-
Cliquez sur l'onglet Couleur ou Image , sélectionnez une couleur pour l'arrière-plan du site ou téléchargez une image.
-
(Facultatif) Cliquez sur l'option Ne pas optimiser cette image pour empêcher l'optimisation (ce paramètre apparaît après la sélection d'une image).
Pour personnaliser le fond de chaque page :
-
Dans le panneau de gauche, cliquez sur Thème, puis sur la flèche située à côté de Arrière-plans.
-
Cliquez sur Arrière-plan par page.
-
Sélectionnez une page dans le menu déroulant, puis choisissez une image ou une couleur pour cette page.
-
(Facultatif) Cliquez sur l'option Ne pas optimiser cette image pour empêcher l'optimisation (ce paramètre apparaît après la sélection d'une image).
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.
Contrôlez la navigation liée à la disposition du site sur ordinateur, tablette et mobile. Pour la version ordinateur, vous pouvez choisir parmi deux largeurs : 960 px ou 1200 px.
La modification de la disposition de la navigation affecte souvent le comportement de votre en-tête et parfois le reste de votre site. Si votre en-tête semble soudainement incorrect après que vous ayez modifié la disposition, essayez une autre disposition.
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.
Vous pouvez changer la présentation de votre site desktop en une présentation à barres latérales. La barre latérale affiche l'en-tête sur le côté du site (à gauche ou à droite) et constitue un excellent moyen de donner un aspect unique à votre site ( tool ). L'en-tête de la barre latérale fait également office d'en-tête collant, de sorte qu'il sera toujours affiché à l'écran. Vous pouvez également ajouter widget dans la barre latérale, comme n'importe quelle autre ligne.
Remarque
-
Lorsque vous passez d'une présentation traditionnelle du site à une présentation avec barres latérales, l'en-tête conserve le logo, mais toutes les pages widget que vous aviez sont supprimées (comme lorsque vous passez de la présentation de l'en-tête à la présentation de l'en-tête supérieur). La couleur d'arrière-plan sera modifiée en fonction de la mise en page sélectionnée.
-
L'en-tête réduit n'est pas disponible pour la navigation de barre latérale. La barre latérale est toujours affichée sur le site, quel que soit le défilement de ce dernier.
-
Sur les écrans dont la largeur est inférieure à 1 090 pixels, le contenu de la barre latérale sera masqué, à l'exception de la première image, et une icône de menu extensible sera affichée à la place. Vous pouvez personnaliser la couleur du bouton de déclenchement qui s'affiche dans l'éditeur de design.
Pour passer à la mise en page avec barre latérale pour votre site :
-
Dans le panneau de gauche, cliquez sur Thème, puis sur la flèche située à côté de Mise en page du site.
-
Sélectionnez la disposition de la barre latérale, vous pouvez ajouter des rangées, faire glisser et déposer widget dans l'en-tête de la barre latérale et la personnaliser.
Pour modifier le design de l'en-tête de la barre latérale, hover se trouve au-dessus de la barre latérale, puis cliquez sur Barre latérale dans le coin supérieur droit. Vous pouvez choisir l'une des multiples dispositions d'en-tête de barre latérale à appliquer à votre site, l'afficher à gauche ou à droite de l'écran, définir sa largeur, et bien plus encore.