All Collections
Email Editor & Templates
Email Editor
Understanding Structures and Containers
Understanding Structures and Containers

The foundation of your email template

Amanda Payne avatar
Written by Amanda Payne
Updated over a week ago

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.

tinyEmail email structures

Working with structures

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

tinyEmail email container content

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.

tinyEmail sructure element types

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.

tinyEmail email add containers

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)

tinyEmail email container with content

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.

tinyEmail email container with elements

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.

tinyEmail add content to containers

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!
โ€‹

Did this answer your question?