How can I remove the link of a button block?

Nathan Van Steenberghe

• October 19, 2023 03:10
• Edited

Hello,

I have created this layout to showcase several selling points:

The only way I was able to build this was with button blocks. Even though they don't have a link attached to them, they are clickable and when clicked they refresh the page. I need them to not be clickable at all.

I tried adding "#" as the URL but then when clicked I get taken to the top of the page.

I also thought of linking to the section they're in using its ID. That's not ideal as it will look glitchy to visitors.

Lastly, I tried using the "pointer-events: none" CSS instruction. It disables not only the link but also any interaction with the block, both on the frontend and the backend website (so it prevents me from editing the blocks within Brizy).

I really wish there was a way to just disable the link function, or that by leaving all fields blank it wouldn't have a link attached to it.

Any thoughts on how I can achieve this? Thank you by advance.

Best regards,
Nathan

0

• 

  Ariel H.

  • October 19, 2023 09:10
  • Edited

  Hi Natan,

  Thank you for reaching out to us.

  To achieve this, you can assign a class ID to the column containing the buttons. With this class ID, you'll be able to specifically target the button using CSS to disable pointer events and text decoration.
  This is demonstrated on this screencast:  https://youtu.be/cLbbF2RMpIY

  Here is the CSS:

  #noclick {
     text-decoration: none;
      pointer-events: none;
  }

  You can add this CSS into your project settings if you are using Brizy Cloud. For Brizy WP users, simply navigate to "Appearance" → "Customize" → "Additional CSS" to insert the above CSS. Don't forget to apply the class ID to the column that contains your buttons.

  Please try this and let me know how it goes.

  Best regards,
  Ariel H.

  0

Please sign in to leave a comment.