Stage

• Stage
  • Stage Area Section
  • Stage Top Bar Section
  • Stage Content Section
  • Layer Toolbar
  • Alignment Toolbar
  • Context Menu
  • Keyboard & Mouse Shortcuts Section

Stage

The Stage is accessed by opening any module for editing, which opens the Module Editor. The Stage occupies the central area of the Module Editor ¹ and is always visible.

The Stage is the visual workspace of the Module Editor. On the Stage you can preview the current slide, select and arrange layers directly, and access quick editing tools through the Layer Toolbar, the Alignment Toolbar and the Context Menu.

Stage Area Section

The Stage Area is the space in the center of the Stage where the current slide is previewed, using the dimensions displayed in the Stage Size Readout of the Top Bar ¹.

Hovering over an empty part of the slide outlines the Stage Area and displays its current height at the top left corner ² and its current width at the top right corner ³.

Stage Resize Handles

When you switch between device sizes the Stage Area is initially sized to match the corresponding Content Flow Container dimensions. The Stage Resize Handles, found at the left and right edges of the Stage Area ¹, let you preview how the layout looks between device sizes.

For example, you might have the device sizes Desktop and Mobile active, with widths of 1240px and 480px respectively, but need to check how the layout looks at 800px wide. In this case you can grab either the left or right resize handle and drag it until the layout is 800px wide.

As the stage is resized, its current dimensions are shown in the Stage Size Readout of the Top Bar, and the height and width labels at the top corners of the Stage Area update to match.

Resizing the stage in this way is a preview only. It does not affect any of your Content Flow Container size definitions, which are instead modified by going to the Settings Sidebar, then the Module Configuration panel, then the Content Flow tab, and finally the Content Flow Container section. To return the stage to a standard width, click any device size button in the Top Bar.

Stage Zoom

Hold CTRL, or ⌘ on Mac, and scroll the mouse wheel to zoom the stage in and out. The zoom is centered on the cursor position, and the current zoom percentage is displayed briefly at the top of the Stage Area.

When the stage is zoomed in beyond the size of the visible area, scroll bars appear at the edges of the Stage so the view can be repositioned.

Stage Panning

Hold SPACE and drag anywhere on the stage to pan the view. This is useful for repositioning the view while zoomed in.

Stage Top Bar Section

The Stage Top Bar sits directly above the Stage Area and displays the currently active editing mode, for example Design Mode, Animation Mode or Action Mode.

As you switch between editing modes with the Mode Switcher in the Right Sidebar, the Stage Top Bar changes to show the active mode.

Stage Content Section

Within the Stage Area is the Stage Content, comprised of the Slide Background, the layers added to the current slide, and any Static Slide layers.

Selecting Layers

Click a layer on the stage to select it, making it ready for editing. A selected layer is surrounded by a blue bounding box, and the Layer Toolbar appears near its top left corner. You will know when you have selected a different layer because the bounding box and Layer Toolbar move.

Clicking a layer that is nested inside a container, such as a Group, Row or Column, selects the nested layer directly. When a nested layer is selected, its parent container's bounding box is also shown. When a selected or hovered layer uses relative positioning, its margins are highlighted in pink and padding in blue on the stage.

To select multiple layers, hold SHIFT and click each layer in turn. The combined selection is outlined, the Layer Path in the Top Bar reads Multiple Elements Selected, and the Alignment Toolbar appears in place of the Layer Toolbar.

Click an empty part of the slide to select the Slide Background. Press ESC to deselect all layers.

Layers can also be selected by clicking their entries in the Layers Sidebar or the Timeline, which is useful when a layer is hard to click directly on the stage.

Moving Layers

Drag any absolutely positioned layer to move it freely around the stage. As an alternative to dragging, press the arrow keys to nudge the selected layer by 1px, or hold SHIFT while pressing the arrow keys to nudge it by 10px.

Relatively positioned layers flow with their sibling layers rather than sitting at fixed coordinates, so dragging one moves it to a new spot in the content flow. When dragging a relatively positioned layer over a Column or Group, the layer is placed into that container. Hold SHIFT while dragging to place the layer next to the container instead of into it.

