Slider Revolution Block and Quick Edit

• Slider Revolution Block and Quick Edit
• Slider Revolution Block
  • Select Module
  • Edit Module
• Block Settings Sidebar
  • Module Info Section
  • Module Layout Section
  • Use as Modal Section
  • Block Offsets Section
  • Block Depth Section
  • Advanced Section
• Quick Edit Editor
  • Top Bar Section
  • Slides and Layers Section
  • Layer Settings Panel
• Slider Revolution Page Panel
  • Blank Template
  • Slide Template
  • Version

Slider Revolution Block and Quick Edit

The Slider Revolution block places a module into a WordPress post or page. It is accessed by editing any post or page, clicking the block inserter, searching for Slider Revolution, and clicking Slider Revolution. Searching may return several Slider Revolution blocks, and this one is named simply Slider Revolution ¹.

The module the block displays has to exist on the site already. Where there is no suitable one yet, importing a template creates it. The module's own appearance and behavior are set in the Module Editor.

Once a module is in place the block also offers two ways to edit it without leaving the page. Open Editor opens the full Module Editor in a new browser tab. Quick Edit opens a cut down editor over the page itself, holding a slides and layers list, a stage, and a small settings panel for whichever layer is selected.

Slider Revolution Block

The block itself contains two action menus above the module preview. One chooses which module the block displays, and the other opens that module for editing.

Select Module (Action Menu)

Chooses which module the block displays. Both entries open a library in a full screen window, and picking an item there returns to the page with the block pointing at it.

Options:

• _{Existing Module}: Opens the Select Module library, holding the modules already on the site.
• _{Import Template}: Opens the Templates library, holding the templates available to import as a new module.

Edit Module (Action Menu)

Opens the module the block is displaying for editing, in either the full Module Editor or the cut down Quick Edit editor.

Options:

• _{Open Editor}: Opens the module in the full Module Editor, in a new browser tab, leaving the page being edited untouched in its own tab.
• _{Quick Edit}: Opens the module in the Quick Edit editor, over the page being edited.

Block Settings Sidebar

The block's settings are in the Block tab of the WordPress editor sidebar, which appears when the block is selected. It holds six sections covering which module is shown, how it is laid out, whether it behaves as a modal, and how the block is spaced and styled on the page.

Module Info Section

Reports which module the block is displaying and offers four buttons for changing that module or editing it. The buttons duplicate what the Select Module and Edit Module menus on the block offer.

Alias (Readout)

Reports the alias of the module the block is displaying. The alias is the module's own text identifier, and it is what the block writes into the shortcode it renders.

Type (Readout)

Reports what kind of module the block is displaying and how many slides it holds. The wording follows the module's own type, so a slider and a hero report differently.

SR7 Editor (Button)

Opens the module the block is displaying in the full Module Editor, in a new browser tab. The page being edited stays open and untouched in its own tab. This is the same action as Open Editor in the block's Edit Module menu. It is only enabled once a module has been chosen for the block.

Quick Edit (Button)

Opens the module the block is displaying in the Quick Edit editor, over the page being edited. This is the same action as Quick Edit in the block's Edit Module menu. It is only enabled once a module has been chosen for the block.

Modules (Button)

Opens the Select Module library, holding the modules already on the site, so a different one can be chosen for the block. This is the same action as Existing Module in the block's Select Module menu.

Templates (Button)

Opens the Templates library, holding the templates available to import as a new module for the block. This is the same action as Import Template in the block's Select Module menu.

Module Layout Section

Sets whether the block overrides the width and height the module was built with.

Override Module Layout (Toggle)

Sets whether the module is laid out as it was built, or as this section specifies instead.

Options:

• _On: Shows the Full Width and Full Height settings, and lays the module out as those specify.
• _Off: Hides the Full Width and Full Height settings, and lays the module out as it was built.

Full Width (Toggle)

Sets whether the module stretches to the full width available to it on the page.

Options:

• _On: The module stretches to the full width available.
• _Off: The module keeps the width it was built with.

Full Height (Toggle)

Sets whether the module stretches to the full height available to it on the page.

Options:

• _On: The module stretches to the full height available.
• _Off: The module keeps the height it was built with.

Use as Modal Section

Sets whether the module appears inline where the block sits, or as a modal that pops up over the page, and if it pops up, what triggers it. More than one trigger can be switched on at once.

Insert Module as Modal (Toggle)

Sets whether the module appears in place on the page or as a modal that pops up over it.

Options:

