Add link scroll to how it works element

Comments

• Pablo

  August 2018

  Hi,

  This is what you need to do:
  
  1. Go to menus and create a new menu - http://prnt.sc/f2v9he
  2. Name the menu and add a custom link with the ID anchor you will use later(do not use spaces). Add to menu -http://prnt.sc/f2v9th
  3. When the menu item is added to the menu, save and go to Manage Locations -http://prnt.sc/f2vafb
  4. You go to your main page, you see the new link but when you click nothing happens? No worries, it is because the link has to know where to scroll, to do this edit the page. -http://prnt.sc/f2vc36
  5. Edit the section to which you want the button to scroll -http://prnt.sc/f2vcho
  6. In the field Custom ID type in the id from the button, in my case, it was id=work, no hashtag there -http://prnt.sc/f2vgaz
  7. Remember to have the one-page option selected under the muffinbuiler -http://prnt.sc/f2vcm7
  
  If you do not want to use a normal menu to link the user to sections, you need to add a 'scroll' class to the custom link elemment.

  
  

  Thanks
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• Saija123

  August 2018

  Thanks Pablo,

  
  

  The scrolling works perfect when clicking on a menu item.

  
  

  Again, my problem is that I haven't figured out how to scoll link from a how it works element.

  The link in the how it works element works when clicking on it, but without scroll animation.

  
  

  Below is the default code I see on the BeTheme demo website.

  
  

  Is it possible to add the class="scoll" code and if yes, how would I do it?

  Are the other ways to do it?

  
  Regards

  
  

  
  

  
  

  [how_it_works image="" number="" title="" border="1" link="" target="" animate=""]Insert your content here[/how_it_works]
• Pablo

  August 2018

  It's this same as the menu.

  
  

  You have to place a button with href="#yourid" and to shortcode you send,

  attach a div with id="yourid".

  
  

  <div id="yourid">[shortcode]</div>

  And it will work.

  
  

  If you want to have a effect of scrolling, you have to enable

  One Page option while editing page.

  http://prntscr.com/klkpyo

  
  

  But It have to be real One Page page.
  

  Thanks.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next
• Saija123

  August 2018

  Sorry for again asking. Obviously, I'm new to this forum and still have much to learn:

  • The One Page option is enabled. In addition to the main page, where all relevant content is added, I do have impressum and data privacy as separate pages that are linked into from the footer on my main page.Is this a problem?
  • I tried adding a button into the how it works element. The button link is nicely scrolling animation, but this button is then shown underneath the how it works icon and text and it looks bad. All I want is a user to click on the image of the how it works element and then scroll down to the id
• Pablo

  August 2018

  1) If your scrolling works fine, leave it as it is.

  It won't make problems.

  
  

  2) I'm not sure i understand your issue.
  

  You have to insert inside button or <a> tag this image you want to click to scroll.

  I mean, create column item and inside it create it.

  <a href=#id"><img src="xyz.png" /></a>

  
  

  Thanks.
  

  Learn more: Video Tutorials | How To | FAQ Vote on what comes next