Different sliders for different devices

Hello, I’m new to Slider Rev. I’m wondering how to create a slide for laptop view & a different slide for phone screen on the same Home page. Could you indicate what are the broad steps & where to effect this in the Slider Editor?

Then after both these sliders r created, how to insert them into the same web page?

Hi @iamwithU,

Thanks for writing in.

You could use the functionality that I will show will be explained the link below.

Hope it helps.

Let us know how it goes.

Thanks.

I was referring to Slider Revolution: where in their Slide Editor or how do I create on the same web page 2 different Rev slides - one for laptop view, and one for phone view? Do I just call them different names & insert them as a section one at a time into Cornerstone?

Is your explanation meant after I’ve created the Rev Sliders?

By the way, if I do as they suggest, just cut & paste the shortcode for the name of the Rev Slider into the webpage’s frontend/ backend Editor of WP, does this not mean editing the page outside Cornerstone? I’ve already created the webpage using Cornerstone.

Hello There,

Do you already have two sliders? If that is the case, please edit the page in Cornerstone and create two separate sections. In each of this section, this is where you insert the Revolution Slider element. Simply look for the “Elements tab” in Cornerstone left panel and find the Revolution slider element. Drag and drop it to the column. You will then have to apply the “Hide During Breakpoints” option to show or hide the section in selected screen sizes.

Hope this make sense.

Nope, I haven’t got 2 Rev Sliders. I’m asking a question about using Slider Rev.

How do I create different look for the same webpage? Whereas in Cornerstone, we can go to Customize & “hide” at certain breakpoints. Is there something equivalent in Slider Rev’s editor?

Also I asked in my last part of previous reply:
If I do as Slider Rev documentation says, insert & paste the Slide shortcodes into the WP frontend/backend editor of the Page Editor of my webpage, does this cause the whole webpage to exit out of Cornerstone?

Hey @iamwithU,

You can hide layers based on screen width in Slider Revolution also. See https://www.themepunch.com/faq/slider-revolution-responsive-tutorial-5-0/

If you need a drastic change in design, I’d recommend you setup 2 different sliders and then insert each of them in separate rows and use the Hide During Breakpoints feature of Cornerstone. If I didn’t explain clearly, maybe viewing this screencast might help.

To your question:

No. You can insert shortcodes in a Text element. For the sliders though, you can use the Slider Revolution element.

Hope that helps.

The themepunch tutorial is way too advance for a non techie guy like me. It sounds Greek to me!

Any simpler tutorial? :joy:

Hey @iamwithU,

The simpler method would be to create 2 sliders and then use the Hide During Breakpoints feature.

Regretfully, there is no other tutorial.

Thanks.

Perhaps to help a layman & beginner, could you tell us:

a) what is the corrrect dimension of an image to be used in Slider Rev?

b) for the Themepunch tutorial, what is the meaning of “layer grid size”? The end result of an image as seen by a visitor to my website?

c) how do we know what numbers should we enter into the layer grid size? I’ve no clue what the dimensions of the various screen sizes. Why do we need to enter the numbers ?px x ?px for the devices which have standard dimensions?

d) if I were to create 2 separate sliders as you suggest, what option should I choose - auto? What is the difference btw that & “full width”?
Appreciate your patience.

Hi There,

An 1200px × 600px or bigger will do.

This means you are given the option to define your own screen sizes (Notebook, Tablet, Mobile). I recommend to turn this off and let the Revolution slider default screen sizes be.



Or maybe this is the feature that you’re looking for, because if you enable these options, you’ll get the different screen preview on your layers and edit/style it manually.



We don’t, because we don’t know how big your viewer’s screens are. Like I said above leave this to default sizes.



Auto - Respect the container’s width. If your Section or Row has a max-width. The slider will follow that limit. Full Width does not, Full Width slider will take up the entire width of the screen regardless if there is a max-width limit on the container or not.

Here’s a demo of AUTO layout slider, if that slider is set to Full Width, it will go outside the box.

