Can I add a span with a class within a h4 tag in the Webflow editor or do I need to edit the code manually?
TL;DR
- In Webflow Designer, add an
H4, highlight text, click +Span, and assign a class via the Style tab to style it independently. - The CMS Editor doesn't support adding spans or custom classes—only basic text formatting is allowed.
You can add a span with a class inside an h4 tag directly in the Webflow Designer without editing code manually.
1. Nesting Elements in Webflow Designer
- Drag an
H4element from the Add panel (keyboard shortcut: A) onto the canvas. - Double-click the
H4text to enable inline text editing. - Add a
Spanby selecting the portion of text you want to wrap, then click +Span in the inline editor toolbar. - Assign a class to the span by selecting it, then going to the Style tab and clicking Add Class.
2. Styling the Span
- Once the span has a class, you can style it independently from the surrounding
H4using typography, color, spacing, etc. - The span remains inside the
h4tag and will be rendered correctly in the final HTML.
3. Limitations of Webflow Editor (vs. Designer)
- If you're referring to the Webflow CMS editor (Editor Mode) used by clients to change content, they cannot add spans or classes—they can only edit plain text or basic formatting.
- Rich text elements allow more formatting (like bold, italic), but not custom
spanclasses via the CMS Editor.
Summary
You can nest a span with a class inside an h4 in the Webflow Designer—no need to edit code manually. However, the Webflow CMS Editor does not support adding span elements or assigning custom classes.