Introduction to the Block Editor


After you have created your template and clicked Save, you will be able to start designing your template.

Using the Block Editor

To get started, click the Open Editor button under HTML Version in the template record or the Full Screen button on the ribbon.

HTMLVersionOpenEditor2013

FullScreen2013

You’ll first be prompted to choose a layout.

BlockChooseLayout2013

To do so, click on the Layouts button in the top toolbar.

BlockLayoutButton2013

This will open a new window called Layouts Dialog.

BlockSelectLayout2013

We have 9 layouts to choose from, but you can always add, remove, move, and edit the blocks once you’ve selected one and it has been inserted into your template.

Layouts # 8 and 9 are special layouts where the big block on the left and right respectively will allow you to place blocks within the big one so that they will grow in height independently of the blocks next to it. In the other layouts as one block in a row grows in height so will the others. Here’s an example of Layout #8:

Layouts892013

Choose one and click Create.

Your layout will now appear in the design view. You are now ready to start editing your template.

BlockEditorLayout52013

The Top Menu

BlockEditorTools2013

Save: Make sure to click the save button to save your work.

Layouts: Opens the Layouts Dialog.

Container: The container refers to the box around the edge of the whole layout except for the Microsite and Unsubscribe blocks (described below). The following options are available:

BlockContainerMenu2013

Block Spacing: The space between each block in pixels.

Background Color: The background color of the container. This will not override block background color.

Border: The border for the whole container.

Page: The page refers to the whole window. The following options are available:

BlockPageMenu2013

Background color: Background color of the whole page, everything in the window.

Add microsite block:  Adds a block that will stay at the top of the template with the View in HTML link.

 Add unsubscribe block: Adds a block that will stay at the bottom of the template with the Unsubscribe link. This will be a global unsubscribe. You can read more about Unsubscribes here.

Add social links: Opens a dialog to choose which social buttons to add, then adds a block at the top of the template that has those social links included. If both this block and the Microsite block are added, the Microsite will be above this block. Read more about social sharing here.

Undo: Undo the last action you made.

Redo: Redo the last action you undid.

Inbox Preview: Click on this button to see how many Inbox Preview Test you have left for the month and test to see how your template will look in multiple email clients and mobile devices at the same time. To learn more see this article.

In this image, the container is white and the page is the gray around it:

BlockBGColors2013

To learn about placing and editing the content of the template check out this article.

Don’t forget to save your work!

BlockSmallSave2013

You can always Clone your Email Template to make changes while keeping the original.


After you have created your template and pressed save, you will be able to start designing your template.

Using the Block Editor

Watch a Video on the Block Editor Layout

Written Instructions

To get started, click the “Open Editor” button under HTML Version in the template record or the “Full Screen” button on the ribbon.
HTMLEditor

You’ll first be prompted to choose a layout.

To do so, click on the Layouts button in the top toolbar.

This will open a new window called Layouts Dialog.

We have 9 layouts to choose from, but you can always add, subtract, move, and edit the blocks once you’ve selected one and it has been inserted into your template.

Layouts # 8 and 9 are special layouts where the big block on the left and right respectively will allow you to place blocks within the big one so that they will grow in height independtly of the blocks next to it. In the other layouts as one block in a row grows in height so will the others. Here’s an example of Layout #9:

Choose one and click Create.

Your layout will now appear in the design view. You are now ready to start editing your email.

The Top Menu

Save: Make sure to hit this save button to save your work.

Layouts: Opens the Layouts Dialog.

Container: The container refers to the box around the edge of the whole layout except for the Microsite and Unsubscribe blocks (described below). The following options are available:

Block Spacing: The space between each block in pixels.

Background Color: The background color of the container. This will not override block background color.

Border: The border for the whole container.

Page: The page refers to the whole window. The following options are available:

Background color: Background color of the whole page, everything in the window.

Add microsite block:  Adds a block that will stay at the top of the template with the View in HTML link.

 Add unsubscribe block: Adds a block that will stay at the bottom of the template with the Unsubscribe link. This will be a global unsubscribe. You can read more about Unsubscribes here.

Add social links: Opens a dialog to choose which social buttons to add, then adds a block at the top of the template that has those social links included. If both this block and the Microsite block are added, the Microsite will be above this block. Read more about social sharing here.

Undo: Undo the last action you made.

Redo: Redo the last action you undid.

Inbox Preview: Click on this button to see how many Inbox Preview Test you have left for the month and test to see how your template will look in multiple email clients and mobile devices at the same time. To learn more see this article.

In this image, the container is grey and the page is the white around it:

To learn about placing and editing the content of the template check out this article.

Don’t forget to save your work.

You can always Clone your Email Template to make changes while keeping the original.


 

Feature Added: Original
Feature Updated: Original
ClickDimensions Version Need: Any