Skip to main content

Customize Text Appearance in the Website Editor

Format text with bold, italics, size, color, and links in the Website Editor.

Written by Mark

The Website Editor gives you precise control over your site's content, and that includes how your text looks. With the inline text formatting toolbar, you can easily apply bold, italics, adjust text size, change colors, and add hyperlinks to any text on your Durable website.

Enhance Your Text

The inline text formatting toolbar gives you granular control over how your content looks. Use it to draw attention to important details, improve readability, and guide your visitors through your message.

Highlighting Key Information

  • Emphasize important words: Use bold or italic to make key terms stand out in a paragraph, such as a product name or a special offer.

  • Call out actions: Underline text that implies an action, such as "click here for details" (though for actual buttons, use dedicated button elements).

Guiding Reader Attention

  • Structure with size: Adjust text size (e.g., Large for subheadings or Small for disclaimers) to create visual hierarchy within a text block.

  • Brand with color: Apply a custom color to a specific phrase to align with your brand palette or highlight a unique selling proposition.

Tip: Maintain a consistent visual style. While you have granular control, overuse of varied styles can make your content look cluttered. Focus on readability and brand consistency.​

Customize Text Appearance

The Website Editor provides an intuitive inline toolbar to format text directly on your page. Here’s how to use it:

  1. Navigate to Website from the left sidebar, then navigate to the area of your website you want to edit.

  2. Click on any editable text area on your page (e.g., a heading, paragraph, or title within a section). The inline formatting toolbar will appear directly above the selected text.

  3. Apply basic styles: Select the text you wish to format, then click the corresponding icon:

    • The B icon for bold text.

    • The I icon for italic text.

    • The U icon for underlined text.

    • The S icon for strikethrough text.

  4. Adjust text size: Select the text, then click the Aa icon (font size control). Choose from XS (Extra Small), SM (Small), MD (Medium), or LG (Large).

  5. Change text color: Select the text, then click the color palette icon.

    • Choose a preset color from the options displayed.

    • For a custom color, click the rainbow circle icon to open the color picker. You can then enter a hex code (e.g., #079D09) or use the color slider and square to select a color visually.

  6. Add a hyperlink: Select the text you want to link, then click the chain link icon. In the text field that appears, type or paste the full URL (e.g., https://www.example.com/your-page). The linked text will automatically be underlined.

  7. Clear applied formatting: Select the text with applied formatting, then click the eraser icon. This will remove all custom styles, sizes, colors, and links, reverting the text to its default theme appearance.

Refining Your Text Styles

While the inline toolbar offers extensive text customization, keep these points in mind for a cohesive design:

  • Button text styling: The text within buttons on your website is styled according to your site's overall theme and cannot be customized using the inline text formatting toolbar.

  • Theme consistency: For broader changes to your site's fonts and colors, refer to your site's global design settings. This inline toolbar is for specific text elements.

What's next

For more general text editing capabilities, including using AI to generate content, explore Editing Content Inside a Page.

Did this answer your question?