Getting Started

Rich Text Element allows you to make changes to your blog posts or custom collection items from your website builder. This article will cover how you can add a Rich Text Element to your website, use the element's features, and various use cases.

Adding Rich Text Element

To add a Rich Text Element to your web page, follow the steps listed below:

To add a Rich Text Element to your web page, follow the steps listed below:

Login to your Dashboard
Click on Design and Pages
Click on ‘Add a section’ on any page of your site
Go to Custom Section
Select a CMS Row with Column
You can also add the Rich Text Element in regular row and column but only in a Post or Collection Item template
Connect with a database
Make sure your Post or Custom Collection items have data in them to show
Choose Data Source as either: Posts or Custom Collection
Click on Add Element on the empty section
Add the Rich Text Element Element under the CMS Elements section.

To follow the steps visually, follow the steps below:

Login to your Dashboard



Click on Design and Pages



Click on 'Add a section' on any page of your site



Go to Custom Section



Select a CMS Row with Column



Select a CMS Row with Column



Click on the Data Source Dropdown under the Configurations option



Choose Data Source as either: Posts or Custom Collection



Click on Add Element on the empty section



If there are no data on your Posts or Collections, the section will remain empty and you may see a message saying “No Data Available”. Tip: Make sure your Posts or Collection Items are published.





Add the Rich Text Element Element under the CMS Elements section.





You can also add the Rich Text Element in regular row and column but only in a Post or Collection Item template

Rich Text Element Modal

Now we will look at what each feature is used for inside the Rich Text Element modal. Refer to the image below to see what the modal looks like:

Content

This option is used to choose the type of content you would like to add to your Rich Text Element.

Heading

This feature allows you to change all the headings in your content from H1 to H6. You can set alignments, adjust the size, add text-shadow, and more. Refer to the GIF below to see what options this feature has.

Paragraph

This feature is used to adjust the Paragraphs in your content. You can set alignments, adjust the size, add text-shadow, and more. Refer to the GIF below to see what options this feature has.

List

This feature is used to adjust the lists in your content. Refer to the GIF below to see how this feature works.

Marker

Marker is used to make adjustments to the texts that you have marked in your content. Refer to the GIF below to see how this feature works.

Code

If you have code written in your content and it is marked as code, you will be able to make adjustments to it from here. Refer to the GIF below to see how it works:

Underline

If you have any texts that marked as ‘Underlined’, you will be able to make adjustments to them through this feature. Refer to the GIF below to see how it works.

Image

If you have images in your content you will be able to make changes or adjustments to them by using this feature inside the Rich Text Element modal. Refer to the GIF below to see how it works:

Blockquote

With this option you will be able to make adjustments to any blockquote in your content. Refer to the GIF below to see how it works:

Table

If you have a table in your content, you can make adjustments to it using this option. Refer to the GIF below to see how this works:

Embed Code

If you have used the Raw HTML <> feature in your content, you will be able to make adjustments to your embed using this option. Refer to the GIF below to see how this works:

Rich Text Element in Custom Collection Templates

If you want to make changes to the contents in your Custom Collection items, you will need to add a Rich Text Element manually in order to do that.

Refer to the GIF below to see how it works:

Updated on: 24/07/2023