Archived topic
Making a group clickable?
6 replies · Started by Martin on September 24, 2020
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 :)
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.
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>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;
}That works fine! Thank you so much for your help :)
You're welcome
