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

• Terminez la Configuration initiale de votre site web
• Préparez le logo de votre église au format PNG avec un fond transparent et un rapport d'aspect 4:1
• Connaissez les couleurs de marque de votre église (valeurs hexadécimales) si vous disposez déjà d'une charte graphique

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 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 (nuances claire, d'accent et foncée) et les Couleurs sémantiques (Primaire, Secondaire, Succès, Avertissement et Erreur).
3. Cliquez sur n'importe quelle pastille de couleur pour ouvrir le sélecteur de couleur. Faites glisser le curseur 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éconçu.
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 des catégories telles que Serif, Sans Serif, Affichage, Manuscrite et Monospace.
3. Définissez les polices pour les titres et le corps de texte.
4. Cliquez sur Échelle typographique pour ajuster la hiérarchie des tailles des Titres 1 à 4. Utilisez les champs multiplicateur d'échelle et 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 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 à l'ensemble de votre site.

Logo et image de marque

1. Cliquez sur Logo dans le panneau Paramètres de style.
2. Téléchargez votre Logo pour fond clair et votre Logo pour fond sombre. Utilisez des images avec un fond transparent et un rapport d'aspect 4:1 pour un résultat optimal.
3. Téléchargez une image pour les 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 un rendu optimal sur les fonds clairs comme sur les fonds sombres, sur votre site web comme dans l'application mobile.

Styles de navigation

Personnalisez les couleurs de la barre de navigation de votre site web pour les modes solide et transparent :

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

Pour des instructions détaillées, consultez Styles de navigation.

Widgets du site

Les widgets du site apparaissent sur chaque page de votre site, flottant au-dessus du contenu de la page :

• Bannière d'annonce -- Une barre pouvant être fermée en haut de votre site pour des messages urgents, comme un événement à venir ou un changement de service.
• Lanceur -- Un bouton flottant qui ouvre un menu d'accès rapide, par exemple des liens pour donner, s'enregistrer, ou consulter le bulletin.

1. Cliquez sur Widgets du site dans le panneau Paramètres de style.
2. Activez les widgets que vous souhaitez et configurez leur texte, leurs liens et leurs couleurs.
3. Cliquez sur Enregistrer.

Analytique

Ajoutez votre ID de mesure Google Analytics 4 dans le panneau Paramètres de style pour suivre le trafic des visiteurs sur votre site web.

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 des codes de suivi ou d'autres scripts.
4. Utilisez la section Exemples JavaScript courants pour des 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 mal utilisé. La plupart des églises peuvent obtenir le rendu souhaité en utilisant les contrôles intégrés de couleur, de police et d'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 de la section Palette de couleurs proposent des thèmes préconçus qui définissent des couleurs coordonnées en un clic. Vous pouvez toujours affiner les paramètres individuels après avoir appliqué un thème.

Étapes suivantes

• Gestion des pages -- Créez et organisez les pages de votre site web
• Fichiers -- Téléchargez des ressources multimédias pour votre site