Aller au contenu principal

Apparence

La page Apparence vous permet de personnaliser l'apparence générale et la convivialité de votre site Web d'église. À partir des couleurs et des polices jusqu'à l'espacement et aux CSS personnalisés, vous pouvez contrôler chaque aspect visuel de votre site à partir d'un seul endroit.

Avant de Commencer

  • Complétez la Configuration Initiale pour votre site Web
  • Ayez votre logo d'église prêt au format PNG avec un fond transparent et un rapport d'aspect 4:1
  • Connaissez les couleurs de votre marque d'église (valeurs hexadécimales) si vous avez un guide de style existant

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 sur la gauche et les options Paramètres de Style sur la droite.

Palette de Couleurs​

  1. Cliquez sur Palette de Couleurs dans le panneau Paramètres de Style.
  2. Vous verrez Couleurs de Base (nuances claires, d'accent et sombres) et Couleurs Sémantiques (Primaire, Secondaire, Succès, Avertissement et Erreur).
  3. Cliquez sur n'importe quel carré de couleur pour ouvrir le sélecteur de couleur. Faites glisser le sélecteur ou entrez 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 schéma 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 le navigateur de polices. Vous pouvez rechercher par nom ou parcourir les catégories comme Serif, Sans Serif, Affichage, Écriture Manuscrite et Monospace.
  3. Définissez les polices pour les en-têtes et le texte du corps.
  4. Cliquez sur Échelle de Typographie pour ajuster la hiérarchie des tailles pour les En-têtes 1 à 4. Utilisez les champs du multiplicateur d'échelle et de la taille de base pour affiner.
  5. Cliquez sur Enregistrer pour appliquer vos choix de police.

Espacement​

  1. Cliquez sur Échelle d'Espacement dans le panneau Paramètres de Style.
  2. Ajustez les valeurs d'espacement pour Extra Petit jusqu'à Extra Grand. Les exemples pratiques montrent comment chaque valeur affecte la mise en page.
  3. Cliquez sur Enregistrer l'Espacement pour appliquer les valeurs dans votre site entier.

Logo et Image de Marque​

  1. Cliquez sur Logo dans le panneau Paramètres de Style.
  2. Téléchargez votre Logo de Fond Clair et Logo de Fond Sombre. Utilisez les images avec un fond transparent et un rapport d'aspect 4:1 pour les meilleurs résultats.
  3. Téléchargez une Image de Médias Sociaux pour les aperçus de lien et un Favicon pour l'icône de l'onglet du navigateur.
astuce

Pour les meilleurs résultats, utilisez un logo avec un fond transparent au format PNG. Cela garantit qu'il a l'air magnifique à la fois sur les fonds clairs et sombres dans votre site Web et dans l'application mobile.

Styles de Navigation​

Personnalisez les couleurs de la barre de navigation de votre site Web pour les modes solides et transparents :

  1. Faites défiler jusqu'à la section Styles de Navigation
  2. Cliquez sur Modifier les Styles de Navigation
  3. Configurez les couleurs pour la navigation solide (avec arrière-plan) et la navigation transparente (mode superposition)
  4. Cliquez sur Enregistrer pour appliquer vos couleurs de navigation

Pour les instructions détaillées, voir Styles de Navigation.

CSS et JavaScript Personnalisés​

  1. Cliquez sur CSS et Javascript dans le panneau Paramètres de Style.
  2. Ajoutez le CSS Personnalisé pour remplacer les styles par défaut pour la personnalisation avancée.
  3. Ajoutez l'HTML Personnalisé pour les codes de suivi ou autres scripts.
  4. Utilisez la section Exemples Javascript Courants pour les extraits 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 qu'elles veulent en utilisant les contrôles de couleur, de police et d'espacement intégrés. Utilisez uniquement CSS personnalisé 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 les couleurs coordonnées en un clic. Vous pouvez toujours affiner les paramètres individuels après l'application d'un thème.

Prochaines Étapes​

  • Gérer les Pages -- Créez et organisez les pages de votre site Web
  • Fichiers -- Téléchargez les ressources multimédias à utiliser dans l'éditeur