Building Email Structure

In an email template, the structure refers to the overall layout or design of the email. It defines the organization of various design elements such as text, images, buttons, and other interactive elements in a coherent and visually appealing manner.

Structure Elements

Structure elements provide a framework for your email design and allow you to organize the different elements of your email in a logical and visually appealing manner.

Adding Elements to your Email Content

Block

In the email editor, Block is the primary structural component that can accommodate different content and structural elements such as text, images, buttons, dividers, columns, and more. Blocks are modular units that help you structure and organize your email design. Any content elements that are added are automatically added to a block if not already being added to one. 

Blocks are easily customizable to match your branding and messaging needs and they can be saved as favorites for reusability across multiple emails. Using the blocks, you can achieve consistent and cohesive designs. Blocks are also what are used for saving content for future emails and templates.  This is why breaking content down into blocks is important. 

When emails are migrated over for use in the new editor all content from the previous email will be placed within a single block.  This means that if you want to save a portion of an existing template as a favorite block you will need to break your template up by moving content into multiple blocks so that the content you want to save is in a block on its own. 

The properties that are available for modification in the Details panel are listed below:

• Within the Block Tab
  • Block Background: This will allow you to apply a background color for the block or add a background image for the background of the block. 
  • Block Lock: This will allow you to control what can be modified within the block.
    • Editing enabled – This is the default setting and allows for everything about the block to be modified.
    • Locked design – This will lock down the design elements of the block but will allow you to edit the content of the block.
    • Locked design & content – This will lock down everything with the block.
  • Marker: This is a property for naming the block in the code behind the scenes.  This is a property that the vendor uses with developers for documenting the markup of the email.
  • Element visibility: This will allow you to determine if the block will display on Mobile Devices and Desktop Computers.  By default, both are enabled.

 

Box

The Box element is a structural element, a container for other elements in your email template. It allows you to organize and group together different design elements such as text, images, buttons, and other interactive elements.

The Box element can be used to create various layouts, such as a two-column design, a hero section, or a footer section.

The Box element can be customized in terms of its size, background color/image, and border properties. You can also adjust the padding and margin settings of the Box element to control the spacing between its contents and the edges of the container.

Adjusting the Box Element Size

To adjust the size:

1. Drag the Box element into the Email Content.
2. Click the Box element you want to resize.
3. Use the sizing handles on the edges and corners of the Box element to drag it to the desired size. Alternatively, you can also input specific values for the width and height of the Box element in the Details Panel on the right side of the editor.
4. If you want to maintain the aspect ratio of the Box element while resizing, hold down the Shift key on your keyboard while dragging the sizing handles.

Adding Background Color to Box Element

To add background color:

1. Click the Box element in your email content.
2. In the Details Panel on the right side of the editor, scroll down to the Background section.
3. Click on the color picker next to the Color option. You can choose from a wide range of colors or input the HEX or RGB value for a specific color if you have one in mind.
4. After selecting the background color, you can adjust the background color opacity using the slider next to the Opacity option if you want to make it more or less transparent.
5. You can also add a gradient background to the Box element by clicking on the Gradient option and selecting the type, angle, and colors for the gradient.

Adding Background Image

Note: Some email clients will not display background images, so please bear this in mind when choosing to use background images.

1. Click the Box element in your email content.
2. In the Details Panel on the right side of the editor, scroll down to the Background section.
3. Click the background image option and choose the image you want to use as the background. You can select an image from your computer or use a URL to link to an image hosted online.
4. Adjust the background image settings as needed. This may include options to control the image's position, size, and other properties. 

Adjusting the Box Padding Margin

To adjust the padding and margin:

1. Click the Box element in your email content.
2. On the right-hand side of the editor, you will see the Details panel.
3. Under the Paddings tab you can choose to update all paddings together or separated. To edit each side’s padding separately click to turn on the separate toggle. To edit the values for padding you may enter the amount of padding desired or use the up and down arrows to the right of the padding size to increase or decrease the amount of padding applied.
4. Under the Margins tab you can choose to update all margins together or separated. To edit each sides margin separately click to turn on the separate toggle. To edit the values for margin you may enter the amount of margin desired or use the up and down arrows to the right of the margin size to increase or decrease the amount of margin applied.  
   Note: As you adjust the padding and margin values, you can see the changes in real time in your email content.

Adjusting the Box Visibility

To adjust the visibility:

