How can we help?

Search

Sculpt Templates

Overview

A Sculpt template is the HTML framework (or shell) that can accept draggable Sculpt blocks. When creating a message using the Sculpt editor, you always start with a Sculpt template and add Sculpt blocks from the block library. Sculpt blocks can also be saved with the template to create pre-defined layouts.

This article will guide you through the process of creating a Sculpt template. If you'd like to skip ahead, you can download the example template and blocks here.

Create Sculpt templates video

The following video provides an overview for creating Sculpt templates in your account.

Droppable area

Templates are non-editable in the message editor unless you define a droppable area that accepts Sculpt blocks using the sculpt-droppable tag.

Example of using a table cell as droppable area for Sculpt blocks

<td sculpt-droppable="true"></td>

You can create multiple droppable areas within a template using the above tag. This will allow you to lock down certain areas of the template from being editable, such as a header or footer, while allowing other areas to accept blocks from the library.

Note: When a new template is created, the sculpt-droppable="true" attribute is included on the <body> tag. If you want to lock down parts of a custom template, this attribute will need to be removed and added to specific HTML elements you want to be droppable.
  • Template settings: Templates can contain template settings that allow you to customize global variables within a template (link appends, button color, etc.), or elements that are hidden from view (eg. pre-header text), using the template settings form.
  • Predefined layouts: Templates can also contain specified blocks from your block library, allowing you to create predefined layouts in your template. Use the following tag and reference the block key for each Sculpt block you want to include in the template:
<block type="block_key"></block>

Our example

The following code will be used as our example. The table <td> element contains the sculpt-droppable="true" attribute for accepting blocks during message creation.

<html>
   <meta name="viewport" content="width=device-width" initial-scale="1">
   <meta charset="UTF-8">
   <head>
	<title>Sculpt Template</title>
    <style>
    @media screen and (max-width: 579px) {
    .mobile_width {
    width: 100%;
    margin: auto;
    }
    .block {
    display: block;
    }
    }
  </style>
  </head>
  <body>
    <table width="579" border="0" align="center" cellpadding="0" cellspacing="0"  class="mobile_width">
  <tbody>
  <tr>
  <td style="text-align: center; padding:10px 0px"><a href="http://www.cordial.com"><img src="https://d1ok0qgebci2d3.cloudfront.net/34/124x124/logo.png" /></a></td>
  </tr>
  </tbody>
  </table>
    <table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
  <tr>
  <td bgcolor="#292929" sculpt-droppable="true">&nbsp;</td>
  </tr>
  <tr>
  <td align="center" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#666666; padding: 20px"><strong>Cordial Threads</strong><br>
    701 B St, San Diego, CA 92101</td>
  </tr>
  </tbody>
  </table>
  </body>
  </html>
Note: The example code above is for demonstration purposes and not fully tested for email rendering in all inbox providers. Make sure to always test rendering before sending live messages.

Create the HTML framework

We recommend first building your complete HTML message with all desired blocks and testing for proper rendering. Once the message is rendering as expected, you can use it to create a Sculpt template and the associated Sculpt blocks.

The HTML framework needs to consist of valid code and contain the Sculpt Droppable tag. At the minimum, the Sculpt template should contain the <html>,<head>(with nested styles), and <body> tags to make it a valid HTML document. Sculpt blocks should also be complete HTML elements (i.e. <table> or <div> tags) that can be added to the template without creating any code conflict or validation problems.

Create the Sculpt template

1. Navigate to Content > Sculpt Templates and create a new template.

2. Fill out the fields for the new template:

  • Template name: The template name will be used to identify it during message creation.
  • Template tags: Give the template any desired tags.
  • Block library settings: Choose which blocks will be displayed in the block library during message creation.
    • All blocks: All blocks will be available in the library for the template.
    • Blocks sharing any of the above tag values: Only blocks containing the same tags will be available in the block library for the template. This is useful for restricting block usage per template.

3. You will be taken to the Sculpt Template Editor, where you can paste in your HTML and save the template.

