Powerful Rich Text
Add HTML to Rich Text elements, add components from the same page or from different pages, add classes, ids, attributes, and more.
Implement in Webflow
Apply attributes to elements on the page
Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.
Add components from the same page, or from other pages in your site, inside a Rich Text Block element.
Full documentation for HTML and component use below.
This HTML in Designer, Editor, or CMS
Using HTML in a Rich Text Block
You can write any valid HTML like:
<span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>
And it will be parsed and rendered.
Additionally, you can disable an entire line from being parsed by adding <!-- fs-richtext-ignore --> at the beginning of it:
<!-- fs-richtext-ignore --> <span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>
Publishes as this
Using HTML in a Rich Text Block
You can write any valid HTML like:
<span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>
And it will be parsed and rendered.
Additionally, you can disable an entire line from being parsed by adding <!-- fs-richtext-ignore --> at the beginning of it:
<!-- fs-richtext-ignore --> <span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>
This {{COMPONENT}} in Designer, Editor, or CMS
Using components in a Rich Text Block
Components are defined with fs-richtext-component="COMPONENT_IDENTIFIER".
Once this is done, you can use them like:
On-page components
Components that are present in the same page can be used as:
{{COMPONENT_IDENTIFIER}}
External-page components
Components that are published on an external page can be used as:
{{COMPONENT_IDENTIFIER="/about"}}
or
{{COMPONENT_IDENTIFIER="https://url.com/about"}}
Example:
Cool Component:
{{cool-component}}
External Footer Component:
{{footer-component="/attributes/directory"}}
Publishes as this
Using components in a Rich Text Block
Components are defined with fs-richtext-component="COMPONENT_IDENTIFIER".
Once this is done, you can use them like:
On-page components
Components that are present in the same page can be used as:
{{COMPONENT_IDENTIFIER}}
External-page components
Components that are published on an external page can be used as:
{{COMPONENT_IDENTIFIER="/RELATIVE_URL"}}
or
{{COMPONENT_IDENTIFIER="https://ABSOLUTE_URL"}}
Example:
Cool Component:
{{cool-component}}
External Footer Component:
{{footer-component="/attributes/directory"}}
Does this influence SEO?
The HTML that the users write in the Rich Text is rendered on the pages as Escaped HTML.
This means, that this:
<span id="test" class="kool-class" style="color: red;" fs-test-element="test">This is a cool custom HTML string.</span>
Is read exactly like that by Google, including the tags and attributes, instead of just:
This is a cool custom HTML string.
Which is how usually Google would read it.
Can this affect SEO? It might, if used a lot (by a lot I mean that a big portion of the articles are written like this), BUT:
Google is smart enough to run Javascript and scan how the sites look like after JS has finished mutating the pages.
This means that, at some point, Google would identify the text as the correct version instead of the Escaped HTML one.
If it's used in small portions (like just a bunch of lines, maybe a few components, etc), it's negligible and does not influence SEO.
Use an IDENTIFIER that clearly identifies what this component is.
For example, using a IDENTIFIER of "subscribe-form". Inside your Rich Text, add the {{subscribe-form}} tag to add the component.
Please use lowercase with a dash like this: special-component
This may be needed in your {{component}} has Webflow Interactions applied to it.
After the component is added to the Rich Text Block, Interactions will be reset to assure the component has working interactions.
To sanitize data is to remove any potentially dangerous parts of it.
If the content in your Rich Text Block comes from a third party source (it's not 100% trusted), it is highly recommended to sanitize it to prevent XSS attacks.
If a Rich Text Block element receives a fs-richtext-sanitize="true" attribute, code containing Javascript like:<svg>/onload=alert(2)//<p>ill be stripped of the javascript like: <svg><g></g></svg>.
Working examples
See this solution working live in this Webflow project.
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
<span style="color: red;">This is a cool custom HTML string.</span>
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
{{cool-component}}
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
Frequently Asked Questions
Everything you need to know about this attributes solution.
Developer documentation
Next time implement inside Webflow
