Block properties
Clicking a block opens its properties panel. The panel is built from sections — collapsed groups of settings that expand with the "+" button. Most blocks share the same set of sections: paddings, size, background, border, roundings, alignment, and visibility. This article covers them in detail; the articles for individual blocks give short lists with a link here, while block-specific properties (the link of a button, the columns of a block, etc.) are described in the articles of the blocks themselves.
Below the properties panel there are collapsed panels of the selected block's parent elements: Column, Block, and Stripe. They let you jump to the settings of any hierarchy level without clicking the block on the canvas.
Paddings
The Paddings section sets the inner spacing — the distance between the block content and its container borders. By default two values are configured: horizontal padding (left and right) and vertical padding (top and bottom). The toggle next to the fields splits the shared values into separate paddings for each side.
The Margins section sets the distance between the block borders and the email layout or neighboring blocks. It works the same way: one shared value or per side.
Inner paddings are available for almost all blocks; outer margins — for containers, for example a block. A table also has paddings inside its cells, in addition to the container paddings.
Size
Size is set for the container or a block element.
Width is set in percent or pixels: the container takes the specified share of the email width. Height is set in pixels.
For some blocks, size is moved to separate sections: for a block these are the column widths and the gap between them, for social networks the logo size, and for a classic carousel the image height. These settings are described in the articles of the corresponding blocks.
Background
The Container background section sets a fill or a background image covering the entire container area. The background color is picked in the palette (see "Color picker"); instead of a color, you can upload an image from your device or from the Pixcraft gallery.
A container background is available for text, list, menu, table, and block. Block elements have their own fills: the button background, the background color of social logos, the background color of form fields.
Border and roundings
The Container borders section adds a border around the container: its color, thickness, and line style. There is no border by default — to add one, click "+" in the section.
The Container roundings section sets the corner radius of the container. By default one value applies to all corners; a toggle lets you set the rounding of each corner separately.
Container borders and roundings are available for text, image, list, menu, and block. Block elements have their own borders and roundings: buttons, social logos, form fields.
Alignment
Alignment works on two levels:
- content inside the container — for example, text or an image: left, center, or right;
- the block in the email: to the left, in the middle, or to the right.
A block with columns also has vertical content alignment: top, middle, or bottom.
Visibility
The Visibility section determines where the block is shown. The setting consists of two rows of switches:
- email version: Everywhere — the block goes into both the HTML and the AMP version; AMP — into the AMP version only; HTML — into the HTML version only;
- device: Everywhere, Desktop, or Mobile.
Hidden combinations are not included in the email. This is handy when different versions of the email need different content: for example, show one image on mobile devices and another one on desktop.
AMP components — the carousel and the form — have no HTML version: such a block is not displayed in HTML emails, so they have no "email version" row.
Color picker
The color of the background, borders, text, and other elements is picked in the palette: a saturation gradient field, a hue scale, and a HEX code field.
Next to the color fields there is an eyedropper: it picks a color from any point of the screen, including outside the browser window. The eyedropper works only in Chromium-based browsers.