Réaliser des changements de style

Pour ouvrir le panneau Styles du site, cliquez sur l’icône en forme de pinceau en haut à droite pendant que vous modifiez une page.

Cliquez ensuite sur l’élément du site que vous souhaitez modifier, par exemple les polices ou les couleurs. Ce guide contient des informations plus détaillées sur chaque panneau.

Pour fermer le panneau Styles du site, double-cliquez sur l’aperçu de la page, cliquez sur l’icône en forme de pinceau ou cliquez sur Fermer en haut du panneau. Vos modifications de style resteront intactes jusqu’à leur enregistrement ou leur annulation.

Avec le panneau Styles du site fermé, vous pouvez effectuer des modifications plus précises en modifiant une section spécifique. Pour personnaliser le style d’une section, survolez la section avec votre souris, puis cliquez sur Modifier la section ou sur l’icône crayon. Les styles de section remplacent les styles de l’ensemble du site.

Ici, vous pouvez également choisir différentes dispositions pour vos sections Disposition automatique, Collection et Galerie. Si vous modifiez le style d’une section Collection, ces changements seront appliqués à toutes les dispositions de ce type. Prenons un exemple : si vous disposez de deux sections Blog qui utilisent une disposition de type mosaïque, les modifications apportées au style seront appliquées aux deux sections.

Pour ouvrir le panneau Styles du site :

1. Ouvrez le panneau Pages.
2. Cliquez sur la page à laquelle vous souhaitez appliquer un style. Pour les éléments à l’échelle du site comme le pied de page, ouvrez n’importe quelle page. Pour les éléments de collection, ouvrez n’importe quel élément du type concerné (un billet de blog ou un élément sur le produit, par exemple).
3. Cliquez sur Site web dans le coin supérieur gauche du panneau Pages, sur Design, puis sur Styles du site.
4. Dans le panneau Styles du site, cliquez sur un ajustement pour apporter des modifications.

Vous ne pouvez pas modifier le site tant que le panneau Styles du site est ouvert. Pour ajouter ou supprimer des contenus, fermez le panneau Styles du site et ouvrez le panneau Pages.

Le panneau Styles du site affiche les options de la page sur laquelle vous vous trouvez. Toute modification apportée à ces ajustements s’appliquera à toutes les pages de ce type sur votre site. Par exemple, si vous personnalisez le style d’une page Boutique, la même modification s’appliquera à toutes les pages Boutique de votre site.

Astuce : le style de chaque page de couverture peut être modifié séparément.

Dans le panneau d’aperçu, cliquez dans une zone de la page pour afficher uniquement les ajustements de style disponibles pour cette zone et masquer les autres ajustements. La zone de surlignage du style apparaît autour de l’élément sur lequel vous avez cliqué. Affichez à nouveau l’ensemble des options en cliquant sur Tout afficher. Ce raccourci est disponible dans la plupart des templates et pour la plupart des zones de votre site.

Voici à quoi cela pourrait ressembler avec le template Brine :

Pour certains ajustements, vous pouvez faire glisser l'élément dans l'aperçu pour ajuster les paramètres :

Le fonctionnement des changements de style dans l’application diffère selon la version de votre site.

Styles de la version 7.1 dans l’application

À l'aide des Styles du site, vous pouvez appliquer des modifications de style sur votre site avec un simple clic, y compris des modifications de police, de couleur et d'espacement. Les modifications que vous apportez dans les Styles de site s'appliquent généralement à l'ensemble du site, mais vous pouvez apporter des modifications plus précises en personnalisant le style de certaines sections ou zones de texte.

Pour réaliser des changements de style :

1. Appuyez sur n'importe quelle page de votre site, puis sur Modifier ou sur l'icône crayon.
2. Appuyez sur l’icône en forme de pinceau pour ouvrir le panneau Styles du site. 
3. Appuyez sur l’aspect du site à personnaliser, par exemple les polices ou les couleurs.
4. Utilisez les options qui figurent dans le panneau pour personnaliser cette zone. 
   • Dans Polices, appuyez sur Sans empattement, Avec empattement ou Mixte pour consulter les packs de polices correspondants à chaque type. Appuyez sur le nom d’une police pour modifier la taille de base.
   • Dans Couleurs, choisissez Accent, Clair et Foncé pour nuancer chaque thème de couleurs. 

Astuce : vous pouvez également ouvrir le panneau Styles du site à partir de l’onglet Paramètres.

Pour personnaliser le style d’une section :

