> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://revolution-slider.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# SR7 Editor — Interface Overview

This guide walks through the main interface of the SR7 editor (Slider, Banner & Sections) used to build hero sections, sliders, and carousels for a Shopify store.

## 1. Settings
The first icon in the top bar. Configures the overall module:
* **Module type** — Hero, Slider, or Carousel.
* **Layout** — Full width or full screen.
* **Other options** — slideshow progress indicators, navigation elements (arrows/dots), add-on management, and other module-level settings.

## 2. Slides Panel
Manages every slide in the module:
* Edit, duplicate, or delete slides.
* Drag and drop to reorder.
* Assign custom thumbnails to slides.
* Schedule slides to appear at specific times.

## 3. Timeline / Animation Mode
Opens the animation timeline for the currently selected slide and switches the editor into **Animation Mode**, used to animate layers in and out (see the separate Action Mode & Scenes guide for interaction-driven animation).

## 4. Layers Panel
Gives a full overview of every layer on the current slide:
* Reorder layers, manage nested groups and columns.
* Select layers that are hard to click directly on the stage.
* Access the **Bulk Editor** to swap fonts or colors across the entire module at once.

## 5. Add Panel
Where content creation happens. Lets you insert:
* Text, buttons, icons, shapes, containers, navigation elements.
* Special-effect layers contributed by add-ons.

## 6. Device Selector
The editor stage is a live visual representation of how the module renders on the live site.
* Drag the stage's resize handles to preview different screen widths.
* Device icons show which breakpoints are currently active and let you jump between them instantly.
* Up to **5 custom device sizes** can be configured, from widescreen down to mobile.

## 7. Preview Toolbar (top right)
* **Preview** — opens a live preview of the module in a new browser tab, even before saving.
* **Undo / Redo** — available at any time.
* **Publish** — shows all available embedding options, or the module can be inserted directly into a page through the Shopify integration.

## 8. Right Sidebar — Editing Modes
Three main modes are available:
* **Design Mode** — build the static layout of a slide.
* **Animation Mode** — animate layers in and out.
* **Action Mode** — add click/hover interactions (see the companion Action Mode & Scenes guide).