Main content
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 start writing.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop the element 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!
To style the headings, paragraphs, blockquotes, figures, images, and captions inside your rich text element, first:
- Give the rich text element a class
- Select the element within the rich text that you want to style — a blockquote, for example
- Click the + sign below the selector field to “Nest selector inside of” your rich text element’s class
How to customize formatting for each rich text element
Rich text - Web design tutorial - YouTube
Rich text - Web design tutorial Webflow
And this would be an H5
- 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.
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 start writing.
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.
Cards section
Use these cards when you want to display content with an image, such as a blog post or product. They’re built with CSS grid to enable the 3-column layout. When you select the “Cards Grid Container,” you’ll see a red icon on the top right. Click the icon to edit the number of columns, the column gap, and more!
The card images have fit set to cover, so they fill their masking container without stretching. Try making the “Cards Image Mask” a circle using border-radius or adjusting the size ratio using top padding. Don’t forget to set an alt description for each image, which will help with accessibility.
Card one
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Card two
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Card three
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.