Alignment & Snapping Aids

When dragging a layer, alignment guide lines appear as the layer's edges approach alignment targets. Alignment targets include the center and middle of the stage, and the edges, centers and middles of other layers.

If position snapping is enabled, the dragged layer also snaps into place when its edge nears an alignment target, so that the edge aligns exactly with the target.

These aids are configured in the Global Settings panel, accessed by going to the Plugin Dashboard, then the Top Bar, then clicking the Settings button, and finally opening the General tab's Editor Behavior section. There you can toggle Enable Align Guide Lines, set the Align Threshold controlling how close an edge must be before a guide line appears, toggle Allow Align Position Snap, and set the Snap Threshold controlling how close an edge must be before snapping occurs.

Resizing Layers

Drag the handles ¹ on a selected layer's bounding box to resize the layer. Hold SHIFT while resizing to toggle proportional resizing, so width and height scale together.

On Text and Button layers, double click a resize handle to set the layer's size to auto, sizing it to fit its content.

Add Row (Button)

While a Row is selected, a round blue Add Row button appears below the row on the stage. Click it to add a new Row to the slide.

Add Column (Button)

While a Row is selected, a round blue Add Column button appears at the right edge of the row on the stage. Click it to add a new Column to the row.

Layer Toolbar

When you are in Design Mode and select a single layer, the Layer Toolbar appears above the layer's top left corner, or below it when there is no room above. It contains quick access editing tools for the selected layer.

The buttons included in the Layer Toolbar vary depending on the type of the selected layer, as described by the visibility conditions of each button below. The Layer Toolbar does not appear for the Slide Background, and when multiple layers are selected the Alignment Toolbar appears instead.

Some buttons open a small fly-out of related buttons when hovered.

Group Layers (Button)

Creates a new Group layer containing the selected layer.

Add Element (Button)

Opens the Add Sidebar, from which a new layer can be added inside the selected container layer.

Insert Layer (Button Group)

Adds a new layer into the content flow next to the selected layer. Hover the button to reveal both options in a fly-out.

Options:

• _{Add Before}: Adds a new layer directly before the selected layer.
• _{Add After}: Adds a new layer directly after the selected layer.

Image Source (Button Group)

Changes the image displayed by the layer. Hover the button to reveal the available sources in a fly-out.

Options:

• _{WordPress Library}: Opens the WordPress media library to choose an image.
• _{SR Library}: Opens the Slider Revolution Elements library to choose an image.
• _{Generate AI Image}: Opens the AI image generation tool to create a new image.

Edit Image (Button)

Opens the layer's image in the Edit Image modal, where adjustments such as composition, lights, colors, effects, curves, filters, blur and presets can be applied.

Video Source (Button Group)

Changes the video used by the layer. Hover the button to reveal the available sources in a fly-out.

Options:

• _{WordPress Library}: Opens the WordPress media library to choose a video.
• _{SR Library}: Opens the Slider Revolution Elements library to choose a video.

SVG Source (Button Group)

Changes the SVG icon used by the layer. Hover the button to reveal the available sources in a fly-out.

Options:

• _{WordPress Library}: Opens the WordPress media library to choose an SVG.
• _{SR Library}: Opens the Slider Revolution Elements library to choose an SVG.

Audio Source (Button)

Opens the WordPress media library's Select Audio dialog, where a different audio file can be chosen for the layer.

Edit Text Layer (Button)

Opens the layer's Text settings in the Layer Panel of the Right Sidebar, where the layer's text content can be edited.

Text Align (Tab Select)

Set the horizontal alignment of text within the layer. The button shows the currently active alignment, and hovering it reveals the other alignments in a fly-out.

Options:

• _Left: Aligns text to the left.
• _Center: Aligns text to the center.
• _Right: Aligns text to the right.

Position (Tab Select)

Set whether the nested layer uses relative or absolute positioning. The button shows the currently active mode, and hovering it reveals the other mode in a fly-out. This is the same setting as Position in the Layout Behavior section of the Layer Panel.

Options:

• _REL: Relative positioning. The layer, and any sibling layers also using relative positioning, automatically arrange themselves so as not to overlap.
• _ABS: Absolute positioning. Rather than being auto-arranged, the layer is positioned by exact X and Y coordinates.

