How to Make Entire WordPress Block Container Clickable

As a WordPress and web designing enthusiast, I always find a way to improve myself. So learning is the fun part for me, and over time I’ve learned a lot about GeneratePress and GenerateBlocks. So, today in this article, I will show you how to make the entire WordPress block container clickable using GenerateBlocks.

GenerateBlocks is my favorite WordPress block editor plugin that can do almost anything to create a beautiful and fast-loading website without any page builder.

It has a lot of features to add to your website. Using GenerateBlocks, you can add various block containers, custom buttons, post layouts, page heroes, etc.

I think you might like this GenerateBlocks review to get to know it better.

So now, without any further ado, let’s move on to making the entire WordPress block container clickable using GenerateBlocks and custom CSS code.

Moreover, in this article, you’ll learn:

• How to Install the GenerateBlocks Plugin
• How to Apply Custom CSS Code and class(es)

First, you need to install the GenerateBlocks plugin.

Install GenerateBlocks Plugin

To install the GenerateBlocks plugin:

• Go to your WordPress admin dashboard area
• Click on Plugins > Add New, and search for GenerateBlocks
• Click the Install Now button, and then Activate it

If you wish to use the GenerateBlocks Pro plugin to add more helpful features to your website, go to the generateblocks.com site, log in to your account, and download the pro plugin file.

Now go to your WordPress admin dashboard area, Plugins > Add New, and click on the Upload Plugin button.

Browse the plugin file you earlier downloaded on your computer, select it, and then click on the Install Now button.

Now you’re ready to use the GenerateBlocks Pro features.

While you can also make the entire WordPress block container clickable using the free GenerateBlocks plugin. But the Pro version will allow you to add more features to your website that everyone wants.

Create Content Using Container Block

Create some content using the GenerateBlocks container block, such as any product block, query loop (posts) container block, or anything you want.

In my case, I’m going to add a prebuilt query loop container block on the website home page for my latest posts using the GenerateBlocks plugin.

To add a Query Loop latest posts container block:

• First, click on the Toggle block inserter tab on the page or the Add Block button

• Now add the Query Loop container for your page from the GenerateBlocks section

Note: Adding a link to your WordPress block container is a must if you want to make the entire WordPress block container clickable.

After creating the content container, the last part is to add custom CSS.

Add CSS to Make Entire Block Container Clickable

To make the entire WordPress block container clickable, first copy the CSS code below.

/* To make the whole block container clickable */
.gb-container.linked-container .gb-inside-container {
    position: relative;
}

.gb-container.linked-container a:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
}

Now go to Appearance > Customize > Additional CSS, paste the above CSS code, and click on the Published button to save the changes.

• Finally, go to the page and select the container you want to make clickable.
• Now go to the container settings on the right side, and click the Advanced tab.
• Paste this CSS class linked-container inside the Additional CSS class(es) and save the changes.

Now your entire block container is clickable.

Please ensure that a link must be inside the container to make it clickable.

Summary

The best idea is to make the entire block container clickable when you want to display products, categories, or tutorial navigation cards on the home page of a website.

By following this tutorial, you can make the entire WordPress block container clickable without any problem.

I hope this article will help you to make a clickable block container for your website. If you face any problems, you can leave a comment in the comment section. In this way, I can give you the best solution.

If you liked this article, please show your love by sharing it on your favorite social media channel and also send your thoughts in the comment section.

I love your comments. It encourages me to create the best WordPress resources and marketing articles for you.

Also, feel free to ask me anything about WordPress plugins, themes, hosting, and starting your blog.

You can follow WPSettingbox on Twitter and Facebook to get fresh and updated content.