Configure content block properties for email templates in Marketing Pro

  • Updated on Mar 27, 2026
  • Published on Mar 12, 2026
  • 6 minute(s) read
Prev Next

Overview

Content blocks let you customize the appearance, placement, and behavior of elements in your content. By adjusting these properties, you can ensure your content is clean, easy to read, and looks great on both mobile and desktop devices.

Who uses this feature

  • Marketing managers, business owners, and other marketers on your team

  • Primarily benefits Residential Service and Replacement business types and Commercial Service and Replacement business types

  • Applies to all trades

Feature configuration

  • To get started with Marketing Pro, request a demo on our Pro Products page, or reach out to your Customer Success Manager (CSM) or Pro Account Manager (PAM).

  • The Can access ServiceTitan Marketing Pro module permission is required to use this feature. Please contact the account administrator on your team.

Image properties

Use these settings to customize the appearance and behavior of an image block:

  • Width: Set a specific width for the image or choose Auto width to automatically adjust the image's width to fit the available space. You can also choose to use the full width on mobile devices. Settings panel displaying width adjustment options and mobile display settings.

  • Align: Position the image to the Left, Center, or Right. Alignment options displayed with icons for text formatting in a user interface.

  • Dynamic image: Enable this to use a Dynamic Url for the image source. The editor will display a sample image, but the final output will use the dynamic URL. Make sure the sample image and the dynamic image are the same size. Instructions for enabling dynamic images and setting sample image URL in editor.

  • Image: Click Change image to upload your own image or search for free photos to use as the icon. You can also click Apply effects to add filters, resize, crop, or make other edits. Logo displayed prominently for branding and identification purposes on the webpage.

  • Action: Link the image to a specific action such as opening a web page, sending an email, making a call, or sending an SMS. Form fields for linking to a webpage with options for special links.

  • Block Options:        

    • Padding: Control the spacing around the image block. You can apply padding to all sides or customize each side individually.

    • Hide on: Choose to hide the image block on Desktop or Mobile devices. By default, the block is visible on both. Settings panel displaying block options for padding and visibility adjustments.

Button properties

Customize the look and behavior of your buttons with these settings:

  • Action: Link the button to an action, like opening a web page, sending an email, making a call, or sending an SMS. Button properties section showing link type and URL input for web page action.

  • Button Options:        

    • Width: Set a specific width for the button or choose Auto width to automatically adjust the image's width to fit the available space.

    • Font: Customize the text on the button by selecting the Font family, Font weight (regular or bold), and Font size.

    • Color: Choose the Background color of the button and the Text color of the button's label.

    • Align: Position the button to the Left, Center, or Right.

    • Spacing: Adjust the Line height and Letter spacing of the button text.

    • Text direction: Set the text direction from Left to right or Right to left.

    • Border: Add a Border and adjust the Border radius to make the button's corners rounded. Higher values create rounder corners, while lower values result in sharper corners.

    Settings for button options including font, color, padding, and border adjustments.

  • Block Options:

    • Padding: Control the spacing around the button block. You can apply padding to all sides or customize each side individually.

    • Hide on: Choose to hide the button on Desktop or Mobile devices. By default, the block is visible on both. Settings panel displaying padding options and visibility controls for block elements.

Divider properties

Use these settings to customize the appearance and placement of a divider.

  • Transparent: Turn this on to create a transparent divider. If enabled, you can set the Height. Settings panel showing options for transparency and height adjustment controls.

  • Line: If the divider is not transparent, you can customize the divider by setting the line type and color, width, and alignment. Settings panel displaying options for line style, width, and alignment adjustments.

  • Block Options:        

    • Padding: Control the spacing around the divider block. You can apply padding to all sides or customize each side individually.

    • Hide on: Choose to hide the divider on Desktop or Mobile devices. By default, the block is visible on both. Settings panel displaying block options for padding and visibility adjustments.

Social properties

