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.
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.
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.