Text widget

The Text widget is used to add and format body text, paragraphs, lists, quotes, and rich content on your pages.

It’s the most commonly used widget for written content and plays a key role in readability, structure, and overall user experience.

This article walks through all controls and settings available in the Text widget, along with best practices to help you keep your content consistent, readable, and easy to maintain.

⚠️ Very Important: Use Global Text Styles

Just like headings, body text should be styled globally.

Before working with individual text blocks, make sure your global text styles are set up correctly:

Web Studio → Website Settings → Global Styling → Text Styles

Why this matters

If you manually change text styles inside a Text widget (such as font size, color, or formatting):

  • You override the global style
  • Future global updates will not apply
  • Your design becomes inconsistent
  • Mobile layouts can break
  • Long-term maintenance becomes harder

💡 Best practice

  • Use global text styles for body text
  • Keep local overrides to a minimum
  • Treat global styles as your design system

Text Style

The Text widget supports multiple text types from the dropdown:

  • Normal (paragraph text)
  • Quote
  • Code
  • Header 1–6 (available, but not recommended inside Text widgets)
  • Normal → standard paragraphs and body copy
  • Quote → highlighted quotes or testimonials
  • Code → inline code snippets or technical content

⚠️ Important

For page titles and section headers, always use the Heading widget, not headers inside the Text widget.

This ensures proper structure, accessibility, and SEO.

Font Family

Allows you to select the font used for the text.

Best practice

  • Do not change fonts per text block
  • Set body fonts globally in Global Styling → Text Styles
  • Only change locally in rare edge cases

Font Size

Controls the size of the text in pixels.

⚠️ Very important note

Changing font size locally is especially sensitive

Changing font size locally is especially sensitive since it:

  • Overrides the global text style
  • Applies the same size on desktop and mobile
  • Can break responsive behavior
  • Makes text harder to maintain consistently

This can result in:

  • Text being too small or too large on mobile
  • Paragraphs looking inconsistent across pages
  • Poor readability and visual hierarchy

💡 Best practice

  • Never adjust font size per text block unless absolutely necessary
  • Control size via global text styles
  • Let responsive behavior be handled globally
  • Use Remove Font Style to reset accidental overrides

Text Formatting

You can apply inline formatting using the toolbar:

  • Bold
  • Italic
  • Underline
  • Strikethrough
  • Uppercase / lowercase / small caps

When to use

  • Emphasize key words or phrases
  • Highlight important sentences
  • Short stylistic accents

💡 Tip

Avoid heavy formatting that conflicts with global styles.

Text Color

The Text Color picker allows you to:

  • Choose a custom color
  • Use Global Colors
  • Adjust opacity
  • Enter HEX or RGB values

Best practice

  • Use Global Colors for consistency
  • Avoid custom colors unless intentional
  • Maintain sufficient contrast for accessibility

Background Color

Adds a background color behind the text.

Common use cases

  • Highlight important information
  • Callout boxes
  • Notes or warnings
  • Promotional text blocks

Tips

  • Use sparingly
  • Ensure good contrast
  • Avoid using background color on long paragraphs

Text Alignment

Controls horizontal alignment:

  • Left
  • Center
  • Right

Common patterns

  • Left-aligned → long-form content
  • Centered → short statements, CTAs, quotes

Lists

The Text widget supports both list types.

Unordered list (bullet points)

  • Feature lists
  • Benefits
  • Key takeaways

Ordered list (numbered)

  • Step-by-step instructions
  • Processes
  • Rankings or sequences

💡 Tip

Use lists to improve scannability and readability, especially on mobile.

If you want to make more designed lists, please see the Icon and Icon Section widgets

Insert Image (Picture)

The Picture option allows you to insert images directly inside text content.

Use cases

  • Inline illustrations
  • Icons inside content
  • Supporting visuals between paragraphs

💡 Best practice

For larger or layout-critical images, use the Image widget instead.

You can turn selected text into a clickable link using the link selector.

The Text widget supports a wide range of link types, making it easy to connect content, navigation, and actions.

  • Page

    Link to any internal page on your website.

    Store

    Link directly to store pages, products, or categories.

    Funnel

    Link to specific steps inside a funnel.

    You can also link to anchor points within a funnel step, making it possible to navigate to specific sections inside a funnel page.

    Anchor points can be added in the Block settings for each block in the Funnel

    External link

    Link to any external URL (for example another website or tool).

    If you use an external link to link to pages on your own website (for example Circles or Circle pages), do not include the full domain name. Always use a relative path instead.

    Example:

    Use /circles     or /circles/community-name    

    Not https://yourdomain.com/circles    

    Using relative paths:

    • Ensures correct navigation if the system structure changes
    • Ensures correct navigation when switching or updating a custom domain
    • Improves compatibility across environments (preview, staging, live)
    • Keeps links cleaner and easier to maintain

  • Anchor point

    Link to a specific section on the same page or another page using anchor points.

    For funnel pages, anchor links are handled via Funnel links, not regular page anchors.

    Anchor points can be added in the Block settings for each block

  • File

    Link to uploaded files such as PDFs, documents, or downloads.

  • Popup

    Open a popup instead of navigating away from the page.

  • Video popup

    Open a video in a popup/modal view.

  • Email

    Create a mailto link that opens the visitor’s email client.

  • Phone

    Create a click-to-call link, especially useful on mobile devices.

Link options

When creating a link, you can also control:

  • Open in
    • Same tab
    • New tab

  • Make “nofollow” link

    Useful for SEO when linking to external or sponsored content.

Common use cases

  • Call-to-action links
  • Navigation within long pages
  • Linking to downloads or resources
  • Opening popups or videos without leaving the page
  • Email and phone contact links

💡 Tip

Use internal page and anchor links whenever possible to keep users engaged and improve navigation flow.

Remove Font Style

This option resets the text block back to its global style.


Use this when

  • Text looks inconsistent
  • Global style changes don’t apply
  • Font size or color was changed accidentally

This is often the fastest fix for layout issues.

AI Writing Assistant (Overview)

The Text widget includes access to the AI assistant.

You can:

  • Improve – refine wording
  • Expand – add clarity or depth
  • Shorten – make text more concise
  • Generate text – create new content

📌 For full details, see the separate article: AI Writing Assistant

Use AI as a helper — not a replacement for structure and strategy.

Common Mistakes to Avoid

  • Using headers inside Text widgets instead of Heading widgets
  • Manually resizing text instead of using global styles
  • Overusing colors and background highlights
  • Mixing fonts across text blocks
  • Ignoring mobile readability

Summary

  • The Text widget is for paragraphs, lists, quotes, and rich content
  • Always rely on global text styles
  • Avoid local font size overrides
  • Use lists and formatting to improve readability
  • Use Remove Font Style to fix inconsistencies
  • Combine with Heading widgets for proper structure

Used correctly, the Text widget keeps your content clean, readable, responsive, and easy to maintain as your site grows.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.