Entering text with the WYSIWYG editor

This is normal text that I am using within the “WYSIWYG” editor. Many  Content Management Systems (CMS) use these so that content editors and other users who may not know a lot about HTML markup can apply styles to their text fairly easily. 

If I want text to be bold or italic, I select the B or I icons in the toolbar. (You may notice these tools are similar to those of Microsoft Word). 

There are other styles you can use within the toolbar. I am going to list them using bullet points: 

  1. This is a numbered list 
  2. The second way to use a bullet is then to select the other style next to the numbers (the one that is not numbered)
  • Like this! 
  • And another bullet 
  • Now I am going to add a link to this great page I think you should look at.
  • I linked to that page by just copying/pasting the URL into the URL field that popped up in the window when I clicked the “link” icon above. 

If you want to turn off these bullets for this line, just click the bullet icon again. Now you’ve returned to a normal line of text. 

To insert an image, click the image icon in the toolbar. (more info on this once image library is built out) 


Now, let’s move on to styles. Most of these are contained within the dropdown on the left side of the toolbar, starting with the default of normal text. Open the dropdown, and take a look. The styles that were included with the website design are also contained here. A lot of these styles have very specific purposes, which are outlined for you below: 

Proper Use of Headings

Headings not only help break up your page and make it easier for people to skim, they also help search engines know what the page is about. Furthermore, headings are important for accessibility to the visually impaired, as it helps them navigate using screen readers.


  • Don’t add extra styles to headings (e. g., bold, all caps, underline, or italics). The proper formatting is built in.
  • Don’t center or indent headings.
  • Use headings only for organizing content on a page, not to draw attention to text by making it bold.
  • Follow proper nesting order. Always start with Heading 2 for your main section(s). Use Heading 3 within those, and so on.
  • Accordion headers are always a Heading 2, so use Heading 3 inside them.
  • Remember, the Heading 1 style is not in the list because those are always automatically applied to your page title (see the title of this page for an example). 


Heading 2 

Heading 3

Heading 4 



Block quotes are also a fun style to use. Let’s say that Sir Anthony Hopkins gave you an interview, and you wanted to post a direct quote from him on your website. This is how you would do that. 

Type in the quote from Sir Hopkins. On a new line beneath the quote, type in his name. (Don’t add any any styling to the quote, or quotations, or any other punctuation other than what should be within the quote itself). Then, put your cursor after the quote and select the quotation mark icon from the toolbar. Once that style is applied, put your cursor next to the name of who said the quote (in this case, Sir Anthony Hopkins), and select the citation style from the dropdown. Voila! 

PCA is such a great website. I would love to attend next year’s conference and speak at a session! 

Sir Anthony Hopkins