Text editing and formatting

From the very beginning of your work with the Website Builder, 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.

Activating control panes

Each block and its elements have their own control pane that activates when you hover over or click them. 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:

• Rewriting your text with the AI Text Assistant
• Title width customization
• Heading resizing
• Font size customization
• Making text bold, italic, underlined, or strikethrough
• Adding text effects
• Adding links to the text
• Creating ordered and bulleted lists
• Changing the text color
• Changing text alignment
• Adjusting line and paragraph spacing
• Customizing text indent and outdent

Let’s explore them in detail.

Title width customization

To change your block’s title width, follow these steps:

The block design will adapt to the changes.

Heading resizing

You can turn words and even sentences on your page into a title tag (heading tag), also known as an H1 or H2 tag. You can also change the size of existing headings using the predefined heading tags (Heading 1 to 6, Quote, and normal text).

Here’s how to change the heading size:

If you need to customize the font size of the text elements beyond the predefined heading options, you can use the font size dropdown menu on the text control pane. Highlight the text you want to customize and choose the relevant font size. Remember to publish your site to make the changes live.

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, then click the Bold, Italic, 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 a list, 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, press Enter, and a new bullet point or numbered line will be added below.

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:

The colors you’ve recently used are automatically added to the quick color palette so that you can use them again easily.

You can also customize your site-wide typography colors, including your site name, various headings (H1 to H6), text links, and price labels, by creating a custom color palette for your site.

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.

Customizing text indent and outdent

To change the text indent, place your cursor at the start of the line you want to adjust. Click the Text indent icon on the pane. Click it as many times as you need until the indent feels right.

To reduce the indent, use the Text outdent icon. The process works the same way.

Line and paragraph spacing

You can control line height and paragraph spacing directly from the text toolbar. This helps you fine-tune how compact or open your text looks.

Here’s how to customize your line height:

The text will change instantly. In the same dropdown menu you can add or remove spacing before or after a paragraph.

Custom spacing

If the predefined options don’t fit your needs, you can customize them via the Custom option. Follow these steps:

If you want to apply custom spacing below text inside a block, make sure to highlight the text itself, not the entire block. For example, if you highlight a heading, the spacing settings will apply only to that heading.

Hiding text elements in the block

You can hide any text element in your blocks. Just click the text you want to hide, then click the Hide button in the element’s control pane. Remember to publish your website to apply the new changes.

Removing formatting

If you want to remove all the formatting from a text segment, highlight the text and click the Clear icon in the control pane. Remember to publish your website to apply the new changes.