4. The top right navigation buttons link to the following Sculpt Editor features:

  • Template Editor: For pasting in and/or editing the HTML.
  • Settings Form Builder: For creating a form that controls template settings. This form will be used during message creation to customize the template setting values.

5. Save your template if there are no template settings. If you have no template settings in your Sculpt template, you can paste your HTML into the template editor and save the template. The template will then display in the Sculpt template list during message creation.

6. If you have template settings to configure, the next step is to build a form that will generate the variable key names.

Note: The use of proper HTML markup is highly recommended to avoid message rendering issues. Using HTML block elements within inline elements could cause unintended content formatting problems.

Build the template settings form

The template settings form enables you to customize template settings content.

We'll add two template settings to our template: link appends and pre-header text.

  • Link appends: Link append values will be used throughout the template (and template blocks) wherever the variable is placed in the HTML (at the end of every link). During message creation, you can use the form to add link append values.
  • Pre-header text: The pre-header text is configured as a template setting because it's hidden from the rendered HTML preview (using CSS display:none). During message creation, you can use the form to add the pre-header text content.

Updated HTML example

Below is the updated HTML example containing pre-header text and a link append added to the logo link. Next, we'll need to create a template settings form and add the template settings variables to the HTML.

<html>
	<meta name="viewport" content="width=device-width" initial-scale="1">
	<meta charset="UTF-8">
    <head>
    <title>Sculpt Template</title>
    <style>
    @media screen and (max-width: 579px) {
    .mobile_width {
    width: 100%;
    margin: auto;
    }
    .block {
    display: block;
    }
    }
  </style>
  </head>
  <body>
    <div style="display: none;">Pre Header Text</div>
    <table width="579" border="0" align="center" cellpadding="0" cellspacing="0"  class="mobile_width">
  <tbody>
  <tr>
  <td style="text-align: center; padding:10px 0px"><a href="http://www.cordial.com?utm_campaign=sculpt_demo"><img src="https://d1ok0qgebci2d3.cloudfront.net/34/124x124/logo.png" /></a></td>
  </tr>
  </tbody>
  </table>
    <table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
  <tr>
  <td bgcolor="#292929" sculpt-droppable="true">&nbsp;</td>
  </tr>
  <tr>
  <td align="center" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#666666; padding: 20px"><strong>Cordial Threads</strong><br>
    701 B St, San Diego, CA 92101</td>
  </tr>
  </tbody>
  </table>
  </body>
  </html>

Create the form

To create the form, click on the Form Builder button. You will be taken to the Form Builder page.

Link appends section

We'll first create the form for our link appends. In the Form Builder, we'll to create the Section and the Field.

1. Click into the Form Builder and give the first section a title. The section title will be used to name the section of the form containing the associated field(s). We'll use Google Tracking for this example.

2. Click on Create Your First Field. The field will be used to enter the link append text during message creation. Give the field label a name. We'll call this one Campaign.

3. Select the Field Type. The field type will be used to determine which data type the field will collect. We will be collecting text for this field, so we'll choose the Text field type.

Available field types:

  • Checkbox: Displays a checkbox to collect a boolean value (true or false).
  • HTML editor: Displays an HTML editor for collecting raw HTML.
  • Image selector: Displays a text field for an image URL as well as a button to access the image library.
  • Text: Displays a single line text input.
  • Text area: Displays a multi line text input.
  • Color picker: Displays a color picker for selecting colors or adding hex values.
  • Number: Displays an input that accepts number values.
  • Select: Display a dropdown menu.
  • Rich text: Insert a free-form text area with a customizable text editing interface.
  • Select menu of all HTML content: Include a dropdown menu of all content in your HTML library.

4. Enter the field's Default Value. The field will be pre-populated with this default content during message creation. We'll give this field the default value of "sculpt_demo". You can also set this field to be required.

5. As you build out your form, you'll see a preview in the left pane.

Pre-header text section

Next, we'll create the form for our pre-header text. We'll use the template settings form instead of building this as a block because it's set to be invisible in the message HTML using CSS display:none.

