Unleash your design dreams ✨ Learn about the new editor

Latest version: 7.0.1

Buy now

Help center

/

Editor tour

/

Settings Sidebar Tour

Settings Sidebar Tour

The Settings Sidebar in Slider Revolution contains the core settings foundational to every module. In this tour, we’ll step through each part of the Settings Sidebar and cover what it controls.

Settings Sidebar Panels

The Settings Sidebar is accessed by clicking the Settings button 1 in the Top Bar ->.

Once open, the Settings Sidebar has 10 to 18 buttons, each of which opens either a panel of core settings for your module, the Addons window, or the editor tour.

The Settings Sidebar buttons you may see are:

Module Configuration Panel

In the Module Configuration panel you can configure core module settings such as the title, the type of module, and key layout and responsiveness controls.

The panel is split into three tabs:

Basic Tab

At the top of the Basic tab you can set the module title.

In the Type section you can choose whether you want to create a Hero, Slider or Carousel type module. You can also opt to set it to use a full width or full height layout.

In the Responsive Behavior section you can toggle a small set of key responsive controls.

In the Size Limitations section you can optionally cap the possible maximum height and/or width of the module.

Content Flow Tab

In the Content Flow tab you configure the behavior of the Content Flow Container. The Content Flow Container is the area within a module in which your content is laid out.

There are five possible device sizes you can activate size controls for, and once active you can specify the size you want the Content Flow Container to be for that device.

Advanced Tab

In the Advanced tab’s HTML Settings section, you can optionally specify custom selector names for the module, and set whether layer content should be user selectable.

The Module Spacing section, if active, provides settings to control the margin and padding around the module.

The Module Position section, if active, allows you to fix the module at the top of the page, and to determine the visibility of overflowing portions of the module.

The 3D Perspective section, if active, gives configuration settings for the type and depth of 3D projection used in the module.

The Layer Scaling Between Devices section, if active, provides various ways to configure how module layers have their properties automatically scaled for different device sizes.

Content Source Panel

In the Content Source Panel you can select the source of content to populate your modules.

If you are building a carousel module, use the Carousel Settings panel to control its layout and animation effects.

The panel includes two tabs:

Layout Tab

In the top section of the Layout Tab you can configure key layout and visibility properties.

In the Style section, control rounded corners and spacing.

Effects Tab

At the top of the Effects Tab set carousel animation basics such as how long changing slides should take, and easing effect.

In the Sibling Effects section, configure the animation you want to apply to previous and next slides.

Set optional additional animations under Fade Effect, Rotation Effects and Scale Effects.

SlideShow, Order & Progress Panel

The panel features three tabs:

SlideShow Tab

In the Auto Progress section set whether you want to proceed through slides automatically.

Progress Bar Tab

In the Progress Bar tab, turn on Active to display a progress bar, and configure the type and function of the bar.

In the Style section configure the progress bar’s appearance.

Use the Position section to set the layout of the progress bar.

In the Visibility section configure which device sizes should show the progress bar.

Duration & Init Tab

In the Duration section set how long slides should display by default.

Use the Order section to re-order slide progression.

In Initialisation & Delay have the module wait for things like DOM loading or API calls before playing.

Navigation Panel

The panel uses four tabs:

Controls Tab

At the top of the Controls tab set the size of any preview images for the next and previous slides.

In the Available Controls section toggle on the navigation types you want to use: Arrows, Bullets, Tabs, Thumbnails, Scrubber.

Mouse Wheel and Keyboard Tabs

Under the Mouse Wheel and Keyboard tabs set which mouse actions and keys should be active for slide navigation.

Touch Tab

Use the Touch tab to set which kinds of touch interaction will activate navigation, and in what direction.

Navigation Control Panels

For each navigation type activated under Navigation -> Controls, a panel will appear where you can configure that navigation type. E.g. if you activate Arrows, an Arrows settings panel will appear.

Each panel is organized into four tabs:

Skin & Style Tab

At the top of the Skin & Style tab, choose the design skin you wish to apply to the navigation.

In the Settings section configure the styling for that skin. Different skins will provide different settings.

Layout Tab

In the Layout Tab configure the layout of navigation elements, setting their alignment and offsets.

View Tab

In the View tab set how navigation elements should animate, their direction of action, their visibility on various devices, and whether they should be hidden after a delay.

Skin Editor Tab

In the Skin Editor Tab you can make advanced modifications to a skin, creating your own custom skin design.

Scroll & Parallax Panel

The panel is comprised of two tabs:

Parallax Effect Tab

In the Parallax Effect tab you can set whether you’d like to have scroll or page scroll or mouse move interaction trigger parallax visuals, and optionally disable the effect on mobile devices.

Scroll Based Timeline Tab

In the Scroll Based Timeline tab, turn on Active to have your module progress with page scrolling rather than progressing automatically, then configure the module progression’s speed and timing.

Use as Modal Panel

If you plan to use your module as a modal popup, use the Modal Settings section to control its behavior, and the Style and Position section to set its pop up speed and background color.

Extra Style Panel

The Extra Style panel allows you to set module-wide styling.

Use the Module Background section to set background images and colors, use the Overlay section to add a pattern over the top of the whole module, add a drop shadow with the Module Shadow Effect section, and add a preloader in the Preloaded section.

Accessibility Panel

Use the Accessibility panel to enable module-wide ARIA attributes and ARIA-Live announcements.

Browser & Device Panel

In the Browser & Device panel tweak how a module behaves in browsers, adjust performance options, and turn off certain features on mobile.

Custom Scripts Panel

In the Custom Scripts panel, add custom CSS and JavaScript to your module.

Custom CSS Tab

Write custom CSS in the code window, and use the Tags panel on the right to auto-insert SR7 specific element selectors.

Custom JavaScript Tab

Write custom JS in the code window, and use the Methods panel on the right to inside SR7 API methods, the Events panel to insert API events, and the Examples panel to see some premade code snippets.

Addons

Click the Addons button in the Settings Sidebar and the Addons Window will appear. Here you can browse and install new addons for your module.

Editor Tour

Click the Editor Tour button in the Settings Sidebar to launch a live tour of the editor that will guide you through its key features.

In this article

back to overview