Return to List

Call to action button

Asked on April 20, 2016 in How To.

I would like to create a “Scroll” button in the introduction section of my site which allows users to click and the page scrolls to the next section of the home page. How would I go about doing this? Would this be a call to action button?

Thanks,

lisaa2999 Layers User
Reply
Cancel

  • Possible Answers to Your Question:

    • 2 Answer(s)
    Answered on April 21, 2016.

    Hey ,

    i did something like this with a slider button.

    First you have to go to your widget where you want the button to go to.
    for me it was a contend widget under the slider.

    then you click the advanced button and scroll down then you will see widget-ID
    copy this or write it down for me it was #layers-widget-column-5
    copy the # too.

    then go back to the slider or call to action widget , then under insert link for the button.
    select LINK – > Custom then Widget-ID as the link ( #layers-widget-column-5) then button text for example more info.

    then for the smooth scrolling
    if you have devkit you can go to the Javascript section and input this code:

    
jQuery(function($) {
$('a[href^="WIDGET-ID"]').live('click',function(event){

event.preventDefault();

var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;

//change this number to create the additional off set

var customoffset = 20;

$('html, body').animate({scrollTop:target_offset - customoffset}, 500);

});
}(jQuery));

    IMPORTANT : change the WIDGET-ID to your widget id for me again it was #layers-widget-column-5
    after that press the run button then save and it should work 🙂

    you can play with the customoffset 20 to see what suits you best.

    hope this helped.

    Kind regards
    Dieter

    Cancel
    Dieter Jeanty Layers User
    Reply
    Cancel
    Answered on April 26, 2016.

    I have one on a slider: http://ksmbda.stollerys.co.uk/

    You need to specify a custom link. On your widget, on the far right last button “Advanced”, scroll to the bottom to “CUSTOM ANCHOR” add a value in there.

    On the slider, in the Insert Link, in Link select Custom, add the value you added to “CUSTOM ANCHOR”.

    OR

    Follow the same procedure for a Call to Action widget, setting the link to the “CUSTOM ANCHOR”. You can then place the call to action widget where you want it.

    Cancel
    philstollery Layers User
    Reply
    Cancel