Can Webflow allow for the addition of a stroke to text for an editable CMS title?
TL;DR
- Add a custom class to the CMS-bound text element.
- Insert CSS using
-webkit-text-strokeandtext-strokein the Page or Project settings, then publish to see the effect live.
Webflow does not provide a native text stroke feature using CMS elements, but it can be achieved using custom CSS.
1. Use a Custom Class on the CMS Title
- Select the text element connected to your CMS field (e.g., an H1 bound to a CMS Title).
- Add a unique class, such as
stroke-title, to that text element.
2. Add Custom CSS for Text Stroke
- Go to the Page Settings (if the CMS title appears on a specific page) or to your site’s Custom Code section under Project Settings → Custom Code.
- Paste CSS in the
<style>tags in the Footer Code box for site-wide changes or on a single page if needed.
Example CSS (added inline here, not as raw code):
``
- Adjust
color,-webkit-text-stroke, andtext-strokefor your desired effect.
3. Publish to See the Effect
- Text stroke won't be visible in the Webflow Designer, but it will appear on the live site after publishing.
Summary
You can add a stroke to a CMS title in Webflow by adding a custom class to the text element and using custom CSS with the text-stroke and -webkit-text-stroke properties. This allows full use of CMS content with custom styling after publication.