And this is a FullScreen slider (http://demo.theme.co/integrity-1/). It takes up the entire width and height of the screen.

Choose the slider layout whichever fits your design.

Hope this shed some lights,
Cheers!

Awesome, Friech. You explained it so well. All Slider Rev beginners will benefit ftom your post above! Themepunch, please note😉

Just to clarify your 1st point about the correct dimensions: you said it should be bigger than 1200x600. What’s the difference if I were to use 2400x1200 ? It’s not just the ratio, right? And if I have a choice of either of these 2, which is better & how will this affect the look on either the laptop or phone view?

If I need to use thumbnails, what should the dimension be & how do I convert my image into a thumbnail?

Hi There,

Thanks for the kind words, if you’re expecting that the site will be viewed on a very wide screen then yes, uploading a big image will be a good idea. But you also need to consider the performance of your site, the images needs to be optimal because the bigger the images (filesize) the longer it loads (and it affect your page). So its a Performance versus Quality decision.

Your images will look nice on landscape oriented screens like laptop and desktop, but it will be crop some part on portrait view (commonly on mobile screens). If that happen, there is no other way around it but to select where the background to be focus, By default it is focus on center (x and y axis), but you can change that under the Source settings.



Meaning if the thing that you need to focus on the image is in the lower-right, then you need to position the background to right bottom, you can also use a percentage value for more accurate positioning. More info about background-position Property (see the Property Values section and click the Play it orange button to have a better idea what I’m saying)

When you upload an image, WordPress will automatically create a thumbnail size of that image. Which then will be used in various places (themes or plugins), one of that is the Revolution Slider. So there is no need to convert an image manually to thumbnail.

Cheers!

1 Like

Really Friech, your level of support is splendid :kissing_heart:

In your last para, you said WP will auto create thumbnail. How do I find that so I can insert into my Rev Slide either as a Background Image or as a new layer? A screenshot will help.

I googled and found out that I could add a thumbnail from my “Add Media” under the “Attachment Display Settings”. However, I don’t have the “Attachment Display Settings” - it’s missing! Please see my screenshots:

When I scroll to the bottom of the page, my options end here:

I’ve googled and read numerous articles but none was able help me recover the missing segment. Is there a setting that has prevented the “Attachment Display Settings” from showing up on my Wordpress media?

Hi @iamwithU

The “Attachment Display Settings” section will only appear when you insert an image to a post or a page, not when you assign an image to the slider.

You don’t need to assign the thumbnail image to the slider, just assign the main image you want to use and the slider will use the thumbnail generated by WordPress whenever it’s needed.

Thanks.

But I only want a small image to appear - at the bottom of the page. When I did as you say, the image takes up the space in accordance to its dimension (eg 1200x600 as recommended by Friech above).

How do I get my slider to shrink the image - so that it appears as a small object on the bottom of the page?

Also, even when I tried to insert an image in a new page, either a new Classic Image, or an Image, neither does my “Attachment Display Settings” show up. Appreciate your advice to help me recover that.

More importantly, is there an alternative to produce a thumbnail outside Wordpress & then add it to its Media Library? Hope you can guide a non techie how to do this with screenshots.

Hi @iamwithU

Would you mind providing us the direct page URL? So we can have a better idea of what you’re trying to do.

You should not be using thumbnail size as a content, because what if your page is viewed on a large screen, it will be stretch and look blurry. Optimize your images before you upload it instead, this way you maintain the dimension of your image while you decrease the file size. You can use a tool something like (https://imagecompressor.com/).

Images are responsive by default, it will respond to the width of its container. But you can also define a width to your image if you need to. Image element has the width and max-width option.



“Attachment Display Settings” is Wordpress native feature, you’ll get this option when you’re on the classic (text/visual) editor. The Cornerstone encourages to use the standard size images for a responsiveness.

The small images on the Media Library is an example of where the Wordpress used the thumbnail size.

Cheers!

1 Like

Cool Friech, it’s so good to have you back. You enlightened me a lot!
What I was trying to achieve is the effect of Slider Rev’s template :

But I had lots of difficulty taking a photo with black spaces on top of my image & then fitting into the 1200x600 as you recommended. So I’m thinking of having a black background & then adding a layer of a small image at the bottom of the page. Right now my image is in the 1200x600 size. How do I shrink it so that it looks like the man in the above screenshot - & yet not risk being stretched by a large device?

As for your last para, how do I get that “small image” from my media library. Where do I choose it? I don’t seem to have such an option. Thank you for your patience in guiding me thro this maze.

Hi,

Yes, having a black background and a separate image will be the best way to go for what you are trying to achieve.
Your image will not stretch on large devices and you can adjust the size of your image layer per screen/width.

With regards to small image, my colleague means that how the images looks in media library are an example of thumbnail size images.

Thanks

Thanks Paul for your screenshots.

But don’t understand your 1st one. What is step 3 for - inherit what style? Why do you need step 4, when you are highlighting the image concerned? And what’s step 5 and 6 for? Are these steps for making my original image (which may be 1200x600) become a small image, or to keep an original small image from being stretched?