How to Hide Module, Slides, and Layers?

Hide or Replace Modules, Slides, and Layers

Slider Revolution plugin has some features that allow you to hide or disable modules <sup>[?] 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.</sup>, slides, and layers at any device size or width you specify. You can hide either whole modules or specific slides and layers.

These features help create different presentations on different devices but do so using just a single module.

Let’s learn to hide modules, slides, and layers.

Note: Each of these processes begins by going to your website dashboard:

Then to the Slider Revolution plugin:

And opening a module in the Module Editor:

Hide a Module

Sometimes you might have a module with rich content that’s perhaps not suitable for mobile devices, or it may have a layout that requires a minimum amount of space.

If this is the case, you can:

• Disable the module for mobile / phone size viewports, i.e. 480px or narrower.
• Hide the module under a specified browser viewport width, e.g., at 778px or narrower.
• Replace the module with a static image.

We’ll cover how to use these three techniques in the sections below.

Disable a Module at Mobile Size

Disabling a module on mobile will hide the module for all visitors on mobile size devices. In Slider Revolution, mobile device size is considered 480px or narrower.

Go to the Module General Options tab on the right sidebar:

Go to the General sub-section:

Scroll down to the Disable On Mobile panel:

Toggle the Disable Slider option to ON:

Click on the “Save” button:

Hide a Module Under Specific Browser Width

Disabling a module on mobile is effectively a shortcut to hiding it at browser viewport widths of 480px or narrower. However, if you need to specify a different viewport width to hide under, you can do so.

For example, you might have a layout that only needs to be hidden on narrow viewports, like 320px or narrower. Or you might have a module that is only suited to larger screens, so you may want to hide it under a large size, such as 778px.

Go to the Module General Options tab on the right sidebar:

Go to the General sub-section:

Scroll down to the Hide Under Browser Width panel:

Input a numerical value in the pixel in the Slider option:

Click on the Save button:

Replace a Module With a Static Image

Rather than completely hiding a module at mobile size, you might prefer to show a static image. This method allows you to still feature your product or services for mobile users without loading a dynamic module.

Go to the Module General Options tab on the right sidebar:

Go to the Advanced sub-section:

Scroll down to the Fallback Settings panel:

Click on the Alt. Image dropdown field:

Select the On Mobile setting from the dropdown:

Click on the Media Library button to select an image:

Media Library popup will appear:

Select an image:

Click the Insert button:

The selected image’s URL will be inserted in the Image URL field:

Click on the Save button:

Hide Slides

Just as there are multiple ways you can hide entire modules, there are also ways you can hide specific slides.

You can:

• Hide slides at mobile / phone size viewports, i.e. 480px or narrower.
• Hide a slide after a module has looped through all its slides a specific number of times.
• Replace the first slide with an alternate slide.

Let’s see how to use each of these methods in the sections below.

Hide Slides at Mobile Sizes

This method is helpful if you wish to hide a specific slide at mobile sizes but not the whole module.

Select the slide you want to hide from the Slides dropdown on the top toolbar:

Go to the Progress sub-section:

Go to the Slide Options tab on the right sidebar:

Scroll down to the Visibility panel:

Toggle the Hide on Mobile Icon option to ON:

Click on the Save button:

Hide a Slide After a Set Amount of Loops

You might have a slide you only want to show a specific number of times before hiding it. For example, a slide introducing the rest of the module content doesn’t need to be seen again.

This method lets you hide a slide after the module has looped through a specific number of times you can set as per your requirement.

Select the slide you want to hide from the Slides dropdown on the top toolbar:

Go to the Slide Options tab on the right sidebar:

Go to the Progress sub-section:

Scroll down to the Visibility panel:

Input the number of times you want the module to loop through before the slide gets hidden in the N-x option, e.g. 1 to show the slide once, then hide it after that:

Click on the Save button:

Replace the First Slide With an Alternate Slide

It’s possible to replace the first slide of a module with an alternate slide.

Go to the Module General Options tab on the right sidebar:

Go to the General sub-section:

