![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: Fullwidth Layer Slider, scroll down arrow
-
AuthorPosts
-
May 7, 2018 at 9:16 pm #952882
It was unclear what (if any) the method for creating a scroll-down arrow for a Full-Width Easy Slider is, but I believe that this is a simple and effective way to do it. Please let me know if you can see problems with my implementation!
1. Create a Code Block immediately below the slider and immediately after the slider.
2. Add a Color Section below that, add true-next as the section ID, and either place the next content in it or set it to have a very small height like 5px.
3. Put this in the Custom CSS:
.avia-fullscreen-slider{ z-index: 1; }
If you want the icon to be full size & opacity, add this:
.avia_transform .av_font_icon { opacity: 1; -webkit-transform none; -ms-transform: none; transform: none; }
4. Paste this div plus shortcode in to Code Block:
<div style="margin-top: -130px;"> [av_font_icon icon='ue87b' font='entypo-fontello' style='' caption='' link='manually,#true-next' linktarget='' size='60px' position='center' color='#ffffff' admin_preview_bg=''][/av_font_icon] </div>
-
This topic was modified 6 years, 4 months ago by
abmich. Reason: Missed a step!
May 8, 2018 at 9:40 pm #953567Hey Andrew,
Thank you so much for sharing a solution!
We much appreciate it!Best regards,
BasilisMay 9, 2018 at 2:38 pm #953951You all have helped so much I was happy that I could figure something out to maybe help others!!
January 9, 2022 at 9:27 pm #1334893@abmich, that’s exactly what I was looking for, thanks! Would it be possible to add the animation too? :-)
January 9, 2022 at 10:26 pm #1334896Hi,
Try this code in your code block element instead:<style> #top .code-block-arrow .av-icon-char:before { margin-top: -130px; position: absolute; z-index: 100; text-decoration: none; text-shadow: 0px 0px 3px rgb(0 0 0 / 40%); -webkit-animation: avia_fade_move_down 2s ease-in-out infinite; animation: avia_fade_move_down 2s ease-in-out infinite; } </style> <div class="code-block-arrow"> [av_font_icon icon='ue87b' font='entypo-fontello' style='' caption='' link='manually,#true-next' linktarget='' size='60px' position='center' color='#ffffff' admin_preview_bg='' av_uid='av-2bmczk'][/av_font_icon] </div>
Best regards,
MikeMay 8, 2023 at 4:25 pm #1406762Always forgot to answer: thanks @Mike, it works GREAT! :)
Bye,
A.-May 8, 2023 at 5:53 pm #1406767Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
This topic was modified 6 years, 4 months ago by
-
AuthorPosts
- The topic ‘Scroll Down Arrow for Full-width Easy Slider’ is closed to new replies.