Add link scroll to how it works element

Saija123

https://themes.muffingroup.com/be/theme/shortcodes/content-elements/#howitworks

Hi all,

With Muffinbuilder, I created a how it works element on a page which contains a link down the page to another anchor position.

The link itself works when clicking on the how it works element but I want it to scroll down. Instead the user is directly linked.

I tried with adding class="scroll" into the link field but it's not working.

How can I add scrolling links into the how it works element?

Thanks!

Pablo

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

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

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

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

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