Community forum for knowledge and support

Updated 3 months ago

Editable heading section in component settings

At a glance

The community member is asking if it's possible to make a heading section editable within the component settings in Webflow, where the client can change the copy and determine which word(s) have an alternative style. They are currently using a span with a class of is-alt to override the font.

In the comments, another community member tried using inline flex and three text properties, but this was a fixed solution where the client could only apply the alternative style to the middle words. The community members discuss a potential solution using a rich-text style and custom CSS with a bold tag to apply the alternative style.

The community member has found a solution by using a global .w-richtext strong and a Rich Text editor with an H1 wrap around the text, which they have turned into a component property. This allows the client to make one of the words bold in the Rich Text editor, and the alternative heading style will be applied.

Does anyone know if it's possible (or maybe an alternative way) that I can turn this heading section into an editable section within the component settings similar to typical heading where it gives the option to make the copy a property (see image) where the client can fundamentally change the copy but also determine which word(s) change to the alt style.

Currently my main font is using 'heading-style-h1' - I am using a span with a class of 'is-alt' to override the font. Is it possible to do this with the component tool in Webflow

Attachment
Screenshot 2025-03-23 at 15.14.47.png
G
G
11 comments

Hey @Grant Thompson

I wanted the same for one my client. But I went with inline flex

& when you did that was the client able to add the style where they want or was yours more fixed (as in they can only apply the alt style to the 3rd word for example)

First set of words and last set of words are of same style and middle words are different style

Yeah that’s the only issue in this scenario the client needs to be able to add it with some flexibility - I’ve read a potential solution using a rich-text style & a bit of custom css using a bold tag for example to apply the style - may be worth exploring

Right I’ve managed to get this resolved by using a global .w-richtext strong & using a Rich Text editor with a H1 wrap around the text & turned that into a property for the component so whenever they make one of the words bold in a rich text editor only will it apply the alternative heading style 👍 👍

Can you explain in detail about it

Yeah of course - when I get to work later I will take a screenshot of the set up & explain what’s happening 👍

Add a reply
Sign up and join the conversation on Slack