Add an overlay to a page

An overlay is a pop-up which is displayed when you open a page. The overlay itself is also a page. You use an overlay if you want to direct attention to something, for example a new phone number, a promoted product, a temporary action, etc.

The overlay page is always linked to a 'mother page'. If the user opens the mother page, the mother page is displayed overlaid with the overlay page. The advantage of this is that navigation on the site is not significantly affected: if the user closes the overlay, he or she again returns to the mother page.

If a user closes the overlay page, it no longer comes to the foreground. Because of the use of cookies, the overlay will no longer appear as long as the user continues to use the same system. If the user starts using another system, logs on using a different name (in Windows) or deletes the cookies, the overlay will once again appear.

Add an overlay page:

1. Log on and start Site management.
   1. Open the site.
   2. Log on with the username and password.
   3. Click on: OK.
   4. Click on the user name at the top right.

      

   5. Click on: Site management.

2.  Click on: New / Portal page.
3. Select a value for Page type.
4. Enter the description.
5. Click on: Next.
6. If required, add keywords that increase the discoverability of the page.
7. Click on: Next.
8. Select the Use this page as overlay check box.

   

9. Click on: Add.

Edit an overlay page:

1. Click on: Properties.
2. Select Maximum width in Layout.

   

   Since an overlay page does not contain a menu, it is best to set the layout to maximum width so that the layout appears nicely positioned across the middle of the site. If you select full screen then you cannot specify where the page appears.

3. Click on: Modify.

To format the page:

You can format the overlay page so it looks exactly like you want to display it. In the below procedure, you use a table that spans the entire width, which is an easy way to use a background colour.

1. Click on: Layout in the Display frame.
2. Click on: New / Formatted text.
3. Click on: Contents.
4. Add a table (using the CMS editor):

   

   1. Specify that you want the table to have 1 row and 1 column.
   2. Select a value for Background colour table.

      This is not mandatory. If you add a background colour, the overlay page no longer catches the eye.

   3. Click on: Modify.
5. To adjust cell properties:
   1. Right click with the mouse in the table.
   2. Click on: CEL / Celeigenschappen.
   3. Set the height of the cell to (for example) 300.
   4. Select Top in Verticale uitlijning.
   5. Click on: Modify.

   You can now add text and images to the cell.

To add a Close button:

If you want to display a close button in the image then you add an image specially for closing the overlay page. Without this image, the close button remains in the scroll bar of the site.

1. Click on: Edit (in the Page frame).
2. Click on: Layout in the Display frame.
3. Click on: New in the Page parts frame.
4. Click on: Image.
5. Click on: Add image.
6. Select an image of a close button.
7. Click on: Create.
8. Select the Close overlay page check box.

   

9. Click on: Create.
10. Open the properties of the image.
11. Select Align right in Horizontal alignment.
12. Click on: Adjust.
13. Click on: Contents.
14. Click in the Text with formatting field to open the CMS Editor.
15. First add the text.
16. Then, use the CMS Editor to add an image:
17. Click on: Create.
18. Move the close button so that it is above the content text.
19. Click on: Publish.
20. Click on Yes in the message.

To add an overlay to a page:

1. Log on and start Site management.
   1. Open the site.
   2. Log on with the username and password.
   3. Click on: OK.
   4. Click on the user name at the top right.

      

   5. Click on: Site management.

2. Open the page whose properties you want to change.
3. Click on: Edit (in the Page frame).
4. Click on: Properties.
5. Select a value for Overlay page.

   You can use the search button to open the view with pages.

6. As from Profit Update 2016.2.06 you can have an overlay page appear after a couple of seconds. You can use this option, for example if a user visits a page for more than 10 seconds. After 10 seconds you can display a question like: "Do you need help?" or "Need more information? Call our Sales department", etc. If the user leaves the main page within 10 seconds, the overlay is not shown.
7. Click on: Publish.
8. Click on Yes in the message.
9. You still have to authorise the users for the overlay page.