Add some variety to your site's copy with text spans and image text fills.
Combine the power of text spans and image text fills to create Headings that stand out — all while still remaining selectable and search engine friendly.
In this lesson you'll learn:
To affect specific text within a Heading, add a span to it:
Great! Now you have a span created in your Heading.
Don't forget to add a class to your span to keep your styling organized (e.g., "Image background).
Read more about inline text formatting using text spans.
Let's add a background image to the text span — this image will appear within the text:
Read more about background images.
Important: Be sure to check your text span's image color contrast and legibility to ensure the text is accessible with its background. Learn more with our accessibility course.
Finally (this is where the magic happens), let's clip the image background to the text span:
Read more about gradient and image text fills in the Webflow Designer.
And that's it! You've created a visually intriguing Heading on your site to wow your site visitors.