Drag and Drop template editor: Actions with content blocks

Last Updated: Dec 30 2013 04:03 am EST

You can easily move content blocks using the drag and drop method. You don’t need complex actions, or HMTM knowledge is needed to move content blocks. You can do that with one click.


Picture No 4

Drag and drop method to move content blocks

How to use the Mailigendrag and drop method:

  • move the mouse over the content block;
  • click and hold the mouse button;
  • while holding the mouse button, drag it to the new place, and the content block will move together with it;
  • while dragging the block, you will see one or several placeholders to drop the block if releasing the mouse button.

Picture No 5. When the mouse is being moved over the block, you will see its frame. By clicking on the content block and holding the mouse button, the content block will be ready to be moved.


Picture No 6. When you start moving the block, in the previous place of the block, you will see a placeholder where the block will be moved if you release the mouse button.

Inserting block into another block

You are able not only to move content blocks above or under each other but also to place one block into another block. In this case, there must be a content free space in the block where you want to place another block. Empty content space is a part of a block that does not contain any elements. This can be checked by looking at HTML code where the space will be shown as empty. You can also delete the content from a block by pressing “Ctrl+A” to select the content and then by pressing “Delete” to erase all the content of a block.


Picture No 7. Block with an empty space that is previously deleted.

If the block has an empty space, you can move an existing block or add a new block. While dragging a block to a free space, you will see a placeholder – the place where a block will be placed.


Picture No 8. Place where one block will be placed in another block.

When the mouse button is released, the block will be placed into another block. The width and height of the moved block, as well as the image will be adjusted due to the dimensions of the main block.


Picture No 9. By releasing the mouse button, the block will be placed inside the other block, and the dimensions will be adjusted accordingly.

You can insert a new block into an existing block also from the toolbar.

Change of size within block sections

The new editor enables us to change the width of blocks without any additional settings and the change of HTML code. You can apply all the changes in the block itself.


Picture No 10. Change of size within parts of the block.

How to change the size of blocks:

  • by moving the mouse over the block, you will see a dashed line between the parts of the block;
  • press and hold the mouse button over the dashed line to change the size of the block;
  • while holding the mouse button, move it to the left or right to change the size of the block.

While moving the dashed line, in the left upper corner of each part of the block, you will see a number showing the width of each part of the block.

If into another block you move a block that contains both text and image, the image will also change according to the size of the block. This condition remains unless the size of the picture is changed separately during the process of content editing.

Editing block content

You can start editing content by clicking on the first icon on the left side of the toolbar that appears when moving the mouse pointer over the block. This function enables formatting text, inserting hyperlinks, editing images and changing their sizes and other options relating to the content.


Picture No 11. Block content editing process.

When the content editing function is enabled, additional options become available: you can change background color, size and color of lines, padding between blocks.


Picture No 12. Block content editing process.

Block background color
Block borders: side, color, size, type
Block internal padding: side, size


Block copying

You can make a copy of the block with just a single click. This may be very useful when you have to add extra information to the email but you don’t want to lose the structure of the template. To create a copy of the block, click on the middle icon ( ) which shows up when the mouse pointer moves across the block.


Picture No 13. Block copying.

Block deleting

You can delete a block with just one click. If deleting a block, the structure of the template will not change and sizes of other blocks will adjust accordingly. To delete a block, click on the icon on the right side of the toolbar ( ) that shows up when the mouse pointer moves across the block.

Adding a new content block

Add new content blocks with the drag and drop method by moving icons (with layout symbols) from the toolbar to the email content. While dragging the icon over the email content, placeholders will appear where the new block will be dropped after releasing the mouse button.


Picture No 14. Insert a new block.

As shown in the picture, there are 6 different types of layouts you can use

  • Two-piece block with a picture on the left side;
  • Two-piece block with a picture on the right side;
  • Single-piece block of picture;
  • Single-piece block of text;
  • Two-piece block of text;
  • Three-piece block of text.



New block layouts.

Mailigen's Drag and Drop editor gives you an opportunity to insert one block into another block. This means you have unlimited possibilities to create new blocks and modify the structure of an email. You can place one block into another block if it has an empty space.