Use these settings to add and customize social media icons:

  • Select icon collection: Select the icon set you want to use for your social media links. Each set includes an icon for Facebook, X (Twitter), Instagram, and LinkedIn. Icons for social media platforms including Facebook, Instagram, and LinkedIn for selection.

  • Configure icon collection: Set the URL for each of your social media sites. You can also:        

    • Click More options to set the Title and Alt text for a site.

    • Click + Add new icon to add more icons for other sites, such as Discord or YouTube. Configuration options for Facebook and Instagram icons with URLs and titles displayed.

  • Align: Position the icons to the Left, Center, or Right. Alignment options displayed with icons for text formatting in a user interface.

  • Icon spacing: Adjust the amount of space between each social media icon. Higher values add more space, while lower values reduce the amount of space. Settings for icon spacing adjustment, currently set to ten units.

  • Block Options:        

    • Padding: Control the spacing around the social block. You can apply padding to all sides or customize each side individually.

    • Hide on: Choose to hide the social block on Desktop or Mobile devices. By default, the block is visible on both. Settings panel displaying padding options and visibility toggle for block elements.

HTML properties

Use these settings to add custom HTML code to the template:

  • HTML Block: Enter your own custom HTML code. Be aware that this may affect how the final message is displayed. Make sure to use correct and responsive HTML to ensure it renders properly across all devices. HTML code snippet showing a new block with a specific class name.

  • Block Options: Choose to hide the HTML block on either Desktop or Mobile devices. By default, the block is visible on both. Options for blocking content with toggle switch and device icons displayed.

Video properties

Use these settings to customize a video block:

  • Url: Add a YouTube or Vimeo URL. A preview image will automatically generate and link to the video.

  • Title: The title automatically generates from the URL you enter. You can edit the title as needed. Video preview for a tutorial on enhancing template design skills with Mark.

  • Play icon:        

    • Play icon type: Select the style of the play icon.

    • Play icon color: Choose between Light or Dark.

    • Play icon size: Set the size of the icon in pixels. Settings for a round solid light play icon with specified size options.

  • Block Options:        

    • Padding: Control the spacing around the video block. You can apply padding to all sides or customize each side individually.

    • Hide on: Choose to hide the video block on Desktop or Mobile devices. By default, the block is visible on both. Settings panel displaying block options for padding and visibility adjustments.

Icons properties

Use these settings to customize a video block:

  • Configure icon collection: Click + Add New Icon to add a new icon to the block. For each icon, you can:        

    • Click Change image to upload your own image or search for free photos to use as the icon. You can also click Apply effects to add filters, resize, crop, or make other edits.

    • Click More options to edit the Image url, Alt text, and Icon text for the icon. You can also configure the link action, such as opening a web page or sending an email. Configuration panel for adding new icons with options for image and link settings.

  • Font: Customize the text that appears with the icons by selecting the Font family, Font weight (regular or bold), Font size, and Text color. Settings panel displaying font family, weight, size, and text color options.

  • Align: Position the icons to the Left, Center, or Right. Alignment options displayed with icons for text formatting in a user interface.

  • Spacing:        

    • Letter spacing: Set the space between the letters in the icon text.

    • Icon size: Set the size of the icons in pixels.

    • Icon spacing: Adjust the space between each icon.

    • Icon padding: Control the space around each individual icon. You can apply padding to all sides or customize each side individually. Settings panel displaying options for letter spacing, icon size, and padding adjustments.

  • Block Options:        

    • Padding: Control the spacing around the icon block. You can apply padding to all sides or customize each side individually.

    • Hide on: Choose to hide the icon block on Desktop or Mobile devices. By default, the block is visible on both. Settings panel displaying block options for padding and visibility controls.

Text properties

Use these settings to customize a text block:

  • Text color: Select a color for the text.

  • Link color: Select a color for any links in the text block.

  • Line height: Adjust the spacing between lines of text.

  • Letter spacing: Set the space between the letters in the text. Settings for text properties including color, line height, and letter spacing adjustments.

  • Block options:        

    • Padding: Control the spacing around the text block. You can apply padding to all sides or customize each side individually.

    • Hide on: Choose to hide the text block on Desktop or Mobile devices. By default, the block is visible on both. Settings panel displaying padding options and a placeholder for an image block.

Want to learn more?

Related articles