Element

An element is a part of the document or email template. Paragraphs, headings, tables, images, links and spans are all elements. In fact, the whole document structure is built from elements so they are key in understanding how to build templates.

Some elements (parent elements) can contain other elements (child elements) while others cannot. For example, in a table element, there are multiple sub-elements such as table header, table body, rows, columns, and cells. In one table cell, there can be multiple paragraphs. On the contrary, an image element cannot contain any other elements in it.

In other words, all elements have a parent element, but some elements may not have any content or child elements.

The Level 1 element’s parent is the document.

Elements have Attributes and Styles:

Element attributes provide additional information about the elements, such as a content command fetching dynamic data into the element. Click here for more information on How to use element attributes.
An element can have one or multiple style references. A style defines how the element will look in the document (font, size, color etc.). Click here for more information on How to add custom styles to element.

This page covers the 2 types of elements and their differences, and how to spot elements in the template.

2 types of elements: Block and inline

A block-level element always starts on a new line, and there is typically some space (a margin) before and after the element. Two commonly used block elements are Paragraph and Group <div>. A block-level element takes up the full width available.
An inline element does not start on a new line. An inline element cannot contain a block-level element. The most commonly used inline element is Span . Other examples of inline elements are Bold and Italic . An inline element only takes up as much width as necessary.

We recommend using block-level elements for multiple-line text while inline elements are best for short texts that stay within the same line of a paragraph.

Identifying elements in the template editor

Elements can be easily spotted depending on which view is being used:

Breadcrumbs view

The visual editor shows selected elements and parent elements in the breadcrumbs. An element highlighted in blue color has at least one active content command. A content command is active if it has a value.

Source code view (advanced)

In source code, HTML elements are defined by a start tag, some content, and an end tag e.g. Content here

Content commands are defined by dyn- prefix attributes e.g.: [Name].