---
title: "Layers"
description: "Put pop-ups, hints and feedback on top of a slide without leaving it, and set how each layer behaves."
canonical_url: "https://docs.ols.yonn.online/en/build/layers"
---
# Layers

> Put pop-ups, hints and feedback on top of a slide without leaving it, and set how each layer behaves.

A **layer** is an extra sheet that lies on top of a slide. It can hold any objects you like. Layers are perfect for things that should appear only when needed: a pop-up with details, a hint, the feedback "Correct!" or "Try again". The slide itself is the bottom layer and is called **Slide** in the editor. You work with layers in three places:

- **The bar above the slide**: switch between the slide and its layers, create new ones.
- **The Layers tab** on the right: the list of layers and the **Layer properties**.
- **Triggers**: they show and hide layers while the course runs.

![The sample course with the layer "Name missing" selected: hint box on the slide, layer properties on the right and the layer's timeline below](https://docs.ols.yonn.online/screenshots/en/layers-properties.png)

## Create a pop-up in 4 steps

<procedure>

### Create a layer

Click the plus in the bar above the slide (or **New layer** in the **Layers** tab). The new layer is selected. Everything you insert now goes onto this layer.

### Name it and design it

Double-click the layer's name and call it something you will recognize, for example "Details". Add a background shape, some text and a close button.

### Open it with a button

Go back to **Slide** in the bar above. Select the button that should open the pop-up. In the **Triggers** tab click **New trigger** and pick the template **Button shows layer** under **Quick start**. Choose your layer.

### Close it again

Switch to your layer, select the close button and add a trigger with the template **Close layer**. Test it with **Preview**.

</procedure>

<hint-box kind="tip" title="The action behind it">

The templates use the trigger actions **Show layer** and **Hide layer**. In a layer's own triggers, **Hide layer** without a layer name closes that layer itself. More recipes in [Trigger recipes](https://docs.ols.yonn.online/en/interact/trigger-recipes).

</hint-box>

## Bar above the slide

<table>
<thead>
  <tr>
    <th>
      Element
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Slide
      </strong>
    </td>
    
    <td>
      Switches back to the slide itself (the bottom layer). The number shows how many objects it has.
    </td>
  </tr>
  
  <tr>
    <td>
      Layer tabs
    </td>
    
    <td>
      Click a layer to edit it. The number shows its objects.
    </td>
  </tr>
  
  <tr>
    <td>
      Eye
    </td>
    
    <td>
      Hides the layer in the editor only, so it doesn't get in your way. Learners are not affected.
    </td>
  </tr>
  
  <tr>
    <td>
      Three dots
    </td>
    
    <td>
      The layer's menu: rename, duplicate, delete.
    </td>
  </tr>
  
  <tr>
    <td>
      Plus
    </td>
    
    <td>
      Creates a new layer.
    </td>
  </tr>
</tbody>
</table>

## Layers tab

The **Layers** tab on the right lists **Slide and layers**. Lower in the list means further in front. Click an entry to edit it. When the slide itself is selected, its duration, background and audio are in the **Format** tab; **Slide properties** takes you there.

## Layer properties

Select a layer to see its **Layer properties**.

<table>
<thead>
  <tr>
    <th>
      Setting
    </th>
    
    <th>
      What it does
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Name
      </strong>
    </td>
    
    <td>
      The name you pick in triggers.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Duration
      </strong>
    </td>
    
    <td>
      Length of the layer's own timeline, in seconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Hide other layers
      </strong>
    </td>
    
    <td>
      Closes all other layers when this one appears. On by default.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Hide slide
      </strong>
    </td>
    
    <td>
      Makes the objects of the slide below invisible while the layer is open.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Block clicks on the slide
      </strong>
    </td>
    
    <td>
      Learners can't click anything on the slide below while the layer is open.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Pause the slide's timeline
      </strong>
    </td>
    
    <td>
      The slide stops playing while the layer is visible. Useful for pop-ups during a video or animation.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Hide on click outside
      </strong>
    </td>
    
    <td>
      Closes the layer when learners click next to it, like a typical pop-up.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Reset when revisited
      </strong>
    </td>
    
    <td>
      The layer starts fresh every time it opens. Off: it continues where it was.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Allow seekbar
      </strong>
    </td>
    
    <td>
      Learners may scrub within the layer's timeline.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Own background
      </strong>
    </td>
    
    <td>
      Fills the slide behind the layer's objects with its own color or picture.
    </td>
  </tr>
</tbody>
</table>

## Move objects between layers

<table>
<thead>
  <tr>
    <th>
      What you want
    </th>
    
    <th>
      How
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      Move an object to another layer
    </td>
    
    <td>
      Right-click it and choose <strong>
        Move to layer
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Move an object to a brand new layer
    </td>
    
    <td>
      Right-click it, <strong>
        Move to layer
      </strong>
      
      , <strong>
        New layer
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Move with the mouse
    </td>
    
    <td>
      In the timeline, drag the object's row onto another layer.
    </td>
  </tr>
</tbody>
</table>

## Feedback layers of questions

Question slides create their feedback layers by themselves: **Correct**, **Incorrect** and **Try again**. They are normal layers you can redesign freely. If you broke one, **Repair feedback layers** in the **Question** tab restores the missing parts. See [Questions and results](https://docs.ols.yonn.online/en/interact/questions-and-results).

## If something doesn't work

<table>
<thead>
  <tr>
    <th>
      Problem
    </th>
    
    <th>
      What to do
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      My layer never appears
    </td>
    
    <td>
      Check the trigger on the button: action <strong>
        Show layer
      </strong>
      
       with the right layer. Test with <strong>
        Preview
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      I inserted objects on the wrong layer
    </td>
    
    <td>
      Look at the bar above the slide to see which layer is active. Right-click the objects and use <strong>
        Move to layer
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      The layer covers my slide in the editor
    </td>
    
    <td>
      Click the eye next to the layer in the bar above the slide. It is hidden in the editor only.
    </td>
  </tr>
  
  <tr>
    <td>
      Learners can still click buttons behind the pop-up
    </td>
    
    <td>
      Switch on <strong>
        Block clicks on the slide
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      The pop-up closes when learners click somewhere
    </td>
    
    <td>
      <strong>
        Hide on click outside
      </strong>
      
       is on. Switch it off if learners should close it with your button only.
    </td>
  </tr>
</tbody>
</table>


## Sitemap

See the full [sitemap](https://docs.ols.yonn.online/sitemap.md) for all pages.