Zum Hauptinhalt springen

Erscheinungsbild

Die Seite Erscheinungsbild ermöglicht es Ihnen, das Gesamterscheinungsbild 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 Gemeinde-Logo im PNG-Format mit transparentem Hintergrund und einem Seitenverhältnis von 4:1 bereit
  • Kennen Sie die Markenfarben Ihrer Gemeinde (Hex-Werte), wenn Sie einen bestehenden Styleguide haben

Zugriff auf Erscheinungsbild-Einstellungen​

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

Farbpalette​

  1. Klicken Sie im Bereich Stil-Einstellungen auf Farbpalette.
  2. Sie sehen Grundfarben (helle, Akzent- und dunkle Schattierungen) 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 Vorschau der Farbkombinationen 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, Handwriting und Monospace durchsuchen.
  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 Schriftauswahl zu übernehmen.

Abstände​

  1. Klicken Sie im Bereich Stil-Einstellungen auf Abstands-Skala.
  2. Passen Sie 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 anzuwenden.

Logo und Branding​

  1. Klicken Sie im Bereich Stil-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 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. Dies stellt sicher, dass es sowohl auf hellen als auch auf dunklen Hintergründen auf Ihrer Website und mobilen App großartig aussieht.

Passen Sie die Farben der Navigationsleiste Ihrer Website sowohl für soliden als auch für transparenten Modus 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 zu übernehmen

Detaillierte Anweisungen finden Sie unter Navigationsstile.

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 Abschnitt Häufige Javascript-Beispiele für Snippets wie Google Analytics-Integration.
Warnung

Benutzerdefiniertes CSS ist mächtig, kann aber das Layout Ihrer Website durcheinanderbringen, wenn es falsch verwendet wird. Die meisten Gemeinden können das gewünschte Aussehen mit den integrierten Farb-, Schriftart- und Abstandskontrollen 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 Abschnitt Farbpalette vorgefertigte Themes, die koordinierte Farben mit einem Klick 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 Medieninhalte für Ihre Website hoch