2 Making Adjustments

Adjusting for Responsiveness

Learn how to identify and resolve responsiveness issues in your customized, template-based modules.

Table of Contents

• Introduction
• General Tips
• Find Issues Through Scrubbing
• Adjust Larger Layouts First
• Common Issues, and How to Apply Their Solutions
• Issue: Layer Sizes Seeming Too Large
• Solution: How to Adjust Layer Sizes
• Issue: Over-Crowding
• Solution: How to Fix Over-Crowding
• Issue: Layers Moving Out of Bounds During Animation
• Solution: How to Adjust Animation Positioning
• 4 Step Cheat Sheet
• Coming Up Next: Modules from Scratch

Introduction

On the previous page of the manual we talked about how you can preview all four of your module’s [?] size variants, so you can check for issues with their layouts. But exactly what should you be looking for, and how do you make adjustments if you find a problem?

In this guide we’ll go over the specifics of what to check your modules for in regards to responsiveness, and how to use the module editor [?] to resolve any issues you find.

Note: This guide is intended to help you with the task of ensuring responsiveness in template-based [?] modules, where the bulk of the responsive functionality is already in place.

However, you will also learn some of the fundamentals of handling responsiveness in Slider Revolution [?] , and we will build on that foundation later, in the manual section on making modules from scratch. For that reason we recommend you read this guide whether you are currently using templates or creating your own custom designs.

General Tips

Before we get onto finding and fixing specific responsiveness issues, let’s cover some general tips that will help you throughout the entire process.

Find Issues Through Scrubbing

The best way to find potential responsiveness issues is to slowly scrub the playhead forwards and backwards through your animations on the timeline [?] , paying attention to each layer’s size and movement on the canvas [?] .

While you should also use the real time animation playback on the canvas and in the popup preview, these functions will be most helpful for testing modifications you make after finding problems. It will be easier to first spot those problems through scrubbing, rather than realtime playback.

This is because through scrubbing you can easily control the exact speed of playback, as well as stopping or reversing playback at will, giving you plenty of time to examine things as closely as you like.

Adjust Larger Layouts First

After you finish customizing your initial “default” layout at desktop size, always start the responsive checking and adjusting process on the laptop size layout first, followed by the tablet size layout, then the phone size layout.

The reason for this is that by default each size variant inherits layout settings from the size above it. For example, the tablet layout will inherit settings from the laptop layout unless it is specifically given settings of its own.

So in some cases you may find when you make adjustments to larger layouts, they are inherited by smaller layouts, and that turns out to be all you need to get them in shape as well.

Common Issues, and How to Apply Their Solutions

Let’s step through some of the most common ways that a module’s layouts might run into issues at smaller screen sizes, and how you can solve these issues if you spot them.

Note: These issues are listed in the order we recommend you check for then solve as required. You can think of this as a “to do” list for ensuring responsive modules.

Issue: Layer Sizes Seeming Too Large

If the edges of a layer [?] are clipped at any point, or if it seems to crowd other layers, it’s probably too large.

Solution: How to Adjust Layer Sizes

Larger image layers on the left where there is a lot of space. Smaller image layers on the right to in a smaller area.

To adjust a layer’s size, click and drag any of the grab handles on its container rectangle.

This resizing method works equally well for most layer types. Images and videos will have their height and width altered, while most text will have its font size changed.

Alternatively, select the layer then go to its Size & Pos sub-section and edit the width and height fields directly in the Position & Size panel. Or, in the case of a text layer, go to its Style sub-section and edit its font size directly in the Font & Icon panel.

Issue: Over-Crowding

After making size adjustments, you may find there is too much crowding on the canvas, causing things to appear too busy or cramped.

Solution: How to Fix Over-Crowding

Layout rearranged into a vertical shape to avoid crowding. Menu items hidden from view.

Your first option is to move layers around to see if rearranging them can alleviate any feeling of cramping in the available space.

If this doesn’t do the job you may need to hide some of the less important layers on a per-layout basis, for example, hiding a layer only on tablet and phone sizes.

To do so, select the layer you want to hide and go to its Visibility sub-section under the Layer Options tab. In the Visibility panel you will see icons and toggle switches for each of the four layout variants.

For any layout size on which you wish to hide the selected layer, toggle the corresponding switch to OFF.

Issue: Layers Moving Out of Bounds During Animation

If you have made modifications to animated layers, such as replacing images, replacing text, or altering sizes, you may find that those layers now unexpectedly move partially out of bounds during their animation on smaller size variants.

Solution: How to Adjust Animation Positioning

Generally speaking you will want to adjust for one animation keyframe at a time, i.e. the keyframe(s) at which the layer is moving out of bounds.

What you don’t want to do is click and drag the layer on the canvas, because that will move the whole animation and all its keyframes at once. You also don’t want to modify the position values in the Size & Pos sub-section because that will have the same effect.

Instead, select the keyframe in question by either clicking the corresponding animation strip on the timeline, or in the Keyframes panel under the Animation sub-section.

Then directly modify the X and Y settings under the Animation sub-section, Advanced panel.

The X field represents horizontal position – increase the value to move right, and decrease it to move left. The Y field represents vertical position – increase the value to move down, and decrease it to move up.

Note: When you click in a field that relates to responsive layout you will see a little readout of the settings being used by each of the other three sizes.

4 Step Cheat Sheet

All the above can be boiled down to a 4 step cheat sheet to guide you through ensuring your customized, template-based modules are properly responsive.

Complete this process first on your laptop size variant, then tablet size, then phone size.

• 1

  Shrink layers that are too large, and are being clipped or causing crowding
• 2

  If the layout has crowding after layer sizes have been optimized, try adjusting layer positions
• 3

  If there is still crowding, consider hiding layers
• 3

  If there is still crowding, consider hiding layers
• 4

  ) Adjust any animation keyframes that unexpectedly move the layer out of bounds

This process might not cover every single possible opportunity to optimize responsiveness, but it will reliably catch and solve the most common problems.

Intermediate Editing, Complete!

That brings our manual section on “Intermediate Editing” to a close. You should now be well equipped to leverage the large library of ready made content that comes bundled with Slider Revolution.

Of course, nothing quite compares to the creative freedom of designing your own modules completely from the ground up.

And that’s exactly what you’ll learn to do in the next major section of the manual, “Modules from Scratch”, which we are working on for you as we speak.