Slider Revolution Auto Responsive | Configuring Responsive Options

Table of Content

Intelligent Inheriting

If Intelligent Inheriting is set to OFF, the Layer’s size and position will need to be set manually for each responsive viewport. Clicking the Reset All Values from Desktop button will reset the Layer’s size and position for all viewports to the Layer’s size/position for its Desktop view.

If Intelligent Inheriting is set to ON, the Layer’s size and position will automatically be resized/repositioned as the Module resizes.Clicking the Inherit All Values from Desktop button will reset the Layer’s size and position for all viewports automatically.

Responsive Behavior

1. Resize Between DevicesEnable this option if you want the Layer to resize for the different screen sizes.2. Responsive OffsetsEnable this option if you want the Layer to reposition itself for the different screen sizes.3. Responsive ChildrenIf a Layer has nested HTML markup, the nested HTML will also be resized.

Device Visibility

1. Desktop View VisibilityShow/hide the Layer when the screen size is in the Desktop Viewport.2. Laptop View VisibilityShow/hide the Layer when the screen size is in the Laptop Viewport.3. Tablet View VisibilityShow/hide the Layer when the screen size is in the Tablet Viewport.4. Phone View VisibilityShow/hide the Layer when the screen size is in the Phone Viewport.5. Hide Under WidthShow/hide the Layer when the screen size is below the “Marked Layers” number set in the Module’s General Settings.6. Show if mouse over SliderChoose to only show the Layer when the user has hovered their mouse over the Module.

Configuring Responsive Options

Table of Contents

• Introduction and Recap
• Content Resizing Presets
• Size Variants
• Responsive Behavior
• Disable on Mobile
• Hide Under Browser Width
• Layer Visibility

Introduction and Recap

Earlier in the manual we introduced the concept of responsiveness, in the context of checking on template [?]
A “Template” is a premade module. It has pre-configured layers already in place.It is designed to be ready for use, either as is or after being modified in the module editor.Slider Revolution comes with several templates you can use, or alternatively you can create your own templates, thereby allowing you to easily reuse modules you have produced. based designs after you customize them.

So before we get into a full look at configuring responsive options in Slider Revolution [?]
Slider Revolution is a website content creation tool with a focus on captivating animation and stunning visual effects.It began its life as a plugin for creating slideshows, but has evolved into a fully fledged piece of design software., let’s have a quick recap of what we covered earlier in the manual.

What Does “Responsive” Mean?

The word “responsive”, in the world of website creation, means ensuring your content is able to respond to any device type it is viewed on, providing an equally good experience to all viewers.

This typically means having multiple layout versions made to fit nicely on various screen sizes, ensuring images can be seen clearly, checking that text is legible and readable, and so on.

Responsive Adjustment Video

To get a full overview of the earlier section on adjusting customized template modules [?]
A module in Slider Revolution acts as a container for slides, which in turn act as containers for layers. Modules are created and edited with the module editor.A “module” is a single, self contained piece of content. You can think of this as being similar to the way a post or page in regular WordPress is a self contained piece of content.A module can represent any kind of content Slider Revolution is capable of creating, such as a slider, carousel, hero unit, navigation menu, posts display and so on.Multiple modules can be combined to form rich content such as complete sites and landing pages. for responsiveness, watch our ‘Checking Responsiveness in Edited Templates‘ video:

Size Variant Basics

For a refresher on the basics of working with Slider Revolution’s four size variants, (desktops, notebooks, tablets and mobile phones), including how to preview and edit each size, read this guide:

Desktop, Notebook, Tablet and Mobile Size Variants

Adjusting for Responsiveness

For a rundown on how to identify common responsiveness issues related to sizing, crowding and positioning, read this guide:

Content Resizing Presets

Content resizing presets are a great way to establish a solid basis for your responsive layout. Slider revolution offers three content resizing presets that can be chosen from when creating a blank module using the module creation guide.

When you reach the third page of the guide you will be able to choose your desired presets:

The three presets are named: “Classic, linear resizing”, “Intelligent inheriting” and “Manual custom sizes”.

Earlier in the manual we covered how each of these presets works and offered guidance on which to choose.