Display (Tab Select)

Set how the relatively positioned layer behaves within the content flow. The button shows the currently active mode, and hovering it reveals the other mode in a fly-out. This is the same setting as Display in the Layout Behavior section of the Layer Panel.

Options:

• _Block: The layer behaves like a paragraph. It takes up all available width regardless of its own width, and its alignment cannot be controlled by a parent layer.
• _{Inline Block}: The layer behaves like a line of text. It only takes up the width it needs, allowing sibling layers to sit next to it, and its alignment can be controlled by a parent layer.

Line Break After (Toggle Button)

Set whether a line break is forced after the layer.

Options:

• _On: Any sibling Inline Block layers are forced onto the next line.
• _Off: Sibling Inline Block layers sit next to the layer, on the same line, if they can fit.

Layer Alignment (3×3 Checkbox Grid)

Set the alignment of the layer relative to its parent container. The 3×3 grid represents the corners and edges of the parent container, e.g. to align top left choose the top left point. Hovering a point displays its name, such as Middle Center.

X & Y Position (Expander)

Displays the layer's current X and Y coordinates. Click the readout to expand editable X and Y fields, where exact pixel positions can be entered.

3D Rotation (Toggle Button)

Toggles 3D rotation editing mode for the selected layer.

Options:

• _On: X, Y and Z rotation handles appear on the layer's bounding box, and the toolbar expands to show the current rotation angle for each axis along with a Reset button. Drag an axis handle to rotate the layer around that axis, or drag anywhere on the stage to rotate the layer freely. Click Reset to return all three angles to 0.
• _Off: The rotation handles and angle readouts are hidden, and dragging the layer moves it as normal.

Duplicate & Delete (Button Group)

Duplicates or removes the selected layer. Hover the button to reveal both options in a fly-out.

Options:

• _{Duplicate Layer}: Creates a copy of the selected layer.
• _{Delete Layer}: Removes the selected layer from the slide.

Column Width (Text)

Displays the width of the selected Column as a fraction of its Row, e.g. 1/2. Type a new value into the field to change the column's width.

Move Column Left (Button)

Moves the selected Column one position to the left within its Row.

Move Column Right (Button)

Moves the selected Column one position to the right within its Row.

Content Align (Tab Select)

Set the vertical alignment of the column's child layers. The button shows the currently active alignment, and hovering it reveals the other alignments in a fly-out.

Options:

• _Top: Child layers align to the top of the column.
• _Center: Child layers align to the vertical center of the column.
• _Bottom: Child layers align to the bottom of the column.

Row Zone (Tab Select)

Moves the selected Row between the slide's three row zones. The button shows the zone the row currently sits in, and hovering it reveals the other zones in a fly-out.

Options:

• _{Move to Top Rows}: Moves the row to the top rows zone of the slide.
• _{Move to Middle Rows}: Moves the row to the middle rows zone of the slide.
• _{Move to Bottom Rows}: Moves the row to the bottom rows zone of the slide.

Alignment Toolbar

When multiple layers are selected, by holding SHIFT and clicking each layer, the Alignment Toolbar appears in place of the Layer Toolbar. Its buttons align, distribute, arrange and group the selected layers.

Alignment is relative to the selection as a whole. For example, Align Left moves the selected layers so their left edges match the leftmost edge of the current selection.

Align Left (Button)

Aligns the left edges of all selected layers with the leftmost edge of the selection.

Align Center (Button)

Aligns the horizontal centers of all selected layers with the horizontal center of the selection.

Align Right (Button)

Aligns the right edges of all selected layers with the rightmost edge of the selection.

Align Top (Button)

Aligns the top edges of all selected layers with the topmost edge of the selection.

Align Middle (Button)

Aligns the vertical middles of all selected layers with the vertical middle of the selection.

Align Bottom (Button)

Aligns the bottom edges of all selected layers with the bottommost edge of the selection.

Distribute Horizontally (Button)

Distributes the selected layers evenly along the horizontal axis.

Distribute Vertically (Button)

