Zum Hauptinhalt springen

Erscheinungsbild

Die Seite „Erscheinungsbild" ermöglicht es Ihnen, das Aussehen und die Atmosphäre Ihrer Kirchenwebsite anzupassen. Von Farben und Schriftarten bis hin zu Abstände und benutzerdefiniertem CSS können Sie jeden visuellen Aspekt Ihrer Website von einer Stelle aus steuern.

Bevor Sie beginnen

  • Führen Sie die Ersteinrichtung für Ihre Website aus
  • Halten Sie Ihr Kirchenlogo in PNG-Format mit transparentem Hintergrund und einem 4:1-Seitenverhältnis bereit
  • Kennen Sie die Markenfarben Ihrer Kirche (Hex-Werte), falls Sie ein vorhandenes Styleguide haben

Zugriff auf Einstellungen für das Erscheinungsbild​

  1. Klicken Sie in B1 Admin auf Website im linken Menü.
  2. Klicken Sie auf die Registerkarte Erscheinungsbild oben in der Ansicht „Website-Seiten".
  3. Die Seite „Site-Stile" wird mit einer Live-Vorschau Ihrer Website links und Stileinstellungen rechts geladen.

Farbpalette​

  1. Klicken Sie auf Farbpalette im Bedienfeld „Stileinstellungen".
  2. Sie sehen Basisfarben (helle, Akzent- und dunkle Farbtöne) und Semantische Farben (Primär, Sekundär, Erfolg, Warnung und Fehler).
  3. Klicken Sie auf einen beliebigen Farbmuster, um die Farbauswahl zu öffnen. Ziehen Sie den Selektor oder geben Sie einen Hex-Wert ein, um Ihre Farbe auszuwählen.
  4. Die Farbkombinationen-Vorschau zeigt, wie Ihre ausgewählten Farben zusammenpassen.
  5. Verwenden Sie Vorgeschlagene Paletten, um schnell ein vordefiniertes Farbschema anzuwenden.
  6. Klicken Sie auf Speichern, wenn Sie zufrieden sind.

Typografie​

  1. Klicken Sie auf Typografieeinstellungen im Bedienfeld „Stileinstellungen".
  2. Klicken Sie auf Schriftart auswählen, um die Schriftartsuche zu öffnen. Sie können nach Name suchen oder Kategorien wie Serif, Sans Serif, Display, Handwriting und Monospace durchsuchen.
  3. Legen Sie Schriftarten für Überschriften und Fließtext fest.
  4. Klicken Sie auf Typografieskala, um die Größenhierarchie für Überschrift 1 bis Überschrift 4 anzupassen. Verwenden Sie die Skalierungsmultiplikatoren und Basisgrößenfelder, um Feinabstimmungen vorzunehmen.
  5. Klicken Sie auf Speichern, um Ihre Schriftartauswahl anzuwenden.

Abstände​

  1. Klicken Sie auf Abstandsskala im Bedienfeld „Stileinstellungen".
  2. Passen Sie die Abstandswerte für Extra Klein bis Extra Groß an. Praktische Beispiele zeigen, wie sich jeder Wert auf das Layout auswirkt.
  3. Klicken Sie auf Abstände speichern, um die Werte auf Ihrer gesamten Website anzuwenden.

Logo und Branding​

  1. Klicken Sie auf Logo im Bedienfeld „Stileinstellungen".
  2. Laden Sie Ihr Logo für hellen Hintergrund und Logo für dunklen Hintergrund hoch. Verwenden Sie für beste Ergebnisse Bilder mit transparentem Hintergrund und einem 4:1-Seitenverhältnis.
  3. Laden Sie ein Social-Media-Bild für Link-Vorschauen und ein Favicon für das Browser-Tab-Symbol hoch.
Tipp

Verwenden Sie für beste Ergebnisse ein Logo mit transparentem Hintergrund im PNG-Format. Dies stellt sicher, dass es auf hellem und dunklem Hintergrund auf Ihrer Website und in der Mobile App großartig aussieht.

Passen Sie die Farben der Navigationsleiste Ihrer Website für solid und transparente Modi an:

  1. Scrollen Sie zum Abschnitt Navigationsstile
  2. Klicken Sie auf Navigationsstile bearbeiten
  3. Konfigurieren Sie Farben für solide Navigation (mit Hintergrund) und transparente Navigation (Overlay-Modus)
  4. Klicken Sie auf Speichern, um Ihre Navigationsfarben anzuwenden

Detaillierte Anweisungen finden Sie unter Navigationsstile.

Site-Widgets​

Site-Widgets werden auf jeder Seite Ihrer Website angezeigt und schweben über dem Seiteninhalt:

  • Ankündigungsbanner -- Eine verwerfbare Leiste oben auf Ihrer Website für zeitkritische Nachrichten, wie z. B. ein bevorstehendes Event oder eine Dienständerung.
  • Launcher -- Eine schwebende Schaltfläche, die ein Schnellzugriffsmenü öffnet, z. B. Links zum Spenden, Einchecken oder Anzeigen des Bulletins.
  1. Klicken Sie auf Site-Widgets im Bedienfeld „Stileinstellungen".
  2. Schalten Sie die gewünschten Widgets ein und konfigurieren Sie deren Text, Links und Farben.
  3. Klicken Sie auf Speichern.

Analyse​

Fügen Sie Ihre Google Analytics 4 Measurement ID im Bedienfeld „Stileinstellungen" hinzu, um den Besucherverkehr auf Ihrer Website zu verfolgen.

Benutzerdefiniertes CSS und JavaScript​

  1. Klicken Sie auf CSS und Javascript im Bedienfeld „Stileinstellungen".
  2. Fügen Sie Benutzerdefiniertes CSS hinzu, um Standardstile für erweiterte Anpassungen zu überschreiben.
  3. Fügen Sie Benutzerdefin. HTML für Tracking-Codes oder andere Skripte hinzu.
  4. Verwenden Sie den Abschnitt Häufige Javascript-Beispiele für Snippets wie die Google Analytics-Integration.
Warnung

Benutzerdefiniertes CSS ist leistungsstark, kann aber Ihr Site-Layout beschädigen, wenn es falsch verwendet wird. Die meisten Gemeinden können das gewünschte Aussehen mit den integrierten Farb-, Schriftart- und Abstandssteuerelementen erreichen. Verwenden Sie benutzerdefiniertes CSS nur, wenn Sie sich mit Webentwicklung auskennen.

Stilthemen​

Wenn Sie einen schnellen Startpunkt wünschen, bieten die Vorgeschlagenen Paletten im Abschnitt „Farbpalette" vordefinierte Designs, die in einem Klick koordinierte Farben festlegen. Sie können einzelne Einstellungen nach dem Anwenden eines Designs immer noch optimieren.

Nächste Schritte​

  • Seiten verwalten -- Erstellen und organisieren Sie Ihre Website-Seiten
  • Dateien -- Laden Sie Medien-Assets für Ihre Website hoch