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
    June 16, 2023 18:42

    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
    June 16, 2023 18:40

    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
    March 17, 2023 06:45

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

  • Yannick Nana commented
    February 09, 2023 13:28

    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
    April 12, 2021 07:26

    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
    April 26, 2018 20:45

    Weblow Admin please respond!

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

  • Andy Neale commented
    April 18, 2018 21:05

    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
    April 02, 2018 17:23

    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