singledigitalpresence.vic.gov.au

Format basic text

How to format body content in the basic text content component, using the WYSIWYG tools. Includes adding indented quotes, embedding media and more.

Use the Basic text content component for inserting body content. This component gives you the WYSIWIG (what you see is what you get) window where you can format headings, paragraphs, quotes and callouts and add links, images and other types of media and buttons.

After you have pasted your content from a document into the WYSIWYG screen, you need to apply formatting. 

This is a good time to review your content and check:

  • it has a clear purpose
  • it uses inclusive, gender-neutral language
  • the reading level is below year 8
  • meaningful headings and subheadings have been used
  • the most important content is provided near the top of the page
  • there are no acronyms or jargon.

Heading styles

Apply heading styles to your content’s headings using the Format drop-down.

Heading styles drop-down example within WYSIWYG

Highlight your heading and click on Format and select your heading style.

Heading 1 is disabled because it can only be used for the page title.

You can add Headings 2–5 but you will mostly only use Heading 2 and Heading 3. 

For accessibility reasons, you must follow the correct order - i.e. the first heading after the title must be Heading 2 (because the page title is formatted as Heading 1) and the next subheading must be Heading 3 (you can’t jump from 2 to 4 for example, just because you like the way it looks).

Bulleted or numbered lists

Create lists in your text by highlighting the line and selecting one of the list icons in the WYSIWYG toolbar. 

Use numbered lists for procedural instructions.

Use bulleted lists where the order of items is not important.

More complex lists

To create a additional levels of list within a list, you can use the indent button on the WYSIWYG toolbar. (This is not visible on the toolbar until you have added a list and your cursor is on a list item.)

Example

Apply list formatting to the whole list. 

Then select the list items you want to indent. Click the indent button. You can also select items and choose the numbered list button to change from bulleted to numbered as you can see below.

  • list item
  • list item
  • list item
    • list item with 1 indent
    • list item with 1 indent
      • list item with 2 indents
  • list item
    1. list item with 1 indent and number formatting
    2. list item with 1 indent and number formatting
  • list item
  • list item

Tables

Tables should be used selectively as they are harder for screen readers to interpret.

Select the Table icon on the toolbar.

Enter the number of rows and columns you need. (You can add more later by right-clicking once you create the table.)

For accessibility reasons, and to ensure the correct formatting is applied, you need to identify your header, as either the first column or the first row. You can use the caption field to add a Title and Summary for your table.

Buttons

Buttons should be used for strong calls to action.

To insert a button:

  1. Put your cursor on its own line.
  2. Click the small page icon and choose primary/secondary button. 
  3. You’ll see some dummy text (hyperlinked) on your screen.
  4. Replace it with your button text. The easiest way to do this is put your cursor after the first letter, type your button label and use the delete and backspace buttons to delete the dummy part of the text. (Another way is to click on the Source button and change in the HTML code, but only do this if you're confident with HTML.)
  5. Have your cursor somewhere on the hyperlinked label text and click on the Link icon. You’ll see a popup.
  6. Delete ‘Primary-button-link’ in the URL field and start typing your destination link. If it’s an internal page, choices will show up and select the correct page.
  7. Type a title and click Save.

Block quotes

This is only for quotes from a person. This indents the quote and displays it in a larger, bolder font with large grey double quote marks around it. If you have a source line, this goes on a new line below and is still indented.

To format a block quote:

  1. Place your cursor in the Body content area where you want your quote to appear.
  2. Click on Template icon and select Block quote. Some dummy text will appear in the content area with a source underneath.
  3. Highlight the template text and paste in your own.  
  4. Preview the page to see the change.
Block quote template example

The quote will appear as follows in the front end:

Block quote with name and source - front end example

Callouts

Single-paragraph callout

This is what the single paragraph callout looks like. It works best with short text, ideally a single paragraph.

To highlight important or interesting content (like you see in printed magazines), text can be highlighted to stand out. This Callout indents the text, adds a larger, bolder font and applies a shaded line down the left side of the paragraph.

How to format

  1. Type the text you want to callout.
  2. Select the text using your cursor. 
  3. Click the Styles drop-down and select Callout.

Note: this is best suited to a single paragraph. If you want to callout more than one paragraph, it will display as separate 'chunks'. (The line on the left side will be broken.) If you want to enclose more than one paragraph in a callout, use a soft return after each paragrap by clicking Shift + Enter.  

Call out box example
  • Preview the page to see the change.

Never use more than 2 callouts per page.

WYSIWYG callout

Here's an example:

Callout heading

This is what the WYSIWYG callout looks like.

You can have more than one paragraph:

This callout style has a different look but its main feature is that you can add headings and multiple paragraphs, list formatting and inline links. It appears with a blue shaded box behind it and a blue line down the left.

How to format

  1. Format the text you want to callout. You can use all formatting available on the WYSIWYG toolbar, including headings, lists and hyperlinks. 
  2. Select the whole text using your cursor. 
  3. Click the C icon.
The shaded call out style is applied by selecting the Callout (WYSIWYG) style

Reviewed 11 November 2020

Vic Gov digital guide

Was this page helpful?