1. Ouvrez la page que vous souhaitez modifier, puis appuyez sur Modifier ou sur l’icône crayon.
2. Appuyez sur une section que vous souhaitez personnaliser.
3. Appuyez sur l’icône crayon dans la barre d’outils de la section.
4. Appuyez sur Format, Arrière-plan ou Couleurs, puis choisissez un nouveau style.
5. Appuyez sur Terminé ou sur ✓, puis sur Enregistrer les modifications.

Styles de la version 7.0 dans l’application

Effectuez des modifications de style dans le panneau Styles du site :

1. Appuyez sur Pages, puis sur la page à laquelle vous souhaitez que les modifications soient appliquées. Le panneau Styles du site affiche alors les options correspondant à la page que vous modifiez ainsi qu’un aperçu de vos changements. Si vous modifiez une fonctionnalité qui concerne l’ensemble du site, comme les menus de navigation ou un pied de page, vous pouvez ouvrir n’importe quelle page.
2. Appuyez sur la barre d’aperçu pour réduire l’aperçu de la page.
3. Appuyez sur Paramètres, puis sur Paramètres du site, puis sur Styles du site.
4. Le panneau Styles du site affiche la liste des ajustements de style. Appuyez sur un ajustement pour apporter des modifications.

Pour modifier une police, ouvrez le panneau Styles du site, puis cliquez sur Polices.

Dans le panneau Polices, vous pouvez choisir un pack de polices à appliquer à l’ensemble du texte de votre site ou modifier la police qui s’applique à des types de texte spécifiques. Pour en savoir plus, consultez l’article Modifier les polices de caractères.

Dans n’importe quelle zone de texte, vous pouvez également changer le format du texte en titre, texte de paragraphe ou texte monospace, ou encore ajouter un lien.

• Les liens sont toujours soulignés.
• Lorsque les visiteurs cliquent sur un lien, des pointillés apparaissent autour afin de rendre votre site plus accessible à tous.

Pour modifier les polices et les tailles, utilisez les ajustements Typographie ou Police dans le panneau Styles de site. Pour en savoir plus, consultez l’article Modifier les polices.

Pour modifier les couleurs de votre site, ouvrez le panneau Styles du site, puis cliquez sur Couleurs.

Grâce aux palettes de couleurs sélectionnées, vous pouvez modifier simultanément toutes les couleurs de votre site ou personnaliser individuellement les couleurs de chaque élément du site. Pour en savoir plus sur la modification des couleurs d’un site et d’une section, consultez l’article Modifier les couleurs. Pour passer en revue les bonnes pratiques en matière d’accessibilité, consultez l’article Créer du contenu accessible pour un site.

Pour modifier les couleurs, sélectionnez n’importe quel ajustement Styles de site doté d’un cercle de couleur à côté de son nom. Pour en savoir plus, consultez l’article Modifier les couleurs. Pour passer en revue les bonnes pratiques en matière d’accessibilité, consultez l’article Créer du contenu accessible pour un site.

Pour modifier l’en-tête de votre site, cliquez sur Modifier en haut à gauche de l’aperçu de votre site, puis survolez l’en-tête avec votre souris et cliquez sur Modifier l’en-tête du site. Utilisez les options de l’éditeur pour personnaliser le titre ou le logo de votre site et les liens de navigation. Vous pouvez également ajouter une icône panier, des icônes sociales et un bouton d’appel à l’action.

Pour obtenir des informations plus détaillées, consultez l’article Créer un en-tête de site.

Le style de l’en-tête de votre site dépend de votre template. Pour en savoir plus sur les paramètres d’en-tête disponibles, consultez le guide de votre template.

Certains templates proposent des fonctionnalités spécifiques pour les en-têtes. Pour obtenir la liste des fonctionnalités disponibles, consultez l’article Créer un en-tête de site.

Pour personnaliser le style du pied de page :

1. En haut à gauche, cliquez sur Modifier.
2. Survolez le pied de page avec votre souris, puis cliquez sur Modifier le pied de page.
3. Cliquez sur la Modifier la section ou sur l’icône en forme de crayon pour effectuer des changements de style.

Pour en savoir plus, consultez l’article Modifier les pieds de page.

Le style du pied de page de votre site dépend de votre template. Pour en savoir plus sur les paramètres de pied de page disponibles, consultez le guide de votre template.

Pour en savoir plus sur les différentes options de pied de page disponibles par template, consultez l’article Modifier les pieds de page.

Pour modifier l’espacement de votre site, ouvrez le panneau Styles du site, puis cliquez sur Espacement.

Ces ajustements modifient l'espacement dans toutes les pages de votre site :

