Building Custom Blocks

Follow

IntCom.png

This article will show you how to add customized blocks to your email designs. Custom blocks are a great way to build layouts and designs that are tailored to meet specific design requirements. 

Block layouts and how you can use them

To build a custom block, we first have to select our block layout. A block layout is a frame of columns that allows you to insert different content (text, images, videos, etc.) in the form of elements. The block layout can be found on the left side of the screen in the email designer.

 mceclip0.png

There are nine block layouts to choose from. Please note that each of the block layouts shows a unique combination of different numbers and sizes of columns 

Once you’ve found the desired block layout, you can add it to your design by dragging and dropping onto the desired location in your design.

mceclip1.png

Adding elements to your design

When you have added the desired block layouts to your design, you can add elements from the Elements section on the left side of the screen.

mceclip3.png

Elements are the different kinds of content that you can add your design. This includes text, images, videos, buttons, surveys, spacers, and social links.

To add an element, click on the desired element in the elements section and hold the mouse button down while you drag the element onto your design.

mceclip4.png

As you are dragging the element, you will see the empty spaces in your block layout change colour and say “Drop Zone”. If you drag your element over top of the space, you will see it change colour again and change the text to say “Drop Element”. Once you have moved your element to the desired space in your block layout, you can place it there by releasing the mouse button.

 

Adding rows to your columns

After your desired elements have been added to the design, you can add rows to your block layouts. Rows are a way to create and add multiple elements within the same column. A common use case we see is when a user wants to add three columns, each column having an image element, a text element and a button.

mceclip6.png 

To add rows to your columns, select the desired element and drag it over top of an existing element in a column. Similar to when you added the elements to empty spaces in your design, you will see two new drop zones appear above and below your existing element. From here, you can drag your element to the desired row and release the mouse button to place the element.

Cloning Elements

Rows can be automatically added to your columns with the cloning feature. This feature will automatically clone your element and insert it in a row underneath your current element.

mceclip7.png 

The cloning feature can be used by clicking on the element you wish to clone, and then clicking on the mceclip8.pngicon that is displayed on the upper-right side of the icon. This will clone the element and insert it below your current element.

Deleting Elements

Just as rows can be added quickly with the cloning feature, the delete feature will delete an element in a row. This can be used by clicking on an element and then clicking on the mceclip10.png icon that appears on the upper-right side of the element. This will delete the element you have selected.

mceclip9.png

If there are any elements below the deleted element, they will be moved up one row so that the top row of the block has an element.

mceclip11.png

If there are no elements below the deleted element, then the block will show an empty layout space where a new element can be added.