Understanding Structures and Containers

The foundation of tinyAlbert messages

If you're new to message editing and templates, this article is for you. You'll learn how to use and customize structures and containers when editing tinyAlbert messages. 

This is an overview, so it touches on the basics and skips the details. That way, you can start customizing tinyAlbert messages right away.

Structures vs. containers - what's the difference?

The key difference is hierarchy. Structures are digital boxes that hold containers, which in turn hold blocks. A block is an element you drag to the canvas when you want to add content (e.g. text or image).

The screenshot below shows one example of the structure-container-block hierarchy. 

Working with structures

To add a structure, click the Content menu and then Structures. Select a structure and drag it to the canvas.

Structures are flexible elements. Each structure has a toolbar with these options:

1. move
2. duplicate
3. delete

To open the toolbar, hover the mouse on the structure and click the ellipsis.

Configuring containers

You can configure the size and spacing of containers inside a structure. Click the structure one time to make it the active layer. The side panel displays options to manage the structure's appearance.

At the top of the side panel, set the number of containers in the structure and container width. Click the plus (+) icon to add containers and the trash can to delete them.

You have two container width options. Click the equals (=) icon to automatically equalize container width. Click the same icon again to disable the equals feature and instead use the plus and minus icons to set the width of each individual container.

Use the Indent tool to increase or decrease the amount of space between each container inside the structure. The maximum width is 40px. If you need more space, add extra containers.

Scroll down the side and panel, and you'll discover more options to customize structures:

• hide structures on desktop or mobile views
• configure the structure's responsiveness (If enabled, the containers are stacked vertically. If disabled, the containers display in a row.)
• set container inversion for responsive structures (display containers in reverse order on a mobile device)

Working with Containers

You control the number, size, and spacing of containers at the structure level. To control the design, appearance, and content of a container, you need to work at the container level.

Each container can hold an unlimited number of vertically stacked blocks, though you won't need that many inside the limited space of a tinyAlbert message. In the example below, I stacked three blocks inside one container:

1. text block
2. image block
3. spacer block

Customize a container

To customize container settings, click a container one time to make it the active layer. Go to the side panel and select a menu tab: Content or Appearance.

Content

The settings options inside the Content section are a bit different for each type of block (e.g. text, image, video, etc.). For example, you can set text color only if you highlight a text block.

Appearance

Most blocks share similar settings options under the Appearance tab. In addition to standard tools like container width, padding, and font, you can enable or disable:

• responsive design
• underline links
• a background image

That's it. 

Now you've got structure and container basics covered!