How can we help?

Sculpt Block Rich Text Input Field

Overview

The Sculpt block rich text input field provides a customizable text editing interface inside of Sculpt blocks, making it easy for anyone to create richly formatted content without having to understand HTML or CSS. The rich text input field supports common text formatting features including text styling, font family selection, format stripping, undo/redo typing, and link insertion.

You can create Sculpt blocks with multiple rich text input fields restricted to only the brand-approved text editing features and make them available to your team in the block library for use in Sculpt messages.

Create a rich text field

The rich text input field type is a free-form text area with a customizable text editing interface. You can edit existing blocks and replace plain text fields with the rich text editor, granting your team easy access to text formatting options for that content.

1. Navigate to Content > Sculpt Blocks and choose an existing block to edit or create a new one.

2. In the Sculpt Editor, click the Form Builder button.

3. Create a new field and select Rich Text under the Field Type.

4. The Rich Text Editor will appear.

Tip: When adding fonts, it's best practice to provide a stack of fall-back fonts in the event the email recipient’s system does not have access to your preferred font. To create a font stack, separate font family names with commas and hit enter when done.

5. As you add or edit, a preview of your rich text content will generate in the left pane.

6. If instead of using an existing Sculpt block, you created a new block with rich text fields, it's necessary to add the resulting variable key names to your block HTML in order for the fields to populate correctly during message creation. For guidance, please see Adding Variable Key Names to HTML.

Note: Rich text fields do not support direct image insertion. However, you can use the Image Selector field in any Sculpt block to add this functionality. Check out our banner block for an example.

Keyboard shortcuts

The following keyboard shortcuts are supported for use with the rich text input field:

     
italicize Ctrl + i Cmd + i
bold  Ctrl + b  Cmd + b
underline  Ctrl + u Cmd + u
hyperlink Ctrl + k Cmd + k
strikethrough  Ctrl + s Cmd + s
copy Ctrl + c Cmd + c
cut Ctrl + x Cmd + x
paste Ctrl + v Cmd + v
undo Ctrl + z Cmd + z
select all Ctrl + a Cmd + a
jump to the beginning of current line Ctrl  +  left arrow Cmd + left arrow
jump to the end of current line Ctrl + right arrow  Cmd+ right arrow

Rich text fields allow you to configure link style options along with adding link functions that, when enabled, will be rendered as UI elements to configure appropriate values.

1. Select the Add/edit link checkbox in the Rich Text Editor to configure the options available in the Link Properties menu.

  • Link tracking: Enable or disable link tracking uniquely for each link within the message.
  • Link tags: Enables link tag input where you can enter multiple tags separated by commas.
  • Link key/name: Allows you to assign a presentable name to any of the inserted links.
  • Assign to list on click: Exposes available list names to choose from if you want a contact to be added to a specific list when they click the link.
  • Remove from list on click: Exposes available list names to choose from if you want the contact to be removed from a specific list when they click the link.
  • Set attribute(s) on click: Exposes contact attributes in a dropdown menu and allows you to input an attribute value to be set for the contact they click the link.
    Note: Link tracking must be enabled for this feature to apply.
  • Class: Allows your team to enter specific a CSS class name that will style the link according to existing brand styling rules.

2. To configure link styling options, click the Link icon. The Link Properties menu will appear.

3. Configure the link properties you want to be available in the Sculpt block during message creation.

  • Font family: Specify font family names that can be applied to links.
  • Font size: Enter allowable font sizes to choose from when specifying link text size.
  • Font color: Allows you to change the default link color to any color value approved by the brand.
  • Text decoration: Allows you to apply link decoration effects from a dropdown menu such as underline or dashed.
  • Font weight: Allows you to apply link decoration effects from a dropdown menu such as bold, bolder, and lighter.

Comments

0 comments

Please sign in to leave a comment.