This guide reviews the components and functions you will be able use when building message in Listrak's drag-and-drop editor, Listrak Composer.
💡 Ready to get started? See Composer in action in Lisrak's Email Building Video Library
Composer Panels
The composer panels in the configuration pane on the right side control the high-level settings for the builder.
Elements
This panel contains the main drag-and-drop components that will be used to build an email or template.
Structures: The column structures used to create an email. Each structure can be stacked, scaled, or hidden on mobile. Even-number columned structures have additional mobile properties.
Content: The individual components that can be added into the structures to create a unique email design. Multiple content components can be placed within a single structure. Each component has it's own properties that can be adjusted.
Structured Content: These components may differ based on where Composer is being used and what solutions are enabled in the Listrak account. Structured Content uses additional data or configured outside of a specific message.
⚠️ Some structured content options require additional solutions to be enabled within Listrak in order to appear in Composer.
Properties
The properties panel displays structure-level properties and can be customized for each structure included in the email or template. The properties panel controls structure-level background colors, vertical alignment, and spacing.
Settings
The settings panel displays message-level properties for the email or template. The settings panel controls message-level background color and default font properties.
Available Structures
The following structures are available in Composer to form the grid layout of your email or template
One-Column: A 600px-wide structure that can be shown on desktop and shown or hidden on mobile.
Two-Column: A structure that can be adjusted on both desktop and mobile. On mobile the structure can be scaled, hidden, or stacked. When stacking, select if the left (column A) or right (column B) should be displayed on top. The two-column structures can be adjusted to the following desktop dimensions:
150px/450px
200px/400px
300px/300px
400px/200px
450px/150px
Three-Column: Each cell in the three-column structure is 200px wide and can be scaled down, hidden, or stacked on mobile.
Four-Column: Each cell in the structure is 150px wide and can be scaled down, hidden, stacked, or wrapped in a 2x2 configuration on mobile.
Six-Block: This block comprises two three-column structures stacked on top of each other with each cell being 200px wide on desktop. On mobile, the block can be scaled, hidden, stacked, or wrapped in a 2x3 configuration.
Available Content
Content can be added to any of the columns of a structure. Structures and content can be paired in a 1:1 manor with one piece of content per column in a structure, or multiple pieces of content may be stacked inside of a structure. For example, if adding product information you may stack an image of the product and a text element to include the title.
Navigation: A series of 'cards' that each contain a text input that can represent quick points a contact may want to navigate to on the site. The navigation can be customized using different numbers of cards, specifying a font family, font color, font size, and more. The navigation can be shown or hidden on desktop or hidden, wrapped, or stacked on mobile.
Image: The most commonly-used content component, the image component allows you to select an image from Listrak's media library or select an image from a third-party source. Adjust the width, add alternative text, or add a border around images when adjusting properties.
Button: The button will display the clickable component even with images disabled. Adjust properties such as the text, font family, font color, font size, button color, and shape.
Headline: One of two text components that is brought in at a larger text size than the text element. The properties are the same as the text element below.
Text: A smaller font size text component used for the body copy of emails. Adjust the text component using the same properties as a standard text editor including font family, font color, bolding, and alignment. Add links to text content or use Listrak's system and personalization fields to enhance content.
Divider: A simple component meant to delineate sections of content. Adjust color, width, and pattern of the divider to fit the branding of an email or template.
Social: A series of 'cards' that represent major social networking sites that can be styled using pre-built designs, shapes, and colors, or using custom-built icons.
HTML: The custom HTML element can be added to any structure in Composer to unlock additional styling functionality. Some HTML functionality, such as head styles, cannot be used in the HTML component.
Available Structed Content
Saved Content: A section of created content that can be used across multiple emails, templates, and triggered campaigns. Saved content automatically updates across all messages if a change is made.
Dynamic Content: A feature that changes a section of the email, such as a banner, for contacts based on Listrak's legacy filtering criteria. Up to 10 different versions of the changeable section can be included in a dynamic content element.
Product Block: The product block utilizes integrated product data to easily pull in and style information such as title, image, price, and sale price (if used) for products featured in email. After the products are selected, adjust properties such as font size, font color, and product layout. You can also manually populate the data and use the block to easily control the styling.
Predictive Content: A structured content component available when the Predictive Content solution is enabled that allows blog posts to easily be featured in an email. Posts are dynamic based on a contact's site behavior and can be styled to appear with different layouts, adjust font colors, and adjust font families.
Recommended Products: A structured content component available when a merchandise block is enabled as part of the Product Recommendation solution. These blocks dynamically display products based on specifically designed logic.
Structure-Level Properties
The properties panel controls overall settings for each structure. Learn more about the properties below. These can be accessed when clicking on an element in a structure or clicking outside of the dotted lines.
Message Styles: These color properties are available in both the properties and settings panel and apply to the entire message or template.
Body Background Color: Applies the same color to the background of the entire message. The entire canvas will inherit this color.
Content Background Color: Applies the same color to the background of all content sections of an entire message. The section of the canvas between the dotted lines will inherit the color.
Row Properties: Properties that apply to the selected structure and can differ per structure.
Row Background Color: Applies a color to a section of the entire canvas based on the height of the selected structure. The height of the structure is determined by the content included in the structure.
Content Background Color: Applies a color to a section of the canvas between the dotted lines based on the height of the selected structure.
Background Image: Displays an image instead of a color in the selected section. An image can be the full width of the canvas or just the 600px of the content. The height of the background image is determined by the content in the selected structure.
Spacing: Add additional px spacing above or below the content contained in a structure.
Border: Specify a color, width, and style of vertical lines that will appear at the top and bottom of the selected structure.
Message-Level Properties
The message-level properties can be adjusted in the settings panel in Composer to control high-level settings. Adjusting these properties will impact all elements added moving forward. Elements that have been left as the default settings will also be adjusted.
Message Styles: These color properties are available in both the properties and settings panel and apply to the entire message or template.
Body Background Color: Applies the same color to the background of the entire message. The entire canvas will inherit this color.
Content Background Color: Applies the same color to the background of all content sections of an entire message. The section of the canvas between the dotted lines will inherit the color.
Font Styles: Adjusting the font style will adjust any element containing live text (navigation, button, headline, text) that is added after the changes are made or any already added element that is using the current default font family.
Font Family: Select a default front from Listrak's pre-added font or an uploaded custom font.
Language: This setting controls the language attribute in the HTML of the finalized Composer email. The language attribute can impact software used by the end-user, such as screen readers.