Now let’s look at the specific option configuration that is set by each of these presets.

Options Configured by Content Resizing Presets

The three content resizing presets set the defaults for two kinds of options.

1) Whether the four options found under the Module General Options tab, Default New Layer Settings panel, Defaults subsection, are toggled ON or OFF:

Note: We’ll cover what these four options do later in the guide.

2) Whether the three sizes smaller than desktop are activated, i.e. Notebook, Tablet and Mobile:

Classic, linear resizing

The “Classic, linear resizing” preset sets all four Default New Layer Settings options to OFF:

The smaller size variants will all be inactive:

Intelligent inheriting

The “Intelligent inheriting” preset sets all four Default New Layer Settings options to ON:

The smaller size variants will all be inactive:

Manual custom sizes

The “Manual custom sizes” preset sets all four Default New Layer Settings options to OFF:

The smaller size variants will all be active:

Size Variants

Let’s go over how to manually activate Size Variants, how to set Size Variant dimensions, what breakpoints are, and how to change breakpoint defaults if required.

Activating Size Variants

There are two ways to activate size variants in your module.

The first way is to click the size variants switcher on the right end of the top toolbar. From there you can switch the toggle for any size variant to ON:

The second way is to go to the Module General Options tab, Layout sub-section, Layer Area Size panel. There you can toggle any size variant to ON:

Set Size Variant Dimensions

Each size variant has a set of dimensions. For example, here we can see the tablet variant uses a width of 1024 pixels and a height of 768 pixels:

These dimensions determine two key things.

