Linking a whole module

[linusgrundstrom]

I found this old thread (https://community.hubspot.com/t5/CMS-Development/Linking-a-whole-module/m-p/31675#M3047) but can't understand the solution they are presenting in it. Is there anyone the can help me bring some light to how I can link these 6 modules?

They look like this in Design Tools

Kind regards,

Linus

[stefen]

@linusgrundstrom It's not semantically correct to wrap entire block level elements in an a link tag. Instead you should use position relative and absolute. As long as the white card element has a position: relative style added to it's class, then the read more link should have the following:

a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

this will make the whole card clickable instead of just the read more link and still provide the correct semantic meaning for screen readers and what not.

[linusgrundstrom]

I actually solved this, I found this hidden gem in my css called ".content-card-link"

.content-card-link a {
display: block;
position: absolute !important;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
font-size: 0;
line-height: 0;
opacity: 0;
cursor: pointer;
}

[Jake_Lett]

Hi Linus,

I have two possible solutions for you that could get this working.

Option 1 - best if you have a few pages

If you are using the template builder I would give each grouping either a unique class name or ID. You can then use this to trigger a click. Then add some custom javascript like this 

$(".myBox").click(function() {

  window.location = "http://google.com";

});

Option 2 - best if you have a lot of pages

Create a custom module with fields for an anchor link to rebuild the look of what you currently have using the the template builder. Then in your template add your new custom module and make the edits you need for each.

Let me know if you have other questions.

---

Jacob Lett

Freelance HubSpot CMS Developer & Web Designer

---

Located in Michigan, USA

Need a custom HubSpot template or theme? ›