Distributes the selected layers evenly along the vertical axis.

Arrange as Row (Button)

Repositions the selected layers so they sit together in a single horizontal row.

Arrange as Column (Button)

Repositions the selected layers so they sit together in a single vertical column.

Arrange as Grid (Button)

Repositions the selected layers to arrange them in a grid of rows and columns.

Group Layers (Button)

Creates a new Group layer containing all the selected layers.

Context Menu

When you are in Design Mode, right click a layer on the Stage to open the Context Menu, providing easy access to additional editing tools for that layer. Right clicking also selects the layer under the cursor, including the Slide Background when an empty part of the slide is right clicked.

The same menu entries are shown for every layer type, with one exception. When an Image layer is selected, three additional entries for changing and editing the image appear at the top of the Edit fly-out.

Entries marked with an arrow open a fly-out menu when hovered.

Edit (Action Menu)

Opens a fly-out of editing destinations for the selected layer. Most entries open the corresponding settings panel for the layer in the Right Sidebar. The first three entries appear for Image layers only.

Options:

• _{WordPress Library}: Opens the WordPress media library to choose a replacement image.
• _{Slider Revolution Elements}: Opens the Slider Revolution Elements library to choose a replacement image.
• _{Image Editor}: Opens the layer's image in the Edit Image modal.
• _Layer: Opens the layer's Layer panel.
• _Style: Opens the layer's Style panel.
• _{Extra Style}: Opens the layer's Extra Style panel.
• _Interaction: Opens the layer's Interaction panel.
• _Visibility: Opens the layer's Visibility panel.
• _Animation: Opens the layer's animation settings.
• _Parallax: Opens the layer's Parallax panel.
• _Actions: Opens the layer's actions settings.

Copy (Action Menu)

Opens a fly-out of copy commands. As well as copying whole layers, individual aspects of the selected layer, such as its style or size, can be copied for reuse elsewhere.

Options:

• _{Selected Layers}: Copies the selected layers so they can be pasted.
• _Background: Copies the layer's background style settings.
• _Style: Copies the layer's style settings, including background.
• _{Extra Style}: Copies the layer's extra style settings.
• _Interaction: Copies the layer's interaction settings.
• _Size: Copies the layer's size.
• _Position: Copies the layer's position.
• _Visibility: Copies the layer's visibility settings.
• _{Animation Frames}: Copies the layer's animation frames.
• _{Animation & Scenes}: Copies the layer's animation frames along with its scenes.
• _Parallax: Copies the layer's parallax settings.

Paste Layer (Action Menu)

Opens a fly-out of paste commands for placing a previously copied layer relative to the selected layer.

Options:

• _{Paste Before Selected}: Pastes the copied layer directly before the selected layer.
• _{Paste After Selected}: Pastes the copied layer directly after the selected layer.

Duplicate (Button)

Creates a copy of the selected layer.

Delete (Button)

Removes the selected layer from the slide.

Show/Hide (Button)

Hides the selected layer on the Stage, or shows it again if it is currently hidden.

Lock/Unlock (Button)

Locks the selected layer so it cannot be selected or moved on the Stage, or unlocks it if it is currently locked.

Disable Menu (Button)

Disables the Context Menu, so that right clicking layers no longer opens it.

Keyboard & Mouse Shortcuts Section

The Stage supports the following keyboard and mouse shortcuts. The full list can also be viewed inside the editor by going to the Top Bar, clicking the Settings button, choosing Shortcuts, and selecting the Stage tab.

Navigation Shortcuts

• SPACE + Drag: Pan the stage.
• CTRL/⌘ + Mouse Wheel: Zoom the stage towards the cursor.

Layer Shortcuts

• ← ↑ ↓ →: Nudge selected layer(s) by 1px.
• SHIFT + ← ↑ ↓ →: Nudge selected layer(s) by 10px.
• DEL: Delete selected layer.
• ESC: Deselect all layers.

Resize & Drag Shortcuts

• SHIFT + Resize: Toggle proportional resizing.
• SHIFT + Drag: Place a relatively positioned layer next to columns or groups instead of into them.
• Double Click on a resize handle of a Text or Button layer: Set size to auto.