Skip to main content

Styling Text Blocks in the Triptease Messages Platform

Learn to style text blocks with custom fonts, colors, spacing, and padding in Triptease Messages.

Updated over a week ago

TL;DR

  • Text blocks allow you to insert and style written content.

  • You can customize font, size, color, spacing, alignment, and padding.

  • Text alignment settings only apply within the block—they don’t affect section or container positioning.


When to Use It

Use a text block when you want to:

  • Add headlines, supporting copy, or disclaimers

  • Control how the message content reads and appears

  • Align text styling with your brand’s visual identity


How It Works

Text blocks are standalone elements you can drop into a section. You’ll know you’ve selected a text block when you see a Text label and a blue outline around the selected element.

Text styling is fully controlled 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 text directly in the field provided.

  • Font: Choose from a list of available fonts.

  • Font color: Use a hex code or color picker. Be mindful of contrast (a link to WCAG accessibility guidance is provided).

  • Weight: Set how bold or light the text should appear.

  • Size: Adjust the font size to suit your message layout.


3. Adjust Typography

Further down, you can fine-tune text spacing and layout:

Typography Options:

  • Align: Align text left, center, or right within the block.

    Note: This does not affect the block’s position within a section or container.

  • Letter spacing: Adjust spacing between characters.

  • Line height: Control vertical spacing between lines.


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 consistent font choices across messages for brand consistency

  • Use bold weights and large sizes for headlines or attention-grabbing statements

  • Adjust letter spacing and line height for better readability, especially on smaller screens

  • Ensure contrast between text and background for accessibility

  • If the text block looks off-center, check section or container alignment settings—not just the text block


FAQs / Troubleshooting

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

Answer: Text alignment only affects the text inside the block. To center the entire block within a section or container, adjust that parent element’s alignment.

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

A: At the moment, all styling applies to the full block of text; however, more font styling options for individual words will be available soon.

Q: Why isn’t my font updating?

A: Double-check that you have the text block selected. Font settings will only appear in the panel when the correct element is selected.

Did this answer your question?