In This Section

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.

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.

An example of using a table cell as droppable area for Sculpt blocks:

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

You are able to 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 would like to "lock down" parts of a custom template, this attribute will need to be removed and added to specific HTML elements you wish to be droppable.

Template Settings

Templates can contain template settings that allow the marketer to customize global variables within a template (link appends, button color, etc.) or elements that are hidden from view (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>

 Video: Creating Sculpt Templates

The following video will give you an overview creating Sculpt templates in your account:

Our Example

The following code will be used as our example. Note the table <td> element containing 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 that the provided example code above is for demonstration purposes and not fully tested for email rendering in all inbox providers. Always test rendering before sending "live" messages.

Download the Example Template and Blocks

If you'd like to get started right away with our examples, we made it easy to download and import templates and blocks into your account.

Creating the HTML Shell

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 "Sculptify" it by creating a Sculpt template and associated Sculpt blocks.

The HTML shell needs to be 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 making 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.

Creating the Sculpt Template

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

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

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

The top right navigation buttons link to the following Sculpt editor pages:

  • Template Editor - For pasting in 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.

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.

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.

Building the Template Settings Form

The template settings form will be used by the marketer during message creation. As the designer, you will need to create a form that the marketer will use 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 to cascade throughout the template (and template blocks) wherever the variable is placed in the HTML (at the end of every link).

During message creation, the marketer will use the form you create to add the link append values.

Pre-header text

The pre-header text is configured as a template setting because it is hidden from the rendered HTML preview (using CSS display:none).

During message creation, the marketer will use the form you create 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. We'll then 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.

The Link Appends Section

We'll first create the form for our Link Appends.

In the form builder we will need to create the Section and the Field.

Creating the Section

The section title will be used to name the section of the form containing the associated field(s).

Click on Create Your First Section

Give the section a name. We'll call it "Google Tracking".

Creating the Field

The field will be used to enter the link append text during message creation.

Click on Create Your First Field.

Give the field label a name. We'll name it "campaign".

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

The available field types are:

  • 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 HRML library.

We will be collecting text for this field, so we'll choose the text field type.

Enter the field's default content. The field will be pre-populated with this default content during message creation.

We'll give this field the default content of "sculpt_demo". You can also set this field to be required.

Previewing the Form

As you build out your form, you will see a preview being generated in the left preview pane.

The image below is a preview of the form we are creating containing the section, the field and the default text. This is the form the marketer will use to customize the template settings during message creation.

The 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 is set to be invisible in the message HTML using CSS display:none.

Using the same methods as above we'll create a section called "Hidden Content" with a field called "Pre Header text" set as text data type.

Once finished, we can preview the entire form consisting of the Google Tracking and Hidden Content sections in the preview pane.

Add Variable Key Names to HTML

As you are creating your sections and fields, the variable key names and data schema will be generated automatically in the background. You will 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). Please see our Dynamic Subject Lines Using Sculpt use case for a detailed example.

Access Variable Key Names

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 auto-generated data output will convert your section titles and field labels to code-friendly formats by lower casing all characters and replacing spaces with underscores.

Clicking on the Variable Names tab will give you access to the variables you will need to paste into the HTML document.

For example, wherever you want the Google tracking variable to populate, paste the following Smarty code:

{$templateSettings.google_tracking.campaign}

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 HTML, Preview and Save

Once the Smarty variables are updated in the HTML, paste the completed code into the Sculpt HTML editor.

Paste the Final HTML

Below is the final HTML of our example to paste into the HTML editor (note the highlighted variables):

<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 the HTML

To preview how the template will appear to the marketer during message creation, use the View dropdown and select Preview in Sculpt Editor. You will be able to interact with the template settings form just as you would during message creation. Note that any changes you make in the preview will not affect any default values.

In order to save the template, you must switch back to the Edit Template view.

Save the Template

Click Save Template to save your work.

Congrats! You just completed your first Sculpt template.

Next we'll build our the Sculpt blocks that will be draggable into the template.

Exporting and Importing Templates

You are able to export and import templates on the Sculpt Templates page. The exporting/imported files contain all template data including the HTML and the form builder, making it easy to share templates across different accounts.

In the UI navigate to Content > Sculpt Templates

Exporting Templates

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

To export multiple templates, select the desired templates, the click the Export button in the navigation.

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.

Importing Templates

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

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 are not able to 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.

Download and import the example template:

  1. Download the example template ZIP file.
  2. Import the ZIP file using the Import Template feature.

Download and import the example blocks: 

  1. Download the example block ZIP file.
  2. Import the ZIP file using the Import Blocks feature.

 

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

Related articles

Comments

0 comments

Please sign in to leave a comment.