Hinzufügen eines Branding zu einer Site mit Kopfzeile und Designoptionen

Jede Site hat eine Kopfzeile, die oben auf der Site (unter der globalen Navigationsleiste) und auf allen Seiten und Ansichten, die der Site angefügt sind, angezeigt wird. Die Kopfzeile enthält Titel, Logo und Menü-Links der Site. Sie können die Kopfzeile nicht entfernen, aber ihr Design ändern.

Kopfzeile

Führen Sie die folgenden Schritte aus, um ein Design für Ihre Kopfzeile auszuwählen:

  1. Öffnen Sie eine Site im Bearbeitungsmodus.
  2. Öffnen Sie den Seitenbereich durch Klicken auf die Umschaltfläche Umschaltfläche. Klicken Sie ggf. oben im Bereich auf den Zurück-Pfeil neben Anpassen, um zum Hauptmenü zurückzukehren, bis Sie die Option zum Klicken auf Kopfzeile sehen.
  3. Klicken Sie auf das Menü Darstellung, um einen der folgenden Styles für Kopfzeile auszuwählen:
    • Standard: Der Standard für jede neue Site. Dieses Design zeichnet sich durch eine dünne, kompakte Leiste aus, die Platz für ein Logo (60 Pixel) sowie Social Media- und Menü-Links bietet.
    • Auffällig: Dieses Design bietet mehr Platz für größere Logos (120 Pixel) und zusätzliche Menü-Links.
    • Benutzerdefiniertes HTML/CSS: Verwenden Sie einen syntaxfähigen Code-Editor, um eine Kopfzeile mit benutzerdefiniertem Code zu konfigurieren.
      Hinweis:

      Benutzerdefinierte Kopfzeilen werden auf allen Seiten der Site angezeigt, nicht aber in Inhaltsansichten. Weitere Informationen finden Sie unter Why does the Explore content view branding look different?

  4. Klicken Sie auf das Menü Branding, um die folgenden Optionen anzuwenden:
    • Name: Geben Sie einen Namen ein, der in der Kopfzeile der Site angezeigt werden soll. Der Name, den Sie in diesem Feld angeben, wird nur in der Kopfzeile angezeigt und nicht in die URL der Site oder in die Liste der Sites übernommen.
    • Kurzname: Geben Sie eine kurze Version des Titels ein, den Sie der Kopfzeile hinzugefügt haben. Der Kurzname wird nur für die Kopfzeile verwendet, wenn sie zu lang ist, um auf einem kleinen Bildschirm, z. B. auf einem Mobiltelefon, angezeigt zu werden.
      Tipp:

      Die Menschen greifen zunehmend über Mobilgeräte auf das Internet zu. Fügen Sie einen Kurznamen hinzu, um die Qualität der Site auf allen beliebigen Geräten zu gewährleisten.

  5. Wählen Sie eine der folgenden Optionen für Layout aus: Box oder Breit.
  6. Wenn Sie die Kopfzeile der Site mit einem Branding mit benutzerdefinierten HTML- oder CSS-Inhalten versehen möchten, wählen Sie Benutzerdefiniertes HTML/CSS aus, und geben Sie den Code in den HTML- und CSS-Feldern an.

    Hinweis:

    Kopfzeilen-HTML bietet keine Unterstützung für eingebettetes JavaScript. Skript-Tags werden ignoriert.

  7. Klicken Sie auf Speichern.

Hinzufügen eines Logos zu einer Kopfzeile

Die Größe und die Position des Site-Logos sind von dem Kopfzeilen-Style abhängig, den Sie auswählen.

  1. Klicken Sie, um das Menü Branding unter Kopfzeile im Seitenbereich einzublenden.
  2. Klicken Sie auf die Umschaltfläche Logo, um sie zu aktivieren.
  3. Fügen Sie ein Bild hinzu, indem Sie Bild-URL auswählen oder ein Bild aus einer Datei hochladen.

    Tipp:
    Wenn Sie ein Bild aus einer Datei hochladen, hat sich die Verwendung eines Bildes im PNG-Format bewährt. Sie können das Bild im Abschnitt Bildeinstellungen des Fensters Anpassen zuschneiden und zoomen.

  4. Bei Verwendung der Kopfzeile Auffällig haben Sie die Möglichkeit, eine Einstellung für die Bildausrichtung auszuwählen.
  5. Geben Sie unter Alternativer Text für das Logo Text an, um die Barrierefreiheitsstandards zu erfüllen.

    Tipp:
    Sofern ein Logo Text umfasst, kann als alternativer Text der Name des Unternehmens verwendet werden. Handelt es sich bei dem Logo um ein Symbol, wird der alternative Text nicht benötigt, sodass Sie “” eingeben können.

  6. Klicken Sie auf Speichern.

Hinzufügen von Social-Media-Symbolen

Fügen Sie einer Kopfzeile Social-Media-Symbole hinzu.

  1. Öffnen Sie eine Site im Bearbeitungsmodus.
  2. Klicken Sie, um das Menü Branding unter Kopfzeile im Seitenbereich einzublenden.
  3. Klicken Sie auf das Menü Social-Media-Symbole.
  4. Klicken Sie auf die Umschaltfläche, um ein Social-Media-Symbol für Facebook, Twitter, Instagram oder YouTube hinzuzufügen.
  5. Geben Sie eine URL zum Konto Ihrer Plattform an.
  6. Klicken Sie auf Speichern.

Erstellen eines Designs