First, the variant dimensions set the layer [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.Layers are added to slides via the module editor. size on the canvas [?] The canvas is the point and click design space in the module editor. It forms the largest area of the module editor.In this area layers can be selected, moved and resized. Animations can also be previewed. when designing that variant in the module editor [?] The “Module Editor” is the tool used to create & modify modules.Through this visual, drag & drop, no-code interface you can add various types of layers, animation and special FX to your modules, as well as managing slides and configuring options..

Second, the dimensions control the aspect ratio of the variant. When a size variant is active in the browser its layout will proportionally shrink to fit the viewport width, but its aspect ratio will be retained.

Breakpoints

Each size variant is triggered at a particular Breakpoint, i.e. when the browser viewport is at a specific width. You can think of a breakpoint as the point where the layout breaks into another size.

For example, the default breakpoint that triggers a switch to the mobile size variant is

480px

:

In other words when the width of the browser viewport is any less than

480px

, the mobile size variant layout will be shown.

Global Default Layout Grid Breakpoints

Generally speaking, the default breakpoints that ship with Slider Revolution will cover the majority of design use cases.

However, if you do need to change the default breakpoints you can do so under Slider Revolution’s Global Settings panel.

Read more about how to make these changes in our Global Settings guide.

Responsive Behavior

For each layer there are four key responsive behavior options found in the correspondingly named Responsive Behavior panel.

To locate the panel select a layer, go to the Layer Options tab, Size & Pos sub-section section, and scroll down to the third panel:

The four options found in this panel are the same for which defaults can be set under the Default New Layer Settings panel mentioned earlier.

Intelligent Inheriting

Intelligent Inheriting is a function that attempts to automatically generate layouts for each active size variant.

It does this by inheriting layout settings from a larger size variant, for example the desktop layout. It then automatically makes adjustments to suit a smaller size layout, for example a laptop size layout.

This means if Intelligent Inheriting is toggled to ON for a layer, its size and position will automatically generate for each active size variant. It is, however, also still possible to fine tune the layer’s size and position from there.

On the other hand if Intelligent Inheriting is toggled to OFF, the layer’s size and position will need to be set manually for each active size variant.

Values from Desktop

When Intelligent Inheriting is toggled to ON, the Inherit All Values from Desktop button appears below it:

This Inherit All Values from Desktop button can be used if you’ve been making layout adjustments to a layer at smaller size variants and want to start over. Clicking the button reverts all the layer’s size and position values back to those originally inherited and adjusted from the desktop layout.

When Intelligent Inheriting is toggled to OFF, the Reset All Values from Desktop button appears below it:

Clicking the Reset All Values from Desktop button sets the layer’s size and position, at every active size variant, to the exact same values used in the desktop layout.

Resize Between Devices and Responsive Offsets

Even if you have Intelligent Inheriting switched off, and only have the Desktop size variant active, the Resize Between Devices and Responsive Offsets options can add basic responsive behavior to your layout.

These options will modify layer size and offsets at each of the four size variant breakpoints, even if those size variants are inactive.

Toggle Resize Between Devices to ON and the layer will responsively change its size:

Toggle Responsive Offsets to ON and the layer will responsively reposition itself.:

Note: The responsive behavior generated by these options cannot be seen in the module editor, only on the front end of your site.

Disable on Mobile

In some cases you may have a module that, for one reason or another, is not suitable for a mobile size layout. If so, you can hide the module completely on mobile phones.

To do so, go to the Module General Options tab, General sub-section, scroll down to the Disable On Mobile panel, and toggle Disable Slider to ON:

Hide Under Browser Width

It is also possible to hide either the entire module, or specified layers, whenever the browser viewport width is narrower than a specified amount.

This can be done under the Module General Options tab, General sub-section, Hide Under Browser Width panel:

Slider

Enter any pixel(

px

) value higher than zero into the Slider [?]
A slider is a type of module that contains multiple slides. You can only see one slide at a time, a distinguishing features that makes sliders different from carousels.The slides of a slider can be panned through either by using navigation controls such as arrows and tabs, or by clicking and dragging. They can also be set to automatically transition from one slide to the next. field and the entire module will be hidden whenever the browser viewport is narrower than that amount:

Marked Layers

Use the Marked Layers option to set a value below which specified layers will be hidden:

The way to “mark” a layer to be hidden is by using the Hide Under Width option which is described in the next section of the guide.

All Layers

Use the All Layers option to set a value below which all layers will be hidden:

The background [?]
A “background” in Slider Revolution is a type of layer that is always present in every module, and is always visually behind all other layers.A background can be transparent, a flat color, a gradient, an image, or a video. It can be animated in the same way as other layers can be, however it cannot be deleted. layer will still be visible, so your module can show an image or video even when all the other layers are hidden.

Layer Visibility

Layer Visibility per Device

Layers can also be hidden on a per size variant basis, for example, hiding a layer only on tablet and mobile sizes.

To do this, select the layer you want to hide and go to the Layer Options tab, Visibility sub-section:

In the Visibility panel you’ll see icons and toggle switches for each of the four layout variants. For any size variant on which you’d like to hide the selected layer, toggle the corresponding switch to OFF.

Hide Under Width

If you’ve set the Marked Layers option, (described earlier), to something other than

0px

, toggling the Hide Under Width option sets the selected layer as “marked”:

This means the layer will be hidden when the browser viewport is less than the width specified in the Marked Layers option.

Responsive Layout Tips

Learn key techniques to help drive your responsive design in Slider Revolution.

Table of Contents

Responsive Design Tips for Slider Revolution

On the last page of the manual we went through all the options in Slider Revolution [?]
Slider Revolution is a website content creation tool with a focus on captivating animation and stunning visual effects.It began its life as a plugin for creating slideshows, but has evolved into a fully fledged piece of design software. that have a role in creating responsive layouts.

When it comes to putting those options into action, there are a number of techniques that can contribute to making your design process smooth and effective, so in this guide we’ll explore some of the most helpful.

Lock In Desktop > Notebook > Tablet > Mobile

In Slider Revolution, the Intelligent Inheriting feature automatically applies size and position information from larger layouts to smaller ones. For instance, changes made in the Desktop layout will be automatically reflected in the Notebook, Tablet, and Mobile layouts unless manually overridden:

To maximize the benefits of Intelligent Inheriting, start by finalizing the Desktop layout, then proceed to the Notebook, Tablet, and Mobile layouts in that order.

Start Large but Plan for Small

While it’s most efficient in Slider Revolution to start with the Desktop layout, it’s also highly valuable to plan ahead for smaller layouts right from the beginning.

For example, you might decide on a three-column layout on Desktop and Notebook:

And also plan in advance to collapse it to a single-column layout on Tablet and Mobile:

If designing from scratch, consider sketching a rough layout on paper. Or for sophisticated designs try creating a full mockup using tools like Photoshop, Adobe XD, Figma, Sketch (Mac), or for a free option try Penpot.

Leverage Flexibility

Slider Revolution has multiple ways to create layout elements that will automatically flex to fit whatever space there is available.

Consider incorporating the following flexible layout functionality into your designs.

Incorporate Percentage(%) Based Widths

By utilizing percentage-based widths, you can create layouts with many elements that automatically adapt to different viewport sizes.

For example if you give an image a width of

33%

(one third), and a text layer [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.Layers are added to slides via the module editor. a width of

66%

(two thirds), you know the layers will automatically retain their one third, two thirds layout on all size variants without you having to do any manual resizing:

Leverage Row Layers

Row layers contain a number of columns with percentage-based widths, allowing them to flexibly adjust to different viewport widths:

Additionally, they can be set to collapse into a single column on smaller devices like tablets and mobile phones.

These two features combined mean Row layers handle substantial responsive functionality with minimal configuration or manual adjustment required.

Utilize Relative Position

By employing Relative positioning, layers can be made to automatically stack vertically. When a layer in such a stack changes height, such as when a textbox has more words added to it, the layer below will be pushed downward without the need for manual repositioning:

This is useful for responsive design because when a viewport narrows and squashes its content, layers in a relatively positioned stack will automatically have their height increased. But instead of layers overlapping they will automatically adjust their position, retaining a neat layout:

For a full rundown read our guide to Relative Position in Slider Revolution.

Leverage Inline-Block

Adjacent layers using Inline-Block will always try to arrange themselves onto the same line, in the same way that words try to arrange themselves onto the same line in a paragraph of text:

The advantage of this behavior for responsive design is that as a viewport narrows, items that don’t fit on an existing line can automatically be pushed onto the line below:

Note: Inline-Block is available on Relative positioned layers nested inside Groups or Rows. Read more about this functionality in the Inline-Block section of our Relative Position guide.

Use Shapes with Background Images

There are actually two ways to add an image to a design in Slider Revolution. One is to use a regular image layer, but another is to add a Shape layer then set an image as the background [?]
A “background” in Slider Revolution is a type of layer that is always present in every module, and is always visually behind all other layers.A background can be transparent, a flat color, a gradient, an image, or a video. It can be animated in the same way as other layers can be, however it cannot be deleted. of that layer:

The advantage of this approach for responsive design is you can modify the dimensions of the Shape layer without directly affecting the image itself:

This in turn means if you need to change the aspect ratio of the Shape layer in order to fit it into a smaller layout, you can do so without affecting the aspect ratio of the image.

Leverage Size Presets

Slider Revolution has a series of size presets that are able to automatically adjust their dimensions to fill available space.

Full Width takes up the maximum available width:

Full Height takes up the maximum available height:

Stretch fills the maximum height and width even if the result modifies aspect ratio:

Cover expands to whatever dimensions are necessary to cover the area without modifying aspect ratio:

Full Inset is like Cover but with the ability to add margins, and only available on layers nested inside a Group:

Applying these size presets allows you to take layers such as shapes, images and videos, and have them automatically fill areas like backgrounds, Groups and Columns without any manual adjustment required.

I am having troubling with my slider revolution on my homepage at www.gbcsafetyglow.com. It looks good on my computer but on different size screens such as a cell phone, it doesn’t automatically keep the integrity of the piece. I would like it to scale down proportionately to fill whatever screen size it is being viewed on, but it’s just zooming in on a certain part of the image and you can’t see all of the text, etc. How do I keep my slides looking the same from one device to another? I have the auto-responsive button on but I don’t think it’s working…any help?

Hi There,

Thank you for writing in, on the Slider Settings, please set the Slide Layout to Auto

Hope it helps,Cheers!

Like I said, I do have the auto selected…please see below for the issue. Banner stays about 4 inches tall and cuts off everything. Would like it to auto shrink to show the full banner just smaller on the smaller screens.

You need to setup your Grid Sizes. Please see the documentation of the Slider Layout. Or, try turning on the Respect Aspect Ratio setting. Please see the link I provided for more details.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.