Use the Rich Text Widget to add text to your campaign. You can use the text editor in the widget to style your text, or you can get even more granular with your style by using the Style Panel.
To add one of these widgets to your campaign, click the Rich Text Widget icon in the Add Widgets Panel, or click and drag the icon into your preview area.
The widget settings popup is where you'll make any needed changes to your Rich Text Widget. To change the widget name, click on the pencil icon in the top-left (next to the name) then type your new name.
You will also see the CSS ID (starting with a #) of your new widget listed in the top-right corner of the popup.
You'll want to move through each item in the menu on the left side to make sure you've completely customized the Rich Text Widget in the way you'd like. You can navigate through these sections using the Back and Next buttons at the bottom.
When you're finished making changes to your widget, click the blue Save and Exit button.
The Setup option on the left contains your text editor. If you've ever used a document program like Word or Google Docs, this is going to be pretty familiar. You type (or paste) your text into the box, then use the buttons at the top for formatting. Here's a quick rundown of what each button is used for:
Undo - Undoes the last character you typed or styling you applied.
Redo - Redoes the last undo you performed.
Cut - Takes the currently highlighted text and cuts it out of the text box (any cut text is temporarily copied to your clipboard).
Copy - Takes the currently highlighted text and copies it to your clipboard.
Paste - Pastes whatever is currently on your clipboard to your text box (at the position of the cursor).
Paste as text - Pastes any text on your clipboard to your text box without any additional formatting (at the position of the cursor).
Insert/edit image - Allows you to add an image into the text box.
Insert/edit link - Use this to add a hyperlink to the currently highlighted text.
Remove link - Removes any hyperlinks from the currently highlighted text.
Subscript - Formats the highlighted text to be smaller and sit slightly below the baseline.
Superscript - Formats the highlighted text to be smaller and sit above the line of text.
Horizontal line - Adds a thin horizontal line across the entirety of your text box.
Nonbreaking space - Adds a space character that prevents an automatic line break at its position.
Special character - Pulls up a character map so you can add a special character without needing to know the Alt/Option keyboard combination.
Left to right - Sets your text box so that when text is typed in, it reads from left to right.
Right to left - Sets your text box so that when text is typed in, it reads from right to left.
Source code - Opens a window that displays the source code of what appears in your text box; you can edit this code to add custom HTML for formatting if you'd like.
Fullscreen - Expands the text editor to fill your entire screen.
Text size select - This dropdown allows you to add size formatting to your highlighted text; you can choose from Paragraph and Header 1-4.
Bullet list - This will format the selected text as a bulleted list; using the dropdown gives you the options to use default bullets, circles, discs or squares.
Numbered list - This will format the selected text as a numbered/lettered list; using the dropdown gives you the options to use the default numbers (English); lowercase Alpha, Greek, and Roman letters; and uppercase Alpha and Roman letters.
Blockquote - Using this formats the highlighted text as a blockquote, indenting it from the rest of your text.
Bold - This will format your highlighted text in bold, to provide emphasis.
Italic - This will format your highlighted text as italic, to provide emphasis.
Clear formatting - This will clear any formatting/styling from your selected text.
Text Color* - Opens a window that allows you to select the color of your selected text.
Highlight Color* - Opens a window that allows you to select the color that appears behind your selected text as a highlight (not the color of the widget background - just the color that appears behind the text itself).
Underline* - Places a line under your currently selected text, to provide emphasis.
Decrease indent* - If you're currently indenting your text, clicking this once will remove one unit of indentation.
Increase indent* - This will add one unit of indentation to your currently selected text.
Remove Inline Styles - If you are using formatting that will override text styling settings set up in the Style Panel, this text will appear in red. Click this button to remove all inline styles from your text.
* - Styling methods that will cause the Remove Inline Styles button to activate.
To view and use text snippets you've saved or from our public ShortStack collection, check out the Library section. By default, the library displays the snippets from the public library.
Click Private to see a list of your personal snippets, and click a snippet title to see a preview of the snippet.
To add that snippet of text to your widget, click the Append button.
To delete one of the snippets from your library; click the snippet name to select it, then click the trashcan icon to the right of the Append button.
If at any time you'd like to add a new snippet to your library, go back to the Setup section. From there:
- Type in the text you'd like to turn into a snippet.
- Add a name for your snippet in the Give it a name... field.
- Click Save to Library.
If you'd like to limit visibility of the widget to a specific date and time, make the widget a popup, only show the widget in your Builder, or limit in which country/countries the widget can be seen; you'd do so in the Visibility section. More information about these settings can be found in the Widget Visibility help doc.
In this section, you can add a CSS Class that will be associated with this Rich Text Widget - that way you can target it with custom CSS code. Rules and naming conventions are provided so that you don't use a class that won't work. Simply add your CSS class(es) to the Extra CSS Classes field.
Copying and pasting text from an email, text document, or a Google Doc will override rich text settings from the Style Panel. To maintain styling set in the Style Panel, clear the formatting from your text. There are three ways to do this: using keystrokes while pasting, using the Clear formatting button within the text editor, or using the Remove Inline Styles button.
- To use keystrokes:
[Mac] Use Shift + Option + Command + V to paste without formatting.
[Windows] Use Control + Shift + V to paste without formatting.
- To use the Clear formatting button:
Highlight the text you've pasted in the text editor, and select the Clear formatting button.
- Use the Remove Inline Styles button:
When inline styles are detected in your text, the Remove Inline Styles button will have red text and be clickable.
Note: This will remove all inline styles from your text; so make sure you want to remove all the formatting if you use this option. If you only want to remove styling from a specific chunk of text, the Clear formatting button would be better to use instead.