Using the same methods as above, create a section called Hidden Content with a field called Pre-header text set as Text data type. Once finished, you can preview the entire form in the preview pane.

Add variable key names to HTML

As you create your sections and fields, the variable key names and data schema will be generated automatically in the background. You need to add the variable key names to your HTML in order for the variables to populate correctly during message creation.

Note: Sculpt template variables can be used in all message header fields (subject, from email, reply email, and from description). Visit our Dynamic Subject Lines Using Sculpt use case for a detailed example.

Access variable key names

1. To view the variable key names and data schema structure, click on the Data Output button. This will open an overlay window with the option to view the data schema in JSON format, or each of the variable names in Smarty format. You can keep this window open when referencing the variable keys in your HTML.

For our example, the following data schema was created for us in JSON format.

Note: The autogenerated data output will convert your section titles and field labels to code-friendly formats by making all characters lowercase and replacing spaces with underscores.

2. Click on the Variable names tab to access the variables you'll paste into the HTML document.

3. Wherever you want the Google Tracking variable to populate, paste the following Smarty code:

{$templateSettings.google_tracking.campaign}

4. For the pre-header text, paste the following Smarty variable in the HTML where you want the pre-header text to populate:

{$templateSettings.hidden_content.pre_header_text}

Paste the final HTML

Once the Smarty variables are updated in your HTML, paste the completed code into the Sculpt HTML editor. Below is the final HTML of our example to paste into the HTML editor. The updated variables are highlighted.

<html>
<meta name="viewport" content="width=device-width" initial-scale="1">
<meta charset="UTF-8">
<head>
<title>Sculpt Template</title>
<style>
@media screen and (max-width: 579px) {
.mobile_width {
    width: 100%;
    margin: auto;
}
.block {
    display: block;
}
}
</style>
</head>
<body>
<div style="display: none;">{$templateSettings.hidden_content.pre_header_text}</div>
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0"  class="mobile_width">
  <tbody>
    <tr>
      <td style="text-align: center; padding:10px 0px"><a href="http://www.cordial.com?{$templateSettings.google_tracking.campaign}"><img src="https://d1ok0qgebci2d3.cloudfront.net/34/124x124/logo.png" /></a></td>
    </tr>
  </tbody>
</table>
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td bgcolor="#292929" sculpt-droppable="true">&nbsp;</td>
    </tr>
    <tr>
      <td align="center" style="font-family: Arial, sans-serif; font-size:12px; line-height:18px; color:#666666; padding: 20px"><strong>Cordial Threads</strong><br>
        701 B St, San Diego, CA 92101</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Preview and save

1. To preview your template, use the dropdown to select Preview in Sculpt Editor. You can interact with the template settings form just as you would during message creation.

Note: Any changes you make in the preview will not effect default values.

2. To save the template, switch back to the Edit Template view.

3. Click Save Template.

Export and import templates

You can export and import templates by navigating to Content > Sculpt Templates. The exported/imported files contain all template data, including the HTML and form builder, making it easy to share templates across different accounts.

Export templates

1. To export a template, hover over the arrow of the desired template and choose Export.

2. To export multiple templates, select the checkboxes next to the desired templates and click the Export button that appears in the toolbar.

3. Once an export has been initiated, you can download the .zip file on the Jobs page. The .zip file can then be imported into another account.

Import templates

1. To import a template, navigate to Content > Sculpt Templates and click the Import Templates button.

2. Choose one or more Sculpt files and click the Add Files button. You will be taken to the Jobs page to see the status of the import. One the import is complete, the imported template will be available in the template library.

Note: When importing template with the same key as an existing template, the key and name of the imported template will be appended with "_copy". You cannot overwrite existing templates when importing.

Download the example template and blocks

We made it easy to use our example template and blocks in your account.

1. Download and import the example template:

2. Download and import the example blocks: 

In the next article, you can learn how to create Sculpt Blocks.

Comments

0 comments

Please sign in to leave a comment.