Is there a way of adding a scroll down button so people know there's more content to see?!

[core365]

Hi, I’m working on a new website and I’ve done a large slider and the client thinks that people won’t know to scroll down to see the rest of the content, so is there an element or function that adds a button with an arrow pointing to scroll down to see the rest of the content.

Thanks!

[Prasant]

Hello @core365,

Thanks for asking.

I suggest you to add a new section in between existing sections and let’s have a single column layout. After that you need to add a text element and add following code. You also have the option to add text element directly into the existing sections. But to keep things simple and organized I am adding text element and below code into a new section.

<a href="#section-id" class="x-slider-scroll-bottom above bottom center">[icon type="angle-down"]</a>

You need to replace section-id with the next section id in order to link. To keep things organized I suggest you to create custom id. I have created screencast that you to take a look. https://screencast.com/t/IfYZtJkW

You may need to add following CSS under X > Launch > Options > CSS to change the color of the scroll button:

a.x-slider-scroll-bottom.above.bottom.center {color: #000;}

Please change the color code as per your requirement and kindly let us know your feedback.

Thanks.

[core365]

Hi, thanks for that, I appreciate you taking the time to do the screencast! However, I wanted the arrow to go over the slider, as if the arrow is under it, people would only be able to see it if they have already scrolled down and then there wouldn’t be a need for the arrow! The slider will fill the screen and the client is concerned that some people may not scroll down to see the info below it.

I was thinking about a different scroll down button, it was more like one that overlays the page instead of being part of it so it’s visible over the slider, so the arrow button stays in the centre of the screen at the bottom and then disappears when someone starts scrolling down. Is that possible?!!

Thanks!

[christopher]

Hi there,

In that case, I suggest that you use the Scroll Down to Bottom functionality of the Revolution Slider while it is added using the Below Masthead mode.

Kindly add the Full Screen Slider to the page as the Below Masthead or Above Masthead function. You can check the details here:

Append Sliders to Your Header | Themeco Docs

Then you can go to the Cornerstone and click on the settings icon on the left section of the screen and enable the Anchor:

That should do the trick for your case.

[core365]

Hi, that’s great, thanks! I don’t suppose there’s a way of animating it, just so it bounces up and down to begin with?

Thanks!

[christian]

If animation is important, you need to create a scroll down button as a layer then you need to apply a looped animation to it.

Hope that helps.

[core365]

Ah, ok, thanks! Your time and help is much appreciated!

Cheers!

[nabeel]

You’re most welcome!