Zum Hauptinhalt springen

Erscheinungsbild

Die Seite "Erscheinungsbild" ermöglicht es Ihnen, das Gesamterscheinungsbild und das Verhalten Ihrer Kirchengemeinde-Website anzupassen. Von Farben und Schriftarten bis hin zu Abständen und benutzerdefiniertem CSS können Sie jeden visuellen Aspekt Ihrer Website von einem Ort aus kontrollieren.

Bevor Sie beginnen

  • Schließen Sie die Anfangseinrichtung für Ihre Website ab
  • Halten Sie Ihr Kirchengemeinde-Logo in PNG-Format mit transparentem Hintergrund und einem 4:1-Seitenverhältnis bereit
  • Kennen Sie die Markenfarben Ihrer Kirchengemeinde (Hex-Werte), wenn Sie einen vorhandenen Styleguide haben

Auf Erscheinungsbild-Einstellungen zugreifen​

  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-Styles" wird geladen, mit einer Live-Vorschau Ihrer Website links und Style-Einstellungen rechts.

Farbpalette​

  1. Klicken Sie im Bereich "Style-Einstellungen" auf Farbpalette.
  2. Sie sehen Basisfarben (helle, Akzent- und dunkle Töne) und Semantische Farben (Primär, Sekundär, Erfolg, Warnung und Fehler).
  3. Klicken Sie auf einen beliebigen Farbmuster, um die Farbwahl zu öffnen. Ziehen Sie den Schieber oder geben Sie einen Hex-Wert ein, um Ihre Farbe zu wählen.
  4. Die Farbkombinations-Vorschau zeigt, wie Ihre ausgewählten Farben zusammenarbeiten.
  5. Verwenden Sie Vorgeschlagene Paletten, um schnell ein vorgefertigtes Farbschema anzuwenden.
  6. Klicken Sie auf Speichern, wenn Sie zufrieden sind.

Typografie​

  1. Klicken Sie im Bereich "Style-Einstellungen" auf Typografie-Einstellungen.
  2. Klicken Sie auf Schrift auswählen, um den Schrift-Browser zu öffnen. Sie können nach Name suchen oder Kategorien wie Serif, Sans Serif, Display, Handwriting und Monospace durchsuchen.
  3. Setzen Sie Schriften sowohl für Überschriften als auch für Textkörper.
  4. Klicken Sie auf Typografie-Größenmaßstab, um die Größen-Hierarchie für Überschrift 1 bis Überschrift 4 anzupassen. Verwenden Sie die Größenmaßstab-Multiplikator und Basisgröße-Felder für die Feinabstimmung.
  5. Klicken Sie auf Speichern, um Ihre Schrift-Auswahl zu übernehmen.

Abstand​

  1. Klicken Sie im Bereich "Style-Einstellungen" auf Abstandsmaßstab.
  2. Passen Sie Abstands-Werte für Extra Klein bis Extra Groß an. Praktische Beispiele zeigen, wie jeder Wert das Layout beeinflusst.
  3. Klicken Sie auf Abstand speichern, um die Werte auf Ihrer gesamten Website anzuwenden.

Logo und Markenbildung​

  1. Klicken Sie im Bereich "Style-Einstellungen" auf Logo.
  2. Laden Sie Ihr Logo für hellen Hintergrund und Logo für dunklen Hintergrund hoch. Verwenden Sie Bilder mit transparentem Hintergrund und einem 4:1-Seitenverhältnis für optimale Ergebnisse.
  3. Laden Sie ein Bild für soziale Medien für Link-Vorschaubilder und ein Favicon für das Browser-Tab-Symbol hoch.
Tipp

Verwenden Sie für optimale Ergebnisse ein Logo mit transparentem Hintergrund im PNG-Format. Dies stellt sicher, dass es auf allen hellen und dunklen Hintergründen auf Ihrer Website und in der mobilen App großartig aussieht.

Passen Sie die Navigationsleisten-Farben Ihrer Website für Fest- und Transparentmodi an:

  1. Scrollen Sie zum Abschnitt Navigations-Stile
  2. Klicken Sie auf Navigations-Stile bearbeiten
  3. Konfigurieren Sie Farben für feste Navigation (mit Hintergrund) und transparente Navigation (Überlagerungsmodus)
  4. Klicken Sie auf Speichern, um Ihre Navigations-Farben zu übernehmen

Ausführliche Anweisungen finden Sie unter Navigations-Stile.

Benutzerdefiniertes CSS und JavaScript​

  1. Klicken Sie im Bereich "Style-Einstellungen" auf CSS und Javascript.
  2. Fügen Sie Benutzerdefiniertes CSS hinzu, um Standardstile für erweiterte Anpassung zu überschreiben.
  3. Fügen Sie Benutzerdefiniertes HTML für Verfolgungscodes oder andere Scripts hinzu.
  4. Verwenden Sie den Abschnitt Häufige Javascript-Beispiele für Snippets wie Google Analytics-Integration.
Warnung

Benutzerdefiniertes CSS ist leistungsstark, kann aber Ihr Website-Layout durchbrechen, wenn es falsch verwendet wird. Die meisten Kirchengemeinden können das gewünschte Erscheinungsbild mit den integrierten Farb-, Schrift- und Abstands-Kontrollen erreichen. Verwenden Sie benutzerdefiniertes CSS nur, wenn Sie sich mit Webentwicklung auskennen.

Style-Themes​

Wenn Sie einen schnellen Startpunkt möchten, bieten die Vorgeschlagenen Paletten im Abschnitt "Farbpalette" vorgefertigte Themes, die koordinierte Farben in einem Klick einstellen. Sie können immer noch einzelne Einstellungen nach dem Anwenden eines Themes feinabstimmen.

Nächste Schritte​

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