Le panneau Site Theme vous permet d'apporter des changements qui affectent l'ensemble de votre site. Depuis le panneau de design, vous pouvez personnaliser le texte, les boutons, les images, l'arrière-plan et les widgets de navigation. Vous réalisez ainsi des modifications visuelles d'ampleur, rapidement et efficacement, ce qui réduit le temps de conception et préserve la cohérence du style sur toutes vos pages.
Pour ouvrir le panneau Site Theme, dans le panneau latéral, cliquez sur Theme. À l'ouverture du panneau Site Theme, le canevas est automatiquement réduit à 50 % afin de rester entièrement visible pendant que vous ajustez les réglages du thème. Pour revenir à un affichage à 100 %, cliquez sur la liste déroulante de la barre supérieure et sélectionnez 100 %. Le zoom avant ou arrière est également disponible en mode aperçu.
Remarque : Les modifications apportées à des widgets ou à des pages spécifiques remplacent les réglages définis dans le panneau Site Theme. Nous vous recommandons de choisir d'abord un thème pour le site, puis de personnaliser les parties que vous souhaitez mettre en avant ou différencier du reste.
Texte du thème
Cette section vous permet de gérer le texte de votre site, aussi bien le texte courant que les titres de toutes tailles (H1 à H6). Modifiez le style et l'apparence du texte sur l'ensemble du site : vous pouvez changer la police, la taille et définir des réglages pour le texte normal, les liens et les titres.
Toute modification de la taille, du style ou de la couleur de police s'applique aux futurs paragraphes et aux autres types de texte, ainsi qu'aux widgets déjà reliés au Site Text qui n'ont pas été modifiés manuellement.
Configurer le texte du thème
Pour configurer le texte du thème :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur la flèche à côté de Texte.
- Cliquez sur le type de texte souhaité. Les options sont les suivantes :
- DFLT. Définit le thème de tout le texte des widgets qui ne sont pas associés à un titre ni au style de paragraphe, comme le widget de navigation. Vous pouvez aussi y régler la couleur et le soulignement des liens, ainsi que personnaliser leur apparence selon leur état : Default Link State, Link On-hover et Lien cliqué.
- PAR. Définit le thème du widget de texte.
- Les titres et sous-titres H1 à H6.
- Pour chaque type de texte, vous pouvez modifier :
- La police
- La taille de police. Elle se règle séparément pour ordinateur/tablette et pour mobile.
- La couleur de police
- Le format de police
- Le sens du texte
- La graisse de police
- L'interligne
- L'espacement des lettres
- Les majuscules (All caps)
- L'ombre du texte
Les modifications effectuées dans la zone Theme text s'appliquent à tout le texte du site qui n'est pas déjà remplacé par un style personnalisé sur un élément précis. Dès que vous modifiez manuellement un élément, cela remplace le thème du site, et les changements ultérieurs du thème n'affecteront plus le style de cet élément. Cela vaut pour chaque réglage de style d'un élément donné. Par exemple, si vous avez uniquement changé la couleur du texte d'un widget H1 précis sur le canevas :
- puis modifié la taille de police des H1 dans le thème du site, la taille de police de ce widget H1 changera malgré tout.
- puis modifié la couleur des H1 dans le thème du site, le H1 déjà modifié ne prendra pas cette nouvelle couleur.
Mettre à jour le texte du thème
Vous pouvez mettre à jour le texte du thème dans les réglages de texte en cliquant sur Theme, puis en sélectionnant Texte. Vous pouvez aussi cliquer sur un widget de texte pour ouvrir le menu contextuel, cliquer sur la liste déroulante de sélection des titres et choisir Update theme. Les réglages de texte du thème s'ouvrent alors et vous pouvez y apporter vos modifications.
Bibliothèque de polices
L'éditeur propose de nombreuses polices. Définissez une police pour le texte du thème ou variez votre texte en utilisant plusieurs polices sur votre site.
Pour afficher les polices disponibles et voir leur rendu :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Texte.
- Choisissez une police dans le menu déroulant Font.
Couleurs du thème
Les couleurs vous permettent de définir une palette et de relier chaque couleur à un ou plusieurs widgets disposant de réglages de couleur. La couleur d'un élément relié aux couleurs du thème se met à jour automatiquement dès que la couleur associée est modifiée dans les réglages. Vous changez ainsi de couleur rapidement, ce qui réduit le temps de conception et assure la cohérence du style sur toutes vos pages.
Configurer les couleurs du thème
Vous pouvez configurer jusqu'à 30 couleurs de thème.
Pour configurer les couleurs du thème :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur la flèche à côté de Couleurs.
- Cliquez sur l'icône plus à côté de Primary, ou du réglage que vous souhaitez définir.
- Saisissez la valeur HEX ou RGB de la couleur souhaitée, ou utilisez la pipette pour la sélectionner.
- (Facultatif) Vous pouvez générer des couleurs à partir de votre logo. Ouvrez la couleur primaire, puis l'onglet Marque et cliquez sur + Add Logo (si vous avez ajouté un logo à vos Business Info dans la Content Library, il apparaît ici). Une fois le logo ajouté, une série de couleurs est générée. Pour retirer ou remplacer le logo, cliquez sur l'icône à trois points à côté de celui-ci, puis sélectionnez Supprimer ou Remplacer l'image.
Répétez ces étapes pour chaque couleur de thème si nécessaire. Vous devez ensuite relier les couleurs aux widgets de votre site (voir « Relier les couleurs du thème aux widgets » ci-dessous).
Configurer automatiquement les couleurs du thème
Si aucune couleur n'est encore reliée au site ou au modèle, vous pouvez le faire automatiquement. Le générateur automatique de couleurs analyse votre site et détecte les couleurs les plus utilisées. Il propose une liste de couleurs : une fois sélectionnées, elles deviennent les couleurs de votre thème et sont reliées aux widgets de votre site.
Pour configurer automatiquement les couleurs du thème :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur la flèche à côté de Couleurs.
- Cliquez sur Set Theme Colors.
- Cliquez sur Connect it for me ou sur I'll connect it myself.
- (Facultatif) Si vous avez choisi I'll connect it myself, cliquez sur l'icône plus à côté de chaque couleur dans le panneau de design et sélectionnez les couleurs une à une.
- Choisissez les couleurs générées que vous souhaitez utiliser.
- Cliquez sur Save & Connect Colors.
Les couleurs apparaissent alors dans la section Couleurs du panneau Site Theme.
Relier les couleurs du thème aux widgets
Pour relier un widget à une couleur de thème :
- Cliquez sur un widget pour ouvrir son menu de réglages.
- Ouvrez les réglages de couleur et sélectionnez l'une des couleurs de thème affichées en haut.
- Répétez l'opération pour les autres éléments si nécessaire.
- (Facultatif) Pour modifier une couleur de thème, cliquez sur l'icône en forme de crayon : les réglages des couleurs de thème s'ouvrent et vous pouvez y modifier la couleur voulue.
Une fois un widget relié aux couleurs du thème, il se met à jour automatiquement lorsque la couleur associée est modifiée.
Renommer les couleurs du thème
Pour renommer les couleurs du thème :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Couleurs.
- Survolez le nom de la couleur voulue et cliquez sur l'icône en forme de crayon.
- Saisissez un nouveau nom.
Le nouveau nom est enregistré automatiquement et s'affiche au survol de la couleur dans le sélecteur de couleurs.
Supprimer des couleurs du thème
Vous pouvez dissocier tout widget relié à une couleur de thème.
Pour dissocier un widget :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Couleurs.
- Cliquez sur l'icône à trois points horizontaux à côté du libellé Couleurs, puis sélectionnez Remove theme colors.
- Choisissez les couleurs à supprimer, puis cliquez sur Remove Selected Colors.
Boutons du site
Cette section vous permet de définir le style des widgets de boutons principaux et secondaires de votre site. Choisissez une disposition de bouton, puis réglez le texte, la couleur de fond, la bordure, l'état de survol, les coins et les ombres.
Pour masquer le bouton Back to Top sur mobile, activez l'option dans la section Site Layout.
Images du thème
Cette section vous permet de gérer le style des widgets d'image de votre site. Vous pouvez modifier la disposition des images et ajouter ou modifier le style de bordure, les coins arrondis ou les effets d'ombre.
Lignes et colonnes du thème
Cette section vous permet de définir le thème des lignes et des colonnes en matière de couleur de fond et d'espacement par défaut. Les modifications apportées à une ligne ou une colonne précise remplacent les réglages du thème pour cet élément.
Arrière-plan du thème
Cette section vous permet de gérer le style d'arrière-plan de votre site. Choisissez une couleur ou une image comme arrière-plan. Sélectionnez une image personnalisée dans la galerie de photos ou importez vos propres images pour un design unique. Les modifications s'appliquent aussi à l'ordinateur et à la tablette.
Remarque : Pour en savoir plus sur les arrière-plans des éléments du site, consultez « Arrière-plans des éléments ».
Personnaliser l'arrière-plan du site
Pour personnaliser l'arrière-plan de votre site :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur la flèche à côté d'Arrière-plans.
- Cliquez sur Arrière-plan par défaut.
- Cliquez sur l'onglet Color ou Image, puis choisissez une couleur pour l'arrière-plan du site ou importez une image.
- (Facultatif) Cliquez sur l'option Do not optimize this image pour empêcher l'optimisation (ce réglage apparaît une fois qu'une image est sélectionnée).
Personnaliser l'arrière-plan par page
Pour personnaliser l'arrière-plan page par page :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur la flèche à côté d'Arrière-plans.
- Cliquez sur Arrière-plan par page.
- Choisissez une page dans le menu déroulant, puis sélectionnez une image ou une couleur pour cette page.
- (Facultatif) Cliquez sur l'option Do not optimize this image pour empêcher l'optimisation (ce réglage apparaît une fois qu'une image est sélectionnée).
Largeur et espacement (Editor 2.0)
Remarque : Ces informations concernent spécifiquement Editor 2.0, anciennement appelé All-Flex Editor.
Depuis le panneau Theme, vous pouvez ajuster la mise en page de votre site, notamment la largeur de page et l'espacement par défaut des sections, des colonnes et des colonnes internes.
Pour accéder aux réglages de mise en page :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Largeur & Espacement.
- Cliquez sur la section souhaitée pour la déplier.
Largeur de page
Vous pouvez définir la largeur de page par défaut, sur ordinateur, pour les sections qui ne sont pas en pleine largeur (auparavant appelée « full bleed »). Ajuster cette largeur par défaut permet d'optimiser la lisibilité et le design du site selon le contexte d'affichage. Certains sites sont par exemple affichés sur un écran de télévision ou sur des écrans plus grands qu'un ordinateur classique.
Pour définir la largeur de page par défaut :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Largeur & Espacement.
- Cliquez pour déplier la section Page Width.
- Sélectionnez 1200 px, 1440 px ou Custom. Si vous choisissez Custom, utilisez le curseur pour définir la largeur en pixels ou saisissez une valeur dans le champ. La valeur personnalisée peut être comprise entre 960 px et 1920 px, ou entre 50 vw et 100 vw.
Activez l'option Pleine largeur si vous souhaitez que toutes les nouvelles sections soient en pleine largeur par défaut.
Espacement des sections
Vous pouvez définir la marge intérieure par défaut des nouvelles sections vides ajoutées à votre site. Si vous le souhaitez, vous pouvez remplacer l'espacement de section du thème dans le panneau de design de la section.
Points importants :
- Les sections ajoutées à l'en-tête conservent l'espacement d'en-tête par défaut, quel que soit l'espacement de section défini dans le thème.
- Les sections créées avant la sortie de cette fonctionnalité (5 août 2025) n'héritent pas automatiquement de la marge intérieure Espacement des sections ; vous pouvez toutefois les reconnecter en ouvrant le panneau de design de la section et en cliquant sur Reset to theme spacing dans le volet Espacement des sections.
Pour définir l'espacement des sections :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Largeur & Espacement.
- Cliquez pour déplier la section Espacement des sections.
- Cliquez dans les champs correspondants pour modifier les valeurs de marge intérieure. Les valeurs horizontales sont liées : si vous en modifiez une, l'autre se met à jour automatiquement. Vous pouvez les dissocier en cliquant sur l'icône de lien. Notez que l'espacement des sections se définit par point de rupture.
Si nécessaire, cliquez sur Reset padding pour remettre toutes les valeurs à zéro.
Si vous modifiez la marge intérieure d'une section précise, cela remplace les réglages du thème. Vous pouvez rétablir les réglages Espacement des sections du thème en ouvrant le panneau de design de la section et en cliquant sur Reset to theme spacing dans le volet Espacement des sections.
Espacement des colonnes
Vous pouvez définir la marge intérieure par défaut des nouvelles colonnes vides ajoutées à votre site. Si vous le souhaitez, vous pouvez remplacer l'espacement du thème dans le panneau de design de la colonne.
Pour définir l'espacement par défaut des colonnes :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Largeur & Espacement.
- Cliquez pour déplier la section Espacement des colonnes.
- Cliquez dans les champs correspondants pour modifier les valeurs de marge intérieure. Les valeurs verticales sont liées : si vous en modifiez une, l'autre se met à jour automatiquement. Vous pouvez les dissocier en cliquant sur l'icône de lien.
Espacement des colonnes internes
Vous pouvez définir la marge intérieure par défaut des nouvelles colonnes internes ajoutées à votre site. Si vous le souhaitez, vous pouvez remplacer l'espacement du thème dans le panneau de design de la colonne interne.
Pour définir l'espacement par défaut des colonnes internes :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur Largeur & Espacement.
- Cliquez pour déplier la section Espacement interne.
- Cliquez dans les champs correspondants pour modifier les valeurs de marge intérieure. Les valeurs verticales sont liées : si vous en modifiez une, l'autre se met à jour automatiquement. Vous pouvez les dissocier en cliquant sur l'icône de lien.
Mise en page du site
Gérez la navigation et la mise en page du site sur ordinateur, tablette et mobile. Pour la version ordinateur, vous avez le choix entre deux largeurs : 960 px ou 1200 px.
Modifier la disposition de votre navigation influe souvent sur le comportement de votre en-tête, et parfois sur le reste du site. Si votre en-tête s'affiche mal après un changement de disposition, essayez-en une autre.
Disposition en barre latérale pour ordinateur
Vous pouvez passer votre mise en page ordinateur à une disposition en barre latérale. Celle-ci 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. L'en-tête en barre latérale se comporte aussi comme un en-tête fixe : il reste toujours visible à l'écran, et vous pouvez y ajouter des widgets comme dans n'importe quelle autre ligne.
Remarque :
- Lorsque vous passez d'une mise en page classique à une barre latérale, l'en-tête conserve le logo, mais tous les widgets que vous aviez sont supprimés (comme lors d'un changement de disposition d'en-tête en haut de page). La couleur de fond est adaptée à la disposition choisie.
- L'en-tête rétractable n'est pas disponible pour la navigation en barre latérale. La barre latérale reste toujours affichée, quel que soit le défilement du site.
- Sur les écrans de moins de 1090 pixels de large, le contenu de la barre latérale, à l'exception de la première image, est masqué et une icône de menu déployable s'affiche. Vous pouvez personnaliser la couleur du bouton déclencheur dans l'éditeur de design.
Pour passer votre mise en page à une barre latérale :
- Dans le panneau latéral, cliquez sur Theme.
- Cliquez sur la flèche à côté de Site Layout.
- Sélectionnez la disposition en barre latérale. Vous pouvez y ajouter des lignes, glisser-déposer des widgets dans l'en-tête latéral et le personnaliser.
Pour modifier le design de l'en-tête latéral, survolez la barre latérale et cliquez sur Sidebar dans le coin supérieur droit. Vous pouvez choisir l'une des différentes dispositions d'en-tête latéral à appliquer à votre site, l'afficher à gauche ou à droite de l'écran, définir sa largeur, et bien plus.
Commentaires
0 commentaire
Cet article n'accepte pas de commentaires.