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 Add GenerateBlocks Pattern Library in GeneratePress?
• How to Migrate WP Show Posts Plugin to GenerateBlocks?
• Best GeneratePress Templates for Affiliate Marketing
• How to Create Custom Footer 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

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.

2. Make Post Template Clickable

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!