Header und Footer

Durchgehende Elemente auf der Website

Auf jeder Seite Ihres Webbaukastens gibt es einen Header- und Footerbereich in einheitlicher Darstellung auf allen Unterseiten. Diese festen Bereiche sorgen für Wiedererkennung, Benutzerfreundlichkeit und eine konsistente Gestaltung und prägen maßgeblich das Erscheinungsbild und die Orientierung auf der Seite. 

Der Header enthält links oben das individuelle Logo Ihrer Einrichtung, darunter die Hauptnavigation sowie rechts oben eine Meta-Navigation, in die das Barrierefreiheitstool integriert ist.

Im Footer finden Sie auf der linken Seite das Facettenkreuz-Logo. Optional können Sie eine Footernavigation nutzen, z.B. für weiterführende Seiten. Unterhalb befinden sich die gesetzlich notwendigen Links zu Impressum, Datenschutz, Cookie-Einstellungen und Barrierefreiheit. In einem farbigen Kasten am rechten unteren Seitenrand wird die Adresse Ihrer Einrichtung ausgegeben und darunter ggf. Links zu Ihren Social-Media-Kanälen.

Wie Sie diese Elemente nutzen bzw. ändern können, erfahren Sie hier ↓

Header


Logo austauschen

Klicken Sie im Seitenbaum auf den Ordner "Basisdaten". Klicken Sie auf das Stiftsymbol im ersten Element "Header Logo". Löschen Sie bitte NICHT das Element selbst, sondern nur das dort hinterlegte Bild und laden Sie ein neues hoch. Das Logo sollte folgende Maße haben: Format: SVG, PNG, Höhe: 115 px

Info zur Hauptnavigation

Die Hauptnavigation bildet im Frontend die Struktur des Seitenbaums im Backend ab. Jede Haupt- und Unterseite, die im Redaktionssystem angelegt wurde, erscheint automatisch in der Navigation der Website.
Auf diese Weise entspricht die sichtbare Menüführung exakt der internen Seitenstruktur und erleichtert Besucherinnen und Besuchern die Orientierung. Änderungen im Seitenbaum – etwa neue Seiten oder geänderte Titel – werden automatisch in der Navigation übernommen.

Hinweis: Die Darstellung der Hauptnavigation im Webbaukasten ist systemseitig so vorgesehen, dass auf größeren Bildschirmen maximal fünf Hauptmenüpunkte direkt sichtbar sind. Weitere Einträge werden über ein Drei-Punkte-Menü eingeblendet.

Diese Struktur ist fester Bestandteil des Baukastensystems und kann aus technischen Gründen nicht individuell angepasst werden.

In den mobilen Ansichten erfolgt die Navigation über das sogenannte „Burger-Menü“, das alle Hauptmenüpunkte vollständig und übersichtlich untereinander darstellt.

Metamenü

Rechts oben befindet sich das sog. “Metamenü”. Die Buttons, die hier angezeigt werden, sind nichts anderes als ein Menü der Seiten, welche Sie im Backend im Abschnitt “Metamenü” angelegt haben.

Sie können hier natürlich beliebige Seiten anlegen. Im Beispiel Abb. 3b wurden dort Seiten vom Typ “Verweis” angelegt, die zu einer Unterseite im Hauptmenü führen

Mehr zu Seitentypen

Ein fester Bestandteil des Metamenüs, den Sie nicht ändern können, ist außerdem das “Accessible Icon”, über welches das Barrierefreiheitstool geöffnet werden kann.Dieses Icon wirdimmer als erster Punkt im Metamenü angezeigt. 

Mehr zum Barrierefreiheitstool

Footer


Folgende feste Bestandteile des Footers können nicht geändert werden:

A - Footer-Logo

B - Footer-Infomenü


Folgendes können Sie selbst anpassen:

C - Footer-Hauptmenü mit der Ausspielung der Menüs links und rechts, Anleitung s.u.

optional: D - Button zur Newsletter-Anmeldung: dieser ist nur vorhanden, wenn ein Premium-Paket gebucht wurde und dort die Newsletter-Anmeldung genutzt wird. Wenn Sie hier einen anderen Text oberhalb des Buttons wünschen, senden Sie uns bitte eine Mail an mail(at)medienhaus.support 

E - Footer-Adresse, Anleitung s.u.

F - Footer-Social Icons, Anleitung s.u.

C: Footer-Hauptmenü mit der Ausspielung der Menüs links und rechts

Die Menüs “Links” und “Rechts” unterhalb des “Footer Hauptmenüs” sind nichts anderes als normale Menüs. Sie können dort also ganz normal Seiten anlegen:

  • Unter “Links” Seiten, die in der linken Spalte angezeigt werden sollen
  • unter “Rechts” Seiten, die in der rechten Spalte angezeigt werden sollen - siehe Abb. 4 und 5

Es ist also im Grunde nichts anderes als beim Metamenü.

→ Wenn wir Ihnen die Seite zur Weiterbearbeitung übergeben, haben wir dort schon ein paar Seiten angelegt “Footer Links 1” usw., die Sie dann entweder löschen oder bearbeiten können.

Das Footer-Hauptmenü können Sie natürlich nutzen, wie Sie möchten; oftmals werden hier Verlinkungen zu externen Seiten hinterlegt, z.B. zur Dekanatswebseite oder zu ekhn.de. Wie Sie unterschiedliche Seitentypen, z.B. Seiten vom Typ “externe URL”, anlegen können, erfahren Sie hier:

Mehr zu Seitentypen

E: Einrichtungsadresse im Footer ändern

Klicken Sie im Seitenbaum auf den Ordner "Basisdaten". Klicken Sie auf das Stiftsymbol im zweiten Element "Footer Adresse" und dort auf den Reiter "Footer". Löschen Sie bitte NICHT das Element selbst, sondern ändern Sie nur die Einträge in den Feldern.
 

F: Social Media Icons anlegen oder ändern

A: Die vorhandenen Einträge werden untereinander angezeigt, die Reihenfolge kann mithilfe des Listen-Icons geändert werden. Bei Klick auf den Button “Datensatz anlegen” klappen die Eingabefelder auf (= B)

B: Tragen Sie den Titel ein und klicken Sie auf das Link-Icon - ein neues Fenster öffnet scih (=C)

C: Wählen Sie als Ziel “Neues Fenster” aus, tragen Sie dort Titel und URL ein. Wichtig ist der korrekte Eintrag bei “CSS-Klasse” - folgende Services können genutzt werden, siehe Tabelle. Klicken Sie dann auf den Button “Link setzen”

D: Das Fenster schließt sich, der Eintrag sieht nun so aus - kontrollieren Sie noch einmal, ob die CSS Klasse korrekt ist, da sonst kein Icon im Frontend angezeigt werden kann.

Übersicht Social Icons CSS Klassen:
ServiceFacebookXYoutubeInstagram
Klasseicon-facebook-whiteicon-x-whiteicon-youtube-whiteicon-instagram-white