Sculpt Templates

Overview

A Sculpt Template is the HTML framework you drag Blocks into. When creating a message using the Sculpt editor, you start with a Sculpt Template then 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 want to skip ahead, you can download an example Template and Blocks here.

Steps

Follow these steps—described in more detail below—to create a Sculpt Template:

1. Create your HTML framework.

2. Create the Sculpt Template.

3. Create the Template Settings Form.

4. Add variable key names to your HTML.

5. Paste the final HTML content into Sculpt.

6. Preview and save your Template.

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

Droppable tag

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.

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, and more), or elements hidden from view (such as pre-header text), using the Template Settings Form.
Predefined layouts: Templates can also contain specified Blocks from your Block library, enabling 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>

Example framework

We'll use the following HTML code as our example framework. 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>

This example code is for demonstration purposes and not fully tested for email rendering in all inbox providers. Always test rendering before sending live messages.

Create the Sculpt Template

1. Log in to Cordial and navigate to Content > Sculpt Templates > New to create a new Template.

2. Fill out the fields for your new Template:

Template name: The Template name will be used to identify the Template 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'll 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.

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.

Create the Template Settings Form

The Template Settings Form enables you to customize your content settings. We'll cover how to 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.

Create the form

To create the form, click the Settings Form Builder button.

Link appends section

First, we'll create the form for our link appends. In the Form Builder, we'll need to create the section and field.

1. Click into the Settings 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).

2. Select Create Your First Field. The field will be used to enter the link append text during message creation. Give the field label a name.

3. Select the Field Type. The field type will be used to determine which data type the field will collect.

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 the 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. You can set this field to be required by selecting Field is 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 creating a link appends section, create a section with a field called Pre-header text set as a Text field type. Once finished, you can preview the entire form in the left pane.

Updated HTML example

Below is the updated HTML example containing a link append and pre-header text added to the logo link. Next, we'll create another Template Settings Form and add the Template settings variables to your 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>

Insert an image into a Sculpt Template

Before you can insert an image into a Sculpt Template, you need to upload it into the image library.

1. To insert an image into your Sculpt Template, click the Form Builder button and choose Image Selector under Form element type.

2. Click the Image library button.

3. Depending on your preference, choose the Thumbnail or Table view under Settings.

4. Locate the image you want to use and click on it or select Insert.

Thumbnail view: Click the image to insert it or select the ellipsis button and choose Insert.

Table view: Click the image to insert it or select the dropdown arrow and choose Insert.

5. The image will be inserted into your Template.

Add variable key names to your 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.

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 in the Template Editor pane.

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

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.

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

4. Wherever you want the link appends variable (this example uses google_tracking.campaign) to populate, paste the following Smarty code:

{$TemplateSettings.google_tracking.campaign}

5. For the pre-header text, paste the 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.

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

When importing a 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 example Template and Blocks

To get started, you can download our example Template and Blocks in your account.

How can we help?

Sculpt Templates

Overview

Steps

Create your HTML framework

Droppable tag

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

Example framework

Create the Sculpt Template

Create the Template Settings Form

Create the form

Link appends section

Pre-header text section

Updated HTML example

Insert an image into a Sculpt Template

Add variable key names to your HTML

Access variable key names

Paste the final HTML

Preview and save

Export and import Templates

Export Templates

Import Templates

Download example Template and Blocks

Comments

<%= previousTitle %>

<%= nextTitle %>

In this article

<%= heading %>

<%= block.name %>

<%= heading %>

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Have a question?

Categories

Toggle navigation menu

<%= category.name %>

How can we help?

Search

Overview

Steps

Create your HTML framework

Droppable tag

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

Example framework

Create the Sculpt Template

Create the Template Settings Form

Create the form

Link appends section

Pre-header text section

Updated HTML example

Insert an image into a Sculpt Template

Add variable key names to your HTML

Access variable key names

Paste the final HTML

Preview and save

Export and import Templates

Export Templates

Import Templates

Download example Template and Blocks

<%= previousTitle %>

<%= nextTitle %>

In this article

<%= heading %>

<%= block.name %>

<%= heading %>

<% if (block.html_url) { %> <%= block.name %> <% } else { %> <%= block.name %> <% } %>

Have a question?

Categories

Toggle navigation menu

<%= category.name %>

Categories

Categories