How would I make a clickable container with GB?

[Arp]

Usually I’d display a link as a block and then give it a width & height but I can’t figure out how to do that with GenerateBlocks. Is it just using the button block? Or something advanced with another block?

Note: the container would need to have an image as a background, so that seems to rule out buttons.

[Leo]

Hi there,

That will be an option in the pro version.

Or you can target the link in the container like this:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Arp]

Sorry, that didn’t work. Could be because I’m using a Headline block, I’m going to have to figure something else out.

[Leo]

Sounds good 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

It looks like there is no pro version for GB. And the solution looks not comfortable to use if you have dozens of blocks on the page.

Any ideas how to make containers work as links?

[David]

Hi there,

the Pro version is yet to be released.
This will be one of the features of that version.

In the meantime you would need to do the following:

1. Add a Button or <a> element inside the container.
2. Give the Container Block an Additional CSS class e.g clickable-container
3. Add this CSS:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

I understand, but there is no way I can add any blocks inside a button block.

[David]

You cannot add a block inside a button.
The method provided above is the only non-Javascript way of doing this.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Dmitry]

Anyway thanks! Is there any info about the release date of pro version?

[Tom]

Not yet – hopefully in the first half of August.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Austin]

Hello – I am wondering if there is a solution to this yet? Is the pro version out?

[Tom]

Not yet – still working on it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Austin]

Hi David – I tried the method you perscribed above with the clickable-container class and it didn’t work. Can I privately share me site with you to see if you can help?

[Elvin]

Hi Austin,

Can you open a new topic about it?

We’ll make sure that it gets addressed there. Thank you. 🙂

A wise man once said:
"Have you cleared your cache?"

[Austin]

Never mind. I figure out a workaround. But I am looking forward to GenerateBlocks pro!!!

[Author]

Posts