1. Click the Box element in your email content.
2. In the Details panel on the right side of the editor, click on the Element Visibility tab.
3. To have the Box display on Desktop Devices turn on Show on Desktop. To have the box display on Mobile Devices turn on Show on Mobile. 

Nesting

To next a box element into another:

1. Drag and drop the first box element into your email content.
2. Drag and drop the second box element into your email content, directly on top of the first box element.
   • Use the guidelines that appear to position the second box element inside the first box element.
3. Release the mouse button to drop the second box element into the first box element.
   • The second box element is nested inside the first box element.
     You can adjust the size, padding, margin, and other properties of both the outer and inner box elements separately.
4. To edit the properties of the inner box element, select it and open the Properties panel on the right side of the editor.
5. To edit the properties of the outer box element, select it and open the Properties panel.
   
   • You can also nest more than two box elements by repeating the above steps.

Multicolumn

A Multicolumn structure element allows you to create columns in your email content. It allows you to divide the content of an email into multiple columns, each with its own set of design properties such as width, padding, and margin. This structural element is useful when you want to create a newsletter layout or showcase multiple stories side by side in your email.

Note: You can add a multicolumn structure element to a blank email or to existing content.

Multicolumn Structure Element to a Blank Email.

1. Drag and drop the Multicolumn option element from under the Structure heading in the Left Elements Tab into your email content.
2. Once the multicolumn element is added to your email content, you can adjust its size and properties using the Details panel on the right side of the editor.
3. To add content to the multicolumn element, drag and drop the required elements into the individual columns of the multicolumn structure.

Adding Multicolumn Structure Element to Existing Content

1. Select the content block where you want to add the multicolumn structure element.
2. Drag and drop the Multicolumn option element from under the Structure heading in the Left Elements Tab into your email content.

Adding and Editing Columns

1. To add the additional columns, select the Multicolumn element in the breadcrumb, and click Add column button on the Details panel under the Multicolumn section.
   
2. Adjust the width of each column by clicking on the divider between columns in the element in your email content and dragging it to the desired width or entering a value in the column properties on the right.
   
   • With the multicolumn element selected, use the Equalize button in the properties menu on the right to set all columns to equal widths.
   • If you want to maintain the same size of a column, switch on the Lock Width option.
   • You can enter a value for the size of the columns.
   • If you want different sizes for the columns disable the Lock Width option.
   
   Note: When adjusting the size of a Multicolumn element, it will affect the content inside the columns. You can adjust the size of individual columns or resize the content inside them to achieve the required result.
   
   
3. Add content to each column by dragging and dropping text, images, buttons, or other elements.
4. Customize the styling of the multicolumn structure and the content using the options in the Properties panel and on the right.

Adjusting Multicolumn Desktop Spacing

To adjust spacing for a multicolumn structure element on desktops: 

1. Click the Multicolumn element.
2. In the Details panel on the right side of the editor expand the Multicol tab.
3. Under the Desktop Spacings section, you can adjust the spacing to the left of the table, in-between columns in the table, and to the right of the table by entering values manually or using the up and down arrows next to the size.

Adjusting Multicolumn Stacking on Mobile

To adjust how columns will be stacked on mobile devices:

1. Click the Multicolumn element in your email content.
2. In the Details panel on the right side of the editor, expand the Multicol tab.
3. Choose:
   • Left to right to have the columns stacked starting from the left.
   • Right to left to have the columns stacked starting from the right.
   • Don't reorder columns to keep the columns displaying as they are for Desktops.

Adjusting Multicolumn Mobile Spacing

To adjust spacing for a multicolumn structure element on mobiles:

1. Click the Multicolumn element.
2. In the Details panel on the right side of the editor expand the Multicol tab.
3. Under the Mobile Spacings section, you can adjust the spacing to the left of the table, in-between columns in the table, and to the right of the table by entering values manually or using the up and down arrows next to the size.

Element Visibility Option

The Element Visibility option on the Details panel allows you to show or hide specific elements in your email template. This feature is useful if you want to create different versions of your email for specific email clients or devices.

To adjust the visibility of an element or block:

1. Click the element or block you want to adjust.
2. In the Details panel on the right side of the editor, scroll down to the Element Visibility section.
3. Toggle the Visibility switch on or off to show or hide the element or block.
4. You can also adjust the visibility of an entire section or column in a multicolumn block by selecting the section or column and following the same steps.

Note: By default, the Show on mobile and Show on desktop options are enabled.