Basic

Blocks containers

The content block is a central element in integration. It is a rectangular element that contains layers inside.
Block01_0d88782eae.png
The element on the left is a block because it is rectangular. The element on the right is an image because it is not rectangular.

When integrated in HTML/CSS, the height of the block is dynamic. If an element inside grows or shrinks, the block will also change in size.
Block02_865dde453c.gif
🚨 The three requirements for HTML embedding: 

' The block must have a rectangular shape (otherwise it is an image)

' The block must not be overlapped by another layer

' The block must not have opacity, rotation or gradient (not recognized by email clients).
Avoid non-rectangular shapes
If you have a non-rectangular shape on purpose, try splitting your shape into 2 separate but glued layers.
Bloc03_eb3ea4f2fb.gif
Avoid overlaps
Likewise, if you have a desired overlap, try splitting your shape into two layers.
Block04_6f468c5192.gif
Some concrete examples
Here are some cases on the organization of blocks where it is necessary either to separate into two layers an element that overlaps the layer, or to separate into two the container block itself.
Example 1
Block - Exemple01.png
The image on the right must be split in two to avoid overlapping with the orange block
Example 2

Block - Exemple02.png
On the other hand, the orange layer must be split in two to avoid overlapping.
Example 3
Block - Exemple03.png
Here you need to split the fruit image in two as well as the container block. With this division, the orange block will be at least the size of the fruit and will increase in size if we add text.


Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.