Zum Hauptinhalt springen

Erscheinungsbild

Die Seite Erscheinungsbild ermöglicht es Ihnen, das gesamte Erscheinungsbild Ihrer Gemeinde-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 steuern.

Bevor Sie beginnen

  • Schließen Sie die Ersteinrichtung für Ihre Website ab
  • Halten Sie Ihr Gemeindelogo im PNG-Format mit transparentem Hintergrund und einem Seitenverhältnis von 4:1 bereit
  • Halten Sie die Markenfarben Ihrer Gemeinde (Hex-Werte) bereit, falls Sie einen bestehenden Styleguide haben

Auf Erscheinungsbild-Einstellungen zugreifen​

  1. Klicken Sie in B1 Admin im linken Menü auf Website.
  2. Klicken Sie auf den Tab Erscheinungsbild oben in der Website-Seitenansicht.
  3. Die Seite Stil-Einstellungen wird mit einer Live-Vorschau Ihrer Website auf der linken Seite und den Stil-Einstellungen auf der rechten Seite geladen.

Farbpalette​

  1. Klicken Sie im Bereich Stil-Einstellungen auf Farbpalette.
  2. Sie sehen Grundfarben (helle, Akzent- und dunkle Töne) und Semantische Farben (Primär, Sekundär, Erfolg, Warnung und Fehler).
  3. Klicken Sie auf ein beliebiges Farbfeld, um den Farbwähler 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 zusammenwirken.
  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 Stil-Einstellungen auf Typografie-Einstellungen.
  2. Klicken Sie auf Schriftart auswählen, um den Schriftarten-Browser zu öffnen. Sie können nach Namen suchen oder Kategorien wie Serif, Sans Serif, Display, Handschrift und Monospace durchstöbern.
  3. Legen Sie Schriftarten sowohl für Überschriften als auch für Fließtext fest.
  4. Klicken Sie auf Typografie-Skala, um die Größenhierarchie für Überschrift 1 bis Überschrift 4 anzupassen. Verwenden Sie die Felder für Skalierungsmultiplikator und Basisgröße zur Feinabstimmung.
  5. Klicken Sie auf Speichern, um Ihre Schriftartenauswahl zu übernehmen.

Abstände​

  1. Klicken Sie im Bereich Stil-Einstellungen auf Abstands-Skala.
  2. Passen Sie die Abstandswerte von 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 zu übernehmen.

Logo und Branding​

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

Für beste Ergebnisse verwenden Sie ein Logo mit transparentem Hintergrund im PNG-Format. So sieht es sowohl auf hellen als auch auf dunklen Hintergründen auf Ihrer Website und in der mobilen App gut aus.

Benutzerdefiniertes CSS und JavaScript​

  1. Klicken Sie im Bereich Stil-Einstellungen auf CSS und Javascript.
  2. Fügen Sie Benutzerdefiniertes CSS hinzu, um Standardstile für erweiterte Anpassungen zu überschreiben.
  3. Fügen Sie Benutzerdefiniertes HTML für Tracking-Codes oder andere Skripte hinzu.
  4. Verwenden Sie den Bereich Gängige Javascript-Beispiele für Codeausschnitte wie die Google Analytics-Integration.
Warnung

Benutzerdefiniertes CSS ist leistungsstark, kann aber das Layout Ihrer Website beeinträchtigen, wenn es falsch verwendet wird. Die meisten Gemeinden können das gewünschte Erscheinungsbild mit den eingebauten Farb-, Schriftarten- und Abstandseinstellungen erreichen. Verwenden Sie benutzerdefiniertes CSS nur, wenn Sie mit Webentwicklung vertraut sind.

Stil-Themes​

Wenn Sie einen schnellen Ausgangspunkt wünschen, bieten die Vorgeschlagenen Paletten im Bereich Farbpalette vorgefertigte Themes, die mit einem Klick koordinierte Farben festlegen. Sie können einzelne Einstellungen nach dem Anwenden eines Themes jederzeit feinabstimmen.

Nächste Schritte​

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