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  Frontend-Ansichten


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

  • 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.
  • Eine dünne Linie zeigt an, in welchem Bereich sich die neue Seite einsortieren wird, wenn Sie während des Drag-and-Drop-Verfahrens über den Seitenbaum fahren.

Seite benennen

  • 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.

Seite einblenden

  • Mit einem Rechtsklick auf das Seiten-Icon Ihrer neuen Content Page öffnet sich ein Kontextmenü.
  • Indem Sie auf den Menüpunkt Aktivieren klicken, blenden Sie die neue Seite ein.
  • Speichern Sie Ihre Änderung.

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 »Refresh required« auf OK.

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 conlusion-Bereich unten zur Verfügung.
  • Für Age-restriction-pages:
    • Button positive/Confirmation: Ein Button zur Bestätigung der Volljährigkeit.
    • Button negative/Negation: Ein Button zur Verneinung der Volljährigkeit.
    • Age restriction hint on negation: 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 Age restriction

  • Im Screenshot sehen Sie Beispiel-Inhalte 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).
  • Auf die Frage »Sind Sie über 18?« bieten sich beispielhalber die folgenden Inhalte an:
    • Button positive/Confirmation: »Ja«
    • Button negative/Negation: »Nein«
    • Age restriction hint on negation: »Leider sind Sie nicht alt genug, um diese Website zu besuchen.«

Theme-Settings: Overlay-Design und Funktion aktivieren

Overlay-Einstellungen aufrufen

  • Mit Klick auf das Icon toujou Theme in der Modulübersicht Ihrer Website öffent 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

  • Fullscreen background image for the overlay: In diesem Bereich können Sie ein vollflächiges Hintergrundbild hochladen, das hinter Ihrem Overlay-Content eingeblendet wird.
  • Choose between light or dark overlay: Für den Fall, dass kein Bild genutzt wird, wird die Startseite Ihrer Website mit einem hellen (Light, siehe Screenshot) oder dunklen (Dark, siehe Kundenwebsite) Schleier überlagert.
  • Display logo on top of overlay: Stellen Sie den Schalter auf Grün, wenn oberhalb Ihres Contents Ihr Firmenlogo ausgespielt werden soll.
  • Overlay font color/Overlay background color: 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 type: Hier legen Sie fest, ob Sie eine Seite zur Altersbeschränkung vorschalten (müssen) oder ob es sich um eine »simple« Seiteneinblendung handelt.
  • Overlay page: Sie können für verschiedene Funktionen oder Aktionen und Zeiträume verschiedene Seiteneinblendungen anwenden. In unserem Beispiel haben wir eine Overlay-Seite für den Start einer neuen Website erstellt und die Seite zur korrekten Verknüpfung entsprechend benannt.
  • 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 Excluded pages from the overlay fuctionality 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.

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.