Creating a pop-up: all about overlays

An overlay is a pop-up that displays additional information without disrupting your pages. In this article, you'll learn how to add and manage overlays.

What is an overlay?

An overlay is a pop-up screen that is linked to a button, hotspot, image, or text. You can use it to add additional information to a page without creating extra clutter.

How to create an 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 either start from scratch or use one of the preset templates.

Another way to create a new overlay is in overlay management. First, click pages in the top left corner of the screen. Below you will then be able to see the overlays option.

Click +New overlay to create a new overlay. Here you can also choose to start from scratch or use one of our templates.

How to edit an overlay

Editing an overlay is very similar to editing a page. In overlay management, click the overlay you'd like to edit. 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.

Linking to overlays

You can link to an overlay from a button, hotspot, image, or text. In the general settings of these elements, you can select edit link to create the link to the overlay.

To make it clear for your audience how to return to a page from an overlay, we recommend adding a "Go back" button as a footer. In the video below, we show you how to do that.

Managing overlays

The overlays that are in use can be managed in overlay management. First, click pages in the top left corner of the screen. Below you will then see the overlays option. When you hover over an overlay, you will see 3 options.

• Save as template
  You can save overlays as templates so you can reuse them in your Foleon Docs. Templates will help you to save time and stay on-brand. Read all about it in our article Save time and stay on-brand with templates.

  

   

• Duplicate

  When you hover over an overlay, you will see the option duplicate. With this option, you can create a copy of that overlay. Keep in mind that it could take a few seconds before the new page is visible in the overview.

  💡 The word “Copy” will be added at the end of a duplicated overlay, because every overlay name needs to be unique.

  

   

   

• Delete

  When hovering over an overlay, you’ll find an option to delete that overlay. When you click the trash icon, you’ll be asked if you are sure you want to delete the overlay. When you click delete, the overlay gets deleted permanently. There is no option to retrieve it after it has been deleted

  💡 It is not possible to delete an overlay you’re currently on. First, move to a different overlay and then try again.

  

Overlay settings

Every overlay has its own settings. They can be edited by going to the top left corner of the overlay and clicking on the cogwheel icon in the red bar.

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

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

  

   

   

• Border

  The border option allows you to create a full border or a border on specific sides of your overlay. All sides at once is selected by default, which means that when you increase the border thickness, the same amount of border will appear on all sides at the same time.

  When all sides at once is deselected, the option to increase the amount of the border for each side will appear. It is also possible to add more than one border. Every border will have the same color that is selected at the border color picker.

  

   

• Shadow

  You can add a shadow to your overlay. Choose the shadow color with the color picker. After selecting the color you can choose the horizontal position and vertical position. The blur radius can be used to make the shadow less harsh and a bit more faded.

  

   

• Close icon
  
  Here you can change the color of the close button ("X") in the top right corner of the overlay pop-up. Your audience will be able to click it to close the overlay and return to the page.

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