91¸£Àû

Toolbar

At the top of the editor is a toolbar containing common tools to format text:

Use the following buttons in the toolbar to format text:

*These options are selectable from a drop-down list in the Components Editor.

Headings

Place the cursor in a line of text you want to convert to a heading, then choose a heading style from the drop-down list in the toolbar:

Heading levels should reflect the hierarchy of information in your page. For example, Heading 2 for the main sections, Heading 3 for sub-headings within those sections, and so on. The page title is automatically set to Heading 1, hence the options in the drop-down list start at Heading 2.

A sensible heading hierarchy helps readers to scan your page and search engines to index the page.

Underline

There is no formatting option to underline text in SiteBuilder, which is deliberate. In web pages, underline is the standard convention to denote hyperlinks. Underlined text that does not act as a link can be confusing and frustrating for visitors.

To emphasise words or phrases, use bold instead. Italics are typically used for the titles of publications and works of art.

Font & colour

By default, all text in the ID7 common website template uses the Neue Haas Grotesk typeface – including site titles, headings, sub-headings and body text. Heading colours are derived automatically from your site's colour palette. Body text is black by default.

It's not possible to apply other colours or fonts, except by using custom formatting.

Code blocks

Choose Preformatted from the drop-down list to format a code snippet – for example:

if (is a code snippet) {
  use a <pre> tag
} else {
  paragraphs are fine
}

Choose Code from the drop-down to display text as code on the same line as regular text.

Special characters

To add non-standard characters to your page, such as mathematical symbols (∑, ∞) or uncommon currencies (¥, ₹):

1. Place your cursor where you want to add the special character.

2. Select Text > Symbol:

   

3. In the Special character pop-up, select the special character you want to add:

   

4. The selected symbol appears on your page.

Custom formatting

1. Select Customisation > Styled text (CSS class):

   

2. In the Formatted text pop-up, enter the names of custom classes you want to apply to your text:

   

Examples

<p class="handwritten">This text has had the "handwritten" custom style applied to change its colour and font.</p>

<p class="h4">This paragraph has had the "h4" default style applied, to make it look like Heading 4.</p>

Related articles

• Add a block style to existing text
• Conditional content
• Custom HTML & CSS