Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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 ago by abmich. Reason: Missed a step!
    #953567

    Hey Andrew,

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

    Best regards,
    Basilis

    #953951

    You all have helped so much I was happy that I could figure something out to maybe help others!!

    #1334893

    @abmich, that’s exactly what I was looking for, thanks! Would it be possible to add the animation too? :-)

    #1334896

    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

    #1406762

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

    #1406767

    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

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