Help with Revolution slider

Support
#1

Hi
I am struggling with Revolution slider!
I have created a carrosel of 4 pictures which I want to use as a background slider on the header of each page.
I tried to add the short code to the home page under cornerstone but it rendered it too low down the page and it was in blocks.
So

  1. I am not sure how to create the slider I want
  2. How do I put it as a background slider?

I am trying replicate the same style as I currently have which is an MP4.
Can you please help this newbie??

https://dunedinsegwaytours.com

I can provide logon details and password if required

Thank you in anticipation.
Dereck

#2

Hi There,

To start I would suggest you download a template from the link below. Also if you are a bit lost with Revolution Slider watch some tutorial videos on youtube.

https://revolution.themepunch.com/free-slider-exchange/

I guess your background video is also a good solution to be sincere.

You have on the very top of your first section */ This is maybe being caused by a plugin conflict. Please try turning off all third party plugins.

Let us know how it goes

#3

yes but WHERE do i put the code?? to achieve a background slider

#4

Hi There,

You don’t need the shortcode, please remove your slider from your content. And read this article how you can place a Slider Settings: Below Masthead (Slider Below Header).

And then to completely place the slider behind the header, please add this on Theme Options > CSS

/*Place the featured slider behind the header*/
@media (min-width: 980px) {
	.home .masthead {
		position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	}
}

Then navigate to Theme Options > Integrity and turn on the Topbar and Navbar transparency.

Keep in mind that you have text on header and text on slider that may overlapped each other.

Hope it helps,
Cheers!

#5

Thanks that has helped however it still does not operate as a true background slider. The text which is just below “Have fun on our amazing tours” should be overlaid on the the slider.
How can I do this please??
My text is contained on the first page of my x theme - I do not want to add it as a layer in the slider.

And i cannot seem to get the slider to go full width on the desktop version.
Which setting am I missing??

Https://dunedinsegwaytours.com

#6

Hello There,

Thanks for updating in! You will need to edit your slider and add a static text layer and insert “Have fun on our amazing tours” in it so that the text would be on top of the background image. If this is your first time using revolution slider, I would recommend that you review the documentation to get familiar how you can get around and used the revolution slider with its full potential. You can check it out here: https://www.themepunch.com/revslider-doc/first-steps/#newslider

And by the way, your slider is already fullwidth. It’s just that your background image size is not set as cover and this is why you are seeing a repeating image. Please check out this link particularly the background image fit: https://www.themepunch.com/revslider-doc/main-background/#image-sourcesettings

Hope this helps.

#7

I have checked the cover setting and every slide is on this setting but the effect persists …and I have followed the instructions in the article. What else is wrong??

Thank you

#8

Hello There,

Thank you for the clarifications. Regretfully there is no feature yet in Cornerstone that enables to you make the slider as background in any of the sections in Cornerstone. This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive.

Best Regards.

#9

I have checked the cover setting and every slide is on this setting but the effect persists …and I have followed the instructions in the article. What else is wrong??

Thank you

#10

Hi,

How can I take advantage of this revolution slider as I am bit lost somewhere it requires registration/license along the road to these nice templates they have.

Please advise.

#11

@michaelgraynz , I don’t see the CSS being added. You can add change it to this

	.masthead {
	height: 0px;
	}

This will make the header overlay on top of the slider. Just make sure your header backgrounds are transparent just as recommended above.

@tamiraan You can always use the slider with its full feature, it’s the same copy with or without a license. But yes, with some premium slider templates, you’ll have to buy a license from them. Though, there are many free templates that you could use. We have no control over those templates and are hosted on their site, they control which will be free or not.

Thanks.

#12

I am a bit confused by your reply.
I am not trying to get _“the header overlay on top of the slider.”

The problem I have is (if you look at our site https://dunedinsegwaytours.com)
that the slide images do not go the full width of the page on the desktop.
I have checked the settings on each slide and ensured the source settings are set to cover. I have also increased the global settings for desktops to 1380px.
So what setting am I missing??

#13

Hi there,

Ah, sorry for the confusion. I thought the full-width issue is already addressed by the above CSS since It’s already full-width in my view. I thought you’re referring another issue.

Maybe what I need this time is a screenshot from your end, and how it should look like. Maybe the term full-width is a bit confusing depending on its relative container.

Thanks.

#14

Thanks for getting back to me, as always I guess the motto is - research, research, research… I found the answer on the internet - I was using carousel when I should have been using the standard slider.

One remaining problem I have not yet solved.
at the bottom of the home page there is our web address which will not fit into the mobile frame. Do I need some extra css to do this??

AND

also the number 0800 734 929 is in blue (but only on a mobile) even though I have checked the code over and over but I am failing to see the reason… but thats me!

#15

Hi there,

Please update the code on that part to:

<span style="color: #fff;text-shadow: 4px 4px 2px #000;word-break: break-all;">
    bookings@dunedinsegwaytours.com <br>
    Phone<br>
    0800 SEGWAY or 
</span>

Hope this helps.

#16

Thats broken it up but can it not be scaled down?

Also still have the problem with the rogue colour on the 0800 734 929 (its blue and should be white…)

#17

Hi there,

Mobile phone’s wrapped those phone numbers with links so users could tap and call. What you need is to add this CSS to your global custom CSS.

a[href^=tel] { 
color: inherit;
text-decoration: none; 
}

About the address, it’s too big and the line is long. You should change its font size to fit it. Example,

<span style="color: #fff;text-shadow: 4px 4px 2px #000;">
<div style="font-size: calc(14px + 1.5vw);">bookings@dunedinsegwaytours.com</div>
    Phone<br>
    0800 SEGWAY or<br>
</span>

Hope this helps.

#18

HI
Thanks for all that it all works perfectly
I have one very last issue with Revolution slider.
It seems that in between processing the static screen and the first slide there is a rounded box with faded edges that appears then disapears before the first slide shows - it does not reappear during the loop.
I have tried to look at both the first slide and the static slide to see if I can find it.
Clearly I have set something but I cannot seem to find it.
Can you help please.
Thank you

#19

Hi there,

It should be okay now, it’s due to Shadow option under Layout and Design setting and I set it to none.

Thanks!

#20

Thats fantasitc thank you so much.