Hello guys!
Could someone explain to me how to link a column with a url? Im trying to do this:
Those blocks are clickable! I can do it on the code but not on blocs 
Maybe give the card, div or column an ID then do what @Norm suggests: Clickable DIV - #2 by Norm unless there is an easier way now.
Thank you @Hypnoman! The way Im doing it now its by adding a reference link for example on the link I post as reference would be:
<a href="https://www.getyourguide.com/paris-l16/ultimate-louvre-2-hour-skip-the-line-guided-tour-t175122/" target="_blank" data-activity-id="175122" class="baseline-activity-card__container js-activity-card">
But that mean you need to edit the code once you export! Is there a way to do this directly on blocs? @Norm?
Simply select your column and add a custom attribute in the properties panel. The name of the Attributes should be onclick and the value should be location.href=‘https://google.com’; Change the URL to whatever you want. Now, anything that is clicked in the column will divert to the stated url. This will retain the information in your blocs project and doesn’t require any coding after exporting.
I tried this but it didn’t work!
I just tried and it works just fine - maybe there is something not right with the name and value information - for example, there is no need to add double quotes in the value field etc. It also requires the column to have some content.
1 Like
so it like this no? location.href=https://google.com
No, it should be like this location.href=‘https://google.com’; Note the SINGLE quotes around the URL and the final semi-colon.
weird! It doesn’t work for me!
Check out the example I uploaded HERE. Click anywhere on the content. You should get diverted to google.
If you want. I can post the project file so you can check it out on your system. EDIT, added the project below
The method Hendon shows works. Here is my example:
https://dacsecure.com/t/card-example/
I added a cursor pointer and a slight change in shadow for hover.
2 Likes
Well done.
How did you add the cursor pointer?
@Bootsie just change the colour of the hover!
Thank you so much @hendon52 I will try it and let you know!
1 Like
Ah ok got it! but why I can’t get the mouse over effect?
How you do that?
I added some custom CSS to the Project code editor:
<style>
.card-look {
cursor: pointer;
}
</style>
Then use that style on the Card
Here’s the Bloc file for you to investigate @Stewie_Griffin
Card Link.bloc (1.4 MB)
Hat tip to @hendon52
1 Like
Works perfect.
Thanx a lot.