Website Overlay Settings
Hier steuern Sie Seiteneinblendungen, die Besuchern beim Aufrufen Ihrer Website über dem eigentlichen Inhalt angezeigt werden sollen.
Reiter: »Website Overlay«
Overlay-Seiten anlegen Inhalte erstellen Overlay-Design & Funktion aktivieren Video-Tutorial
Overlay-Seiten anlegen
Um Overlay-Seiten in toujou nutzen zu können, müssen zunächst eigens eingerichtete Seitentypen mit Content bestückt werden. Das hier folgende Tutorial hilft Ihnen bei der manuellen Einrichtung einer oder mehrerer Overlay-Seiten.
Content Page anlegen und Seite benennen
- Oberhalb des Seitenbaums sehen Sie die verfügbaren Seiten-Icons.
- Klicken Sie auf das schwarze Dokument-Icon (»Content Page«) und ziehen Sie es per Drag-and-Drop an die gewünschte Stelle innerhalb Ihres Seitenbaums.
- Jede neue Seite trägt zunächst den Titel [Default Title], den Sie unmittelbar nach Erstellung der Seite überschreiben können.
- Geben Sie der Content Page einen neuen Titel; in unserem Beispiel erstellen wir zunächste eine Age-restriction-page und benennen diese zur effektiven Zuordnung »Overlay Alter«.
- Den Titel können Sie auch später be-/überarbeiten.
Seitentyp ändern
- Bleiben Sie im Seitenmodul und klicken im Seitenbaum auf die neu angelegte Seite.
- Oberhalb des Arbeitsbereichs rufen Sie die Seiteneigenschaften auf, indem Sie auf das Editier-Icon klicken.
- Bleiben Sie im Reiter Allgemein; dort sehen Sie ganz oben die Sektion Seite.
- Mit Klick auf das Dropdown-Menü Typ sehen Sie alle verfügbaren Seitentypen in schriftlicher Form.
- Eine Overlay-Seite erstellen Sie, indem Sie auf Overlay Page klicken und damit die Beschaffenheit Ihrer vorherigen Content Page ändern.
Änderung bestätigen
- Da die oben beschriebene Veränderung des Seitentyps für bestehende Seiten Folgen für deren Funktionalität und Inhalte hat, müssen Sie diese Bearbeitung gesondert bestätigen.
- Klicken Sie daher im nun geöffneten Fenster Aktualisierung erforderlich auf OK.
Overlay-Seite einblenden und im Menü ausblenden
- Bleiben Sie innerhalb der Seiteneigenschaften der Suchseite und klicken auf den Reiter Zugriff.
- Per Default sind im Aufbau befindliche Seiten ausgeblendet. Aktivieren Sie den Schalter im Bereich Seite sichtbar, indem Sie auf den Regler drücken, sodass er grün erscheint, um die Seite im Frontend sichtbar zu machen und damit die Funktionalität der Overlay-Einblendung zu gewährleisten.
- Per Default werden neue Seiten in Ihrer Navigation angezeigt. Im Falle der Overlay-Seite – diese soll schließlich nicht im Menü angezeigt werden – deaktivieren Sie die Sichtbarkeit im Bereich Seite in Menüs aktiviert mittels Drücken des Reglers.
- Speichern Sie Ihre Änderung.
Inhalte für Overlay-Seiten
Content einfügen
- Eine Overlay-Seite unterscheidet sich im Vergleich zu anderen Seitentypen in den Gestaltungsmöglichkeiten (siehe Frontend-Ansicht unten).
- Zur Gestaltung der Seite stehen Ihnen für Text-Inhalte ein Overlay Content-Bereich oben sowie ein Overlay-Abschluss-Bereich unten zur Verfügung.
- Für Seiten mit Altersbeschränkung:
- Button positive/Bestätigung: Ein Button zur Bestätigung der Volljährigkeit.
- Button negative/Verneinung: Ein Button zur Verneinung der Volljährigkeit.
- Altersbeschränkung auf Verneinung: Warnungstext für minderjährige Website-Besucher nach Verneinung.
- Befüllen Sie die Seite wie gewohnt per Klick auf den Button +Inhalt im jeweiligen Seitenbereich.
Content für die Altersbeschränkung
- Im Screenshot sehen Sie beispielhaft einen Inhalt (»Ja«) für den Fall, dass Sie für Ihr Website-Angebot eine Altersbeschränkung anzeigen müssen. Voraussetzung für die gezeigten Inhalte ist eine Frage zum Alter Ihrer Besucher, die Sie im Overlay Content einbauen müssen (siehe Frontend-Screenshot). Für die Verneinung und die Altersabfrage stehen gesonderte Inhaltsfelder zur Verfügung.
- Auf die Frage »Sind Sie über 18?« bieten sich beispielhalber die folgenden Inhalte an:
- Button positive/Bestätigung: »Ja«
- Button negative/Verneinung: »Nein«
- Altersbeschränkung auf Verneinung: »Leider sind Sie nicht alt genug, um diese Website zu besuchen.«
-
Um das Overlay durch Klick auf einen Button zu schließen und direkt auf eine andere Seite zu verlinken (z.B. bei Terminankündigungen), fügen Sie im Quellcode die Klasse "overlay-button-close-trigger" hinzu, z.B. so: <a class="button button--primary overlay-button-close-trigger" href="t3://page?uid=100">BUTTONTEXT</a>.
Theme-Settings: Overlay-Design und Funktion aktivieren
Overlay-Einstellungen aufrufen
- Mit Klick auf das Icon toujou Theme in der Modulübersicht Ihrer Website öffnet sich das Bearbeitungsfenster.
- Klicken Sie auf den Reiter Website Overlay, um das Einstellungsfenster aufzurufen.
- Klicken Sie im Bereich Enable/Disable overlay auf den roten Button Overlay disabled, um das Einstellungsfenster zu aktivieren.
Design-Einstellungen
- Bildschirmfüllendes Hintergrundbild für das Overlay: In diesem Bereich können Sie ein vollflächiges Hintergrundbild hochladen, das hinter Ihrem Overlay-Content eingeblendet wird.
- Wählen Sie zwischen einem hellen und dunklen Overlay: Für den Fall, dass kein Bild genutzt wird, wird die Startseite Ihrer Website mit einem hellen (hell, siehe Screenshot) oder dunklen (dunkel, siehe Kundenwebsite) Schleier überlagert.
- Logo oben auf dem Overlay anzeigen: Stellen Sie den Regler auf Grün, wenn oberhalb Ihres Contents Ihr Firmenlogo ausgespielt werden soll.
- Overlay Schriftfarbe / Overlay-Hintergrundfarbe: Standardmäßig ist für die Schriftfarbe ein Grauton mit dem Wert #666666 und für die Hintergrundfarbe Weiß mit dem Wert #ffffff eingetragen. Nutzen Sie optional Ihre Farbwerte aus den Color Settings. Achtung: Headlines, die Sie ggf. im Content verwenden, werden in den regulären Primär- und Sekundärfarben ausgespielt.
Overlay-Typ und Seite auswählen
- Overlay-Typ: Hier legen Sie fest, ob Sie eine Seite zur Altersbeschränkung vorschalten (müssen) oder ob es sich um eine »simple« Seiteneinblendung handelt.
- Overlay-Seite: Sie können für verschiedene Funktionen oder Aktionen und Zeiträume verschiedene Seiteneinblendungen anwenden.
- Für beide Overlay-Typen sowie beide Overlay-Seiten haben wir weiter unten Frontend-Ansichten eingefügt.
Unterseiten für Overlay-Funktion ausschließen
- Im Bereich Von der Overlay-Funktion ausgeschlossene Seiten sind Impressum und Datenschutz standardmäßig bereits ausgewählt. Damit stellen Sie sicher, dass wichtige Informationen zur Erfassung von Daten sowie die Inhaberschaft Ihrer Website stets aufrufbar sind.
- Sie können diesem Ausschluss weitere Unterseiten hinzufügen. Dazu klicken Sie auf den Button Seite. Es öffnet sich die Datensatzauswahl, in der Sie Ihren Seitenbaum angezeigt bekommen. Klicken Sie auf die entsprechende Seite, die Sie von der Overlay-Funktion ausschließen möchten. In unserem Beispiel: Kontakt.
Video-Tutorials via jweiland.net
Website Overlay
Überblick über die wichtigsten Settings für Seiteneinblendungen (Laufzeit: 10'27").
Frontend-Ansichten
Simple overlay with close button
- In dieser Beispielansicht sehen Sie einen simplen Overlay-Content zur Begrüßung auf einer neuen Website.
- Hervorgehoben sind das Website-Logo, das im Tutorial ein- oder ausgeblendet werden kann sowie
- ein Close-Button oben rechts. Nach dem Klick auf diesen Button können Besucher auf alle Inhalte Ihrer Website zugreifen.
Age restriction overlay
- In dieser Beispielansicht sehen Sie alle verfügbaren Content-Bereiche in Anwendung, inklusive Altersbeschränkungs-Buttons zur Confirmation oder Negation.
- Wie oben beschrieben, ist für die Nutzung der Buttons in Form von »Ja« und »Nein« als mögliche Antworten eine entsprechende Frage zu formulieren.
- In unserem Beispiel im Bereich des Overlay Content »Sind Sie über 18?«.
Age restriction hint on negation
- Sie haben die Möglichkeit, minderjährige Besucher darüber zu informieren, dass die Seite nicht aufgerufen werden darf.
- Für den Fall, dass Besucher die Option »Nein« wählen, wird daraufhin ein von Ihnen erstellter Hinweis eingeblendet.
- Wird hier »Ja« geklickt, schließt sich das Overlay-Fenster und Besuchern stehen alle Website-Inhalte zur Verfügung.