Buttons and Menus on the Toolbar
Video: Watch how to use the HTML editor ribbon toolbar.
Formatting Tab
Button |
Function |
Description |
|
Cut |
To remove text from the content area and copy it to the clipboard, select Cut. The text is removed, and you can paste it elsewhere in the content area. |
|
Copy |
To copy text to the clipboard, select Copy. You can paste the text elsewhere in the content area. |
|
Paste |
To paste text from the clipboard to the content area, select Paste. |
|
Font family menu | This menu lists common fonts that appear on most web browsers. To change the font applied to text, select a font. |
|
Font size menu | To change the size of text, select a size from this menu. |
|
Insert unordered list |
To insert a bulleted list, select Insert unordered list. The HTML editor adds an <ul> tag at the selected location. The items in the list have bullets. To end a list, select Insert unordered list again. |
|
Insert numbered list |
To insert a numbered list, select Insert numbered list. The HTML editor adds an <ol> tag at the selected location. The items are numbered sequentially, starting with “1.” To end a list, select Insert numbered list again. |
|
Indent text |
To increase an indent, select Indent text. The HTML editor adds a <blockquote> tag around the paragraph. If you increase the indent for a list item, the number or bullet changes to indicate a secondary relationship to the list. |
|
Outdent text |
To decrease an indent, select Outdent text. The HTML editor removes the <blockquote> tag around the paragraph. If you decrease the indent of a list item, the text becomes plain text. If you decrease the indent of a secondary list item, the number or bullet becomes part of the parent list. |
|
Help |
To access a description of the HTML editor features, select Help. The help file appears. |
|
Bold |
To make text bold, select Bold. The HTML editor adds a <strong> tag around the text. |
|
Italic |
To italicize text, select Italic. The HTML editor adds an <em> tag around the text. |
|
Underline |
To underline text, select Underline. The HTML editor adds a <u> tag around the text. |
|
Strikethrough text |
To strike a line through text, select Strikethrough text. The HTML editor adds a <strike> tag around the text. |
|
Text color |
To change the color of text, select Text color and select a color from the palette. The HTML editor adds a <span> tag with the color around the text. |
|
Highlight |
To highlight text, select Highlight and select a color for the highlight from the palette. The HTML editor adds a <span> tag with the background color around the text. |
|
Align left |
To align text to the left, select Align left. The HTML editor adds an attribute of align=left to the division. |
|
Align center |
To align text to the center, select Align center. The HTML editor adds an attribute of align=center to the division. |
|
Align right |
To align text to the right, select Align right. The HTML editor adds an attribute of align=right to the division. |
|
Align full |
To fully justify text, select Align full. The HTML editor adds an attribute of align=justify to the division. |
|
Superscript |
To display text above the rest of the text around it and make it slightly smaller, select Superscript. |
|
Subscript |
To display text below the rest of the text around it and make it slightly smaller, select Subscript. |
|
Spell check |
To check the spelling, select Spell check. When you turn the spell checker on, it checks the spelling of all existing content in the HTML editor and will check new content as you create it. When the spell checker finds an error, a red squiggly line appears below the word. Right-click the underlined word to select the correct spelling. You can also spell check in different languages. Use the drop-down to the select the language. |
|
Find and replace |
To find and replace text, select Find. The Find/Replace screen appears. In the Find what field, enter the text to search for. In the Replace with field, enter replacement text. To search for the text, select Find next. To replace the text, select Replace. To replace all instances, select Replace all. |
![]() |
Format menu | To apply a paragraph or header tag to text, select a format from this menu. For example, select “Standard” for body text. |
|
Remove formatting |
To remove formatting from text, select Remove formatting. The HTML editor removes any special format attributes, and the text appears as plain text. |
|
Undo |
To undo the last action in the content area, select Undo. The action is reversed. You can undo multiple actions. |
|
Redo |
To redo an undone action in the content area, select Redo. The action is reinstated. You can redo multiple actions. |
Insert Tab
Button |
Function |
Description |
|
Insert/edit table |
To create a table, select Table.The Insert/Edit Table Screen appears. For more information about the options on this screen, see Insert/Edit Table Screen. |
|
Insert image |
To insert an image, select Image. On the Select Image from Image library screen, you can select the image. |
|
Insert link |
To link text to a web address or web page, select Link. If the text is in a format that the program recognizes as a web address or page, such as www.abc123.org, the link formats automatically. Otherwise, the page link screen appears. |
|
Remove link |
To remove a hyperlink from text, select Remove link. The text no longer acts as a hyperlink. |
|
Insert/edit anchor |
To link to a specific location on a page, place your cursor at the link’s endpoint (for example, a heading) and select Anchor. The Insert/edit anchor screen appears so you can enter a name for the anchor’s location. The HTML editor adds <a name="anchor name"></a> before the defined location. In the normal view, the HTML editor displays an anchor symbol at the defined location. To link to the anchored location, in the HTML source view, append “#anchorname” to the end of the link. |
|
Insert special characters |
To insert a special character, select Special chars. The Select custom character screen appears. In the grid, select a character. The custom character appears at the selected location. |
|
Insert horizontal ruler |
To insert a horizontal line, select Horizontal ruler in the toolbar. The Insert horizontal rule screen appears. Enter the width and height for the line and select whether to include a shadow. |
![]() |
CSS class menu | To change the Cascading Style Sheet (CSS) format, select a CSS class from this menu. This menu displays only in the layout editor. |
|
Insert merge fields |
To add merge fields with personalized information to the HTML content, select Merge fields. For more information, see Merge Fields. This button does not appear in the layout editor. |
|
Insert conditional content |
To add conditional content to an email message to customize the message for different types of recipients, select Conditional content. On the Conditional Content screen, you can create the first conditional content block. You can then define the content and select the group of recipients who view it. This button appears only on the add/edit screens for email templates, messages, newsletters, and eCampaigns. If you send an email message from Blackbaud Direct Marketing, this option does not appear. |
|
Insert content placeholder |
On the add or edit layout screen, you can select Content placeholder to add panes for parts to the layout. A yellow icon appears as a placeholder for a pane. When you create templates and web pages, a pane contains multiple parts. You select the parts to appear in the pane. |
|
Undo |
To undo the last action in the content area, select Undo. The action is reversed. You can undo multiple actions. |
|
Redo |
To redo an undone action in the content area, select Redo. The action is reinstated. You can redo multiple actions. |
View Tab
Button |
Function |
Description |
|
Full screen |
To work in full screen mode, select Full screen. To turn off full screen mode and view the screen at its normal size, select Full screen again. |
|
Preview |
To view the content as it will appear on the web page, select Preview. The Preview screen appears. To return to the normal view, close the window. |
|
Edit HTML code |
To view or edit the HTML source code, select HTML Code. The HTML Source Editor screen appears. To return to the normal view, close the window. |
|
Conditional content preview |
To verify that conditional content appears as expected for each group of recipients, select Conditional content preview. The View Message screen appears. This button appears only on the add/edit screens for templates, messages, and newsletters. If you send an email message from Blackbaud Direct Marketing, this option does not appear. |
|
Style sheet options |
To render content on a page, the program uses the style sheet associated with the page’s layout. To view your content with style sheets applied and edit the content for a specific style sheet, select Style sheet options.This button appears only on formatted text and images parts. On the Style Sheet Options screen, you can select the style sheet to view and override the background and foreground colors of the HTML editor to improve readability. For more information about how to view content with style sheets applied, see Style Sheet Options. |
|
Undo |
To undo the last action in the content area, select Undo. The action is reversed. You can undo multiple actions. |
|
Redo |
To redo an undone action in the content area, select Redo. The action is reinstated. You can redo multiple actions. |
Image Tab
Button |
Function |
Description |
|
Insert/edit alternative text |
To add or edit the text that appears in place of the image if it cannot display, select it and select Alt text . |
|
Grow |
To make an image larger, select it and select Grow. |
|
Shrink |
To make an image smaller, select it and select Shrink. |
|
Edit image |
To edit an image, select it and select Edit image. The Insert/Edit Image screen appears. You can make changes to the image properties and settings on the General, Appearance, and Advanced tabs. |
|
Remove image |
To remove an image, select it and select Remove image. |
|
Undo |
To undo the last action in the content area, select Undo. The action is reversed. You can undo multiple actions. |
|
Redo |
To redo an undone action in the content area, select Redo. The action is reinstated. You can redo multiple actions. |
Table Tab
Button |
Function |
Description |
|
Delete table |
To delete a table, select it and select Delete table. |
|
Row properties |
To edit the properties of a row, select it and select Row properties. The row properties screen appears. For more information about row properties, see HTML Editor Table and Line Properties. |
|
Cell properties |
To edit the properties of a cell, select it and select Cell properties. The cell properties screen appears. For more information about cell properties, see HTML Editor Table and Line Properties. |
|
Insert column to the left |
To insert a column to the left of a column in a table, select Insert column to the left. A new column appears. |
|
Insert column to the right |
To insert a column to the right of a column in a table, select Insert column to the right. A new column appears. |
|
Delete column |
To remove a column from a table, select Delete column. The column is deleted. |
|
Insert row above |
To insert a row above a row in a table, select Insert row above. A new row appears. |
|
Insert row below |
To insert a row below a row in a table, select Insert row below. A new row appears. |
|
Delete row |
To remove a row from a table, select Delete row. The row is deleted. |
|
Merge table cells |
To merge a cell with the cell to its right, select Merge table cells. Any content in the cell on the right is removed, and the selected cell now spans both columns. |
|
Split merged table cells |
To split a cell that spans multiple rows into two cells, select Split merged table cells. The selected cell no longer spans the row on the bottom. |
|
Show table borders |
To hide or reveal the borders of your tables, select Show table borders. |
|
Undo |
To undo the last action in the content area, select Undo. The action is reversed. You can undo multiple actions. |
|
Redo |
To redo an undone action in the content area, select Redo. The action is reinstated. You can redo multiple actions. |