• Largeur de la page (max.) - Modifiez la largeur maximale possible des pages de votre site. La largeur réelle dépend de votre navigateur et de votre appareil. Cet ajustement n’affecte pas l’espacement dans l’en-tête de votre site.
• Marge du site : modifiez la largeur de la marge de chaque côté de votre site. Selon la valeur du paramètre Largeur de la page, cet ajustement peut ne pas avoir d’effet visible sur le contenu de votre page. Cet ajustement affecte l’ensemble de votre site, y compris l’en-tête. Dans les sections de galerie, la marge intérieure en haut et en bas de la page change également en fonction de la largeur de la marge.

Vous pouvez modifier l’espacement de chaque section à l’aide de l’éditeur de section.

De nombreux ajustements de style liés à la taille, comme la marge intérieure, l’espacement, la largeur et les bordures, se trouvent sous le titre Tailles et valeurs. En fonction de votre template, ils peuvent également être disponibles dans d’autres sections.

Pour modifier une taille, survolez un ajustement de taille avec votre souris, puis utilisez le curseur ou saisissez un chiffre dans le champ.

Vous pouvez créer une image de bannière sur n’importe quelle page en ajoutant une section de bloc avec une image d’arrière-plan en haut de la page.

• Si vous ne voulez ajouter qu’une image à votre bannière, commencez par une section vide.
• Tout bloc ajouté à la section se superpose sur la bannière.
• Pour modifier la hauteur, cliquez sur Modifier la section ou sur l’icône en forme de crayon.
• Lors du choix d’une image d’arrière-plan, suivez nos conseils relatifs au format d’image.

Pour en savoir plus, consultez l’article Ajouter des images de bannière.

La plupart des templates prennent en charge les bannières de pages, que vous pouvez ajouter dans les paramètres de votre page.

• Pour découvrir toutes les options de bannière par famille de templates, consultez l’article Ajouter des images de bannière.
• Pour en savoir plus sur les paramètres de bannière spécifiques à votre site, consultez le guide de votre template.

Pour changer l’arrière-plan :

• Utilisez le panneau Couleurs pour changer l’arrière-plan du site.
• Utilisez l’éditeur de section pour modifier la couleur de l’arrière-plan d’une section ou bien y ajouter une image ou vidéo d’arrière-plan. Cela inclut les sections des pieds de page.
• Lorsqu’une section a une image d’arrière‑plan définie sur Insertion, vous pouvez définir la couleur du contour de l’insertion.
• Lorsqu’il est transparent, l’arrière-plan de l’en-tête est de la même couleur que celui de la section du haut. Si vous voulez définir un thème de couleurs différent pour votre en-tête, désactivez la transparence dans l’éditeur d’en-tête.

Vous pouvez définir la couleur d'arrière-plan de votre zone de contenu principale dans Styles de site. Certains templates permettent également d'ajouter une couleur d'arrière-plan à l'en-tête, au pied de page et à d'autres espaces autour de votre contenu. Pour en savoir plus, consultez la page Modifier les couleurs.

Certains templates disposent d’une image d’arrière-plan ajoutée à partir du panneau Styles du site pour l’ensemble du site ou pour des pages spécifiques. Pour ajouter une image de ce type, cliquez sur l’ajustement Image d’arrière-plan ou sur l’icône de l’image correspondante dans le panneau Styles du site. Vous pouvez charger votre propre image ou rechercher et ajouter une image d’archive. Pour en savoir plus, consultez l’article Ajouter des images d’arrière-plan à l’ensemble du site dans la version 7.0.

Pour modifier le style de votre page Boutique principale, ouvrez les styles de section de votre boutique. Vous pouvez explorer les options pour modifier la mise en forme, l’arrière-plan et les couleurs des sections.

Pour personnaliser le style des produits, ouvrez les styles de site de la page Informations sur le produit. Ces paramètres affectent les pages individuelles dʼinformations du produit. Notez que certaines de ces options ne s’appliquent qu’aux produits comportant plusieurs images. Certaines modifications peuvent donc ne pas apparaître si votre produit n’en comporte qu’une.

Pour en savoir plus, consultez l’article Personnaliser les pages Boutique.

Les options de style de vos produits dépendent du template de votre site et elles sont différentes si votre template utilise une page Boutique classique, avancée ou unique.

Pour obtenir la liste détaillée des options de style des produits, consultez l’article Personnaliser les pages Boutique.

Vous pouvez masquer certaines fonctionnalités de design telles que les icônes sociales, les bannières et les pieds de page en supprimant le bloc ou la section. Ouvrez l’éditeur de section pour parcourir les différentes options de cette section de la page.

Dans certains templates, vous pouvez masquer des fonctionnalités de design comme les titres de page, les icônes sociales, les bordures, les bannières et les pieds de page. Ces ajustements se trouvent généralement dans la section Options du panneau Styles du site.