In Loopia Sitebuilder you edit and format text with the text control panel that appears when you click a text element. From the start, your template comes with matching fonts, styles and sizes, but you can customise and format text however you like – much as you would in a regular text editor.
Note: to replace demo text with your own, see the article on adding and removing text. To change the font across your whole site, see the article on customising fonts on your website.
Activating the control panels
Every block and element has its own control panel, which appears when you hover over or click it – so you only work with the element you want to change. Clicking a text container shows a short editing menu; selecting a word inside it shows the extended version.
Formatting options
- Rewrite text with the AI Text Assistant
- Adjust title width
- Change heading size
- Adjust font size
- Make text bold, italic, underlined or strikethrough
- Add text effects
- Add links to text
- Create numbered and bulleted lists
- Change text colour
- Change text alignment
- Adjust line and paragraph spacing
- Adjust text indentation
Adjusting title width
- Click the block title to show its frame.
- Drag one of the editing handles inwards or outwards to scale the whole selection.
The block’s design adapts to the change.
Changing heading size
You can turn words and sentences into heading tags (H1, H2 and so on) or resize existing headings using the predefined styles (Heading 1-6, Quote and normal text).
Note: search engine crawlers read a page’s HTML and identify which sentences are in heading tags. Using keywords in your headings helps search engines understand what the page is about, and headings also make the page easier for visitors to navigate.
- Click in the text field to activate the text control panel.
- Select the text you want to change and choose the style from the dropdown.
- Click anywhere in the block to apply the change.
To go beyond the predefined heading sizes, use the font size dropdown in the text control panel: select the text and choose the size you want. Remember to publish your site to apply the changes.
Changing font style
Select the text and click the Bold, Italic, Underline or Strikethrough icons in the control panel – or several at once.
Adding links to text
You can add a link to a word or phrase. See the article on creating text links for full instructions.
Creating numbered and bulleted lists
Select the text you want to turn into a list and click the Unordered (bullets) or Ordered (numbers) icon in the control panel. Press Enter to add a new bullet or numbered line below.
Note: lists are always left-aligned.
Changing text colour
- Select the text you want to recolour.
- Click the Text colour icon to open the palette of predefined colours. For more options, click the (+) icon to open the colour picker with a full palette.
- Click Submit when you’re happy with the colour.
Colours you’ve recently used are added to the quick palette automatically. You can also customise typography colours across your whole site – site name, headings H1-H6, text links and price labels – by creating a custom colour palette.
Changing text alignment
In line with design best practice, most text in the layouts is left-aligned. To change it, select the text and click the appropriate alignment icon in the text control panel.
Adjusting text indentation
Place the cursor at the start of the line and click Increase indent as many times as needed. Use Decrease indent to reduce it.
Line and paragraph spacing
- Select the text you want to edit.
- Click the Line and paragraph spacing icon in the control panel.
- Choose one of the predefined line height options from the dropdown.
The text changes immediately. In the same dropdown you can add or remove space before or after a paragraph.
Note: spacing is useful for tighter layouts or more control over vertical rhythm. By default, headings have a margin after them to give extra space before the next paragraph – you can remove it if you don’t need it.
Custom spacing
- Select the text you want to adjust.
- Click the Line and paragraph spacing icon and choose Custom… at the bottom of the dropdown.
- Enter line height, space before and paragraph spacing values, then click Submit.
To apply custom spacing to text in a block, select the text itself rather than the whole block – for example, selecting a heading applies the spacing only to that heading.
Note: the maximum line height value is 10, and the maximum spacing value is 999.
Hiding text elements in a block
Click the text you want to hide, then click the Hide button in the element’s control panel. Publish your site to apply the change.
Removing formatting
To remove all formatting from a piece of text, select it and click the Clear icon in the control panel. Publish your site to apply the change.