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
  • Create a Text Block in Webflow, style it as an h4 by adjusting typography, and highlight text for span.
  • Use the popup toolbar to add and style a span with a class for custom styling.
  • Preview changes to ensure correct text structure and styling without manual code editing.

Adding a span with a class within an h4 tag directly in the Webflow editor requires a workaround since HTML element editing isn't available through the GUI. Here's how you can manage it without manual code editing:

​

1. Use Text Block and Span Styling

  • Create a Text Block: Drag a Text Block element into your canvas instead of directly using an h4 element.
  • Style as h4: Apply a class to the Text Block and adjust its typography settings to match your desired h4 styling.
  • Highlight Text for Span: Click to edit the text in the Text Block. Highlight the specific portion you want to style with a span.

​

2. Apply a Span

  • Open Span Menu: Use the popup toolbar that appears when text is highlighted. Choose the option to add a span.
  • Style the Span: Assign a class to the new span for custom styling, such as color or font weight.

​

3. Final Validation

  • Preview Changes: Use Preview Mode to review the text structure and styling.

  

Summary

You can simulate an h4 tag with a span in Webflow by using a Text Block styled as an h4 and applying span styling to parts of the text. This method avoids manual code editing while allowing for precise styling.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Can I bypass the need for users to manually paste my custom code into a Webflow project by integrating it directly into the project myself?
How can I use Webflow to create a 'more/less' button that expands a div to show hidden content without creating a new element or text box?
How can I prevent mobile page zooming in Webflow despite having the code in place?
What are the steps to troubleshoot issues with the Finsweet script not working in Webflow, causing the cookie banner not to appear and console errors to occur?
How can I add tooltips to elements in Webflow without leaving the Designer interface?
Where can I give my client designer rights in Webflow to allow them to implement smaller changes without needing to involve me?
Can you use Webflow's native icons like Close (X), Arrows (< >), and Hamburger/Menu icons instead of third-party tools like Font Awesome?
How can I allow Webflow Forms to capture the current article's URL so that I can receive emails with that URL and better follow-up on inquiries related to each specific article on my site?
How do I change the color of the headers in Webflow CMS articles separate from the body text using custom CSS?
How can I create a mega menu in Webflow? Can someone help me with this?
How can Webflow help you create a simple customized online formula calculator without requiring web development or JavaScript skills?
How can I add pagination and arrows to the slider/carousel in Webflow using the Swiper integration? Additionally, how can I modify the breakpoints so that only one slide is displayed on mobile? I added the script code for breakpoints, but it didn't work. Can someone assist me with this issue?
What is causing unexpected margin and padding on multiple sections in my Webflow site?
How can I style the second, third, and fourth slides after the currently active slide in the Webflow Slider using CSS or JavaScript?
How can I add an image from my media Library to a blog post in the Webflow editor without having to upload it again? It's a straightforward process in WordPress, but seems more complicated in Webflow. Am I overlooking something?
Can I capture a screenshot of a Webflow page on click and convert it to a downloadable PDF?
How can I alternate the layout of the image and heading for each collection item in a two-column format on Webflow?
How can I execute JavaScript code when clicking a specific button with a given ID in a Webflow project?
How can I disable the Webflow success or failure state for a sign-up form and display a custom thank you page using jQuery and the Webflow form submit state?
How can I create a vertical scrolling menu with Webflow, similar to the one on Apple's website, that switches to horizontal scrolling when the menu doesn't fit on one screen?
How can I change the language of the Google Maps embed from English to Arabic in Webflow?
How can I reduce the vertical space between lines within a bullet point in Webflow? Can I replace the bullet points with icons on the "Services" page?
How can the text color be changed for custom input fields on Webflow?
How can I add conditional visibility in Webflow to prevent a div from appearing on a published page if a CMS field is empty?
How can I stop a YouTube video from playing in the background in audio mode when I close a modal in Webflow?
How can I connect and use my JavaScript and CSS files for special functions and styles in Webflow?
How can I fix the "Ensure text remains visible during webfont load" warning in Webflow?
How can I implement a ThreeJS script as a background for my Webflow project using custom code?
How can I send data from a Webflow Form to ActiveCampaign without using Zapier? I have set the form to POST and input the form's action URL, similar to Mailchimp but it redirects me to the admin area of ActiveCampaign without sending the data. Has anyone had success with this method?
Can Webflow be used to create a "blob" elements effect in the header of a website using custom code or JavaScript?