Top Bar

The Top Bar runs across the top of the Module Editor, holding the sidebar and timeline buttons, the device and stage size controls, and the preview, save and publish actions.

Top Bar


Go to the Module Editor, and find the Top Bar across the top of the screen, then:

  • Top Bar
    • Module Overview
    • Sidebar Buttons Section
      • Settings
      • Slides
      • Timeline
      • Layers
      • Add
    • Device & Size Section
      • Device Switcher
      • Enabled Devices
      • Stage Size Readout
    • Publish & Save Section
      • Publish
        • Publish Dialog
      • Preview
      • Save
      • Undo
      • Redo
    • Layer Path

The Top Bar is accessed by going to the Module Editor, where it runs across the top of the screen and is always visible.

The Top Bar holds the editor's module-wide controls. From it the four sidebars and the Timeline are opened, the Stage is switched between the module's device sizes and resized to preview in-between widths, and the module is previewed and saved. It also holds the Undo and Redo buttons, the embedding instructions a published module needs, and the Layer Path, which shows where the selected layer sits in the slide's hierarchy.

Module Overview (Button)

Opens the Slider Revolution module overview in a new browser tab, leaving the editor open in the current tab. The button carries the Slider Revolution logo and sits at the far left of the Top Bar.

Sidebar Buttons Section

The five buttons at the left of the Top Bar open and close the editor's sidebars and the Timeline. Each button is highlighted while the area it controls is open, and clicking it again closes that area.

Settings (Toggle Button)

Opens and closes the Settings Sidebar, which holds the module-wide configuration panels.

Options:

  • On: The Settings Sidebar is open.
  • Off: The Settings Sidebar is closed.

Slides (Toggle Button)

Opens and closes the Slides Sidebar, where the module's slides are managed.

Options:

  • On: The Slides Sidebar is open.
  • Off: The Slides Sidebar is closed.

Timeline (Toggle Button)

Opens and closes the Timeline across the bottom of the editor, where layer animations are arranged in time.

Options:

  • On: The Timeline is open.
  • Off: The Timeline is closed.

Layers (Toggle Button)

Opens and closes the Layers Sidebar, which lists every layer on the current slide.

Options:

  • On: The Layers Sidebar is open.
  • Off: The Layers Sidebar is closed.

Add (Toggle Button)

Opens and closes the Add Sidebar, from which new layers of every type are added to the slide.

Options:

  • On: The Add Sidebar is open.
  • Off: The Add Sidebar is closed.

Device & Size Section

In the center of the Top Bar, choose which of the module's device sizes the Stage displays, set which device sizes the module defines, and read or adjust the size the stage is currently previewed at.

Device Switcher (Tab Select)

Switches the Stage between the module's device sizes, so each layout can be edited in turn. One icon is shown for each device enabled in Enabled Devices, with the active device highlighted. Switching devices does not change the module, so no save is needed afterwards. Clicking a device also returns the stage to that device's standard size after the stage has been resized with the Stage Resize Handles or the Stage Size Readout.

Options:

  • Wide Screen: Displays the module at its Wide Screen size.
  • Desktop: Displays the module at its Desktop size.
  • Notebook: Displays the module at its Notebook size.
  • Tablet: Displays the module at its Tablet size.
  • Mobile: Displays the module at its Mobile size.

Enabled Devices (Multi-select)

Opens a checklist of the five device sizes, setting which of them the module gets custom layouts for. Checked devices appear as icons in the Device Switcher.

Options:

  • Wide Screen: The module gets a Wide Screen specific layout.
  • Desktop: The module gets a Desktop specific layout.
  • Notebook: The module gets a Notebook specific layout.
  • Tablet: The module gets a Tablet specific layout.
  • Mobile: The module gets a Mobile specific layout.

Stage Size Readout (Number, pixels)

Displays the dimensions the Stage Area is currently previewed at. The readout updates as devices are switched and as the stage is resized with the Stage Resize Handles, and typing a new value into either field resizes the stage preview to match.

Resizing the stage this way is a preview only. It does not change the module's Content Flow Container size definitions, which are edited by going to the Settings Sidebar, then the Module Configuration panel, then the Content Flow tab. To return the stage to a device's standard size, click that device in the Device Switcher.

Publish & Save Section

At the right of the Top Bar, save and preview the module, retrieve the shortcodes that embed it in a page, and step backwards and forwards through recent changes.

Publish (Button)

Opens the Publish Dialog, which holds the shortcodes and code snippets for embedding the module in the site. The button itself does not save or change the module.

Publish Dialog

The dialog covers two levels of embedding. Under Standard Module Embedding it provides the shortcode that embeds the module in the pages and posts editor, a second shortcode that adds it as a modal, and a note on adding it via the Revolution Module widget. Under Advanced Module Embedding it provides PHP snippets for adding the module to theme HTML, to the homepage only, or to single pages. Every shortcode and snippet carries a copy button.

Preview (Button)

Opens a preview of the module in a new browser tab.

Save (Button)

Saves the module. The button's label shows the save state, reading Saved when all changes are stored and Unsaved once the module has been modified, and an orange warning mark appears beside it while changes are unsaved.

Undo (Button)

Steps backwards through recent changes to the module.

Redo (Button)

Re-applies changes that were stepped backwards through with Undo.

Layer Path (Breadcrumb)

Shows where the currently selected layer sits in the slide's hierarchy, at the far right of the Top Bar. The path lists the selected layer's ancestors, such as the Group or Row that contains it, and each ancestor in the path can be clicked to select it. When nothing is selected the readout shows No Layer Selected.

In this article

back to overview