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

Home Forums Support How would I make a clickable container with GB?

Viewing 6 posts - 16 through 21 (of 21 total)
  • Author
    Posts
  • #1481808
    davidbee

    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.

    #1481880
    David
    Staff
    Customer Support

    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.

    #1584127
    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.

    #1584269
    David
    Staff
    Customer Support

    Hi there,

    I modified the CSS above

    Try that.

    #1584563
    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.

    #1585058
    Elvin
    Staff
    Customer Support

    Hi,

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

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

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

Viewing 6 posts - 16 through 21 (of 21 total)
  • You must be logged in to reply to this topic.