Apparence

La page Apparence vous permet de personnaliser l'apparence générale de votre site Web d'église. Des couleurs et des polices à l'espacement et au CSS personnalisé, vous pouvez contrôler tous les aspects visuels 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 4:1
• Connaissez les couleurs de marque de votre é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 à 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 Couleurs de base (nuances claires, accentuées et sombres) et 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 Palettes suggérées pour appliquer rapidement un schéma 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 les catégories comme Serif, Sans Serif, Display, Handwriting et Monospace.
3. Définissez des polices pour les titres et le texte du corps.
4. Cliquez sur Échelle typographique pour ajuster la hiérarchie de taille pour Titre 1 à Titre 4. Utilisez les champs de multiplicateur d'échelle et de 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 Extra Small à Extra Large. 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échargez votre Logo pour fond clair et Logo pour fond sombre. Utilisez des images avec un fond transparent et un rapport d'aspect 4:1 pour de meilleurs résultats.
3. Téléchargez une Image de médias 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 est superbe sur des fonds clairs et sombres sur votre site Web et 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 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 des instructions détaillées, consultez Styles de navigation.

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 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 l'apparence souhaitée en utilisant les contrôles intégrés de couleur, de police et d'espacement. N'utilisez du 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é-construits 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.

Prochaines étapes

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