Use overlays to allow readers to read more without having all of the information on the page. This gives a cleaner look to a publication and makes it more accessible.
In this article
- What is an Overlay
- Creating Overlays
- Linking to Overlays
- Managing existing Overlays
- Editing overlays
- Overlay settings
What is an overlay?
An overlay is a pop-up screen that is linked to a button, hotspot or image. This is usually used to add additional information to an article on a page.
Note: overlays are not indexed. This means that the content on an overlay cannot be found by any search engines. We advise putting valuable information on the page itself instead of on the overlay.
There are two ways to create Overlays. You can create an overlay when you add a button or hotspot to the page. Here you can choose to link to an overlay and the option to create a new overlay appears. When creating a new overlay you can choose to either start from scratch or use one of the preset templates.
Another way to create a new overlay is via overlay management. You can find overlay management next to Pages. Click on the button ‘+New overlay’ to create a new overlay. Here you can also choose to start from scratch or use one of our templates.
Linking to overlays
Linking to overlays can be done by adding a button, hotspot or image. Several buttons, hotspots or images can be linked to the same overlay. So no need to have the same overlay duplicated.
Managing existing overlays
The overlays that are in use, so linked to a button, hotspot or image, can be viewed in the overlay management. Other overlays, that aren’t linked, are only visible in the dropdown menu when you want to link a button, hotspot or image. Once linked, they will appear in the overlay management as well.
Editing an overlay is very similar to editing a page. You can add blocks, columns and elements. The only difference will be the overlay background that allows you to determine the background behind the overlay.
In the overlay settings in the ‘Background’ you can set a background color to the overlay and determine the color behind the overlay. This is grey with a transparency of 30 by default. You can choose any color or transparency.
Tip: when you want the overlay to optically look smaller, you can set the background color of the overlay and the background color of the block in the overlay to transparent. That way you can choose to only give the background of the column a color so that the overlay looks smaller.
In the ‘Border’ settings, a border can be set around the overlay.
Make your overlay ‘float’ by setting a ‘Shadow’ behind the overlay.
Change the color of the close button in the ‘Close icon’ settings.
Tip: don’t set the color of the close icon to white when the overlay background is white too. On mobile, the close icon will be on the overlay and the reader won’t be able to see the icon that way.