Aller au contenu principal

Apparence

La page Apparence vous permet de personnaliser l'aspect général de votre site web d'église. Des couleurs et polices à l'espacement et au CSS personnalisé, vous pouvez contrôler chaque aspect visuel de votre site depuis un seul endroit.

Avant de commencer

  • Complétez la Configuration initiale de votre site web
  • Ayez votre logo d'église prêt au format PNG avec un fond transparent et un rapport d'aspect de 4:1
  • Connaissez les couleurs de marque de votre église (valeurs hexadécimales) si vous disposez d'une charte graphique existante

Accéder aux paramètres d'apparence​

  1. Dans B1 Admin, cliquez sur Site web dans le menu de gauche.
  2. Cliquez sur l'onglet Apparence en haut de la vue Pages du site web.
  3. La page Styles du site se charge avec un aperçu en direct de votre site web à gauche et les options de Paramètres de style à droite.

Palette de couleurs​

  1. Cliquez sur Palette de couleurs dans le panneau Paramètres de style.
  2. Vous verrez les Couleurs de base (tons clairs, accent et foncés) et les Couleurs sémantiques (Primaire, Secondaire, Succès, Avertissement et Erreur).
  3. Cliquez sur n'importe quel échantillon de couleur pour ouvrir le sélecteur de couleurs. Faites glisser le sélecteur ou saisissez une valeur hexadécimale pour choisir votre couleur.
  4. L'Aperçu des combinaisons de couleurs montre comment vos couleurs sélectionnées fonctionnent ensemble.
  5. Utilisez les Palettes suggérées pour appliquer rapidement un jeu de couleurs prédéfini.
  6. Cliquez sur Enregistrer lorsque vous êtes satisfait.

Typographie​

  1. Cliquez sur Paramètres de typographie dans le panneau Paramètres de style.
  2. Cliquez sur Sélectionner une police pour ouvrir l'explorateur de polices. Vous pouvez rechercher par nom ou parcourir les catégories comme Serif, Sans Serif, Display, Manuscrite et Monospace.
  3. Définissez les polices pour les titres et le corps du texte.
  4. Cliquez sur Échelle typographique pour ajuster la hiérarchie des tailles du Titre 1 au Titre 4. Utilisez le multiplicateur d'échelle et les champs de taille de base pour affiner.
  5. Cliquez sur Enregistrer pour appliquer vos choix de polices.

Espacement​

  1. Cliquez sur Échelle d'espacement dans le panneau Paramètres de style.
  2. Ajustez les valeurs d'espacement de Très petit à Très grand. Des exemples pratiques montrent comment chaque valeur affecte la mise en page.
  3. Cliquez sur Enregistrer l'espacement pour appliquer les valeurs sur l'ensemble de votre site.

Logo et image de marque​

  1. Cliquez sur Logo dans le panneau Paramètres de style.
  2. Téléversez votre Logo sur fond clair et votre Logo sur fond foncé. Utilisez des images avec un fond transparent et un rapport d'aspect de 4:1 pour de meilleurs résultats.
  3. Téléversez une Image pour réseaux sociaux pour les aperçus de liens et un Favicon pour l'icône de l'onglet du navigateur.
astuce

Pour de meilleurs résultats, utilisez un logo avec un fond transparent au format PNG. Cela garantit qu'il sera beau sur les fonds clairs et foncés de votre site web et de votre application mobile.

CSS et JavaScript personnalisés​

  1. Cliquez sur CSS et Javascript dans le panneau Paramètres de style.
  2. Ajoutez du CSS personnalisé pour remplacer les styles par défaut pour une personnalisation avancée.
  3. Ajoutez du HTML personnalisé pour les codes de suivi ou d'autres scripts.
  4. Utilisez la section Exemples courants de Javascript pour des extraits de code comme l'intégration de Google Analytics.
attention

Le CSS personnalisé est puissant mais peut casser la mise en page de votre site s'il est utilisé incorrectement. La plupart des églises peuvent obtenir l'apparence souhaitée en utilisant les contrôles intégrés de couleurs, polices et espacement. N'utilisez le CSS personnalisé que si vous êtes à l'aise avec le développement web.

Thèmes de style​

Si vous souhaitez un point de départ rapide, les Palettes suggérées dans la section Palette de couleurs offrent des thèmes prédéfinis qui définissent des couleurs coordonnées en un seul clic. Vous pouvez toujours affiner les paramètres individuels après avoir appliqué un thème.

Prochaines étapes​

  • Gestion des pages -- Construire et organiser les pages de votre site web
  • Fichiers -- Téléverser des ressources média pour votre site