Skip to main content

Styling Text Blocks in the Triptease Messages Platform

Customize font, layout, and inline formatting directly within text blocks to align messages with your brand.

Updated over a week ago

TL;DR

  • Text blocks let you add and style written content

  • Customize font, size, color, spacing, alignment, and padding

  • Use inline formatting like bold, italics, underline, links, and lists

  • Use Advanced settings to adjust typography (letter spacing, line height, etc.)

  • Text alignment affects content within the block, not the block’s position on the page


When to Use It

Use a text block when you want to:

  • Add headlines, supporting copy, or legal disclaimers

  • Control how text reads and looks in your message

  • Apply brand fonts and accessible color styling

  • Format individual words or lines for emphasis or structure


How It Works

Text blocks are standalone content elements which you can also place inside a section.

You’ll know it’s selected when you see a blue outline and a floating Text label.

All styling happens in the Text panel that appears when the block is selected.


Step-by-Step Instructions

1. Select the Text Block

Click on the text content within your message. If selected correctly, it will show a blue outline and a floating label that says Text.


2. Customize Content and Font

At the top of the Text panel:

  • Content: Edit the message copy directly

  • Font: Select your brand or system fonts

  • Font color: Use a hex code or the color picker

  • Weight: Set how bold or light the text appears

  • Size: Choose the appropriate font size for your layout

  • Apply font branding: Select your pre-defined fonts (branding settings can be applied in the legacy platform under Account > Global Settings > Branding)


2a. Apply Inline Formatting

Inside the Content field, use the toolbar or shortcuts to format text.

Formatting options:

  • Bold

  • Italics

  • Underline

  • Strikethrough

  • Links

  • Bullet or numbered lists

Keyboard shortcuts:

Mac:

  • ⌘ + B → Bold

  • ⌘ + I → Italics

  • ⌘ + U → Underline

Windows:

  • Ctrl + B → Bold

  • Ctrl + I → Italics

  • Ctrl + U → Underline

To create lists without the toolbar:

  • Type , or + and to start a bullet list

  • Type 1 and space to start a numbered list


3. Adjust Typography

Click Advanced settings in the Text panel to access additional typography controls.

Here, you can:

  • Align: Left, center, or right (applies only within the block)

  • Letter spacing: Increase or reduce space between characters

  • Line height: Adjust vertical spacing between lines of text

To reposition the entire block, adjust the section or container settings instead, if the text is inside the section.


4. Set Padding (Optional)

Padding controls the space inside the text block:

  • Horizontal padding: Adds spacing to the left and right

  • Vertical padding: Adds spacing above and below the text

These settings help you fine-tune visual balance and prevent text from sitting too close to other elements.


Pro Tips

  • Use inline formatting to highlight keywords, links, or offers

  • Bullet lists help break up long blocks of text

  • Combine bold and links for strong CTAs

  • Use brand fonts consistently across all messages

  • Test color contrast with the built-in WCAG checker for accessibility

  • Adjust padding for cleaner, more balanced layouts


FAQs / Troubleshooting

Q: Can I apply different styles to individual words or phrases?

A: Yes. You can now apply bold, italics, underline, links, and lists within the same text block.

Q: Will formatting look the same on mobile?

A: Yes — text formatting is responsive across devices and browsers. Preview before publishing for best results.

Q: Do I need to worry about accessibility?

A: Yes. Use readable font sizes and high-contrast colors. The platform links to a Web AIM tool to help meet WCAG AA standards.

Q: Why is my text aligned left when I selected center?

A: Alignment only affects the text within the block. To center the block itself, adjust the alignment of the parent section or container.

Did this answer your question?