Using the WYSIWYG

The page interface you will most commonly use to input your content is the WYSIWYG, an acronym that stands for "What You See Is What You Get". Here is the WYSIWYG panel you'll see:

Screenshot of the WYSIWYG icon bar

Icons and their meaning:

  • Icon to make content bold - highlight text and click the B icon to make it bold
  • Icon to create italicized text - highlight text and click the I icon to make it italic
  • Icon strikethrough - highlight text and click the S icon to insert a strikethrough
  • Icon remove format - Removes formatting from content
  • Indent icon - Indent will move the paragraph inward to the right one tab space
  • Outdent icon - Outdent will move the text outward to the left one tab space until it hits the content margin edge
  • Link icon - Insert links to internal or external content, email addresses, anchor points and more
  • Remove link icon - Remove link; highlight the link text
  • Insert anchor point - Insert and link to anchor points
  • Icon bullet list - Insert bulleted list - (Fixing spaces that show up in your lists)
  • Icon numbered list - Insert numeric list - (Fixing spaces that show up in your lists)
  • Icon left align - Left align text
  • Icon center align text - Center align text
  • Icon right align text - Right align text
  • Icon undo action - Undo action
  • Icon redo action - Redo action
  • Icon source code - Work directly with source code
  • Icon maximize editor - Maximize your WYSIWYG to full-screen editing mode. Uncheck the button to return to default view
  • Style icon menu - Apply pre-created styles to your content, review the available styles in PatternLab
  • Insert media icon - Insert from Media Library into the WYSIWYG region
  • Icon insert file - Insert file documents, such as .doc, .xsl, .pdf, etc.
  • Insert media URL icon - Insert media via a URL, such as a youtube or Vimeo video
  • Icon horizontal line break - Horizontal line break
  • Icon block quote - Pull Quotes - Apply the blockquote style to your highlighted text
  • Icon special characters - Special Characters - WYSIWYG characters, special unicodes for subscripts, superscripts, and how to include proper accents
  • Footnote icon represented by the letter 'a' with a superscript '1' after it denoting the footnote marker. - Footnotes - insert a footnote or citation to create an automatically styled and positioned footnote at the bottom of your page.
  • Icon to access the widget drop-down menu - Widget menu. Use this drop-down menu to access the following features:
    • Layout Columns icon available from the Widgets menu in the WYSIWYG bar. - Layout Columns widget - Allows users to create in-body layout options with from 1-4 columns with a variety of margins, spacing, and styles.
    • Icon media link - Teaser Link Box - creates a clickable area that can include an image, caption, title, and text to link to internal pages or to external sites
    • Icon feature block - Feature Box - Provides a formatted title and text area to spotlight and feature a segment of content in your body text