--- title: Website Overlay url: "https://www.toujou.de/service/toujou-setup/website-overlay/" date: 2019-12-02 modified: 2022-09-27 --- # Website Overlay 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [toujou Setup](https://www.toujou.de/service/toujou-setup/) 4. [Website Overlay](https://www.toujou.de/service/toujou-setup/website-overlay/) Website Overlay Settings ======================== Hier steuern Sie Seiteneinblendungen, die Besuchern beim Aufrufen Ihrer Website über dem eigentlichen Inhalt angezeigt werden sollen. Reiter: »Website Overlay« Auf dieser Seite 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. [Overlay-Seiten anlegen](#c1007248) [Inhalte erstellen](#c1007257) [Overlay-Design & Funktion aktivieren](#c1007260) [ ![](https://www.toujou.de/_assets/processed/EB76ojKeaKe_Sf3XSQF1trr7FQdSaSr0m0tqIzmHG2A/q:85/w:433/h:270/fn:Y3NtXzAxX1NlaXRlX2Vyc3RlbGxlbl84YTViYmNlYmM0:t/cb:e89e9bef8b5df2774037977929e83584f5b5e9a1/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDFfU2VpdGVfZXJzdGVsbGVuLnBuZw) ](https://www.toujou.de/_assets/processed/Q1_L6eIDBslwtjWE8EUH0oesnohKWdZmiS7zKzrilcY/q:85/w:1024/h:639/fn:Y3NtXzAxX1NlaXRlX2Vyc3RlbGxlbl8wZTI0Y2FjMjNj:t/cb:e89e9bef8b5df2774037977929e83584f5b5e9a1/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDFfU2VpdGVfZXJzdGVsbGVuLnBuZw) ### 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](https://www.toujou.de/tutorials/seiteneigenschaften/). [ ![](https://www.toujou.de/_assets/processed/Rm5bTGq7wP3kJUeC3LN62o28MkOwO2N7r5Vbb2S0JR8/q:85/w:433/h:270/fn:Y3NtXzA0X1NlaXRlbmVpZ2Vuc2NoYWZ0ZW5fYXVmcnVmZW5fbmV1XzA1ZGY0ZjE5NWM:t/cb:7c90f9cc4f3359a5958670da7ab7d5ca322aa861/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDRfU2VpdGVuZWlnZW5zY2hhZnRlbl9hdWZydWZlbl9uZXUucG5n) ](https://www.toujou.de/_assets/processed/bBOHW892qgsjDpLB9IG97sNz6h4_9-I3adDTOOdoP84/q:85/w:1024/h:639/fn:Y3NtXzA0X1NlaXRlbmVpZ2Vuc2NoYWZ0ZW5fYXVmcnVmZW5fbmV1X2ZhZDE4YzBlYWY:t/cb:7c90f9cc4f3359a5958670da7ab7d5ca322aa861/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDRfU2VpdGVuZWlnZW5zY2hhZnRlbl9hdWZydWZlbl9uZXUucG5n) ### 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. [ ![](https://www.toujou.de/_assets/processed/tm-OQkYZAzceMglbw2ND3i9bL1RczvBUGYblQJQCLFA/q:85/w:433/h:270/fn:Y3NtXzA2X0FlbmRlcnVuZ19iZXN0YWV0aWdlbl83OTBmOGVhZGZl:t/cb:dadbf4be380d6405d08f2948fc97a5d8785df71b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDZfQWVuZGVydW5nX2Jlc3RhZXRpZ2VuLnBuZw) ](https://www.toujou.de/_assets/processed/5qa9BjnZli8HWyOnOk3sXmkZRI_ORNbPxqLsFjTNpcE/q:85/w:938/h:585/fn:Y3NtXzA2X0FlbmRlcnVuZ19iZXN0YWV0aWdlbl81MWIwMDViYjAz:t/cb:dadbf4be380d6405d08f2948fc97a5d8785df71b/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDZfQWVuZGVydW5nX2Jlc3RhZXRpZ2VuLnBuZw) ### Ä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**. [ ![](https://www.toujou.de/_assets/processed/EWMOd7jVWg383lkgjyz-2_J7kPHTGNXpvZv8q5yXWuo/q:85/w:433/h:270/fn:Y3NtXzAzX1NlaXRlX2VpbmJsZW5kZW5fbmV1X2UwYTVjN2M0YjY:t/cb:9c27bc78a24c961e6656025cd0e8051282ddbd8c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDNfU2VpdGVfZWluYmxlbmRlbl9uZXUucG5n) ](https://www.toujou.de/_assets/processed/NMzSMrJmLqXiQRze7QqZl8kBWFrzjppFKn5_pI5Y2BQ/q:85/w:938/h:585/fn:Y3NtXzAzX1NlaXRlX2VpbmJsZW5kZW5fbmV1XzQ0NWNiYWI5MzI:t/cb:9c27bc78a24c961e6656025cd0e8051282ddbd8c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDNfU2VpdGVfZWluYmxlbmRlbl9uZXUucG5n) ### 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 -------------------------- [ ![](https://www.toujou.de/_assets/processed/v53t46YD3I1WPQaS59qvknwnjzEn5cu5LK92IwWmsew/q:85/w:433/h:270/fn:Y3NtX0NvbnRlbnRfZWluZnVfX2dlbl80N2RlMTE1ZWYz:t/cb:c37eedc18638eef32ae8e61c122a23fc01cbecc9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vQ29udGVudF9laW5mdV9fZ2VuLmpwZw) ](https://www.toujou.de/_assets/processed/JNNmah2olSv0yMO4PDAl9i9maKWHVjxoZtYDxbtyUNE/q:85/w:1024/h:639/fn:Y3NtX0NvbnRlbnRfZWluZnVfX2dlbl8xM2I1MDJjZDA2:t/cb:c37eedc18638eef32ae8e61c122a23fc01cbecc9/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vQ29udGVudF9laW5mdV9fZ2VuLmpwZw) ### Content einfügen - Eine Overlay-Seite unterscheidet sich im Vergleich zu anderen Seitentypen in den Gestaltungsmöglichkeiten (siehe [Frontend-Ansicht unten](#c1007258)). - 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. [ ![](https://www.toujou.de/_assets/processed/84ALlzGFF3WunsUsZoWBbQ72qmL6t2MWTYkYCppODDk/q:85/w:433/h:270/fn:Y3NtXzA4X0NvbnRlbnRfQWdlX1Jlc3RyaWN0aW9uXzI5NTlkOGYzYjg:t/cb:556ef094aa921e8032d27ce831e40f17b34759db/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDhfQ29udGVudF9BZ2VfUmVzdHJpY3Rpb24ucG5n) ](https://www.toujou.de/_assets/processed/gU1awBU3JlS1b0I2AGmh-qTKucC9PrLW6v8hGgE7sBU/q:85/w:1024/h:639/fn:Y3NtXzA4X0NvbnRlbnRfQWdlX1Jlc3RyaWN0aW9uXzliNmNjMzcwYzI:t/cb:556ef094aa921e8032d27ce831e40f17b34759db/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L1NlaXRlX2FubGVnZW4vMDhfQ29udGVudF9BZ2VfUmVzdHJpY3Rpb24ucG5n) ### 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](#c1007258)). 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: *BUTTONTEXT*. --- Theme-Settings: Overlay-Design und Funktion aktivieren ------------------------------------------------------ [ ![](https://www.toujou.de/_assets/processed/f0ly-DMz7yHM-_VUa6CGx8H6SuHOlUzbOPwaaO-CB8Q/q:85/w:433/h:270/fn:Y3NtXzAxX1JlaXRlcl9PdmVybGF5X2VpbmJsZW5kZW5fOTdlMjQwMmQ2MQ:t/cb:4a4c5fcf0e1e8324a583d0a15e335de1f38c808d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzAxX1JlaXRlcl9PdmVybGF5X2VpbmJsZW5kZW4ucG5n) ](https://www.toujou.de/_assets/processed/I_EkqJPbVOZbauQmPZ5hGieR68qDbjlmjxnp6m1ORSY/q:85/w:938/h:585/fn:Y3NtXzAxX1JlaXRlcl9PdmVybGF5X2VpbmJsZW5kZW5fNGExNTQ5MDI3Yg:t/cb:4a4c5fcf0e1e8324a583d0a15e335de1f38c808d/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzAxX1JlaXRlcl9PdmVybGF5X2VpbmJsZW5kZW4ucG5n) ### 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. [ ![](https://www.toujou.de/_assets/processed/0-BlAhnVAVLWqzj0b4kjv5NY0kYasV2t99yruXp9ddQ/q:85/w:433/h:270/fn:Y3NtXzAyX092ZXJsYXlfRGVzaWduc18xMDVlOGNiMGIz:t/cb:8b54a18903c7b5aaec3865b696e438e99543c1ab/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzAyX092ZXJsYXlfRGVzaWducy5wbmc) ](https://www.toujou.de/_assets/processed/t-7YtcNNXg59WfsX2cQvXFf2O1s4FUbmRcbXv_mDmt8/q:85/w:938/h:585/fn:Y3NtXzAyX092ZXJsYXlfRGVzaWduc19kNzRhZWE5NTA1:t/cb:8b54a18903c7b5aaec3865b696e438e99543c1ab/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzAyX092ZXJsYXlfRGVzaWducy5wbmc) ### 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](#c1007258)) oder dunklen (**dunkel**, [siehe Kundenwebsite](http://osborne.de)) Schleier überlagert. - *Logo oben auf dem Overlay anzeigen:* Stellen Sie den Regler auf Grün, wenn oberhalb Ihres Contents Ihr [Firmenlogo](https://www.toujou.de/service/toujou-setup/logo-hochladen/) 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](https://www.toujou.de/service/toujou-setup/farben-festlegen/). Achtung: [Headlines](https://www.toujou.de/service/toujou-setup/farben-festlegen/#c1001566), die Sie ggf. im Content verwenden, werden in den regulären Primär- und Sekundärfarben ausgespielt. [ ![](https://www.toujou.de/_assets/processed/sgCEwGPo_XfXVqHOxLvik5zPDp0VDRTe50uxmqhUPX4/q:85/w:433/h:270/fn:Y3NtXzAzX092ZXJsYXlfVHlwZV91bmRfU2VpdGVfNzc4MTEyYWY4Yg:t/cb:1fa00f7915426573ecd2b8ccb5b033b26d35df6e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzAzX092ZXJsYXlfVHlwZV91bmRfU2VpdGUucG5n) ](https://www.toujou.de/_assets/processed/oXXfntQcn6aaaxnS9EP9P-n7JVpiOmi8OWQXN6w42Xc/q:85/w:938/h:585/fn:Y3NtXzAzX092ZXJsYXlfVHlwZV91bmRfU2VpdGVfMDM1ZWE1MTdhOQ:t/cb:1fa00f7915426573ecd2b8ccb5b033b26d35df6e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzAzX092ZXJsYXlfVHlwZV91bmRfU2VpdGUucG5n) ### 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](#c1007258) eingefügt. [ ![](https://www.toujou.de/_assets/processed/xGC6Q4PrkrxsatGA3OFyo8N50NpQ1wbzlJauQjkAV6E/q:85/w:433/h:270/fn:Y3NtXzA0X1NlaXRlbl9hdXNzY2hsaWVzc2VuXzRjNmFlN2VjZWI:t/cb:749ce2257af8a6437be7b0c490669c27cd73543a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzA0X1NlaXRlbl9hdXNzY2hsaWVzc2VuLnBuZw) ](https://www.toujou.de/_assets/processed/MSVKlKfvOZkoZYStp3u3bXqpMHWAzPTmyIZebCDnaXU/q:85/w:1024/h:639/fn:Y3NtXzA0X1NlaXRlbl9hdXNzY2hsaWVzc2VuX2U5NmIyYzU2ODg:t/cb:749ce2257af8a6437be7b0c490669c27cd73543a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5LzA0X1NlaXRlbl9hdXNzY2hsaWVzc2VuLnBuZw) ### 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"). Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben Frontend-Ansichten ------------------ [ ![](https://www.toujou.de/_assets/processed/WOScjMR94OWtyfg0aJxj99oy5Nwy6oEeXbcpgwUf2dg/q:85/c:2000:1125:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAwX1NpbXBsZV9PdmVybGF5X0Zyb250ZW5kXzJfOTg3MTFjODc0NQ:t/cb:f5d435512add4d3ce235ec4e371454415be83b8c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L0Zyb250ZW5kLzAwX1NpbXBsZV9PdmVybGF5X0Zyb250ZW5kXzIucG5n) ](https://www.toujou.de/fileadmin/toujou/tutorials/02_toujou-theme/009_website_overlay/Frontend/00_Simple_Overlay_Frontend_2.png) #### 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. [ ![](https://www.toujou.de/_assets/processed/u7vCYtEwmKJK2s8alNx1BpC_txMeT9noJJjlZWs_7Ig/q:85/c:2000:1125:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAwX0FnZV9PdmVybGF5X0Zyb250ZW5kXzJfNDk5NzU3NmIwOA:t/cb:a5c5539db3ee431ffc27bba7228551fefec51b32/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L0Zyb250ZW5kLzAwX0FnZV9PdmVybGF5X0Zyb250ZW5kXzIucG5n) ](https://www.toujou.de/fileadmin/toujou/tutorials/02_toujou-theme/009_website_overlay/Frontend/00_Age_Overlay_Frontend_2.png) #### 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?«. [ ![](https://www.toujou.de/_assets/processed/BC9q2nW-AVXGTLmNdxJknyMwsW1p-4XOmCTqM7JZP2E/q:85/c:2000:1125:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAwX0FnZV9PdmVybGF5X0Zyb250ZW5kX25lZ2F0aW9uXzJfYmZmNjg5Yjc4ZA:t/cb:5bab2f563efe357bc533985d6f670dcdb3369374/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvdHV0b3JpYWxzLzAyX3RvdWpvdS10aGVtZS8wMDlfd2Vic2l0ZV9vdmVybGF5L0Zyb250ZW5kLzAwX0FnZV9PdmVybGF5X0Zyb250ZW5kX25lZ2F0aW9uXzIucG5n) ](https://www.toujou.de/fileadmin/toujou/tutorials/02_toujou-theme/009_website_overlay/Frontend/00_Age_Overlay_Frontend_negation_2.png) #### 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](#c1007256) eingeblendet. - Wird hier »Ja« geklickt, schließt sich das Overlay-Fenster und Besuchern stehen alle Website-Inhalte zur Verfügung. ##### toujou-Tutorials [Checkliste ❯](https://www.toujou.de/service/#c1001893) [Kontakt/Daten hinterlegen ❯ ](https://www.toujou.de/tutorials/kontakte-anlegen/) [Dateiliste / Fileadmin ❯ ](https://www.toujou.de/tutorials/dateiliste/) [Navigation bearbeiten ❯ ](https://www.toujou.de/tutorials/seiten-anlegen/) [Seiteninhalte ❯](https://www.toujou.de/tutorials/seiteninhalte/) [Seiteneigenschaften ❯](https://www.toujou.de/tutorials/seiteneigenschaften/) [Responsive-Check ❯](https://www.toujou.de/tutorials/responsive-mobile-first/) [Yoast SEO ❯](https://www.toujou.de/tutorials/yoast-seo/) [Redirects ❯](https://www.toujou.de/tutorials/redirects/) / [Blog ❯](https://www.toujou.de/tutorials/blog-administration/) [Seiten übersetzen ❯](https://www.toujou.de/tutorials/seiten-uebersetzen/) [Linkvalidator ❯](https://www.toujou.de/tutorials/linkvalidator/) ##### toujou-Setup [Theme ❯ ](https://www.toujou.de/service/toujou-setup/theme-bearbeiten/) [Logo ❯ ](https://www.toujou.de/service/toujou-setup/logo-hochladen/) [Font ❯ ](https://www.toujou.de/service/toujou-setup/font-bestimmen/) [Color ❯ ](https://www.toujou.de/service/toujou-setup/farben-festlegen/) [Social Media ❯ ](https://www.toujou.de/service/toujou-setup/social-media/) [Analytics ❯](https://www.toujou.de/service/toujou-setup/analytics/) [Data Protection ❯](https://www.toujou.de/service/toujou-setup/datenschutz/) [Website Overlay ❯](https://www.toujou.de/service/toujou-setup/website-overlay/) ##### toujou-Elementbibliothek [Texte ❯ ](https://www.toujou.de/service/elementbibliothek/text-elements/) [Medien ❯ ](https://www.toujou.de/service/elementbibliothek/media-elements/) [Combinations❯ ](https://www.toujou.de/service/elementbibliothek/combined-elements/) [Teaser ❯ ](https://www.toujou.de/service/elementbibliothek/teaser-elements/) [Cards ❯](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blockquotes ❯ ](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) [Collections ❯](https://www.toujou.de/service/elementbibliothek/collections/) [Maps ❯ / ](https://www.toujou.de/service/elementbibliothek/map-elements/)[Blog ❯ ](https://www.toujou.de/service/elementbibliothek/blog-elements/) [Events ❯ ](https://www.toujou.de/service/elementbibliothek/events/)/ [Widgets ❯ ](https://www.toujou.de/service/elementbibliothek/widgets/) [Navigation ❯](https://www.toujou.de/service/elementbibliothek/navigation-elements/) [HTML ❯ ](https://www.toujou.de/service/elementbibliothek/html/)/ [Forms ❯ ](https://www.toujou.de/service/elementbibliothek/forms/) ##### toujou TOURISM [tourism-Modul ❯](https://www.toujou.de/tutorials/tourism-modul/) [Expertise & Konzept ❯](https://www.toujou.de/websites/websites-fuer-reiseveranstalter/) [Alle Features ❯](https://www.toujou.de/loesungen/etourism/) [toujou-Reiseportale ❯](https://www.toujou.de/warum-toujou/unsere-kunden/#c1002004) [Reiseseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisen-anlegen/) [Reiseseiteneigenschaften ❯](https://www.toujou.de/tutorials/reiseseiten/reiseseiteneigenschaften/) [Reisekategorien ❯](https://www.toujou.de/tutorials/reiseseiten/reisekategorien-anlegen/) [Termine & Preise ❯](https://www.toujou.de/tutorials/reiseseiten/termine-preise/) [Reisesuchseiten anlegen ❯](https://www.toujou.de/tutorials/reiseseiten/reisesuchseite/) [Trip Elements ❯ ](https://www.toujou.de/service/elementbibliothek/trip-elements/) [Search Elements ❯](https://www.toujou.de/service/elementbibliothek/trip-elements/search-elements/)