Skip to content

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.
Text 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.

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 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.

Text

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

properties description
Text Color Modifies the color of the title.
Link Color Modifies the color of the link.
Line Height Modifies the distance between lines of text
Line spacing Modifies the distance in between each character

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

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.

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 default attributes, custom attributes, Content Blocks, and more.
WAS THIS PAGE HELPFUL?
New Stuff!