---
title: "Editor tour"
description: "The parts of the editor and what each one is for - top bar, ribbon, slide list, stage, timeline and properties panel."
canonical_url: "https://docs.ols.yonn.online/en/start/editor-tour"
---
# Editor tour

> The parts of the editor and what each one is for - top bar, ribbon, slide list, stage, timeline and properties panel.

The editor is where you build your course. It looks a lot like a presentation program: slides on the left, the big slide in the middle, settings on the right. It has six areas:

- **Top bar**: course title, undo, preview and publish.
- **Ribbon**: the tabs with all tools, from **Home** to **View**.
- **Slide list**: all slides, sorted by chapter (scene).
- **Stage**: the slide you are working on.
- **Timeline**: when each object appears and disappears.
- **Properties panel**: the settings of whatever you selected.

![The editor with the sample course: ribbon at the top, slide list on the left, slide in the middle, properties panel on the right, timeline at the bottom](https://docs.ols.yonn.online/screenshots/en/editor-tour-overview.png)

## Find your way in 3 steps

<procedure>

### Pick a slide

Click a slide in the slide list on the left. It opens in the middle.

### Select something

Click an object on the slide, for example a text or a button. The properties panel on the right now shows its settings.

### Change it

Change a setting on the right, or drag the object on the slide. Made a mistake? Press <key-combo keys="Ctrl+Z">



</key-combo>

 to undo.

</procedure>

<hint-box kind="tip" title="Guided introduction">

The first time you open the editor, a short introduction in 5 steps explains the areas. You can start it again any time with <ui-path path="View > Show introduction">



</ui-path>

.

</hint-box>

## Top bar

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

<tbody>
  <tr>
    <td>
      Logo with arrow
    </td>
    
    <td>
      Goes back to <strong>
        My courses
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      Course title
    </td>
    
    <td>
      Click it to rename the course.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Saved locally
      </strong>
    </td>
    
    <td>
      Shows that everything is saved in this browser. Changes are saved automatically.
    </td>
  </tr>
  
  <tr>
    <td>
      Ribbon tabs
    </td>
    
    <td>
      <strong>
        Home
      </strong>
      
      , <strong>
        Insert
      </strong>
      
      , <strong>
        Slides
      </strong>
      
      , <strong>
        Design
      </strong>
      
      , <strong>
        Animations
      </strong>
      
       and <strong>
        View
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Undo
      </strong>
      
       and <strong>
        Redo
      </strong>
    </td>
    
    <td>
      The arrows. Hover over them to see what they will undo, for example "Undo: Move".
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Language
      </strong>
    </td>
    
    <td>
      Switches the editor between English and German. Your course content is not changed.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Dark theme
      </strong>
    </td>
    
    <td>
      Switches the editor to dark colors.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Preview
      </strong>
    </td>
    
    <td>
      Plays the current slide like a learner sees it. The arrow next to it offers <strong>
        This slide
      </strong>
      
      , <strong>
        This scene
      </strong>
      
       and <strong>
        Whole project
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Publish
      </strong>
    </td>
    
    <td>
      Creates the file for Moodle or a website.
    </td>
  </tr>
</tbody>
</table>

## Ribbon

<table>
<thead>
  <tr>
    <th>
      Tab
    </th>
    
    <th>
      What you find there
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Home
      </strong>
    </td>
    
    <td>
      Cut, copy, paste and the format painter, <strong>
        New slide
      </strong>
      
       and <strong>
        Layout
      </strong>
      
      , font and text alignment, <strong>
        Order
      </strong>
      
       and <strong>
        Align
      </strong>
      
      , <strong>
        Find
      </strong>
      
      , <strong>
        Replace
      </strong>
      
       and <strong>
        Fonts
      </strong>
      
      , plus <strong>
        Preview
      </strong>
      
      , <strong>
        Player
      </strong>
      
       and <strong>
        Export
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Insert
      </strong>
    </td>
    
    <td>
      Everything you can put on a slide: <strong>
        Text box
      </strong>
      
      , <strong>
        Shapes
      </strong>
      
      , <strong>
        Lines
      </strong>
      
      , <strong>
        Icon
      </strong>
      
      , <strong>
        Chart
      </strong>
      
      , <strong>
        Progress
      </strong>
      
      , <strong>
        Table
      </strong>
      
      , <strong>
        Image
      </strong>
      
      , <strong>
        Video
      </strong>
      
      , <strong>
        Audio
      </strong>
      
      , <strong>
        Media library
      </strong>
      
      , <strong>
        Web object
      </strong>
      
      , <strong>
        Captions
      </strong>
      
      , <strong>
        Button
      </strong>
      
      , <strong>
        Hotspot
      </strong>
      
      , <strong>
        Input
      </strong>
      
      , <strong>
        Marker
      </strong>
      
      , <strong>
        Scroll panel
      </strong>
      
      , <strong>
        Question
      </strong>
      
      , <strong>
        Results slide
      </strong>
      
       and <strong>
        Question banks
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Slides
      </strong>
    </td>
    
    <td>
      <strong>
        New slide
      </strong>
      
      , <strong>
        Duplicate
      </strong>
      
      , <strong>
        Import presentation
      </strong>
      
      , <strong>
        Delete
      </strong>
      
      , <strong>
        New scene
      </strong>
      
      , <strong>
        Story view
      </strong>
      
      , questions, and the slide settings <strong>
        Advance
      </strong>
      
      , <strong>
        When revisited
      </strong>
      
      , <strong>
        Hide in menu
      </strong>
      
       and <strong>
        Start slide
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Design
      </strong>
    </td>
    
    <td>
      The course <strong>
        Design
      </strong>
      
       (colors and fonts), <strong>
        Edit master
      </strong>
      
       and <strong>
        Layout
      </strong>
      
      , the slide size and the <strong>
        Background
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Animations
      </strong>
    </td>
    
    <td>
      <strong>
        Entrance
      </strong>
      
       and <strong>
        Exit
      </strong>
      
       animations, <strong>
        Add path
      </strong>
      
       for motion paths and the <strong>
        Slide transition
      </strong>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        View
      </strong>
    </td>
    
    <td>
      <strong>
        Slide
      </strong>
      
       or <strong>
        Story
      </strong>
      
       view, <strong>
        Grid
      </strong>
      
      , <strong>
        Snap to grid
      </strong>
      
      , <strong>
        Guides
      </strong>
      
      , zoom, and the course-wide windows <strong>
        Variables
      </strong>
      
      , <strong>
        Media library
      </strong>
      
      , <strong>
        Player
      </strong>
      
      , <strong>
        Course
      </strong>
      
      , <strong>
        Translate
      </strong>
      
      , <strong>
        Version history
      </strong>
      
      , <strong>
        Connect AI
      </strong>
      
       and <strong>
        Show introduction
      </strong>
      
      .
    </td>
  </tr>
</tbody>
</table>

Every button has a tooltip that explains it. **Collapse ribbon** (the small arrows at the far right) hides the ribbon to give you more space. Click the active tab again to bring it back.

## Slide list

On the left you see all slides, grouped by scene (chapter). The number next to **Slides** is the total.

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

<tbody>
  <tr>
    <td>
      Slide
    </td>
    
    <td>
      Click to open it. Drag it to move it, also into another scene.
    </td>
  </tr>
  
  <tr>
    <td>
      Small badges on a slide
    </td>
    
    <td>
      Show the start slide, layers, triggers, question slides and results slides.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Story view
      </strong>
      
       icon
    </td>
    
    <td>
      Shows all scenes and their connections at a glance.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Add scene
      </strong>
      
       icon
    </td>
    
    <td>
      Creates a new chapter with one slide.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Add slide
      </strong>
      
       icon (plus)
    </td>
    
    <td>
      Adds a new slide.
    </td>
  </tr>
  
  <tr>
    <td>
      Right-click on a slide
    </td>
    
    <td>
      <strong>
        Rename
      </strong>
      
      , <strong>
        Duplicate
      </strong>
      
      , <strong>
        New slide below
      </strong>
      
      , <strong>
        Set as start slide
      </strong>
      
      , <strong>
        Hide in menu
      </strong>
      
      , <strong>
        Move to scene
      </strong>
      
      , <strong>
        Delete
      </strong>
      
      .
    </td>
  </tr>
</tbody>
</table>

Details: [Slides, scenes and layouts](https://docs.ols.yonn.online/en/build/slides-and-scenes).

## Stage

The stage in the middle shows the selected slide.

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

<tbody>
  <tr>
    <td>
      The slide
    </td>
    
    <td>
      Drag objects to move them. Use the handles to resize and the round handle to rotate (hold <key-combo keys="Shift">
        
      </key-combo>
      
       for 15-degree steps). Double-click a text to edit it.
    </td>
  </tr>
  
  <tr>
    <td>
      Bar above the slide
    </td>
    
    <td>
      Shows <strong>
        Slide
      </strong>
      
       and its layers. Click a layer to edit it, or <strong>
        Layer
      </strong>
      
       (plus) to create one.
    </td>
  </tr>
  
  <tr>
    <td>
      Rulers
    </td>
    
    <td>
      Pixel rulers at the top and left edge.
    </td>
  </tr>
  
  <tr>
    <td>
      Bar below the slide
    </td>
    
    <td>
      Switches <strong>
        Show grid
      </strong>
      
      , <strong>
        Snap to grid
      </strong>
      
      , <strong>
        Smart guides
      </strong>
      
      , <strong>
        Rulers
      </strong>
      
       and <strong>
        Respect timeline position
      </strong>
      
       on and off, plus zoom and <strong>
        Fit
      </strong>
      
      .
    </td>
  </tr>
</tbody>
</table>

You can drop image, video and audio files from your computer straight onto the stage.

## Timeline

Below the stage, the timeline shows one row per object.

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

<tbody>
  <tr>
    <td>
      <strong>
        Play
      </strong>
      
       and <strong>
        Go to start
      </strong>
    </td>
    
    <td>
      Play the slide right in the editor.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Cue point
      </strong>
    </td>
    
    <td>
      Sets a marker at the current time. Triggers can react to it.
    </td>
  </tr>
  
  <tr>
    <td>
      Bars
    </td>
    
    <td>
      When an object appears and disappears. Drag the bar or its edges.
    </td>
  </tr>
  
  <tr>
    <td>
      Rows
    </td>
    
    <td>
      The top row is in front. Drag a row up or down to change the order, or onto another layer.
    </td>
  </tr>
  
  <tr>
    <td>
      Eye and lock
    </td>
    
    <td>
      Hide an object while you work, or lock it so it can't move.
    </td>
  </tr>
  
  <tr>
    <td>
      Zoom buttons and <strong>
        Fit duration
      </strong>
    </td>
    
    <td>
      Make the time axis larger or smaller.
    </td>
  </tr>
</tbody>
</table>

Details: [Timeline, states and animation](https://docs.ols.yonn.online/en/build/timeline-and-animation).

## Properties panel

On the right, the panel adapts to what you selected. It has five tabs (shown as icons, the active one with its name):

<table>
<thead>
  <tr>
    <th>
      Tab
    </th>
    
    <th>
      What you set there
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <strong>
        Format
      </strong>
    </td>
    
    <td>
      Position, size, colors, text and the options of this object type. With nothing selected: title, duration, background and transition of the slide.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Triggers
      </strong>
    </td>
    
    <td>
      What happens on a click, at a certain time or when something changes.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        States
      </strong>
    </td>
    
    <td>
      Other looks of the object, for example when the mouse is over it.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Layers
      </strong>
    </td>
    
    <td>
      The slide and its layers, with their settings.
    </td>
  </tr>
  
  <tr>
    <td>
      <strong>
        Animation
      </strong>
    </td>
    
    <td>
      How the object appears, disappears or draws attention.
    </td>
  </tr>
</tbody>
</table>

On question slides and results slides, the tabs **Question** and **Result** appear as well. Rarely used options sit in collapsible sections that open by themselves when something in them is set.

## Right-click and rename everywhere

Everything that has actions also has a right-click menu with the same entries. Renaming works the same everywhere: double-click, the menu or <key-combo keys="F2">



</key-combo>

.

## Tablets and phones

On an iPad the editor is fully usable. On narrow screens the slide list and the properties panel open as drawers. On an iPhone you can view slides, start the preview and change text with a double tap. For everything else, use a tablet or a computer. The finished course works on every device.

## If something doesn't work

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

<tbody>
  <tr>
    <td>
      The ribbon is gone
    </td>
    
    <td>
      It is collapsed. Click the active ribbon tab again, or double-click the row of tabs.
    </td>
  </tr>
  
  <tr>
    <td>
      The properties panel shows "No object selected"
    </td>
    
    <td>
      Click an object on the slide first. For slide settings, click an empty spot on the stage.
    </td>
  </tr>
  
  <tr>
    <td>
      Objects look pale
    </td>
    
    <td>
      They are not visible yet at the current time. Switch off <strong>
        Respect timeline position
      </strong>
      
       in the bar below the slide, or move the playhead.
    </td>
  </tr>
  
  <tr>
    <td>
      I can't move an object
    </td>
    
    <td>
      It is locked. Click the lock in its timeline row, or right-click it and choose <strong>
        Unlock
      </strong>
      
      .
    </td>
  </tr>
</tbody>
</table>


## Sitemap

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