Customising Text Settings

You can change the way text in a Text Component appears and behaves. These customisations include:

• font family, size, and colour
• background colours
• links

See Also

To learn how to place a Text Component on a webpage, add text, and insert special characters, see:

• Adding Text

 

---

 

1  Open Text Component Settings panel

To access the Settings panel:

1. Click WEBSITE on the top menu bar. 
2. On the left side menu, select the CONTENT folder and then click Manage. The Website Content page displays. 
3. Hover the mouse pointer on a page.
4. Click the Edit button. The Edit Content area opens.
5. Hover the mouse pointer on the Text Component. The toolbar displays.
6. Click the Settings button in the top left corner of the toolbar.

 

 

 

2  Changing Text Component settings

There are three tabs in the Settings panel. Click a tab and a new panel displays options to change the appearance of the component, but not the text. Step 3 below describes how to customise text appearance and behaviour.

 

 

i.     Appearance

Background Colour

Change the colour behind the words. Click the square button to open the Colour Picker. Choose one of your branding colours (if selected) or a colour from the palette. Click the box with a red line to select a transparent background. For information about branding colours, see:

• Customising Brand Colours

Line Spacing

Click the plus (+) or minus (-) boxes to increase or decrease the height of the Text Component.

 

ii.     Spacing

Padding

Click the plus (+) or minus (-) boxes to increase or decrease the space between the image and the inside walls of the Text Component.

Margins

Click the plus (+) or minus (-) boxes to increase or decrease the space between the Text Component and the walls of the adjacent components.

 

iii.     Advanced

ID or Class Name

To learn about custom styling with ID and Class Name selectors, see:

• Adding CSS

Component Visibility

Control which devices display the content. The default is all devices. To learn about visibility settings, see:

• Customising Visibility

 

3  Customizing text appearance and behaviour

You can change the way words look and behave in a Text Component.

1. Double-click a word inside the Text Component. A black toolbar opens.

For some tools, clicking a button on the toolbar changes the text immediately. For example, Bold, Italics, and Increase Font.

For other tools, clicking a toolbar button opens a Settings panel. These tools are:

• Font Family
• Text Colour
• Link

 

• add or remove bold

 

• add or remove italics

 

• add or remove underline

 

• add or remove strikethrough

 

• change English and Simplified Chinese font families

 

• select font family

 

• set font size

 

• increase font size

 

• decrease font size

 

• change the colour of words

 

 

Translate English text into Simplified Chinese.

1. Highlight a word or phrase with the mouse pointer.
2. Click the Translate button.

 

This button adds a link to text. For information, see:

• Adding a Link to Text

  

• create an ordered list

 

• create an unordered list

 

• indent text

 

• outdent text

 

• align left text

 

• align centre text

 

• align right text

 

• align justify text

 

• remove formatting