CMS: Adding and Setting Up Rich Content Fields
16 min read
Create large blocks of content associated with your collection items that you can format from within the CMS (Content Management System). You can mix formatted text with media, files, HTML code, social media posts, Wix business solutions and more features. When you add and connect the rich content element on your site, it maintains the same formatting your set from within the collection fields themselves.
Adding the rich content field type in your collection
Select the "Rich Content" field type when you create a new field in your collection. You can also edit existing fields to make them rich content fields. After creating a rich content field, add and format your content in the field for each item in your collection.
To add a rich content field:
- Go to CMS in your site's dashboard. Alternatively, you can click CMS in your editor, then click Your Collections.
- Click the relevant collection.
- Click Manage Fields.
- Click + Add Field.
- Select Rich content and click Choose Field Type.
- Enter a name in the Field name field.
- (Velo only) Update the Field ID, which is used in the site's code. You cannot update this ID later.
- (Optional) Enter Help text if you want a tooltip to appear in your collection next to the field title.
- Click Save.
- Click the rich content field for the relevant item in your collection.
- Enter the text you want to use for the item and choose from the available formatting options at the top. You can also add images, videos, attachments and more features from the icons at the bottom.
Adding the rich content element to your page
Wix Editor
Studio Editor
- Go to your editor.
- Go to the page or section in which you want to add the rich content element.
- Click CMS on the left side of the editor.
- Click Add Content Elements.
- Click Rich content.
- Click the Connect to CMS icon on the rich content element.
- Click the Choose a dataset drop-down and select an existing dataset that connects to your collection. Alternatively, click Add a Dataset, then choose the collection you want to connect, give the dataset a name and click Create.
- Click the Connect content to drop-down and select the rich content field you created.
- Click Settings on the Rich Content Viewer element.
- Choose how you want to show long content:
- Show everything: All the content from the connected rich content fields display in the viewer.
- Trim: Only show part of long content in the viewer:
- Choose how to trim the content that appears in the viewer:
- Paragraphs: Choose the number of paragraphs shown. Enable the Show plugin content if you want to show content such as images, videos and tables in the viewer.
- Words: Choose the number of words shown.
- Click the Show More button toggle to choose how the content can be expanded:
- Enabled: If the content is trimmed, visitors can click a "Show More" link to expand the displayed content. Enter the text to use in the Show More/Less text fields.
- Disabled: The text is trimmed and ends with "..." if all the content doesn't fit in the viewer. Visitors cannot click to expand the displayed content.
- Choose how to trim the content that appears in the viewer:
- Click the Layout icon on the Rich Content Viewer element and set the top, bottom and side padding.
- Click the Design icon to customize the background and "Show More" button colors, the border, the corners, and override the text formatting.
Tip:
On dynamic item pages, click the Preview drop-down and select other items to see how the rich content field will look on each version of the page.
Formatting options and features in the rich content editor
When editing your rich content field from your collection, choose from the options at the top to format your text. You can click icons at the bottom to add features like tables, HTML code, and social media posts.
Click below to learn more about the available options in the rich content editor.
Text formatting
Image
Video
Gallery
Divider
Table
Add a file
Insert HTML code
Social media
Wix business solutions
Emoji
GIF
Add a code snippet
Expandable list
Button
Did this help?
|