Use a Rich Text Element (RTE) to create long-form content.
A rich text element (RTE) is the perfect element for creating long-form content for blog posts, about pages, biographies — you name it. Instead of adding individual heading, paragraph, list, or image elements, you can double click into a rich text element to create these different content elements directly.
RTE also makes it easy for collaborators (e.g. team members or clients) to edit rich content within the Editor.
First, you can add a rich text element by dragging it from the Add elements panel (A) onto your page. To edit the content, double-click into the RTE or select the element and press enter.
For any text elements, you can add additional formatting:
You can start typing inside the RTE and then add formatting to the text to create headings, block quotes, bold or italic text, and links.
Just like any other text editor, pressing enter will create a new paragraph on a new line where you can continue to type. To add multiple paragraphs, simply press enter at the end of a paragraph.
To create a heading, you just select any text inside of a paragraph and choose a heading (H1-H6) option.
Same goes for creating block quotes.
Any part of any text element (e.g. headings, paragraphs, captions, etc) can be formatted with bold, italics and links. Just select part of the text and apply one or more formatting options.
When a link is added to some text, you have the option to choose a URL, page, page section, email, or phone number.
These keyboard shortcuts let you add a few special characters or design a bit faster:
When your text cursor is on a new line, a plus button appears. Clicking this button reveals an insert menu with options to add images, videos, other rich media, custom code, and bulleted or numbered lists.
All media elements in the RTE are responsive and will respect the aspect ratio of the content. YouTube, Vimeo, and Dailymotion video support has been enhanced to allow custom start times. Here's a list of some of the supported rich media types:
Each media element can be sized using the presets or can be sized to a specific pixel or percentage value in the settings. An optional caption can also be added below images.
To add alt attributes to these images, select the image you want to add alt text to, click the wrench icon in the toolbar, then type in your alt tag.
The insert menu now includes a button to add custom code.
Use it to plug code right into your rich text content to maximize long-form content with third-party embeds, HTML, CSS or even JavaScript.
From embeddable Tweets to Google charts, you can create more interactive experiences with third-party content.
You can use the embed element with embeds from:
Use HTML to better format and display your content. For the first time, you’ll have the ability to create tables, divider lines or even properly format (and highlight!) snippets of code. You can do this in 3 steps:
Style specific parts of your rich text content with targeted CSS. Reference any styles that are already featured across your site.
Here's how:
Add custom JavaScript snippets, like Google Adsense ads, an AddThis widget, or a customized Google Map.
Here's how:
The insert menu includes options to add lists.
The quickest way to add a bullet list is by simply typing in a dash (-) followed by a space.
The quickest way to add a numbered list is by typing an integer followed by a period (eg. 1. , 3. or 10.) followed by a space. This is useful especially when you want to continue a numbered list after you've added some media in between the list items. Just type the next number (eg. 4.) followed by a period and a space.
You can paste in rich content from other sites or from a word processor like Google Docs. All formatting and links will be pasted within the rich text element. Images will also be imported on paste when pasting in a rich text element in the Designer or in a rich text field of a CMS item in the Collection manager detail view (both in the Designer and the Editor).
At the moment, images won't be imported when rich content is pasted in a rich text in the Editor on the live site.
Pasting rich content from other sources may bring along unwanted formatting like background color which may look weird on your site. So, be mindful when pasting rich text from other sources. To ensure that no unwanted formatting is pasted, use the keyboard shortcut to paste unformatted text (CMS+SHIFT+V on mac — CTRL+SHIFT+V on windows). This will strip the text of all formatting including bold and italics. Be careful though, it also removes links.
Styling the elements inside of the RTE works differently—that’s because text and media elements inside an RTE can be created or deleted by collaborators at any time.
RTE elements inherit their styling from their respective HTML tags. The simplest way of styling elements in an RTE is by selecting the nested element and styling its tag.
If the RTE is activated — i.e. you're typing or adding content inside, you won't be able to select the individual elements inside. To deactivate the RTE, press ESC. Now, you'll be able to select the elements nested within the RTE to style them. Here’s how to style an element nested in an RTE:
For example, to style the caption element. Select a caption, then select the All Figure Captions tag and style it.
This way you're editing the default styles for that element across the entire project. If you don’t want to style all elements in your projects, check out advanced styling below.
Deleting any element nested in an RTE will delete the whole rich text element. To delete any of the RTE contents, activate the RTE by clicking inside the element, then select and delete the content.
Adding a class to the Rich Text element will allow you to create unique text styles for just that RTE instance. Styling these nested tags will make sure that only elements in an RTE with the same class applied will be affected. Follow these steps:
Rich text elements can be connected to rich text fields in a Collection. When a RTE is connected, it’s no longer possible to select or edit text elements, except for in the CMS. That's because the content is pulled from the CMS itself.
To style a connected RTE, it’s recommended to disconnect (unbind) it from the field, style the nested elements, and then re-connect (bind) it. If you just want to apply a class on a connected RTE, you can do that without disconnecting it. Learn more about dynamic rich texts.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback