Format text
The information below applies to the Components Editor and the old visual editor.
In this article:
Toolbar
Use the following buttons in the toolbar to format text:
Button | Action | Keyboard shortcut (Windows) | Keyboard shortcut (Mac) |
---|---|---|---|
Bold | Ctrl+B | Cmd+B | |
Italics | Ctrl+I | Cmd+I | |
Strikethrough | |||
Subscript | |||
Superscript | |||
Bulleted list | |||
Numbered list | |||
Block quote | |||
Increase indent | |||
Decrease indent |
Headings
Highlight your heading and then choose a heading style from the drop-down list in the toolbar:
Note: the screenshot above is from the old visual editor. In the Components Editor, the drop-down is the leftmost option 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. Your page heading is Heading 1 by default, 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. When the underlined text does not act as a link, it's 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.
Fonts
By default, all text in the ID7 common website template has the Lato typeface – including site titles, headings, sub-headings and body text. It's not possible to format text in SiteBuilder with other fonts using the Components Editor or the old visual editor.
Colour
Heading colours are derived automatically from your site's colour palette. Body text is black by default.
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
}
In the Components Editor only, choose Code from the drop-down to format some code
on the same line as regular text.