Der Footer in toujou
Der Footer (deutsch: Fußzeile) definiert den Bereich am unteren Rand Ihrer Website. Er wird auf allen Unterseiten unabhängig der Bildschirmgröße/des Endgeräts dargestellt. In toujou werden im Frontend automatisch vordefinierte Informationen ausgespielt. Dieser Standard kann durch manuelle Erstellung von Inhalten individuell angepasst werden. Beide Varianten werden Ihnen in diesem Tutorial vorgestellt.
Standard-Einstellungen Manuelle Einrichtung
Standard-Footer in toujou
Der Screenshot zeigt eine toujou-Demo-Website mit einem Standard-Footer am Ende der Startseite.
Der toujou-Footer besteht von Haus aus folgenden Komponenten:
- einer Trennlinie zum Content-Bereich in der Primary Color
- schwarzem Hintergrund, weißer Schriftfarbe sowie Linktexten in der Light Primary Color
- Inhaltsaufteilung in vier Blöcken: Footer-Logo, Navigationsebene 1, Service-Navigation, Kontaktinformation Ihres Hauptkontakts, Social-Media-Icons
Verknüpfte Tutorials
Veränderungen am Standard werden nicht direkt im Seitenbereich des Footers vorgenommen. Stattdessen bezieht der Standard-Footer seine Darstellung aus den Basis-Settings, die Sie für verschiedene Funktionen Ihrer Website vornehmen.
Footer-Logo
Das Footer-Logo ist eine Variante Ihres Website-Logos, das eigens hochgeladen werden muss, um im Standard-Footer ausgespielt zu werden. Dort wird es zur Schaltfläche, die Ihre Besucher bei Klick auf die Startseite führt.
Navigationsebene 1
Die hier automatisch verlinkten Navigationspunkte entsprechen denen der Kopfzeile Ihrer Website. Verändern Sie die erste Navigationsebene Ihrer Website, so verändern Sie auch die im Footer ausgespielten Links.
Service-Navigation
Im Seitenbaum Ihrer Website befindet sich ein Ordner »Service-Navigation«, der aus den Unterseiten Kontakt, Impressum und Datenschutz besteht. Veränderungen, die Sie in dem Ordner vornehmen, wirken sich auf die Links im Footer aus.
Kontakt & Social Media
Hier wird der von Ihnen erstellte Kontakt ausgespielt bzw. der Hauptkontakt, falls Sie mehr als einen angelegt haben. Darunter reihen sich nur dann Social-Media-Icons ein, wenn Sie im toujou-Setup Account-Links hinterlegt haben.
Manuelle Einrichtung
Der toujou-Footer kann ähnlich wie eine Unterseite bearbeitet und mit Inhalten Ihrer Wahl bestückt werden. Wenn Sie sich dafür entscheiden, auf den Standard-Footer zu verzichten, stehen Ihnen die oben beschriebenen Standard-Features nicht mehr automatisiert zur Verfügung, sondern sind ggf. manuell nachzustellen.
Schritt 1: Storage Folder öffnen
Der Footer ist einer Content-Page ähnlich in einem Unterordner namens »Storage Folder« zu finden. Diese Konfiguration wird in jedem toujou-Paket als Standard mitgeliefert und sollte nicht verändert werden.
Wichtig: Wenn Ihre Website bereits online ist, sollten manuelle Änderungen stets mit Bedacht ausgeführt werden. Wenn Sie die Footer-Seite ausblenden, wird der Standard-Footer ausgespielt. Sie können daher den Footer bei Bedarf im ausgeblendeten Zustand bearbeiten und Ihre Arbeit per Ansichtsbutton im Frontend überprüfen.
Schritt 2: Inhaltsbereich gestalten
Alles, was Sie tun müssen, um einen manuellen Footer zu nutzen, ist, ein Inhaltselement im Inhaltsbereich der Footer-Seite anzulegen. Dafür klicken Sie, wie Sie es von der Erstellung anderer Unterseiten gewohnt sind, auf den + Inhalt-Button.
Wichtig: Ignorieren Sie den Kopf- und Abschlussbereich dieser Seite. Wenn Sie Ihre erstellten Elemente ausblenden oder löschen, wird automatisch wieder der Standard-Footer ausgespielt.
Schritt 3: Element wählen
Suchen Sie in den Reitern der Elementauswahl das gewünschte Inhaltselement aus und klicken wie gewohnt zur Bearbeitung darauf. Als Fallbeispiel haben wir uns für das Element Three text blocks entschieden.
Wichtig: Nicht jedes Element der toujou-Elementbibliothek ist für den Footer geeignet oder sinnvoll. Sprechen Sie uns dazu gerne an!
Fallbeispiel für manuellen Footer
Im Element Three text blocks erstellen wir einen Footer bestehend aus drei statt vier Blöcken.
Backend-Ansicht
Im Beispiel-Element stellen wir in drei Blöcken die Navigation und Firmenadresse nach und fügen rechts Öffnungszeiten als Beispiel-Content hinzu.
Wichtig: Alle Links (im Beispiel zu den Navigationspunkten, E-Mail-Adresse und Telefonnummer) müssen manuell vorgenommen werden und sind bei späteren Änderungen ebenfalls manuell zu aktualisieren. Schriftgrößen, Stile, Ausrichtung und Gestaltung sind Ihnen überlassen.
Frontend-Ansicht
Nach dem Speichern ist das neue Inhaltselement »live« und kann im Frontend angesehen bzw. überprüft werden.
Wichtig: Auch und gerade in diesem Fall sollten Sie überprüfen, wie Ihr neuer Footer sich mobil bei verschiedenen Endgeräten und Bildschirmgrößen verhält.
Weiteres Element erstellen
Wie oben beschrieben, sind Sie auch in der inhaltlichen Gestaltung Ihres manuellen Footers frei. Bei Nutzung eines manuellen Footers sind Sie in toujou nicht auf ein einziges Inhaltselement beschränkt. Entsprechend legen wir unterhalb des Elements Three text blocks nun ein zweites Beispiel-Element, Text, an.
Vergleich: Backend-Frontend
Im Text-Element haben wir die Service-Navigation, bestehend aus Kontakt, Impressum und Datenschutz, horizontal dargestellt. Im Screenshot sehen Sie außerdem, wie die von uns beispielhalber ausgewählten Elemente nun gemeinsam im Frontend dargestellt werden.
Hinweise, Tipps & Tricks
Überlegen Sie sich am besten noch vor Live-Schaltung Ihrer Website, ob Sie den Standard-Footer in toujou nutzen möchten oder ob Sie individuelle Anpassungen manuell vornehmen möchten. Wie mehrfach in diesem Tutorial erläutert, ist es an Ihnen, einen manuellen Footer aktuell zu halten.
Die Notwendigkeit eines manuellen Footers richtet sich ein Stück weit nach Ihrem Geschäftsfeld. Unser Beispiel mit der Nennung von Öffnungszeiten ist für den Einzelhandel und Betriebe mit geregelten Geschäftszeiten nützlich. Andere Websites stellen im Footer mehr Unterseiten und Navigationsebenen dar, ermöglichen Newsletter-Anmeldungen, verlinken Partner-Logos und so weiter. Es gilt wie so oft der Tipp: Schauen Sie sich unter toujou-Kunden, im Web und/oder bei der Konkurrenz um und entscheiden.
Apropos toujou-Kunden: Anpassungen von Hintergrundfarbe oder ähnlichem und diverse andere Gestaltungsmittel, die nicht allein mit toujou-Elementen darstellbar sind, wurden in aller Regel durch individuelles Webdesign umgesetzt. Sprechen Sie uns an, welche Möglichkeiten Ihnen über die Element-Nutzung hinaus zur Verfügung stehen.