Understanding Structures and Containers

The foundation of your email template

If you're new to tinyEmail, this article is for you. You learn how to use and customize structures and containers. This is an overview, so it touches on the basics and skips the details. That way, you can start creating beautiful email templates right away. 

Email 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 editor when you want to add content to the template (e.g. text, image, or form).  

A single structure can hold between one and eight containers in a row. You can vertically stack any number of structures in a template.

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. save as a module
2. move
3. duplicate
4. 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. In the example below, I stacked five blocks inside one container. 

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!