Add Span element inside headline, text and rich text

Is it possible to develop a element inside headline, text and rich text to be able to create different style on the headline, etc. For now, we must do it with CSS, but it can be quite a lot of work if the project is big, and it doesn’t preview in the builder.

I believe many people would appreciate it. On how to do it, whether to actually create a span element or do it in another way, like using different styles inside the headline, would be great to have classes on it or variables at least, I would leave this to you.

Thanks

1 Like

Hi @Matej was just wondering is this planned or in discussions?

Hi @Dinophox,

not that I know of. As for now, you can create <span> inside a heading element like this:
CleanShot 2025-02-13 at 15.24.17@2x
But to style it, you will have to use CSS, you can’t style it with UI controls.

Best regards,
Matej

Thanks Matej,

I know about this but don’t really like it as it takes quite a lot of time if I need to repeat it on many headlines. I’d like to suggest this improvement for the next releases if possible. A span element or additional styling for heading maybe text element as well.

Webflow has span element, but I heard from a different company that is quite difficult to implement, so I will leave you guys to decide whatever is the best solution. But I’m sure this would push the no-code styling a step further.

Best regards,
Lukas

1 Like

Hi @Dinophox,

If you only need <span> element, you can change the tag of the basic text. But, the Heading element is not nestable, so this would not work inside it.

To achieve this, the Heading element would need to be nestable, and we would need a way to add only text inside nestable elements… so it’s not a simple one.

1 Like

Thanks Matej for your reply,

I want span (or similar) element to be able to apple no code styling within the headlines or text.
Heading doesn’t have to be nestable as you already have animated typing element and that does a good job, but it only do different typing styles. Maybe making that element a bit more robust to allow different styling.

I checked the code and it uses span tag inside just more styling options (like color, bg color, text style and decoration etc.) are missing.
Then maybe changing the name of animated typing to dual heading or similar, and the it’s done :slight_smile:

I’ve made a tutorial on how you can style up any text element without writing the CSS. You can even “insert” images (or text fillers) if you like to, or just change the font styles:

2 Likes

This is cool! I knew it was possible somehow, and you have a solution, thanks. This solution is more powerful!

I still wanted to suggest a simple solution for the native builder to have a simple different styling for one heading as they already have a similar element.