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.