Table of Contents
Sometimes you want more than just a button or a link, you want to make a whole container clickable. But how do you do that in Carrd?
This is a simple method mentioned by Doni from Carrd’s support team. You can see the below example on my demo site.
How to make a Container clickable
Step 1: Add the below code in an Embed element, with Style set to Hidden and Head:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
document.getElementById('clickable').addEventListener('click', goURL);
function goURL() {
document.location.href = 'https://twitter.com/markbowley';
}
});
</script>Step 2: Give the the container you want to be clickable a unique ID, in its Settings.
Step 3: In the code embed, change
clickable to the ID you gave your container. Step 4: Also in the code, change the
URL to your desired link.Step 5: Publish your site and test the clickable container.
That’s it. You should now have a clickable container.
Adding extra polish
Here’s an optional step – you can make the cursor a pointer when it mouses over the Container. This makes it feel more like a clickable element to the user.
Add the below code in your Embed element, after the closing
</script> tag:<style>
#clickable { cursor: pointer; }
</style>Change the element name (the part after the #) to the ID you gave your Container.
We hope you liked this tutorial. Check out other Carrd tips & tricks.
Written by
