Join the Webstudio community

Updated 2 months ago

Using dynamic span? Missing 'Text Content' field

At a glance

A community member wanted to use a span in a heading to change the text color, but found that the Text Content field and the dynamic dot to load content disappeared. The comments suggest that using a span directly in the heading is not the right approach, as span elements do not have bindings. The solution proposed is to use a text block and change the tag to span, which would allow styling the text and binding it. There is also a suggestion to drop a box into the heading and change the tag from div to span to achieve the desired result.

I would like to use a span in my heading so that I can change the text color. But to my surprise the Text Content field disappears when using span, and so does the nice purple dynamic dot to dynamically load content.
Attachment
image.png
O
R
J
8 comments
you wrapped your text with span, now text is inside your span
I'm missing a purple plus icon to dynamically load content.
Attachment
image.png
Inline spans don't have bindings. You can still achieve this by adding a text block and chaning the tag to span
You mean a text block, Then do something like "Hire " + ${spanvar}+" Expert" right?
If so, then is there still a possibility to change the color of the var?
You need to just drop a box into a heading and change the tag from div to span on the box, this way you can style it and bind it.
Ahh got it, awesome! Thanks
Add a reply
Sign up and join the conversation on Discord