Structure Panel

About the Structure Panel

Here's the foundation of your Email.

The Structure Panel is to the left of the canvas.

Your Email's structure is displayed there, and updated as you customise your Email.

The main component of an Email's structure is a row. A Row is a horizontal combination of elements. A row can be split into columns in the row settings or by adding elements to it. There is a limit of four columns per row.

You can read more about row settings further below.

main1.jpg

 

On the left, in the structure panel, you will see the types of rows you'll be working on, as well as the new rows and columns that you add as you go.

editor3.jpg

 

The Structure panel also scrolls directly to the location of a row or column when you click on it in the Canvas.

sp2.jpg

 

If you have included or excluded any segments from a row, segmented rows will be identified with an icon. Read more about row segmentation on Row Settings...

Rowseg1_02.jpg

 

Hover over the row to see the row's segmentation settings.

Rowseg2_02.jpg

 

 


 

Template Structure

Did you know Emails have a template structure? A template structure is simply the way the content of the Email is organised according to placement.

editor4.jpg

 

Here's some useful information about template structure.

Click on an item below to expand:

Email Header

What is a Header?

A Header is normally where an image containing a logo or banner, a title, or an introductory text is placed.

Note: Most Emails today also contain a Pre-header. In APSIS One, this is created on the first step of creating an Email.

To learn more about how to populate this area, see Elements & Assets in the Design Panel article.

sp2.jpg

Email Body

What is the Email Body?

The Email's body is composed by the text, images and other elements you add to your Email.

To learn more about how to populate this area, see Elements & Assets in the Design Panel article.

sp3.jpg

Email Footer

What is a Footer?

The Footer is placed at the bottom of the Email and is often where Copyright information and the Unsubscribe link are located. The unsubscribe link, if you didn't know yet, is mandatory in accordance with marketing laws.

To learn more about how to populate this area, see Elements & Assets in the Design Panel article.

sp4.jpg

 

 


 

Email Rows

What is a Row?

A Row is a horizontal container of content. A row is a header, part of the body or a footer. Rows can be saved, which results in the creation of an asset. Read more about assets...

Click on an item below to expand:

Creating a Row

How to Create a Row

1. Click on the element and drag & drop it on the canvas, outside of a row, to create a new row. Note the green line marker, and make sure that it says Drop to create a new row before you drop it there.

sp5.jpg

 

Alternatively, if you're adding an asset, it will be enough to just drop it where you wish to place it. It is already a row so it will fall outside of the existing rows.

sp6.jpg

 

Renaming a Row

How to Rename a Row

You can rename a row from either the row settings or directly on the structure panel.

 

Rename from the Structure Panel

1. Double-click on the row's name and rename it directly on the structure panel.

sp7.jpg

 

 

Rename on the Row Settings

1. Open the row settings by clicking on the row in the structure panel.

sp8.jpg

2. Rename your row by editing the Row name field in the Row settings.

sp9.jpg

 

Dividing a Row into Columns

How to Divide a Row into Columns

 

1. On the Structure Panel, click on the row where you want to create an extra column.

sp10.jpg

 

2. On the canvas, locate the row that you selected. There you will see a plus sign. Click on the plus sign to add a column.

sp11.jpg

 

 

Saving a Row as an Asset

How to Save a Row as an Asset

This is only one of the actions you can perform in regards to assets. For more information about assets, head over here.

1. Start by going to the Email Editor in the Design step.

Get here either by creating an Email or by editing an existing Email.

sp3.jpg

 

 

2. Drag and drop elements from the Design Panel into a row.

Skip this step if you are creating an asset from an existing Email

sp5.jpg

 

 

3. Take a look at the Structure panel and click on the row you want to save as an asset. This will open the row settings

Remember that columns are always a part of a row.

sp14.jpg

 

4. You'll see the Row Settings on the Design Panel.

On the bottom of the settings, click Create as asset.

sp15.jpg

 

5. Enter a Name and a Description for your asset.

sp16.jpg

 

 

6. Done? Click Create.

sp17.jpg

 

Deleting a Row

How to Delete a Row

1. Click on the row you wish to delete in the structure panel, on the left.

sp14.jpg

 

 

2. On the row settings, which is on the right, click Delete.

sp19.jpg

 

 

3. Are you sure you want to delete this row? If yes, click Delete to confirm. If no, Cancel.

sp20.jpg

 

Row Settings

To open the Row Settings, click on a row in the Structure Panel. You may also do this by clicking on the area between the canvas and the Structure Panel, where a green sidebar shows if any element is selected.

sp21.jpg

 

Click on an item below to expand:

Row Name

How to Change the Name of a Row

Type it under row name in the row settings. Naming a row will allow you to keep track of it in the structure panel.

sp22.jpg

 

Row Background

How to Change the Row Background

Customise the background for the row by choosing a colour. 

sp24.jpg

 

To make it transparent, tick the Transparent box.

Otherwise, pick a colour from the colour picker.

editor25.jpg

 

If you already have a standard colour, enter the colour code in the Hex box.

sp51.jpg

 

Tip: A slightly less dark black is optimal for reading text in white backgrounds. Its colour code is #4a4a4a.

 

Go ahead and enter the colour in RGB format if you prefer that method editor27.jpg

 

The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

editor28.jpg

Row Columns

How to Divide a Row into Columns

