Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • May 7, 2018 at 9:16 pm #952882
    abmich

    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, 2 months ago by abmich. Reason: Missed a step!
    May 8, 2018 at 9:40 pm #953567
    Basilis

    Hey Andrew,

    Thank you so much for sharing a solution!
    We much appreciate it!

    Best regards,
    Basilis

    May 9, 2018 at 2:38 pm #953951
    abmich

    You 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
    mistermagoo8691

    @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 #1334896
    Mike

    Hi,
    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>

    2022-01-09_009.jpg

    Best regards,
    Mike

    May 8, 2023 at 4:25 pm #1406762
    mistermagoo8691

    Always forgot to answer: thanks @Mike, it works GREAT! :)
    Bye,
    A.-

    May 8, 2023 at 5:53 pm #1406767
    Mike

    Hi,
    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

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Scroll Down Arrow for Full-width Easy Slider’ is closed to new replies.