• _On: The module becomes a modal, and the five pop up trigger settings appear.
• _Off: The module appears inline where the block sits, and the five pop up trigger settings are hidden.

1 Time Per Session (Toggle)

Sets whether the modal is limited to appearing once per visitor session rather than every time its trigger fires.

Options:

• _On: The modal appears once per session, and the Session (Hours) setting appears.
• _Off: The modal appears every time its trigger fires.

Session (Hours) (Number)

Sets how many hours a visitor session lasts for the purpose of the once per session limit. The default is 24. It applies to the Pop Up after Time and Pop Up at Scroll Position triggers.

Pop Up after Time (Toggle)

Sets whether the modal pops up on its own after the visitor has been on the page for a set time.

Options:

• _On: The modal pops up after a delay, and the After (ms) setting appears.
• _Off: No delay triggers the modal.

After (ms) (Number, milliseconds)

Sets how long after the page loads the modal pops up, in milliseconds. The default is 2000.

Pop Up at Scroll Position (Toggle)

Sets whether the modal pops up once the visitor has scrolled to a particular point on the page.

Options:

• _On: Scrolling triggers the modal, and the Based On setting appears along with either Offset or Container.
• _Off: Scrolling does not trigger the modal.

Based On (Dropdown)

Sets whether the scroll position that triggers the modal is measured as a distance down the page or as reaching a particular element.

Options:

• _Offset: The trigger point is a distance scrolled, set in the Offset setting.
• _Container: The trigger point is an element being reached, named in the Container setting.

Offset (Number, pixels)

Sets how far down the page the visitor must scroll before the modal pops up, in pixels. The default is 2000.

Container (Text)

Names the element the visitor must scroll to before the modal pops up. It is empty by default.

Pop Up by Events (Toggle)

Sets whether the modal pops up in response to a JavaScript event dispatched on the page, which lets anything on the site open it.

Options:

• _On: A JavaScript event triggers the modal, and the Listen To setting appears.
• _Off: No JavaScript event triggers the modal.

Listen To (Text)

Names the JavaScript event that pops the modal up. It is filled in automatically with the word popup followed by the module's alias, and the help text below the field shows the matching document.dispatchEvent call.

Pop Up on URL Hash (Toggle)

Sets whether the modal pops up when the page is loaded with a particular hash on the end of its web address, which lets a link open it. Switching it on shows the address that triggers it, ending in the module's alias.

Options:

• _On: Loading the page with that hash pops the modal up.
• _Off: The web address does not trigger the modal.

Block Offsets Section

Sets the space held around the block on the page. The section holds one row per responsive breakpoint, in the order Wide, Desktop, Notebook, Tablet and Mobile, and each row carries the same five settings, so an offset can be set for one screen size without affecting the others.

Use Offsets (Toggle)

Sets whether the offsets on that breakpoint's row are applied. The four offset fields on the row only accept values while this is on.

Options:

• _On: The row's offsets are applied at that breakpoint.
• _Off: The row's offsets are not applied at that breakpoint.

Top (Number, pixels)

Sets the space held above the block at that breakpoint, in pixels. A value entered here is shown back with px appended. The field only accepts a value while Use Offsets on that row is toggled on.

Right (Number, pixels)

Sets the space held to the right of the block at that breakpoint, in pixels. A value entered here is shown back with px appended. The field only accepts a value while Use Offsets on that row is toggled on.

Bottom (Number, pixels)

Sets the space held below the block at that breakpoint, in pixels. A value entered here is shown back with px appended. The field only accepts a value while Use Offsets on that row is toggled on.

Left (Number, pixels)

Sets the space held to the left of the block at that breakpoint, in pixels. A value entered here is shown back with px appended. The field only accepts a value while Use Offsets on that row is toggled on.

Block Depth Section

Z-Index (Number)

Sets the stacking order of the Slider Revolution block against other elements on the page, so it can be placed in front of or behind them. It is empty by default.

Advanced Section

Holds the wrapper level styling controls for the block, covering CSS classes, custom CSS, and the identifier used to link to the module.

Additional CSS Class(es) (Text)

Adds CSS classes to the Slider Revolution block's wrapper, so the block can be targeted by the theme's own styles. More than one class can be added by separating them with spaces.

Additional CSS (Text Area)

Adds CSS to the Slider Revolution block's wrapper. Only the property and value are needed, such as color: red, because the selector is supplied automatically.

Module Wrapper IDs (Text)

Sets an identifier for the module's wrapper, which gives the module its own web address on the page so it can be linked to directly. It takes a word or two with no spaces and no special characters.

