TYPO3

Header & Footer bearbeiten

Header und Footer sind Elemente einer Website, die am oberen (Header) bzw. unteren (Footer) Seitenrand angezeigt werden und auf allen Seiten sichtbar sind.
Im Header können beispielsweise Headerbilder oder -videos sowie eine Textbox gepflegt werden. Der Footer enthält Kontaktinformationen, wichtige Links und Social-Media-Links.

Startseiten-Header bearbeiten

Um den Header Ihrer Startseite zu bearbeiten, klicken Sie im Seitenbaum mit der rechten Maustaste auf die Weltkugel (Startseite), wählen Sie Bearbeiten und wechseln anschließend in den Reiter Ressourcen.

  1. Media: Hier wird das Bild oder Video ausgewählt, das im Header-Bereich angezeigt wird. Dateien können per Drag-&-Drop hochgeladen oder aus der Dateiliste ausgewählt werden.
  2. Header Titel: Hier wird der Titel eingegeben, der im Header angezeigt wird. Für einen Zeilenumbruch im Titel bitte Shift + Enter verwenden (normale Enter-Tastendrücke werden ignoriert)
  1. Header Text: Beschreibungstext, der im Header unter dem Titel angezeigt wird.
  2. Header Hintergrund: Wählen Sie für den Hintergrund der Textbox zwischen Universitätsblau (dunkel) und Grau (hell).
  3. Textausrichtung: Legt fest, ob Titel und Beschreibungstext im Header links oder rechts innerhalb der Textbox ausgerichtet werden.
  4. Alternatives Header-Layout: Aktiviert eine alternative Darstellung des Header-Bereichs mit angepasster Anordnung der Inhalte.
  5. Header Linktext: Text, der als Button im Header angezeigt wird und als Beschriftung des Links dient.
  6. Header Link: Hier wird die Zielseite oder externe URL hinterlegt, die beim Klick auf den Header-Button geöffnet wird.

Kontrast beachten

Achten Sie darauf, dass sich Text und Hintergrundbild ausreichend voneinander abheben. 

Nur so bleiben Inhalte gut lesbar und erfüllen die Anforderungen der digitalen Barrierefreiheit.

Störer einfügen

Der Störer ist ein hervorgehobenes Element zur gezielten Aufmerksamkeit im Header.

  1. Störer anzeigen: Aktivieren oder deaktivieren Sie den Störer.
  2. Störer-Titel: Geben Sie die Überschrift des Störers ein.
  3. Störer-Link (optional): Hinterlegen Sie die Ziel-URL des Störers.
  4. Störer-Text (optional): Tragen Sie eine kurze Beschreibung oder den Inhalt des Störers ein.

Zu den Designvarianten für Störer

Unterseiten-Header bearbeiten

Optional können Sie auch für Unterseiten ein eigenes Headerbild festlegen.

  1. Klicken Sie auf der Unterseite, auf den Sie den Header einstellen möchten, auf bearbeiten / das Stiftsymbol.

Wechseln Sie in den Reiter Ressourcen.

  1. Neue Relation erstellen: Klicken Sie auf Neue Relation erstellen und wählen Sie in Pop-up Dateiauswahl im Seitenbaum die gewünschte Datei. Aktivieren Sie die Checkbox oder klicken Sie auf das Plus-Symbol und klicken Sie auf Auswahl importieren. Die Datei wird in das Inhaltselement übernommen.
  2. Schatten: Optional können Sie dem Headerbild einen Schatten hinzufügen. Der Schatten wird rechts und unterhalb des Bildes angezeigt. Wählen Sie dafür eine der sieben Akzentfarben aus.

Footer bearbeiten

Um den Footer Ihrer Website zu bearbeiten, klicken Sie im Seitenbaum mit der rechten Maustaste auf die Weltkugel (Startseite) und wählen Sie Bearbeiten aus. Navigieren Sie zum Reiter Urheberrecht & Logos.

  1. Footer-Logos: Fügen Sie unter Neue Relation erstellen Logos im Fußbereich der Seite ein.

Button im Footer einfügen

  1. Zusätzlichen Link anzeigen: Aktivieren Sie die Anzeige eines Button-Links im Footer.
  2. Zusätzlicher Linktext: Geben Sie die Beschriftung des zusätzlichen Links ein.
  3. Zusätzlicher Link: Hinterlegen Sie die Ziel-URL des zusätzlichen Links.
  4. Kontakt: Fügen Sie Ihre Kontaktinformationen im Footer ein.
  1. Soziale Medien: Verlinken Sie Social-Media-Kanäle im Footer; die Darstellung erfolgt über die jeweiligen Kanal-Icons.

Zu den Designvarianten für Footer

Häufig gesucht-Links im Footer einstellen

Die Häufig gesucht-Links werden aus dem bereits vorhandenen Ordner Footer-Links im Seitenbaum Ihrer Seite bezogen, in dem Sie die Links erstellen und verwalten.

  1. Navigieren Sie im Seitenbaum zum Ordner Footer-Links.
  2. Klicken Sie im Ordner auf + Neuen Datensatz erstellen.
  1. Wählen Sie Seite in aus.
  1. Stellen Sie bei Typ entweder
    1. Verweis für interne Verlinkungen oder
    2. Link zu externer URL für externe Links ein.

Im folgenden Schritt erscheint ein TYPO3-Pop-up „Aktualisierung erforderlich“, das Sie mit OK bestätigen.

  1. Seitentitel: Fügen Sie den Titel des Links als sichtbaren Linktext im Footer.
  1. Hinterlegen Sie das gewünschte Linkziel:
    1. bei internen Links: Zielseite auswählen
    2. bei externen Links: URL eintragen

Als letztes aktivieren Sie alle angelegten Links und prüfen Sie, ob diese als Häufig gesucht-Links im Footer Ihrer Seite ausgegeben werden.

Haben Sie noch Fragen?

Sie haben Fragen oder Anmerkungen zu den TYPO3 Anleitungen?

Nach oben