Editor blocks

Editor blocks are the various blocks available in the Drag & Drop Editor under the Content section. This section includes a series of tiles that represent the different kinds of content you can use in your message.

To use them, drag an editor block inside a column. It will auto-adjust to the column width. Each editor block has its owns settings, such as granular control on padding. The right-side panel automatically switches to a property panel for the selected content element.

Types

The following table describes how users can use each editor block type.

name	description
Title	Adds text with H1, H2, and H3 tags for email.
Paragraph	Enters text into their message. A toolbar helps with font and text editing functionality.
Image	Inserts an image from the Media Library.
Button	Adds a standard button. Properties for this block allow for editing and setting links easily.
Divider	Inserts a solid, dotted, or dashed line to help with spacing.
HTML	Inserts raw HTML. Great for advanced Liquid such as Connected Content or conditional statements.
Menu	Creates a flexible menu for the message you’re designing.
Spacer	Adds space, or “padding”, between other blocks.
Social Icon	Inserts social media platform icon. Custom images can be uploaded for brand specific icons. An oversized placeholder icon will be used until an image is uploaded.
Video	Creates a link to the video content.

Properties

Details for each editor block’s properties are provided in the following tables.

Title

properties	description
Title	Selects the heading style. Only H1, H2, or H3 are available.
Font family	This is the font style for your title.
Font weight	This is the overall boldness of the font.
Font size	Determines the size of your text.
Text color	Modifies the color of the title.
Link color	Modifies the color of the link.
Align	Moves the title to be left, center or right-oriented.
Line height	Modifies the distance between lines of text.
Line spacing	Modifies the distance in between each character.
Text direction	Default left-to-right, but can be edited to be right-to-left.

Paragraph

Refer to the following table for details on the Paragraph editor block properties.

properties	description
Font family	This is the font style for your paragraph text.
Font weight	This is the overall boldness of the font.
Font size	Determines the size of your text.
Text color	Modifies the color of the title.
Link color	Modifies the color of the link.
Align	Moves the title to be left, center or right-oriented.
Paragraph spacing	Modifies the space between paragraphs.
Line height	Modifies the distance between lines of text.
Letter spacing	Modifies the distance in between each character.
Text direction	Default left-to-right, but can be edited to be right-to-left.

List

Refer to the following table for details on the List editor block properties.

properties	description
List type	This is the type of list. Can be either bulleted or numbered.
List style type	Determines the style of your list.
Start list from	Determines the starting number for your list.
Font family	This is the font style for your paragraph text.
Font weight	This is the overall boldness of the font.
Font size	Determines the size of your text.
Text color	Modifies the color of the title.
Link color	Modifies the color of the link.
Align	Moves the title to be left, center or right-oriented.
List items spacing	Modifies the space between list items.
List items indent	Modifies the indentation of list items.
Line height	Modifies the distance between lines of text.
Letter spacing	Modifies the distance in between each character.
Text direction	Default left-to-right, but can be edited to be right-to-left.

Image

Refer to the following table for details on the Image editor block.

properties	description
Auto Width	Modifies the pixels of the image.
Align	Moves the image to be either left, center or right-oriented.
URL	The hosted address for your image.
Alternate text	The written copy that appears in place of an image when the image fails to load.

Button

Refer to the following table for details on the Button editor block.

properties	description
Link Type	Determines the action when clicking the button and sets the appropriate link protocol.
URL	Dynamic based on the selected Link Type.

Divider

Refer to the following table for details on the Divider editor block.

properties	description
Transparent	If enabled, ‘line’ and ‘width’ options are removed.
Line	The different line formats, whether dotted, spotted, or solid. In addition, you can modify the thickness and color of the divider line.
Width	Adjusts the spread of the divider in increments of 5.
Align	Moves the line to be either left, center, or right-oriented.

HTML

Refer to the following table for details on the HTML editor block.

properties	description
html editor	Enter the raw HTML.

Menu

Refer to the following table for details on the Menu editor block.

properties	description
Configure menu items	Add a menu item.
Font Family	The style to be used for your menu.
Font Size	The size of your menu.
Text Color	Modifies the color of the menu.
Link Color	Modifies the color of the menu text.
Align	Moves the menu to be left, center or right-oriented.
Letter spacing	Modifies the distance in between each character.
Layout	Determines the layout to be either horizontal or vertical.
Separator	Add character(s) between the menu options.
Mobile menu	Includes options to modify the icon size, color, and icon type when shown on a mobile device.
Item padding	Modifies the padding by using either the + or - button, or by entering a specific number.
All sides	Sets a consistent padding number if Item padding is disabled.

Spacer

Refer to the following table for details on the Spacer editor block.

properties	description
Height	Adjusts the height of the spacer block. The default is 60px.

Social icon

Refer to the following table for details on the Social Icon editor block.

properties	description
Select icon collection	The style of your icon collection.
Configure icon collection	Sets the URL for each social icon. Includes the More options toggle to edit the title and alternative text.

Video

Refer to the following table for details on the Video editor block.

properties	description
URL	The URL for the video.
Title	Auto-generated from the video meta data or can be customized. Note that only Youtube and Vimeo are supported.
Play Icon Style	Includes different options for the play button located at the top of a video image.
Play Icon Color	Option to select either Light or Dark for the play button.
Play Icon Size	Choose the pixel size for the play button. Pre-fixed range from 50 px to 80 px (incremented by 5 px).

Add Liquid personalization

Refer to the following table for details on Add Personalization.

name	description
Add Personalization	Allows you to lookup standard Liquid snippets such as standard (default) attributes, custom attributes, Content Blocks, and more.