Website Overlay Settings

Here you can control page overlays that are to be displayed above the actual content when visitors access your website.

Tab: »Website Overlay«

Create overlay pages Create content Overlay design & activation Front end view

Create overlay pages

To use toujou’s overlay pages, the page type must first be filled with content. The following tutorial will help you to set up one or more overlay pages manually.

Create a content page

Above the page tree you will see all available page icons.
Click on the black document icon (»Content Page«) and drag and drop it to the desired position within your page tree.
A thin line indicates in which area the new page will be sorted when you move over the page tree during the drag and drop process.

Name the page

Each new page initially has the title [Default Title], which you can overwrite immediately after creating the page.
Give the content page a new title; in our example, we will first create an age-restriction overlay page and name it »Age restriction«.
You can also edit the title later.

Change page type

Stay in the Page module and click on the newly created page in the page tree.
Above the work space, open the page properties by clicking on the edit icon.
Stay in the General tab; there you will see the Page section at the top.
Click on the Type drop-down menu to see all available page types.
You can create an overlay page by clicking on Overlay Page and thus change the appearance of your previous content page.

Confirm the change

Since the change of the page type described above has consequences for the functionality and content of existing pages, you must confirm this change separately.
Therefore, click OK in the »Refresh required« window that now opens.

Overlay page visibility

Stay in the page properties of the overlay page and click on the Access tab.
By default, pages under construction will be hidden. Activate the switch in the Page visible area to make the page visible in the front end to ensure the overlay is functioning.
By default, the new pages will be displayed in your navigation. In order to prevent the overlay page from being displayed in the menu, deactivate the visibility in the Page enabled in menus area by deactivating the switch.
Save your changes.

Content for overlay pages

Create content

An overlay page differs from other page types because of its design options (see front end view below).
To help design the page, there is an Overlay Content area at the top and an Overlay Conclusion area at the bottom for text content.
For age-restriction pages:
- Button positive/Confirmation: A button to confirm that visitors are of age.
- Button negative/Negation: A button for visitors denial of majority.
- Age restriction hint on negation: Warning text for underage website visitors after negation.
Fill the page as usual by clicking on the + Content button in the respective page area.

Content for Age restriction

The screenshot shows sample content in case you need to display an age restriction for your website offer. A prerequisite for the displayed content is a question about the age of your visitors, which you must include in the overlay content (see front end view).
For answers to the question »Are you of legal age to consume alcohol?«, the following content can be used as an example:
- Button positive/Confirmation: »Yes«
- Button negative/Negation: »No«
- Age restriction hint on negation: »You must be of legal drinking age to enter this site.«

Theme Settings: Overlay design and function activation

Overlay settings

Click on the toujou Theme icon in the module overview of your website.
Click on the »Website Overlay« tab to open this setup section.
In the Enable/Disable overlay area, click on the red button Overlay disabled to activate the setup.

Design settings

Fullscreen background image for the overlay: In this section you can upload a full-screen background image that will be displayed behind your overlay content.
Choose between light or dark overlay: In case no image is used, a Light (see screenshot) or Dark (see customer website) mask will be added to the start page of your website.
Display logo on top of overlay: Set the switch to green if your logo is to be displayed above your content.
Overlay font color/Overlay background color: Set the predefined color values from the Color Settings or new color values. Note: Headlines that you may use in the content will be displayed in the regular primary and secondary colors.

Select overlay type and page

Overlay type: Here you define whether you (must) place an age restriction page or whether it is a »simple« page overlay.
Overlay page: You can apply different page overlays for different functions or actions and time periods. In our example, we created an overlay page for the launch of a new website and named the page accordingly for correct linking.
For both overlay types and both overlay pages, we added front end views below.

Exclude pages from the overlay functionality

In the Excluded pages from the overlay functionality section, you ensure that important information about the collection of data and the ownership of your website is always accessible.
You should add service pages such as Contact, Legal note and Privacy statement to this section.
To do so, click on the Page button. The Record selection will open, in which your page tree will be displayed. Click on the corresponding page that you want to exclude from the overlay function. In our example: Contact.

Front end view

Simple overlay with close button

In this sample view, you will see a simple overlay content to welcome you to a new website.
Highlighted are the website logo, which can be shown or hidden in the tutorial and
a close button in the upper right corner. After clicking this button, visitors can access all contents of your website.

Age restriction overlay

In this sample view you can see all available content areas in use, including the age restriction buttons for Confirmation or Negation.
As described above, in order to use the buttons in the form of »Yes« and »No« as possible answers, a corresponding question must be formulated.
In our example we placed »Are you of legal age to consume alcohol?« into the Overlay Content area.

Age restriction hint on negation

You have the option of informing underage visitors that the site may not be accessed.
In the event that visitors choose the »No« option, a notice you have created will be displayed (»You must be of legal drinking age to enter this site.«).
If visitors click the »Yes« option, the overlay window closes and all website content is available.