Summary
Messages are made up of three core building blocks: Containers, Sections, and Blocks
The Container is the outer wrapper for your message – it controls placement, size, background, and behaviour
Sections sit inside the container and help structure content and apply shared styling
Blocks are the individual content elements (like text, images, buttons)
The Layout panel shows how these elements are nested and lets you quickly select, navigate, and reorder them
The Three Building Blocks of Every Message
Triptease Messages are made up of three types of building blocks: containers, sections, and blocks. Each serves a different purpose in how your message looks and functions.
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
When the container is selected, you'll need to click on the drop down menus to view more settings.
2. Sections (Think: Layout Rows or Columns)
Sections are 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.
Tip: Sections are arranged as rows or columns. This is defined by your container's "Stack" setting. Then the content within each container can be stacked in the same way.
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)
Call To Action Buttons
Countdown Timers
Email Capture (coming soon)
You can place blocks directly into a container or inside a section, depending on how much design control you need.
Tip: Blocks behave differently depending on whether they’re placed directly in a container or within a section. For more styling control, use sections.
4. Viewing structure with the Layout panel
The Layout panel (on the left-hand side of the Creative Builder) shows how your message is structured — including how containers, sections, and blocks are nested.
Use it to:
See the full structure of your message at a glance
Click on any element to jump to it in the builder
Drag and drop to reorder blocks or sections
This makes editing easier and helps prevent layout issues caused by misplaced elements.
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 = areas arranged as rows or columns, Blocks = actual content.
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.