Apparence
La page Apparence vous permet de personnaliser l'apparence générale et la sensation 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 en un seul endroit.
Avant de commencer
- Complétez la Configuration initiale de votre site web
- Ayez le logo de votre église prêt au format PNG avec un arrière-plan 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ès aux paramètres d'apparence
- Dans B1 Admin, cliquez sur Site web dans le menu de gauche.
- Cliquez sur l'onglet Apparence en haut de la vue Pages du site web.
- 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
- Cliquez sur Palette de couleurs dans le panneau Paramètres de style.
- Vous verrez Couleurs de base (nuances claires, d'accentuation et sombres) et Couleurs sémantiques (Primaire, Secondaire, Succès, Avertissement et Erreur).
- Cliquez sur n'importe quel nuancier de couleur pour ouvrir le sélecteur de couleur. Faites glisser le sélecteur ou entrez une valeur hexadécimale pour choisir votre couleur.
- l'Aperçu des combinaisons de couleurs montre comment vos couleurs sélectionnées fonctionnent ensemble.
- Utilisez les Palettes suggérées pour appliquer rapidement un modèle de couleur pré-conçu.
- Cliquez sur Enregistrer quand vous êtes satisfait.
Typographie
- Cliquez sur Paramètres de typographie dans le panneau Paramètres de style.
- Cliquez sur Sélectionner une police pour ouvrir le navigateur de polices. Vous pouvez rechercher par nom ou parcourir des catégories comme Serif, Sans Serif, Affichage, Manuscrit et Monospace.
- Définissez les polices pour à la fois les en-têtes et le texte du corps.
- Cliquez sur Échelle de typographie pour ajuster la hiérarchie des tailles pour les en-têtes 1 à 4. Utilisez le multiplicateur d'échelle et les champs de taille de base pour affiner.
- Cliquez sur Enregistrer pour appliquer vos choix de polices.
Espacement
- Cliquez sur Échelle d'espacement dans le panneau Paramètres de style.
- Ajustez les valeurs d'espacement de très petit à très grand. Des exemples pratiques montrent comment chaque valeur affecte la mise en page.
- Cliquez sur Enregistrer l'espacement pour appliquer les valeurs sur tout votre site.
Logo et image de marque
- Cliquez sur Logo dans le panneau Paramètres de style.
- Téléchargez votre Logo pour arrière-plan clair et Logo pour arrière-plan sombre. Utilisez des images avec un arrière-plan transparent et un rapport d'aspect 4:1 pour de meilleurs résultats.
- Téléchargez une image pour les réseaux sociaux pour les aperçus de lien et une Favicon pour l'icône de l'onglet du navigateur.
Pour de meilleurs résultats, utilisez un logo avec un arrière-plan transparent au format PNG. Cela garantit qu'il a l'air génial sur les arrière-plans clairs et sombres dans votre site web et application mobile.
Styles de navigation
Personnalisez les couleurs de la barre de navigation de votre site web pour les modes solides et transparents :
- Faites défiler jusqu'à la section Styles de navigation
- Cliquez sur Éditer les styles de navigation
- Configurez les couleurs pour la navigation solide (avec arrière-plan) et la navigation transparente (mode superposition)
- 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 rejetable en haut de votre site pour les messages sensibles au temps, 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, enregistrer ou afficher le bulletin.
- Cliquez sur Widgets du site dans le panneau Paramètres de style.
- Activez les widgets que vous souhaitez et configurez leur texte, leurs liens et leurs couleurs.
- Cliquez sur Enregistrer.
Analytiques
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
- Cliquez sur CSS et Javascript dans le panneau Paramètres de style.
- Ajoutez CSS personnalisé pour remplacer les styles par défaut pour une personnalisation avancée.
- Ajoutez HTML personnalisé pour les codes de suivi ou d'autres scripts.
- Utilisez la section Exemples Javascript courants pour les extraits tels que l'intégration de Google Analytics.
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 le look qu'elles souhaitent en utilisant les contrôles intégrés de couleur, de police et d'espacement. Utilisez uniquement le CSS personnalisé si vous êtes à l'aise avec le développement web.
Votre site applique une Politique de sécurité des contenus qui bloque les scripts intégrés de toute autre source. Le champ JavaScript personnalisé est la seule exception de confiance -- le code que vous y enregistrez s'exécute tel quel, donc collez uniquement les scripts de sources que vous faites confiance (balises analytiques, widgets de chat et intégrations similaires).
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 les 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 -- Construisez et organisez les pages de votre site web
- Fichiers -- Téléchargez les éléments multimédias pour votre site