- This topic has 9 replies, 3 voices, and was last updated 2 years, 11 months ago by
.
-
Posts
-
Hi David,
I’d like to add a smooth-scroll feature to a headline block.
What I did to get there:
1) Activated smooth-scroll in the Customizer/General
2) Added the smooth-scroll class to the headline block
3) Added a link to the headline blockThe feature, however, is not working.
What am I missing?
Any advice is much appreciated.
Thanks,
JanCustomer Support
Hi Jan,
The
smooth-scrollshould go to the Button or Menu item that directs to the Headline. Make sure to add the id you set as the link to the button or the menu item.This article explains it: https://docs.generatepress.com/article/smooth-scroll/
Hi Fernando,
many thanks for getting back.
I went over the suggested article and correctly embedded the CSS class for regular links. This part works very well now.
There is another link that I’d like to attache to the Image block. Just like regular links I added the CSS class to the
<a href...>element via Code editor.<!-- wp:generateblocks/image {"uniqueId":"0d693c73","mediaId":15857,"sizeSlug":"thumbnail","height":"40px","objectFit":"contain","alignment":"center","className":"smooth-scroll"} --> <figure class="gb-block-image gb-block-image-0d693c73"><a class="smooth-scroll" href="#was"><img class="gb-image gb-image-0d693c73 smooth-scroll" src="https://b3tipr.myraidbox.de/wp-content/uploads/turbine-150x150.png" alt="" title="turbine"/></a></figure> <!-- /wp:generateblocks/image -->This throws an error in the Visual editor.
Any thoughts on how to fix that?
Thanks,
JanHow are you adding the class?
For reference, here’s an example of how to add Custom Classes: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
Hi Fernando,
I open die page in the Code Editor and then inject the
class="smooth-scroll"into the element. See code snippet in the previous answer.Best,
JanI see. Can you add it this way instead?: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/
Hi Fernando,
sorry for not getting back earlier.
The very same option is what I had in place to begin with, but it did not work ;-/
I checked the settings of the image block once more and compared those with the documentation that you shared. No difference.
Any idea as to what I’m doing wrong?
Thanks,
JanCustomer Support
Hi there,
you cannot add the class to the
<a>surrounding the image using that method.Instead you can make it so the
smooth-scrollacts on all#links – see here for the PHP Snippet to do that:https://docs.generatepress.com/article/generate_smooth_scroll_elements/
Hi David,
this works very well indeed.
Many thanks,
JanGlad to be of help!
- You must be logged in to reply to this topic.
