TL;DR
Every message is made up of containers, sections, and blocks.
Containers define overall size, placement, and background.
Sections let you visually structure content.
Blocks are your actual message content (text, OTA price comparison, CTA, etc).
When to Use It
This guide is for hoteliers building messages on the new Triptease Messages platform. If you want to:
Customize the design of your messages
Create branded layouts that work across devices
Understand why some design changes aren't appearing where expected
The Three Building Blocks of Every Message
1. Container (Think: Message Wrapper)
The container is the outer frame that holds your message content. It sets the overall design foundation, including:
Size and orientation (horizontal/vertical)
Padding and margins
Background color/image
Placement on the page (e.g. center bottom)
Dismiss/collapse behavior
2. Sections (Think: Layout Rows)
Sections are rows or areas you can add inside a container to:
Apply a separate background or layout (independent of the container)
Organize your content logically (e.g., headline, image, button)
Allow more granular padding and alignment control
You can add multiple sections to a message. Each one can have its own layout and design rules.
3. Blocks (Think: Content Units)
Blocks are the individual pieces of content you place in your message. This includes:
Text
Images or GIFs
OTA Price Comparison (Price Check)
CTA Buttons
Countdown Timers
Social Share or Email Capture (coming soon)
You can place blocks directly into a container or inside a section, depending on how much design control you need.
Pro Tip: Blocks behave differently depending on whether they’re placed directly in a container or within a section. For more styling control, use sections.
Pro Tips
Use sections to avoid styling conflicts between content blocks.
For layered design (e.g., image over a background), use a container + section combo.
Naming conventions: Containers = outer frame, Sections = layout structure, Blocks = actual content.
Use the Advanced Settings toggle to access more style controls per element.
FAQs / Troubleshooting
Question: Why is my background color not showing correctly?
Answer: Check if a section is layered over your container and has its own background color.
Q: Can I resize a block individually?
A: Only within the bounds of its section or container. Use padding and alignment settings for precision.
Q: Can I reuse sections across messages?
A: Not yet, but saving message templates (coming soon) will make this easier.