Personnaliser l'apparence de votre site web

Le gabarit de votre site arrive avec des couleurs et une police préconfigurées. Adaptez-les à l'identité visuelle de votre organisation sans aucune connaissance technique, puis allez plus loin avec du CSS si vous le souhaitez. Toutes ces options se trouvent dans la tuile Personnalisation de votre site.

Dans cet article

• Choisir les couleurs et la police
• Ajuster les styles de base
• Ajouter du CSS ou du JavaScript
• Changer la couleur d'arrière-plan
• Cibler une page ou une ligne avec des classes CSS
• Personnaliser une seule page

Choisir les couleurs et la police

1. Dans Sites web, ouvrez votre site, puis cliquez sur la tuile Personnalisation. Le sous-menu Guidé s'affiche.
2. Vérifiez que l'interrupteur Actif est activé.
3. Sous Les couleurs de votre site, saisissez votre Couleur principale et votre Couleur secondaire. Elles habillent les boutons, les titres et les éléments colorés de l'ensemble du site.
4. Sous La police de votre site, choisissez la Police de caractère. L'Aperçu montre le rendu du texte en gras et en normal.
5. Cliquez sur Enregistrer.

Ajuster les styles de base

Le sous-menu Basique accepte des déclarations CSS pour les éléments de base de vos pages : body (le corps de la page), les titres h1 à h4, les liens (a:link, a:visited, a:active et a:hover au survol) et les boutons (.btn et btn:hover). Saisissez par exemple color: #1F6FB5; dans le champ h2 pour colorer tous vos sous-titres, puis cliquez sur Enregistrer.

Ajouter du CSS ou du JavaScript

• Avancée : le champ CSS personnalisé accepte du CSS complet. Vous pouvez aussi téléverser un fichier sous Téléversement d'un fichier CSS. Ce CSS est chargé en dernier sur la page : il remplace donc les styles par défaut du gabarit.
• JS : ce sous-menu accepte du code JavaScript exécuté sur toutes les pages du site.

Pour des exemples prêts à copier (taille du logo, couleur du menu, image de fond, etc.), consultez l'article Modifier l'apparence de votre site web avec du CSS personnalisé.

Changer la couleur d'arrière-plan

Toute la page

Dans la tuile Personnalisation, ouvrez le sous-menu Basique. Dans le champ body, saisissez background-color: #F5F5F5; en remplaçant le code par celui de votre couleur, puis cliquez sur Enregistrer. Le fond blanc par défaut est alors remplacé sur tout le site.

Une seule ligne

Une couleur de fond sur une ligne crée un effet de bande. Appliquez-la sur la page maîtresse pour toutes les pages qui s'y rattachent, ou sur une seule page.

1. Ouvrez la page ou la page maîtresse, dans l'onglet Structure.
2. Survolez la ligne à modifier, puis cliquez sur Éditer le style de la ligne, dans son coin supérieur droit.
3. Dans la fenêtre Style de la ligne, saisissez le nom anglais (white, black, etc.) ou le code hexadécimal de votre couleur dans Couleur de fond.
4. Cliquez sur Enregistrer.

Cibler une page ou une ligne avec des classes CSS

Les classes CSS permettent à votre CSS personnalisé de viser un endroit précis du site.

• Classe d'une page : dans l'onglet Configuration d'une page ou d'une page maîtresse, section Présentation graphique, saisissez une ou plusieurs classes (séparées par une espace) dans Classe CSS de la page. Sur une page maîtresse, la classe s'applique à toutes les pages qui s'y rattachent.
• Classe d'une ligne : dans la fenêtre Style de la ligne, saisissez la classe dans Classe CSS. Chaque ligne porte déjà la classe line. Ajoutez un préfixe comme line- (par exemple line-footer) pour éviter les conflits avec les classes existantes du gabarit.

Personnaliser une seule page

Une page peut avoir ses propres couleurs et sa propre police, sans changer le reste du site.

1. Dans la tuile Pages, ouvrez la page à modifier.
2. Ouvrez l'onglet Personnalisation et cochez Personnaliser ma page web.
3. Choisissez la couleur et la police de cette page, puis cliquez sur Enregistrer.

Cliquez sur Visiter mon site à tout moment pour voir le résultat.