How to WYSIWYG What You See Is What You Get What is a WYSIWYG? WYSIWYG is a tool that allows you to see what your content will look like on the page as you are creating it. It is most like a such as . The WYSIWYG editor in Cascade is optimized for the Cascade CMS and building out our Agnes Scott web pages. The content WYSIWYG editor allows you to create content for your site using many useful features — special characters, images, tables, links and lists

o Note: A few select settings available in the built-in editor should not be used on our websites for technical, design and usability reasons. This includes, but is not limited to: . Do NOT change the Font, Font-Size, or Font-Color Quick Guide to the WYSIWYG editor

WYSIWYG tool box

As you see the WYSIWYG looks and works very similar to the editing toolbar in Word. There are a few things to note that I will describe below.

1. Copy and Paste in the WYSIWYG using paste as (ctrl + shift + v) 2. For consistent font, sizing, spacing and accessibility be sure to use the formatting tools for headers, list, spacing and content blocks. a. Using the show blocks tool will display dashed-lines around content elements to help you see where various formats are being applied i. Located in the “view” dropdown menu Paste in plain text, under the edit tab

OR using keyboard shortcut ctrl+shift+v

Formats available for use will appear in the “Format” dropdown menu.

Format element

(Also referred to as a “Block” or “Div”)

Dashed-line around element

Types of Format Elements

Headings: Blocks: Bullet: • H1 / Heading 1 • P / Paragraph • Default • H2 / Heading 2 • Blockquote • Circle • H3 / Heading 3 • Div / Div • Disc • H4 / Heading 4 • Pre • Square • H5 / Heading 5 • H6 / Heading 6 Custom: List: • Align-left • Default Inline: • Align-right • Decimal • < > / code (inline can be • center • Lower Alpha used within any Format • Lower Greek Element and will show that • Lower Roman format element) • Upper Alpha • Upper Roman

Formats rendered on a page View blocks within the WYSIWYG

Headings will have an ‘H’ followed by a single number (1-6). Each number corresponds to the type of heading and how that block will be displayed

Inline text will keep the “view block” tag and keep the elements style however any text you select and add and inline style to will display exactly Inline text can have any tag

how it is typed in the WYSIWYG. Inline is used when you want insert code or math formulas that may interfere with the .

These blocks are used for the large chunk of content.

‘P’ will have more space between view blocks compared to a ‘div’ which has no spacing.

Blockquotes is indented from both sides.

Pre – removes all formatting and will spill over the page if there is no break in the text.

Formats rendered on a page View blocks within the WYSIWYG

The shape of the bullet will be different for each type, however the view block tag will be ‘ul’ for each. Formats rendered on a page View blocks within the WYSIWYG

The shape of the listing character will be different for each type, however the view block tag will be ‘ol’ for each. Empty Blocks (also referred to as Format elements or div)

Formats rendered on a page View blocks within the WYSIWYG

Empty paragraph 2 format element

Two Empty divs

NOTES: - Paragraphs leave some padding (space between elements) - Div leaves no padding - Pressing shift + enter will add a line break within the same format element/block/div - To delete an empty block, simply click in the box and click backspace or delete