I believe this is a quirk in Webflow.
To make a heading element linked you have to add a link block and a heading inside of it resulting in incorrect html i.e
a > h1
<a href="" class="w-inline-block">
<h1>How do I set my rental preferences?</h1>
</a>
This is invalid as its a block level element inside an inline element.
It should be the other way around. i.e
h1 > a
<h1>
<a href="" class="w-inline-block">How do I set my rental preferences?</a>
</h1>
Webflow please add an option to headings to link it and then give us the normal link UI options to set a link that outputs
Andy Neale
4/2/18 Update:
We actually already have this! All you have to do is double-click into the heading field and you'll see a menu pop up. Insert the link and you'll have the following structure in the exported code:
.svg){kind=logo}
<body>
<div class="section">
<h1><a href="https://www.webflow.com">HEADING</a></h1>
</div>
</body>
I feel like I want to add, however, that the admin response highlighted at the top of this page only made things more confusing as it explains only the blatantly obvious...
I'm so confused on this as well. I'm creating a sources section. I wanted the name of the website source set as H3 to be hyperlinked. Under the H3 is some teaser website text.
This is a blog template in a CMS collection using a rich text field so that the editor can set up the proper H3 setting.
I thought it was because my character style for "all links" was set to look like paragraph text but this doesn't seem to be the case.
I've tried updating my character styles page and create a special class for rich text fields inside a "sources" class div box, and even the writing under that option implies I can make alterations. But still as soon as I set it as H3 and add the hyperlink, it shrinks back down to Paragraph size text, and the font size tools won't change it larger again or smaller. It actually says it is the same size font (like 50 vs 20).
For the life of me can't get this to work. I don't have many spaces yet to separate out all the headers and hyperlinks and preview text under the source into separate fields on the CMS form. I was hoping a link block would work but still don't have the fields for it to select the proper hyperlink from the CMS collection.
I don't understand the logic as to why this isn't working but based on comments below it sounds like this is just how it works. Yannick Nana's comment is a very succinct explanation as to what I'm attempting to describe here. And it hasn't been possible for 5 years?! The ASD in my wants to know why more than it even wants the solution.
--EDIT--
WOW okay so changed the "when nested inside of" to all links using the same "sources text" class. Left the H4 (not H3 anymore whoops) there as is. And boom it works.
Why in the world did it take me half a day to figure this out?!
Matthew Cooper - good thinking! the Link Block strategy works all
As Andy Neale mentioned 5 years ago... This is still not working for collection lists where links are nested inside heading (and not the other way around)
Just adding a comment for anyone who comes across this in future... I think I've got a work-around which is simple and works fine.
Just put your heading in a Link Block, and set the link to go to the page you want. Hope this helps, and also hope it's not a dumb thing to do.
Cheers!
Weblow Admin please respond!
This cannot exist if it does not work for collection headings.. or am I missing something?
Hi Webflow
Please re open this.
The solution does not work on collection lists which counts more than plain html headings IMHO.
Thanks, I can get it working on normal html headings.
But it does not work on collection lists. When you set the heading to pull text from a collection list it deletes the link.
I believe this does not yet exist correctly until it works on collections lists too since the majority of my content comes from collection lists.
Any thoughts on this?