Add link option to headings - needed to output valid html

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
  • Apr 1 2018
  • Already exists
  • Apr 2, 2018

    Admin response

    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: 

    <body>
      <div class="section">
        <h1><a href="https://www.webflow.com">HEADING</a></h1>
      </div>
    </body>

  • Sean August Horvath commented
    16 Jun, 2023 06:42pm

    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...

  • Sean August Horvath commented
    16 Jun, 2023 06:40pm

    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?!

  • Rick Erickson commented
    17 Mar, 2023 06:45am

    Matthew Cooper - good thinking! the Link Block strategy works all

  • Yannick Nana commented
    9 Feb, 2023 01:28pm

    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)

  • Matthew Cooper commented
    12 Apr, 2021 07:26am

    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!

  • Andy Neale commented
    26 Apr, 2018 08:45pm

    Weblow Admin please respond!

    This cannot exist if it does not work for collection headings.. or am I missing something?

  • Andy Neale commented
    18 Apr, 2018 09:05pm

    Hi Webflow

    Please re open this.

    The solution does not work on collection lists which counts more than plain html headings IMHO.

  • Andy Neale commented
    2 Apr, 2018 05:23pm

    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?

  • +8