Content Editor (WYSIWYG)

The Content Editor (also called the WYSIWYG editor, meaning “What you see is what you get”) is where you format content inside components like Columns, Accordions, and Tabs.

an example of a WYSIWYG editor

Even for a basic page (for example, a new Left Navigation page with a default one-column section), you can create clear, skimmable content using only the Content Editor (WYSIWYG)

To avoid layout issues and keep pages running smoothly, remove hidden formatting when pasting content from Word, Google Docs, emails, or other webpages.

Method 1: Paste without formatting in the WYSIWYG editor

  • Windows: Ctrl + Shift + V
  • Mac: Cmd + Shift + V (may appear as “Paste and Match Style”)

Method 2: Paste into a plain-text app first

  • Windows: Notepad
  • Mac: TextEdit set to Plain Text

Then copy from there and paste into the WYSIWYG editor.

Method 3: If you already pasted and it looks messy

  • In the WYSIWYG editor, highlight the affected text and click Format → Clear Formatting.
  • Reapply headings, lists, and links using the toolbar (avoid using repeated Enter for spacing).

Headings help users scan and understand the page quickly. They can also improve search visibility by giving your content clear structure.

To apply a heading

  1. Highlight the text
  2. Click FormatFormatsHeadings
  3. Select the heading level you need

Best practice: Keep headings in order (don’t jump from a main heading straight to a much smaller one). 

Example headings

Heading 2

Heading 3

Heading 4

Bullets are best for lists of items, steps, or links

To apply list

Bullet List

  1. Highlight the text you want to list.
  2. Click the bullet list icon in the editor.

Numbered List

  1. Highlight the text you want to list.
  2. Click the numbered list icon in the editor.

Example bullet List

  • Lorem ipsum dolor sit amet
  • consectetur adipiscing elit
  • Fusce consectetur orci vitae

Example numbered List

  1. Lorem ipsum dolor sit amet
  2. consectetur adipiscing elit
  3. Fusce consectetur orci vitae 

Buttons are for actions, not for every link.

To apply Buttons

  1. Enter Button Text:  Type in the button
  2. Add link: internal or external
  3. Choose a Button Style:
    • For a single button, use the purple-button  style.
    • For a second button, use the white-button  style.

Please note that our brand guidelines require you to use these specific styles when creating a pair of buttons, and you should not include more than two buttons together.

Watch video: How to add buttons

 

Example buttons


Lorem ipsum  Lorem ipsum 

Create a Table

  1. Click Table and select the number of rows and columns you need.
  2. Drag the edges of the table to resize it, and add content to each cell as needed.

Format a Table

  1. Click on any cell within your table.
  2. Go to Format → Formats → Custom to see a list of available table styles, including:
    • Table
    • Bordered Table
    • Table Without Borders
    • Strip Row Table
    • Strip Column Table
    • Hoverable Table
  3. Apply the style that best fits your layout and design needs.

Align Cell Content

  1. Select the cell you want to adjust.
  2. Click Table → Cell Property, where you can set both horizontal and vertical alignment for the text or images inside that cell.

Watch video: How to add and style a table

 

Example table (Striped Rows table)

Proin ac justo suscipit
12,500
Proin ac justo suscipitProin ac justo suscipitProin ac justo suscipit
Proin ac justo suscipit
Proin ac justo suscipit
17,900
Proin ac justo suscipit
Proin ac justo suscipit
Proin ac justo suscipit
Proin ac justo suscipit
12,500
Proin ac justo suscipit
Proin ac justo suscipit
Proin ac justo suscipit

You can insert images anywhere you have a WYSIWYG field (commonly Columns/Accordions/Tabs).

  1. Click the Image icon
  2. Choose Choose File
  3. Select your image from Recent (if just uploaded) or Browse → your img folder

Best practice:

  • Prepare/crop images to the size required by the component/template
  • Add meaningful alt text when the image conveys information

How to upload an Image?