Help center

/

Editor tour

/

Top Bar Tour

Top Bar Tour

The Top Bar lets you access editing panels, manage responsive design, and perform key workflow actions. Let’s take a closer look in this tour.

Top Bar Sections

The Top Bar is comprised of three sections:

  • Main Toolbar 1
  • Device Selector 2
  • Preview Toolbar 3

Main Toolbar

The Main Toolbar contains buttons for opening panels.

  • Settings 1: Opens the Settings Sidebar -> where you can access core module configuration settings.
  • Slides 2: Opens the Slides Sidebar where you can manage the Slides that make up a Module.
  • Timeline 3: Opens the Timeline, the section of the Module Editor dedicated to creating and managing animations for your layers.
  • Layers 4: Opens the Layers Sidebar, an area for managing the Layers that make up a Slide.
  • Add 5: Opens the Add Sidebar, used to add Layers onto the Stage.

Device Selector

The Device Selector includes tools for managing responsive sizes.

On the left end is the Stage Size Switcher, which changes your stage area to match the device size you select.

In the center is the button to open the Device Activator.

Once open, the Device Activator provides a quick access way to activate layouts for different device sizes.

Further configuration per device size can be found under Settings -> Module Configuration panel -> Content Flow tab -> Content Flow Container.

On the right end, the Stage Size Readout shows you the current dimensions of the Stage.

More on the Stage Size Readout can be found in the Stage Resize Handles section of our Stage Tour ->.

Preview Toolbar

The Preview Toolbar provides workflow control buttons.

  • Publish 1: Opens the Module Embedding Window, which provides information on embedding the module, as well as copy-paste ready shortcodes and PHP snippets.
  • Preview 2: Previews your module in a new tab.
  • Save 3: Saves your module.
  • Undo & Redo 4

In this article

back to overview