1. On the Structure Panel, click on the row where you want to create an extra column.

rowselect2.jpg

 

2. On the canvas, locate the row that you selected. There you will see a plus sign. Click on the plus sign to add a column.

sp38.jpg

 

Device Visibility

Mobile and Desktop Device Visibility

Would you like to make this row visible only in the mobile or the desktop version of your Email? Or would you like to make it visible in both?

Click on the icons under Show on to choose on which device(s) the row will be visible. You must choose at least one device, as it is impossible to deselect both.

The icon on the left represents desktop and the icon on the right represents mobile.

sp27.jpg

 

Row Segmentation

How to Segment a Row

If you're after a practical guide to working with segments, head over to Working with Segments.

We also have a lot of content about how to create a segment and the segment builder. Check it out if you haven't yet!

 

1. On the Row Settings, click Segments.

EmailSP72.jpg

 

2. The segmentation options will expand.

Under Including Segments, click Add included to include a segment.

EmailSP1.jpg

 

3. Click Select and choose a segment from the drop-down. You may repeat this step until you've included all the segments you wish to include.

EmailSP81.jpg

 

4. You may choose to include all or any profiles that match your segments, by clicking on the any/all drop-down menu.

EmailSP2.jpg

 

5. To exclude segments, scroll to Excluding Segments and click on Add Excluded.

EmailSP70.jpg

 

6. Follow the same steps as described above for Including Segments.

 

Segmented rows will be identified with an icon.

Hover over a row to see the segmentation settings.

Rowseg2_02.jpg

 

Deleting a Row

How to Delete a Row

Would you like to delete the row? On the settings, click Delete.

sp47.jpg

 

Are you sure you want to delete this row? If yes, click Delete to confirm. If no, Cancel.

sp48.jpg

 

 


 

Email Columns

What is a Column?

A Column is a vertical section of a row. As you add elements into a row, you'll notice that you can place them next to each other, but also on top of each other. Rows contain columns in order to best arrange content, and to give you as much creative freedom as possible. There is a limit to 4 columns per row.

Click on an item below to expand:

Creating a Column

How to Add a Column into a Row

There are two simple ways to add a column or divide a row.

 

1. Choose an element to add into a new column.

Not sure which one? Read more about elements in the Design Panel article...

 

2. Click on the element or asset and drag & drop it into the row, before or next to an existing element.

If you later remove the element or asset, the column will remain.

sp46.jpg

 

You may also add a column to your row with the following method:

1. On the Structure Panel, click on the row where you want to create an extra column.

sp21.jpg

 

2. On the canvas, locate the row that you selected. There you will see a plus sign. Click on the plus sign to add a column.

sp38.jpg

 

Renaming a Column

How to Rename a Column

There are two quick ways to rename a column:

 

1. Open the column settings by clicking on the column. The settings will be displayed on the right side.

sp46.jpg

 

2. Rename your column by editing the Column name field.

sp49.jpg

 

OR

 

1. Click on the column in the structure panel

sp46.jpg

 

2. Click on the column's name and rename directly.

 

Resizing a Column

How to Resize a Column

Resizing a column will also resize the elements inside the columns in the row.

 

1. Hover over the space between the columns you want to resize.

sp43.jpg

 

2. A handle, similar to the one for the spacer element, will appear.

sp44.jpg

 

3. Click on the handle and drag it left or right to resize the column and elements. You'll notice red  lines that will help you have a better idea of the proportions of the content in the column. Also, the measure in pixels will be shown under the red line.

sp45.jpg

 

 

Deleting a Column

How to Delete a Column

1. Click on the column you wish to delete in the structure panel.

Note that all rows must have at least one column. Columns are part of the row's structure. If you only have one column left, proceed to delete the row instead.

columnselect.jpg

 

2. On the settings, click Delete. Are you sure you want to delete this column? If yes, click Delete. If no, Cancel.

sp53.jpg

  

Column Settings

To open the Column Settings, click on a column in the Structure Panel.

columnselect.jpg

 

Click on an item below to expand:

Column Name

How to Change the Column Name

Type it under column name in the column settings. Naming a column will allow you to keep track of it in the structure panel.

sp49.jpg

 

Column Background

How to Change the Column Background

Customise the background for the row by choosing a colour. 

sp52.jpg

 

To make it transparent, tick the Transparent box.

Otherwise, pick a colour from the colour picker.

sp51.jpg

 

If you already have a standard colour, enter the colour code in the Hex box.

editor52.jpg

 

Go ahead and enter the colour in RGB format if you prefer that method.

editor53.jpg

 

Tip: A slightly less dark black is optimal for reading text in white backgrounds. Its colour code is #4a4a4a.

 

The colour picker will save 16 of your recently used colours for each Email. Every new Email will have no recently used colours, but the colours will remain for each Email whenever you go back into editing.

editor54.jpg

Column Alignment

How to Change the Column Alignment 

To set the alignment for your column, click on an alignment option.

Choose between top, centre and bottom alignment.

columnAlign.jpg

Deleting a Column

How to Delete a Column

Would you like to delete the column? On the settings, click Delete.

Note that all rows must have at least one column. Columns are part of the row's structure. If you only have one column left, proceed to delete the row instead.

columnselect.jpg

 

Are you sure you want to delete this column? If yes, click Delete. If no, Cancel.

editor56.jpg

 

 


 

 

Was this article helpful?