How to Hide Module, Slides, and Layers?

This article will help you use various methods to hide modules, slides and layers on different devices, or under specific widths, as well as showing alternate images.

Hide or Replace Modules, Slides and Layers

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

These features are useful for creating different presentations on different devices, but doing 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:

We’ll cover how to use each of 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 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 really narrow viewports, like 320px or narrower. Or you might have a module that is really 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 instead prefer to show a static image in its place. With this method, you can 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:

Select and insert an image:

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:

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

Hide Slides at Mobile Sizes

If you wish to hide a specific slide at mobile sizes, but not the whole module, this method is quite helpful.

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

Go to the Progress sub-section from 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 that acts as a sort of introduction to the rest of the module content and then 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.

Choose a slide you want to hide from the Slides dropdown the top toolbar:

Go to the Progress sub-section from the Slide Options tab on the right sidebar:

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 thereafter:

Click on the Save button:

Replace 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:

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 that are not suitable for certain device sizes, and optionally instead 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 at desktop and laptop sizes only, and the smaller version to show on tablet and mobile sizes only. Here’s how this is done.

Select a layer from the timeline [?] 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
 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 the way 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 a good method to use 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 certain 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 are going to hide marked layers, and/or 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 both 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 appearance of the layer, it will transition in using its IN animation, and 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 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 via opening a ticket or sending us an email ([email protected])

How to Hide Module, Slides, and Layers?

The Author

Kashif

Technologist, Writer, Philosopher, and above all a problem-solver. Living by the motto "Be the reason someone smiles today".

Liked this Post?
Please Share it!

6 thoughts on “How to Hide Module, Slides, and Layers?

  1. Hello and thanks for the very well written post.

    Unfortunately I could not find the answer I was looking for, which admittedly is quite specific.
    I use a separate image as layer for each device size (desktop, laptop, tablet and mobile). Under Visibility I defined that each image shall be visible only on the corresponding screen resolution range. So far it works well.
    However according to the network tab of my browser’s dev tools all four images are loaded regardless of the screen resolution which might impair the performance.
    Is there any solution for that?

    Here a snapshot out of dev tools: [Slider-Revolution-Network-Tab.png](https://postimg.cc/N2H0PkkV). _D, _L, _T and _M are the different image sizes.

    P.S. I received the plugin bundled with my WoodMart theme, so that I cannot open a ticket directly.

    1. Hello,

      thanks for contacting us! Your request requires one of our support agents to have a closer look.

      In order to give our clients the best support possible, we are having a support ticket system reachable via the link below.

      Please use it for your upcoming questions concerning one of our products. This will guarantee the fastest answer possible. Support requests here cannot be answered unfortunately. Thank you!

      Please use our ticket systems over at:

      https://support.sliderrevolution.com

      Cheers Dirk @ Slider Revolution

      1. Hello Dirk,

        thanks for you reply. I was aware of the ticket support system, however I am not able to create there a ticket as my Slider Revolution came bundled with my theme. From what I see only customers who purchased directly have access. I hope this does not mean theme customers are left out without support.

        Cheers.

        1. Hi,

          as you have received the free version of our plugin bundled with a theme, there are two options:

          1. Please contact the theme author for support as she is responsible for supporting all bundled plugins https://help.market.envato.com/hc/en-us/articles/213762463-Bundled-Plugins#support , same goes for plugin updates https://help.market.envato.com/hc/en-us/articles/213762463-Bundled-Plugins#update

          2. If you need direct support from us or live updates, you can purchase a plugin license at a great price directly from us here: https://www.sliderrevolution.com/pricing

          The license key you receive will allow you to submit a ticket to our support system https://support.sliderrevolution.com where we can look into this for you.

          Also, as a premium member, you will receive the benefits listed here https://www.sliderrevolution.com/premium-slider-revolution/

          Cheers, Dirk @ Slider Revolution

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.