"Wrap with Span" text option in Editor

What does this function actually do? I’m unclear as to its purpose in the editor - once you wrap the text in a span tag, it doesn’t seem to be modifiable in any way beyond that.

Screen Shot 2020-12-05 at 6.58.47 PM


Welcome to the community @evanpax!

Spans essentially allow you to style pieces of your text within an element with their own class. In the same way using bold or italic makes something either thicker or slanted for example, you could have a span style that changes the font, color or size properties (just to name a few) of a specific selection of text.

After you create a span, that will outline your selection with a blue box and a class name, and then it can be modified in the right-hand style panel like any other element:



Thanks @mikeyevin , I understand the role of the wrap with span function within the Designer but I’m struggling to understand what purpose it serves users in the Editor tool as screenshotted above.

Ah my apologies, the function is the same however since users don’t natively have any ability to add a class (or change styles) it doesn’t do anything other than wrapping the selected text with <span> tags.

That said, if you setup default <span> styling for your site, anyone using the Editor can theoretically apply that specific style to a selection of text—for example if you had a “highlight” effect that you wanted to give them the ability to add on the fly.

Keep in mind you’d need to add this manually with either an HTML Embed or within the custom code section of a page or sitewide, however it would give them access to an additional style on the fly in the editor.

Here’s what the code would look like for a “highlight” effect, although you may opt to change the targeting based on how your site is setup or if you want to limit where collaborators can add this effect:

  p span {
    background-color: yellow;

With the code above, wrapping text with a span will create the following effect: