[Support request] Making a group clickable?

Home Forums Support Making a group clickable?

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1456528
    Martin

    I have created a grid with 2 rows and 3 columns making a total of 6 “boxes” (see image Grid). It is created using grid, container, group, headline and paragraph. I would like to make each “box” clickable with a unique url leading to different pages on the website.

    I can use the link-feature in the editor for Headline or Paragraph but not for the group I have created for them. Apparently the editor doesn´t allow that. Is there a workaround for this? I would prefer to use the visual editor for this. When I open the code editor I am trying to wrap the group with a href-tag but it is stripped away when I save/update the page, hence the link/href is deleted.

    Can anyone help me with this issue och direct me to a workaround so I can accomplish what I need?

    Thanks 🙂

    Grid
    Structure

    #1456535
    Martin
    #1456655
    David
    Staff
    Customer Support

    Hi there,

    thats a actually a feature we will be adding to GenerateBlocks Pro.
    There is a CSS method i can help with.

    First can you remove the Group Block as its not required and will get in the way.
    You can background color and padding to each grid container if thats what the group block is currently doing.
    Then make sure you have a link attached to either the Heading or paragraph.

    Once done share a link to your site so i can look at the CSS.

    #1456694
    Martin

    Thanks. I have removed the grouping and added a link to Box1 headline. It LOOKS fine now but I would appreciate the magic to get the whole “gb-grid-column-20ae7893” clickable.

    Thanks in advance 🙂

    <div class="gb-grid-wrapper gb-grid-wrapper-c3b94c13">
    
    <div class="gb-grid-column gb-grid-column-20ae7893"><div class="gb-container gb-container-20ae7893"><div class="gb-inside-container">
    <h2 class="gb-headline gb-headline-19ed2d9e"><a href="#" data-type="page" data-id="49">Box1</a></h2>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    </div></div></div>
    
    <div class="gb-grid-column gb-grid-column-78e05e2b"><div class="gb-container gb-container-78e05e2b"><div class="gb-inside-container">
    <h2 class="gb-headline gb-headline-1ee74e44">Box2</h2>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    </div></div></div>
    
    <div class="gb-grid-column gb-grid-column-ab3dcca3"><div class="gb-container gb-container-ab3dcca3"><div class="gb-inside-container">
    <h2 class="gb-headline gb-headline-7842b47d">Box 3</h2>
    <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>
    </div></div></div>
    
    </div>
    #1456712
    David
    Staff
    Customer Support

    Select each grid container and give it an Additional CSS Class ( in Sidebar > Settings > Advanced ) of clickable-block then add this CSS:

    .clickable-block {
        position: relative;
    }
    .clickable-block a:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
    }
    #1456803
    Martin

    That works fine! Thank you so much for your help 🙂

    #1456816
    David
    Staff
    Customer Support
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.