Scroll down to the First Slide panel:

Toggle the Other 1. Slide option to ON:

Look at the Slides dropdown on the top toolbar to find the number of the slide you want to use as an alternate:

Input the alternate numerical slide number value in the # option field:

Click on the Save button:

Hide Layers

Just as you can hide modules and slides, you can also hide layers.

There are methods available to:

• Hide layers at any of Slider Revolution’s four device sizes: desktop, laptop, tablet, and mobile.
• Hide layers under a specified browser viewport width.
• Show layers only when a mouse hovers over a slide.

Let’s see how to use each of these three methods.

Hide Layers for Specific Device Sizes

Every layer has a set of toggles that let you hide it on each of the four device sizes: desktop, laptop, tablet, and mobile.

You can use these toggles to hide layers unsuitable for specific device sizes and show other layers better suited to those device sizes.

For example, you might make two versions of a particular layer: a large version suited to larger sizes and a smaller version suited to smaller sizes. You could then set the larger version to show on desktop and laptop sizes only and the smaller version to display on tablet and mobile sizes only. Here’s how this is done.

Select a layer from the timeline <sup>[?] The timeline is the section of the module editor dedicated to animation and controlling the stacking order of layers.

From this part of the editor animations can be added, adjusted and previewed. Additionally, layers can be selected from the timeline, and can be dragged and dropped up and down on the timeline to modify which appear in front and which behind.

It can be equally compared to both a timeline in a typical video editing application, and a layers panel in a typical graphic design application</sup> at the bottom of the module editor or by clicking it on the canvas:

Go to the Layer Options tab from the sidebar:

Go to the Visibility sub-section:

Go to the Visibility panel:

Toggle any of the four options to OFF to hide the layer on those device sizes:

Click on the Save button:

Hide Layers Under Specific Browser Width

It’s possible to set layers to be hidden under a specified browser viewport width, similar to how you can hide an entire module under a certain width.

There are two ways you can go about hiding layers under a specified size:

• Set a value under which all layers should be hidden
• Set a value under which marked layers should be hidden

If you hide all layers under a specific width, your module will have no content at that size except the background layer. This can be an excellent method if your slides have a cool image or video in the background layer that makes them look cool even with no other layers.

Marking only particular layers to hide under a specific width allows you to prevent clutter by reducing the amount of content on smaller-width viewports.

You can use either approach alone or combine the two.

For example, you can choose a couple of layers to hide under 778px width and also hide all layers under 448px width.

Marking a Layer to be Hidden

To mark a layer to be hidden, select it from the timeline at the bottom of the module editor or by clicking it on the canvas:

Go to the Layer Options tab from the sidebar:

Go to the Visibility sub-section:

Go to the Visibility panel:

Mark the layer to be hidden by toggling the Hide “Under” Width option to ON:

Setting Layer Hiding Widths

If you hide marked layers and all layers, you’ll need to specify the width at which you want that hiding to kick in. Both options are in the same part of the module editor, so we’ll look at them at once.

Go to the Module General Options tab on the right sidebar:

Go to the General sub-section:

Scroll down to the Hide Under Browser Width panel:

If you want to hide marked layers, input the width under which those layers should be hidden in the Marked Layers option:

And if you want to hide all layers, input the width under which they should be hidden in the All Layers option:

Click on the Save button:

Show Layers if Mouse Over Slide

It’s possible to set layers to be hidden by default and then reveal themselves only once a mouse hovers over the slide. This gives you a way to create some cool effects with user interaction.

When a visitor hovers and triggers the layer’s appearance, it will use its IN animation. When the mouse has moved away again, the layer will animate out using its OUT animation.

To use this technique, select a layer from the timeline or the canvas:

Go to the Layer Options tab from the sidebar:

Go to the Visibility sub-section:

Go to the Visibility panel:

Toggle the Show if mouse over the Slider option to ON:

Click on the Save button:

Contact Our Awesome Support

If you are encountering any problems or have any queries, feel free to contact our support team by opening a ticket or sending us an email ([email protected])