Lesson 4: WYSIWYG Editor | Advanced

Lesson overview

Master the WYSIWYG editor to create clean, accessible content on the StFX website! In this lesson, you'll learn how to properly format headings, insert internal and external links, strip out hidden code from Word documents, and build tables, quotes, and accordion menus. Let's start styling your page!

Topics include:

  • WYSIWYG editor basics
  • Heading structure
  • Adding links
  • Text formatting & Word cleanup
  • Visual elements & callouts
  • Tables & accordians
     
Step-by-step

  1. Format Headings

    1. Highlight your text, click Format and choose a heading level (e.g. Heading 2, Heading 3).

    2. Always use headings sequentially to keep structure clear for all users and screen readers.

  2. Insert Links

    1. Highlight text and click the Chain Link icon.

    2. External Link: Paste full URL.

    3. Email link: Type "mailto:@email address"

  3. Clean Up Pasted Text

    1. Avoid pasting directly from Word to prevent improper formatting.

    2. Paste your text, highlight it, and click Remove Formatting to reset styles.

  4. Add Block Quotes

    1. Highlight the quote text and click the Quotation icon on the toolbar to make it stand out.

  5. Insert and Customize Tables

    1. Click the Table icon, specify the number of rows, columns, and headings, then click OK.

    2. Add a Table Caption for accessibility, so users understand the table context.

    3. Add or adjust rows and columns using the table toolbar icons.

    4. Adjust Table Properties (border style, colour, width, and alignment) to format the display.

  6. Create Accordion Menus

    1. Click the Boxed Arrow icon on the toolbar.

    2. Enter a title for the accordion menu, then click inside the grey content box to fill in details.

  7. Structure Content with Lists

    1. Click the Bulleted or Numbered List icons to break up lengthy text into easily skimmable sections.


Test your knowledge

Test your understanding of the material covered in this lesson with the quick quiz below. Completing this knowledge check is entirely optional, but it's a great way to reinforce what you've learned before moving on to the next topic. Simply select your answers for each question and submit the form when you're done.

 

« Previous Lesson Next Lesson »

Contact

Marketing & Communications Department

1st Floor Xavier Hall
4545 Alumni Crescent
Antigonish NS B2G 2W5
Canada