For Guide steps, the WYSIWYG Toolbar allows you to create rich, fully formatted HTML text without having to do any coding (although you can view and edit the source HTML code at any time if you choose).
To use the Step Visual Editor:
- Click the Edit icon (pencil) next to the EDIT CONTENT section.
The Visual Step Designer opens.
- Add and edit content using the tools in the WYSIWYG Toolbar (see below).The Step Library automatically collapses you begin editing a Step, in order to provide more screen space while editing a Guided Path or Support Article.
- Click Save to save your changes.
The WYSIWYG Toolbar resembles and functions very similarly to a standard word processor in many ways.
From left to right, the available functions are:
- Font family: Choose from a variety of fonts.
- Font Sizes: You may select one of several font sizes.
- Formats: Selecting text and then using the Formats pull-down menu allows you to select the Strikethrough, Superscript, and Subscript formatting options.
- Bold: Toggles text bolding on and off, and/or makes the selected text bold.
- Italics: Toggles text italicizing on and off, and/or italicizes the selecting text.
- Underline: Toggles text underlining on and off, and/or underlines the selected text.
- Text Color: Clicking this button opens a menu with 40 color options. Click a color to select that color and apply it to the selected text.
- Background color: Clicking this button opens a menu with 40 color options. Select some text and then click a color to select that color and apply it as a background behind the selected text.
- Bulleted List: Clicking this button creates a bulleted list. When you create a bulleted list, pressing [ENTER] creates a new line of bulleted text. Pressing [ENTER] again without entering any text on the new line either decreases the bullet level by one (if you have a multi-level list) or removes the bullets. The pull-down menu allows you to select a variety of bullet formats (circle, disc, etc.).
- Numbered List: Clicking this button creates a numbered list. When you create a numbered list, pressing [ENTER] creates a new line of numbered text. Pressing [ENTER] again without entering any text on the new line either decreases the numbering level by one (if you have a multi-level list) or removes the numbering. The pull-down menu allows you to select a variety of number formats (alpha, roman numeral, etc.).
- Decrease Indent: Clicking this button reduces the indentation of the selected text. This option is grayed out when the indent cannot be decreased any further.
- Increase Indent: Clicking this button increases the indentation of the selected text. If you have a numbered or bulleted list, this option will created a nested (multilevel) list.
- Left Align: Aligns text on the left side of the page.
- Center Align: Aligns text in the center of the page.
- Right Align: Aligns text on the right side of the page.
- Add Link: Allows you to insert a hyperlink. See Adding Links.
- Link to Guided Path/Support Article: Allows you to insert a link to a new Guided Path or Support Article. An Agent who clicks this link will launch the specified Path/Article. See Linking to Guided Paths/Support Articles.
- Table Menu: This menu has the following options:
- Insert Table: Click and drag to create a table with the desired number of rows and columns. The number on the bottom indicates the current table size in columns x rows format.
- Table Properties: Opens the Table Properties popup. See Table Properties.
- Delete Table: Deletes the selected table. You may also click the Delete table button (see above image).
- Cell: This submenu contains the following options for formatting one or more table cell(s):
- Cell Properties: When a cell is selected, this option opens the Cell Properties popup, which allows you to specify the width, height, and other properties of the selected cell. See Cell Properties.
- Merge cells: Selecting two or more cells and then selecting this option merges the selected cells into a single cell. You may also click the Merge cells button (see above image).
- Split cell: Selecting a single cell and then selecting this option splits the selected cell into two cell. You may also click the Split cells button (see above image).
- Row: This submenu contains the following options for formatting table rows:
- Insert row before: Inserts a new row above the currently selected row. You may also click the Add row above button (see above image).
- Insert row after: Inserts a new row after the currently selected row. You may also click the Add row below button (see above image).
- Delete row: Deletes the current row. You may also click the Delete row button (see above image).
- Row properties: Opens the Row Properties popup, which allows you to specify the type, alignment, and height of the selected cell. See Row Properties.
- Cut row: Removes the selected row from the table and places it in the Clipboard.
- Copy row: Places a copy of the selected row into the Clipboard.
- Paste row before: Pastes the row in the Clipboard into to the table above the current row.
- Paste row after: Pastes the row in the Clipboard into to the table below the current row.
- Column: This submenu contains the following options for formatting table columns:
- Insert column before: Inserts a new column to the left of the currently selected column. You may also click the Add column left button (see above image).
- Insert column after: Inserts a new column to the right of the currently selected column. You may also click the Add column right button (see above image).
- Delete column: Deletes the currently selected column from the table. You may also click the Delete column button (see above image).
- Insert Media: Allows you to insert, edit, or upload images and video. See Working with Media.
- Paste Plain Text: Pastes plain text from your system Clipboard.
- Find/Replace: Allows you to search for and replace text. See Finding and Replacing Text.
- Undo: Clicking this button undoes the last action or actions.
- Redo: Clicking this button redoes undone actions.
- View HTML: Clicking this button opens the Source Code popup, which allows you to directly edit the HTML for this Step. See Source Code Popup.
- Preview: Clicking this button opens a popup that displays how the completed Step will appear.
- Fullscreen: Clicking this button toggles a full-screen view of the Step on and off.
The Table toolbar appears when a table is selected.
From left to right, the buttons on the Table toolbar are:
- Table Properties: Opens the Table Properties popup. See Table Properties.
- Delete Table: Deletes the entire table.
- Insert Row Before: Inserts a table row above the currently selected row.
- Insert Row After: Inserts a table row below the currently selected row.
- Delete Row: Deletes the selected table row.
- Insert Column Before: Inserts a table column to the left of the currently selected column.
- Insert Column After: Inserts a table column to the right of the currently selected column.
- Delete Column: Deletes the selected table column.
- Merge Cells: Merges the selected table cells into one larger cell.
- Split Cell: Splits the current table cell into two smaller cells.