Entwerfen Sie ein Design für Ihre Site, indem Sie Farben für Kopf, Text und Schaltflächen Ihrer Site auswählen. Die Farben, die Sie im Menü Design Ihrer Site auswählen, werden auf die gesamte Site angewendet. Sie können diese Auswahl außer Kraft setzen, indem Sie Farben für bestimmte Zeilen konfigurieren. Weitere Informationen finden Sie unter Farben und Schriftarten.

Tipp:

Beachten Sie bei der Farbauswahl die Markenrichtlinien der Organisation. Viele Markenrichtlinien enthalten genaue Farbcodes für Content wie Websites und Logos. Falls es keine Markenrichtlinien gibt, beraten Sie sich mit dem Team oder den Projektbeteiligten, um sicherzustellen, dass das Design der Site der Organisation entspricht.

  1. Öffnen Sie eine Site im Bearbeitungsmodus.
  2. Öffnen Sie den Seitenbereich durch Klicken auf die Umschaltfläche Umschaltfläche. Klicken Sie ggf. oben im Bereich auf den Zurück-Pfeil neben Anpassen, um zum Hauptmenü zurückzukehren, bis Sie die Option zum Klicken auf Design sehen.
  3. Wenn Sie eine der folgenden Optionen mit einer Farbe versehen möchten, geben Sie einen Farbcode als Hexadezimalwert ein, oder wählen Sie über die Farbauswahl, die sich neben dem Feld für den Farbcode befindet, eine Farbe aus.
    • Mit der Option Hintergrundfarbe für globale Navigation können Sie die globale Navigationsleiste der Site mit einer Farbe versehen.
    • Mit der Option Textfarbe für globale Navigation können Sie den Text in der globalen Navigationsleiste mit einer Farbe versehen.
      Hinweis:

      Weitere Informationen zur globalen Navigation finden Sie unter Was ist globale Navigation?

    • Mit der Option Hintergrundfarbe der Kopfzeile können Sie die Kopfzeile der Site mit einer Farbe versehen.
    • Mit der Option Textfarbe der Kopfzeile können Sie den gesamten Kopfzeilentext mit einer Farbe versehen.
    • Mit der Option Texthintergrundfarbe können Sie die Zeilen der Site mit einer Farbe versehen. Die Zeilen- und Textfarben können ebenfalls für jede Zeile konfiguriert werden, indem Sie die Schritte unter Farben und Schriftarten ausführen.
    • Mit der Option Textfarbe können Sie den Text auf Ihrer Site mit einer Farbe versehen.
    • Mit der Option Link-Farbe des Textes wird Farbe auf Links auf der Site und auf Schaltflächen angewendet, wenn Schaltflächen-Style auf Umrissen festgelegt ist.
      Hinweis:

      Für vertikale Registerkarten, einschließlich der Schaltfläche für die Freigabe, wird Link-Farbe des Textes für die Hintergrundfüllung und Texthintergrundfarbe für Symbole oder Text verwendet.

    • Mit der Option Hintergrundfarbe für Schaltflächen wird Farbe auf die Schaltflächen der Site angewendet, wenn Schaltflächen-Style auf Einfarbiger Hintergrund festgelegt ist. Zudem wird mit dieser Option Farbe auf die Symbole der Registerkarten im Seitenbereich angewendet.
    • Mit der Option Textfarbe für Schaltfläche können Sie den Text der Schaltflächen auf der Site mit einer Farbe versehen.
  4. Wenn Sie alle Farben festgelegt haben, klicken Sie auf Änderungen übernehmen.
  5. Sie können auch die Schriftarten der Kopfzeile und des Textes der Site ändern.
    • Wenn Sie eine Schriftart für den Text der Site auswählen möchten, klicken Sie auf die Schaltfläche Basisschriftart.
    • Wenn Sie die Schriftart der Kopfzeile ändern möchten, klicken Sie auf die Schaltfläche Kopfzeilenschriftart.
Hinweis:

Wenn Sie von Neuem beginnen oder die Standardfarben wiederherstellen möchten, wählen Sie im unteren Bereich des Menüs Design die Option Auf Standard zurücksetzen aus.

Erstellen einer Fußzeile

Sie können benutzerdefinierten HTML-Code verwenden, um Ihrer Site eine Fußzeile hinzuzufügen, die auf allen Seiten angezeigt wird, die an Ihre Site angehängt sind.

  1. Öffnen Sie eine Site im Bearbeitungsmodus.
  2. Blenden Sie das Menü Fußzeile im Seitenbereich ein.
  3. Klicken Sie auf die Umschaltfläche neben Benutzerdefiniert.
  4. Ändern Sie das CSS- und HTML-Feld im Seitenbereich, und klicken Sie auf Änderungen übernehmen, um die Auswirkungen auf den HTML-Code zu sehen.
    Hinweis:

    Fußzeilen-HTML bietet keine Unterstützung für eingebettetes JavaScript. Skript-Tags werden ignoriert.

Verwandte Inhalte

Wenn Sie das Branding der Site oder Initiative noch erweitern möchten, können Sie folgendermaßen vorgehen:

  • Fügen Sie Menülinks hinzu, und stellen Sie sicher, dass die globale Navigation aktiviert ist. Weitere Informationen finden Sie unter Konfigurieren der globalen Navigation und der Menü-Links.
  • Alle Sites und Initiativen-Sites besitzen eine URL (Webadresse). Sofern Ihre Organisation über eine benutzerdefinierte Domäne verfügt, können Sie diese URL konfigurieren, um das Branding der Site zu erweitern. Weitere Informationen finden Sie unter FAQ zu Domänen.