WYSIWYG Basics

WYSIWYG toolbar

The WYSIWYG editor has many tools to format and style your content (see list below). Most of the tools are similar to using Microsoft Word, so in this tutorial we will cover the more uncommon tools:

Tools of the WYSIWYG Editor:

  • Bold, Italic
  • Superscript, Subscript
  • Align text left, center, right
  • Insert/remove bulleted or numbered list
  • Decrease or increase indent
  • Block Quote
  • Undo, Redo, Cut, Copy, Paste options
  • Hyperlink or unlink text. Insert jump anchor
  • Format image, insert horizontal line, insert table
  • Remove formatting
  • Format paragraph and heading styles
  • Spellcheck
  • Insert button, caption, icon, give button, expandable content, map, filled or outlined box, video, SoundCloud
  • Work with the HTML

Demo: WYSIWYG Editor

1

Add a Block Quote

Block Quotes add emphasis and interest to text. They are a great way to call out a tip or a quote in a profile. 

  1. Highlight the text that you want to block quote.
  2. Click the Block Quote icon (quote marks icon) in the WYSIWYG editor.

Blockquote button in wysiwyg

Example of a blockquote

2

Bold, Italic, Bulleted lists

The WYSIWYG editor works much like the functionality in Microsoft Word.

  • Bold: To bold part of your content, just highlight the text and click on the B icon.
  • Italic: to Italicize text, just highlight the text and click on the I icon.
  • Bulleted lists: To create a bulleted list, just highlight the text and click on either the bulleted list or the numbered bullet list.
  • General bullet list
  • General bullet list
  1. Numbered bullet list
  2. Numbered bullet list

Bold, italics and bullet lists

3

Paste in Your Content

If you are copying and pasting in content from a Word document, it is important to use the Paste tool. Paste in your text in with the Paste as plain text icon or Paste from Word icon. 

The slanted Tx icon helps to remove unwanted formatting that may have copied over when you pasted in your content. Just highlight your text and click on the Tx icon to remove the formatting.

Use the paste icons to add content from word

4

Add a Table

  1. Click the Table icon to set initial table properties.
  2. Set the width to 100% initially. This makes the table stretch across the entire content area; the table can be difficult to work with otherwise.
  3. Place cursor in table and right click to bring up formatting options, such as adding and removing rows and columns.
  4. To make a header row, choose Cell > Cell Properties then change the cell type from Data to Header.

5

Add Buttons, Videos, Maps, Expandable Content and More

The last set of icons in the WYSWIG editor are called Shortcodes. These include buttons, icons, maps, and videos. To learn how to work with these, see the  Shortcodes tutorials section.

Shortcode buttons

Related Articles