From the very beginning of your work with Suitebuilder, you have a pre-designed template that already has coordinating fonts, including their styles and sizes. However, if you want to make your website text stand out, you can customize and style it to your preference using text control panes.
Note: If you need to delete demo text and insert your own, refer to our Adding and deleting your website text tutorial. And if you want to change the font of your whole website, read our dedicated tutorial.
Activating Control Panes
Each block and its element has its own control pane that activates upon hovering over or clicking it. This helps you act faster and work only with the element you want to modify.
Clicking the text container activates a short text editing menu while highlighting a word in the text container calls out the menu’s extended version.
Formatting the text
You can format and style text in the same editor where you add text. Text control panes offer various styling options, which look similar to text formatting in a regular text editor.
Here are the formatting options available:
- Title width customization
- Header resizing
- Font size customization
- Making text bold, italic, and underlined
- Adding links to the text
- Creating ordered and bulleted lists
- Changing the text’s color
- Changing text alignment
Let’s explore them in detail.
Title width customization
To change your block's title width, follow these steps:
- Click the block title to enable its border
- Use one of the edit handles to scale the entire selection by dragging it inwards or outwards.
The block design will adapt to the changes.
Here’s the video of the process.
Headings resizing
You can turn words and even sentences on your page into a title tag (heading tag), also known as H1, H2 tags. Also, you can change the size of existing headings using the predefined heading tags (Heading 1-6, Quote, and normal text).
Note: When crawling the content of a page, search engine spiders read the HTML code and identify which sentences are enclosed in heading tags (H1, H2, H3, etc). By using keywords in your heading tags, you help search engines understand what your page is all about. Also, headings make it easier for users to navigate through the page.
Here’s how to change the heading size:
- Click the text field to enable the text control pane.
-
Highlight the text you want to change and pick the font style from the dropdown lists.
- Click anywhere in the block to enable the changes.
Customizing font size
If you need to customize the font size of the text elements beyond the predefined heading options, you can use the font size drop-down menu on the text control pane. Highlight the text you want to customize and choose the relevant font size.
Customizing font style
The control pane also contains commands that make your text bold, italic, underlined, or strikethrough (or all at once). Select the portion of the text you want to change and then click the Bold, Italics, Underline, or Strikethrough icons in the control pane.
Adding links to the text
You can add a link to a word or a phrase. Read our Creating text links tutorial for detailed instructions.
Creating ordered and bulleted lists
Using the text control pane, you can create two types of lists in your texts: ordered and unordered.
Highlight the portion of the text you want to turn into the list, and then click the Unordered (with bullet points) or Ordered (with numbers) icons in the control pane.
If you want to add another line to the list, click Enter, and a new bullet point or a numbered line will be added below. Check the video of the process.
Note: The lists are always aligned to the left.
Changing the text color
You can change the color of any text portion, from a single word to the entire paragraph. Here’s how to do this:
- Highlight the text you would like to change the color for.
- Click the Text color icon to call out the color palette with the range predefined by our smart interface. If you need more color options, click the (+) Plus icon to open the color picker with a full color palette.
- Click Submit when you’re happy with the chosen color.
The colors you’ve recently used are automatically added to the quick color palette so that you can use them again easily.
Changing text alignment
According to the best design practices, most texts in the layouts are aligned to the left. If you want to change this, you can use the alignment icons on the text control pane.
Highlight the text you want to align and click the respective icon as it’s shown in the video below.
Removing formatting
If you want to remove all the formatting from a text segment, you need to highlight the text and click the Clear icon in the control pane.
Remember to publish your website to apply the new changes.
Comments
0 comments
Article is closed for comments.