Quick Edit Editor

The Quick Edit editor opens over the page being edited and offers a cut down version of the Module Editor, for changing a module's text, images and colors without leaving the post or page. It is opened by selecting the block, then either using the Edit Module menu on the block and clicking Quick Edit, or clicking the Quick Edit button in the Module Info section of the block sidebar.

It holds a top bar, a list of the module's slides and layers down the left, and the stage in the middle. Selecting a layer opens a small settings panel beside the list. What that panel includes depends on what the selected layer holds, so a text layer offers its text and a layer with a background image offers that image. Anything beyond what the panel offers needs the full Module Editor.

Top Bar Section

Holds the device preview switch and the buttons for leaving the Quick Edit editor.

Device Preview (Tab Select)

Sets which screen size the stage is drawn at, so a module can be checked at each one. It changes the preview only and does not change the module.

Options:

• _Desktop: Draws the stage at desktop width.
• _Notebook: Draws the stage at notebook width.
• _Tablet: Draws the stage at tablet width.
• _Mobile: Draws the stage at mobile width.

Save (Button)

Saves the changes made to the module in the Quick Edit editor.

Close (Button)

Leaves the Quick Edit editor and returns to the page being edited. Where changes have been made and not saved, the browser asks for confirmation before closing.

Slides and Layers Section

Lists the layers the module holds, and includes a button to open the Bulk Style Editor tool.

Slides and Layers List (List)

Lists the module's slides, and beneath the selected slide, the layers on it. Clicking a layer selects it and opens its settings panel. Clicking a slide selects that slide and draws it on the stage without opening a panel. The module's Static Slide, which holds the layers shown on every slide, is listed last.

Bulk Style Editor (Button)

Opens the Bulk Style Editor, which changes a color or a font family everywhere it is used across the module at once, rather than layer by layer.

Layer Settings Panel

Opens beside the slides and layers list when a layer is selected, headed with that layer's name. What it holds depends on what the selected layer holds rather than the layer's type alone.

Text (Text Area)

Sets the words the text layer displays.

Text Alignment (Tab Select)

Sets how the words in the text layer are aligned within it.

Options:

• _Left: Aligns the text to the left.
• _Center: Aligns the text to the center.
• _Right: Aligns the text to the right.
• _Justify: Spreads the text so both edges line up.

Icon (Button)

Opens a picker for inserting an icon into the text layer, holding a search field over the Font Awesome icon set.

Meta (Button)

Opens a picker for inserting a meta tag into the text layer, so the words come from the site rather than being typed in. The tags are grouped by what they draw on, covering the module and slide itself, posts and social feeds, WooCommerce products, and events.

Font (Readout)

Reports the font family, weight and size the text layer is set in, along with the breakpoint that size applies at. Changing any of them needs the full Module Editor.

Background Image (Image Preview & Buttons)

Shows the image the selected layer is displaying.

Replace Image (Button)

Swaps the image the selected layer is displaying for a different one.

Slide Background Color (Color Swatch)

Shows the color filling the background of the selected slide, behind everything on it.

Change Color (Button)

Opens the color picker for setting the selected slide's background color.

Visibility (Multi-select)

Sets which responsive breakpoints the selected layer appears at, so a layer can be dropped on smaller screens while staying on larger ones. Each breakpoint is switched on and off independently, and switching one off hides the layer at that breakpoint.

Options:

• _Wide: Toggles whether the layer appears at the wide breakpoint.
• _Desktop: Toggles whether the layer appears at the desktop breakpoint.
• _Notebook: Toggles whether the layer appears at the notebook breakpoint.
• _Tablet: Toggles whether the layer appears at the tablet breakpoint.
• _Mobile: Toggles whether the layer appears at the mobile breakpoint.

Slider Revolution Page Panel

The Slider Revolution panel sits in the Page tab of the WordPress editor sidebar, which is reached by clicking Page at the top of the sidebar. Its settings belong to the page rather than to any one block, and they are present whether or not a Slider Revolution block has been added.

Blank Template (Toggle)

Sets whether the page is rendered without the theme's own layout around it, which gives a module the whole browser window to work in.

Options:

• _On: The page renders without the theme's layout.
• _Off: The page renders inside the theme's layout as usual.

Slide Template (Dropdown)

Sets which template the page is rendered with. The list holds the templates available on the site, and Default is used unless another is chosen.

Options:

• _Default: Renders the page with the default template.

Version (Readout)

Reports the version of Slider Revolution installed on the site, and the version available to update to.