General Formatting

When pasting content into the CMS, use Edit > Paste as Text to paste as plain text and remove hidden formatting.

You can also highlight the content in the HTML editor and and use Format > Clear formatting.

When you paste directly from MS Word, Outlook, web browsers, or other rich text sources, you’re also bringing in:

• Inline styles and unwanted fonts
• Extra HTML tags
• Hidden formatting that can break responsive design
• Accessibility issues
• Compatibility issues with site templates or accessibility tools
• Cluttered code can make your page look inconsistent across devices and cause issues with the website's style sheet

Pasting plain text means stripping out all formatting (fonts, colours, styles etc.) and ensures that only the raw text is inserted into the CMS, which you can then format intentionally using the HTML editor.

You can also use Notepad (PC) or TextEdit (Mac) to remove formatting from other rich text sources.

Headings (H1–H6) provide a clear structure for web content, helping users quickly understand the flow of information. ​

To organise your content clearly, use subheadings for different sections.

They are also essential for screen readers, which allow visually impaired users to navigate between headings ​to scan content efficiently.​

Best Practices for Headings:​

Each page already has a H1:​ Each page already includes a Heading 1 (H1) at the top, that’s your page name/main title.

Use H2 for main sections: H3 for subsections under H2, and so on (H4–H6 if needed).​

Maintain logical order: Avoid jumping from H1 to H4 or skipping levels unless closing subtopics.​

Headings must describe the section content clearly: They act as quick summaries for readers.​

Avoid using headings for visual styling only: They must represent hierarchy, not decoration.​

Screen readers allow users to jump heading by heading: Poor structure makes navigation difficult.​

✅ Good Example (Logical hierarchy):​
H1: Student Support Services​
H2: Academic Support​
H3: Assignment Help​
H3: Study Skills Workshops​
H2: Wellbeing Support​
H3: Counselling Services​

❌ Poor Example (Incorrect and confusing):​
H1: Student Support Services​
H4: Assignment Help​
H2: Counselling Services​
H3: Study Skills Workshops​

✅ Why the good example works:​
✔ Logical flow from main topic to subtopics​
✔ Easy for screen readers to interpret​
✔ Users can scan content quickly​

❌ What’s wrong in the poor example:​
✖ Heading levels are skipped or reversed​
✖ Structure is unclear​
✖ Difficult for screen reader users to navigate

How to Apply Headings

Select the text you would like to make into a heading and select Formats > Headings and choose a heading option.

Heading 2

Heading 3

Heading 4

Heading 5

Using the heading styles helps Search Engine Optimisation (SEO), helps visual content hierarchy and keeps the website style consistent.

Select the text you would like to make into a quotation and click on Formats > Blocks > Blockquote.

The way to get started is to quit talking and begin doing.

- Walt Disney

To insert a table on your page, select Table > Insert table with column and row headings. 

To ensure your table is accessible, use a caption.

Click on your table to highlight it. Select Table > Table captions/summary. Enter a caption with an explanation of what the table is communicating to readers.

Anchor links let users “jump” to a specific part of a content block — useful for long pages with headings or sections.

Step 1: Set the Anchor

1. Place your cursor where you want to set the anchor.
2. Go to Insert > Insert Link > Insert Anchor in the editor toolbar.
3. Give your anchor a simple name (e.g., top, section1), then click Insert.
4. An anchor icon will appear where it’s been placed.

Step 2: Create the Link

1. Type and highlight the text you want to use as the clickable link.
2. Click Insert > Link to external site in the editor toolbar.
3. In the popup, look for the Anchors dropdown and select your anchor name.
4. Click Save to finish.
5. The link will now jump to the anchor when clicked.

The floated image (text-wrapped image) allows you to have text surround a smaller image on your page.

How to float an image

1. Add the image to your content.
2. Double-click on the image to Set Media Attributes.
3. Specify the value you wish to set. In the first example below, the image has been 
   set to float left (wrapping the text around the image with the image floating to the left). 
4. In the second example, the image has been 
   set to float right (wrapping the text around the image with the image floating to the right).
5. Alternately, you can select the image and use the left or right align icons to float the image.
6. Click Save to return to the content screen.
7. Click Save changes to save the changes made to the content.

Left Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 

Right Example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). 

Using the HTML (Source Code) View in Terminalfour

What is it?

The HTML (source code) view in Terminalfour allows you to see and edit the underlying code behind your content. This is useful when adding elements that the standard editor doesn’t support.

When should you use it?

Use HTML view when you need to:

• Embed videos (e.g. from YouTube)
• Add custom formatting not available in the toolbar
• Insert embed codes (maps, forms, iframes, etc.)
• Fix formatting issues that can’t be resolved visually

How to access HTML view

1. Open your General content type in your section
2. Click the “View” button and select "Source Code"
3. The editor will switch to code view

Best practice tips

• Only edit HTML if you’re confident—incorrect code can break layouts (ask the web team if unsure)
• Avoid copying content directly from Word
• Always preview before publishing