How to Make Entire Block Clickable in GeneratePress?

If you’re using the GenerateBlocks plugin then you can easily make an entire block clickable in GeneratePress Theme.

Here we are going to show how you can make your WordPress Block Clickable within any theme.

But first, let’s try it in GP Premium Theme. You can easily apply this method to any WordPress theme using GenerateBlocks WordPress Plugin.

Other than that, if you are a new user to GeneratePress and Generateblocks world then add the GenerateBlocks plugin for free from the WordPress repository.

In this guide, you are going to learn to

  • Make Entire Block Clickable Using GenerateBlocks Free plugin.
  • Make Entire Block Clickable Using GenerateBlocks Pro plugin.
  • Using CSS Code to make block clickable.

If you are interested in other GeneratePress and Generateblocks Tutorials then you can simply check our dedicated categories. Also, Read these similar posts.

How to Make Entire Block Clickable in GeneratePress

1. Make Entire Block Clickable Using GenerateBlocks Free plugin.

To make the block clickable in the free method, you have to use CSS Code.

1. Add Custom Clickable CSS Code

  • First, go to your Dashboard.
  • Go to Appearance > Customize.
  • Now, go to Additional CSS.
  • Copy and Paste the below code and Publish it.
.gb-container.clickable-container .gb-inside-container {
    position: fixed;
}

.gb-container.clickable-container a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

2. Add Clickable Class to your Block

Adding Clickable Container CSS Class in GenerateBlocks free version.

Now, it’s time to add blocks to your posts/pages.

  • For example, let’s add GenerateBlocks Query Loop Block.
  • After adding Query Loop Block, Select Post Template Block as in the screenshot.
  • Go to Advanced Block settings and paste the clickable-container CSS class name in the Additional CSS class(es) box.

2. Make Entire Block Clickable Using GenerateBlocks Pro plugin.

If you are using the GenerateBlocks Pro version then you can make the entire block clickable with 3 to 4 clicks only. You don’t have to use the CSS method as the Pro version manages all those settings.

So how to make our block clickable?

Follow these steps and let me know how it goes at your end.

Here I am using Query Loop by GenerateBlocks (not the default one).

1. Add Query Loop Block

First, add the Query Loop Block, for example I am choosing Two Columns & featured image layout.

Query Loop in Generateblocks

2. Make Post Template Clickable

Making Block Clickable in GeneratePress Theme using Generateblocks Pro version

Now, it’s time to make your Post Template Clickable.

  • As in the above screenshot, select Query Loop > Post Template Block.
  • Go to Block Settings.
  • Go to Dynamic Data.
  • Enable Dynamic Data Option.
  • Now, you will see Data Source, Background Image Source, and Link Source Settings.
  • Go to Link Source Setting and Choose Single Post.

Finally, preview your design and check the clickable part, you will be able to click the whole block.

Conclusion

Making an entire block clickable in GeneratePress is a breeze with GenerateBlocks.

Just follow a few steps and you can make any WordPress theme’s block clickable. Clickable blocks are a great way to add interactivity to your website.

They can be used to link to other pages on your site, or to external websites. With GenerateBlocks, you can easily add clickable buttons to any block.

That’s all there is to it!

Share:

I am obsessed with WordPress and write articles about WordPress Speed Optimization, SEO, and Blogging. I mostly publish tutorials on GeneratePress, Astra, Kadence, and GenerateBlocks.

4 thoughts on “How to Make Entire Block Clickable in GeneratePress?”

  1. Thanks for sharing this article about the Make Entire Block Clickable in GeneratePress, this is really helpful. I have been following you for the last 2 years and your every post provides information in details. I am also using generate press theme on my blog lookuptwice.com. Could you please tell me to make widget shadow as your website.

    Reply
  2. There is an error in your code:

    .gb-container.clickable-container .gb-inside-container {
    position: fixed;
    }

    This should be position: relative;

    Reply

Leave a Comment