[Support request] How would I make a clickable container with GB?

[David]

I am unclear how to use CSS you have suggested (am no expert in this), so would appreciate clarification.

I have 3 containers which I want to make clickable, within a grid within a container. Each of the 3 containers contains a background image and a GB headline containing text. Rather than putting the text as buttons, I want to make the whole of each of the 3 containers clickable.

What are the detailed steps to achieve this please?

Am using GB with GP Premium.

[David]

Hi there,

you can try the following:

1. Add this CSS to your site:

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

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

2. Select each Container block and in the Settings > Advanced > Additional CSS add: clickable-container

3. Then within your containers select the Heading Block – highlight it and make it into a link.

This requires the layout to be correct – if its not working – raise a new topic where you can share a link to your content and i will take a look.

[JamesKrakauer]

Clickable container not working properly for me.
Instead of a clickable container the entire page becomes clickable.
The main container is hooked as a gb block after the menu. The structure is as follows:
main container
+grid
++container
+++heading
++container
+++heading
++container
+++heading
++container
+++heading
++container
+++heading
page address: https://przeklad.pl/en/testpage/
I’m using Polylang, if at all significant.
Three containers are marked as clickable – the ones for Translation, Training and Other Services. Only “Other Services” has an active link.
Thanks,
J.

[David]

Hi there,

I modified the CSS above

Try that.

[JamesKrakauer]

Thank you for the code, David. The relative position seems to have done the trick.
I’ve been playing around trying to make it work in a multi-tier scenario. There is a quirk if you make the parent container clickable and give it a heading link: the links work correctly provided that the heading link comes before clickable child containers. Otherwise the link in the parent container extends to the entire block.
There is one question remaining, if I may ask: how do I make hover backgrounds for clickable containers?
Cheers,
J.

[Elvin]

Hi,

You can add in the hover state CSS by adding something like this:

.gb-container.clickable-container a:hover:before {
    background-color: red;
}

[Viktor]

Hi,

I am trying to do the same and it works well on desktop but not on mobile. Can you please provide me with a css so it will work on mobile as well?

Thank you!

[Leo]

The solution should work for desktop and mobile.

Can you open a topic here and link us to the page in question?
https://wordpress.org/support/plugin/generateblocks/

Thanks!

[Author]

Posts