In This Section

Sculpt Blocks

Sculpt Block Overview

Sculpt blocks are HTML elements that can be dragged into Sculpt templates during message creation to build custom layouts and content.

Elements within each block can be referenced with Smarty variables and customized by the marketer using forms that you (the designer) create when building a block.

For example, the following HTML can be set up as a Sculpt block:

<table>
  <tbody>
    <tr>
      <td>Hello World</td>
    </tr>
  </tbody>
</table>

The text "Hello World" can be referenced with a variable and then updated by the marketer using a form input during message creation.

You are able to create multiple input fields in your form that can reference any attribute of your HTML. This allows you full control over what is editable by the marketer during message creation.

There are multiple field types available for collecting the data values in your form:

  • 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.
Note: Blocks must be saved as complete and valid HTML elements. For example, if you use a table row tag: <tr>, it must be wrapped in a table tag <table> or the block will not function properly and you may see the following error in the Sculpt editor during message creation:

"This block wasn't able to display anything"

 Creating Sculpt Blocks Video

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

Our Example

For our example, we'll create 4 blocks that can be dragged into the Sculpt Template we created.

For each block we will define the desired editable elements and create a form input field for each one using the form builder. 

Block Name Editable Elements Field Type
Banner Image Path Image Selector
  Image Link Text
  Alt Text Text
CTA Headline Text Text
  Body Text Text Area
  Button Text Text
  Button Link Text
Headline Headline Text Text
Product (repeatable) Title Text
  Description Text Area
  Button Text Text
  Button Link Text
  Image Path Image Selector

Note that the Product block will be set to repeatable. This will allow the marketer to add additional products without the need drag a new block into the editor.

Download the Example Template and Blocks

If you'd like to get started right away with our example in your own account, we made it easy to download all the blocks and import them into your account.

Banner Block

Our example banner block consists of a <table> tag with a nested image.

<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td><a href="http://cordial.com"><img alt="30% Off Sunglasses" class="mobile_width" src="https://d1ok0qgebci2d3.cloudfront.net/34/579x272/banner-CTA-3.jpg" /></a></td>
    </tr>
  </tbody>
</table>

Editable Elements

The elements we want our marketer to edit will be Image Path, Image Link and Image Alt Text. We will need to create a form with fields for each of these elements and then add the corresponding Smarty variables to our HTML.

Note: The variable keys will be created automatically in the background as you build the form sections and fields. You can view the variables and data schema at any time by clicking the Data Output Button.

Create New Block

Navigate to Content > Sculpt Blocks and create a new block.

Fill out the fields for the new block:

  • Block Name - The block name will be used to identify it in the block list and edit screens.
  • Block Key - The block key is used to reference the block inside a Sculpt template for pre-defined layouts. For example, if you want a block to be present in a template by default, you can include it in the template HTML code using the following tag:
    <block type="block_key"></block>
  • Block Description - Used to describe the block. The description will display in the block list during message creation.
  • Block Tags - Tags can be used for filtering blocks during message creation.
  • Allow blocks to be used in - Used to restrict a block's availability per message type.
    • Batch messages and automation - Block will be available in both message types.
    • Batch messages only - Block will be available in batch messages only.
    • Automations only - Block will be available in automations only.
    • None - Block will not be available in any message type. This is useful when building a block and restricting usage until block development is complete.

Click Continue and you'll be presented with the HTML editor screen.

You are able to paste in your block HTML here and preview it using the Preview Block Markup button.

Next you'll need to set up the form to define the editable elements of the block.

Create the Block Form

For our Banner block example, we identified 3 editable elements: Image Path, Image URL and Image Alt Text. We'll create a form that the marketer can use to customize those values during message creation.

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

Creating the Section

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

Give the section a name. We'll call it "Banner Image".

Creating the Field

The field will be used to enter the image path URL during message creation.

Click on New Field.

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

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
  • HTML Editor
  • Image Selector
  • Text
  • Text Area
  • Color Picker
  • Number
  • Select

We will be collecting an image URL for this field, so we'll choose the Image Selector field type. This will also display a button to access the image library.

Give the field a default value. The field will be pre-populated with the default value during message creation. In this case we will have a default image path.

Note that if no default value is given for an image selector field type, a placeholder image path will be automatically provided.

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 value. This is the form the marketer will use to customize the block elements during message creation.

Creating the Remaining Form Fields

Create the remaining form fields for Image Link and Alt Text using the Text field types.

When finished your form should look like the following:

Adding Variable Key Names to the HTML

As you are creating your sections, fields and default values, the variable key names and data schema will be generated automatically in the background. You will need to add the Smarty variables that reference these keys to your HTML in order for the values to populate correctly.

Accessing Variable Key Names

To view the variable key names and the schema structure, click on the Data Output Button. This will open an overlay window with the option to view 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 Banner Block example, the following data schema was created for us based on the section name, the field names and the default values entered:

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 our example we'll replace the banner image URL with the following Smarty tag:

{$blockData.banner_image.image_url}

Replace the image link with the following Smarty tag:

{$blockData.banner_image.image_link}

Replace the image alt text with the following Smarty tag:

{$blockData.banner_image.image_alt_text}

Our banner HTML with the replaced Smarty variables now looks like the following:

<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td><a href="{$blockData.banner_image.image_link}"><img alt="{$blockData.banner_image.image_alt_text}" class="mobile_width" src="{$blockData.banner_image.image_url}" /></a></td>
    </tr>
  </tbody>
</table>

Paste HTML, Preview and Save

Once the variables are updated in the HTML, paste it into the Sculpt HTML editor.

You can then preview the HTML using the toolbar menu.

You will then see a preview of how the block will appear to the marketer during message creation.

To save your block, switch back to the Edit Block View using the toolbar drop down, and then click Save Block to save your work.

Congrats! You just completed your first Sculpt block.

CTA Block

Using the same techniques, we'll create the CTA block. The editable fields for this block will be Headline Text, Body Text, Button Text and Button Link.

Starting HTML

<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
      <tbody>
    <tr>
          <td style="font-family: arial, san-serif; text-align: center; padding: 30px; background: #fff; color: #666; line-height:22px;"><h1 style="color:#292929; font-size:30px; line-height:34px;">Huge 48 Hour Sale!</h1>
        <p>Don't miss your change to get 30% off your favorite sunglasses.<br>
          Hurry,
sale is this weekend only!</p>
        <table align="center" border="0" cellpadding="0" cellspacing="0">
              <tbody>
            <tr>
                  <td align="center" bgcolor="#1B9BA3" class="body-text" style="border-radius: 4px;"><a class="body-text" href="#" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-block" target="_blank">Shop Now</a></td>
                </tr>
          </tbody>
            </table></td>
        </tr>
  </tbody>
  </table>

Form Fields

After building out our form fields to collect the data for the editable elements, the form preview looks like the following:

Data Output

Variable keys names and data schema were generated automatically for us so we can populate our HTML with the proper variables.

Following is the data output that was created for us:

{
	"$blockData": {
		"body_cta": {
			"headline_text": "Huge 48 Hour Sale!",
			"body_text": "Don't miss your change to get 30% off your favorite sunglasses. 
Hurry, sale is this weekend only!",
			"button_text": "Shop Now",
			"button_link": "http://cordial.com"
		}
	}
}

Smarty Variables

Using the supplied variable keys, we will add the following Smarty variables to our HTML:

{$blockData.body_cta.headline_text}
{$blockData.body_cta.body_text}
{$blockData.body_cta.button_text}
{$blockData.body_cta.button_link}

Final Block HTML

After adding the Smarty variables to our HTML, here is the final code block:

<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
      <tbody>
    <tr>
          <td style="font-family: arial, san-serif; text-align: center; padding: 30px; background: #fff; color: #666;"><h1 style="color:#292929">{$blockData.body_cta.headline_text}</h1>
        <p>{$blockData.body_cta.body_text.content}</p>
        <table align="center" border="0" cellpadding="0" cellspacing="0">
              <tbody>
            <tr>
                  <td align="center" bgcolor="{$templateSettings.colors.button_color}" class="body-text" style="border-radius: 4px;"><a class="body-text" href="{$blockData.body_cta.button_link}" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-block" target="_blank">{$blockData.body_cta.button_text}</a></td>
                </tr>
          </tbody>
            </table></td>
        </tr>
  </tbody>
 </table>

Headline Block

Using the same techniques, we'll create the Headline block. The editable fields for this block will be Headline Text.

Starting HTML

<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td bgcolor="#f8f8f8" style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #292929; font-size: 24px">Our Best Sellers</td>
    </tr>
  </tbody>
</table>

Form Fields

After building out our form fields to collect the data for the editable elements, the form preview looks like this:

Data Output

Variable keys names and data schema were generated automatically for us so we can populate our HTML with the proper variables.

Here is the data output that was created for us:

{
	"$blockData": {
		"headline": {
			"headline_text": "Our Best Sellers"
		}
	}
}

Smarty Variables

Using the supplied variable keys, we will add the following Smarty variable to our HTML:

{$blockData.headline.headline_text}

Final Block HTML

After adding the variable key to our HTML, here is the final block:

<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td bgcolor="#f8f8f8" style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #292929; font-size: 24px">{$blockData.headline.headline_text}</td>
    </tr>
  </tbody>
</table>

Repeatable Product Block

We will treat the Product Block a bit differently because it will be a repeatable block. This means that during message creation the marketer can add additional products by clicking a button as opposed to dragging a new block from the library.

The editable elements in this block will be Title, Description, Button Text, Button Link, Image URL and Image Link.

Original HTML

<table dir="rtl" width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td dir="ltr" valign="top" bgcolor="#FFFFFF" class="block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><img src="https://cdn.shopify.com/s/files/1/1070/1848/products/3467238-p-MULTIVIEW_large.jpg" width="269"></td>
            </tr>
          </tbody>
        </table></td>
      <td dir="ltr" bgcolor="#FFFFFF" class="block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #666; font-size: 14px; line-height: 22px;">QUAY AUSTRALIA<br>
                Retro and modern influences merge seamlessly on lightweight sunglasses featuring tortoiseshell frames and flashy mirrored lenses.</td>
            </tr>
            <tr>
              <td><table align="center" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#1B9BA3" class="body-text" style="border-radius: 4px;"><a class="body-text" href="#" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-block" target="_blank">BUY Now</a></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>

Form Fields

We want this block to be repeatable, so we'll select the option to Make This Repeatable when creating the section:

After building our form fields to collect the data for the editable elements, the form preview looks like this:

Note the text button: Add Another Featured Product.

This button is displaying because we chose to make this section repeatable. Clicking on the button will add another set of fields without the need to drag in a new block.

Data Output

Variable keys names and data schema were generated automatically for us so we can populate our HTML with the proper Smarty variables.

Here is the data output that was created for us:

{
	"$blockData": {
		"featured_products": [
			{
				"title": "QUAY AUSTRALIA",
				"description": "Retro and modern influences merge seamlessly on lightweight sunglasses featuring tortoiseshell frames and flashy mirrored lenses.",
				"button_text": "Buy Now",
				"button_link": "http://www.cordial.com",
				"image_url": "https://cdn.shopify.com/s/files/1/1070/1848/products/3467238-p-MULTIVIEW_large.jpg",
				"image_link": "http://www.cordial.com"
			}
		]
	}
}

Note that the key/value pairs within featured_products were generated as an array (as denoted by the square brackets). This is because the section was set up to be repeatable.

When writing the final HTML for the block, we'll need to use the Smarty {foreach} function to loop though the data and populate the values.

Learn more about using {foreach} statements.

Final Block HTML

After adding the Smarty variables to our HTML, below is the final block.

Note the use of the {foreach} statement at the top of the block and the Smarty variables throughout the block that reference that statement.

{foreach $blockData.featured_products as $product}
<table dir="rtl" width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td dir="ltr" valign="top" bgcolor="#FFFFFF" class="block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td><a href="{$product.link}"><img src="{$product.image_url}" width="269"></a></td>
            </tr>
          </tbody>
        </table></td>
      <td dir="ltr" bgcolor="#FFFFFF" class="block" style="padding: 10px"><table width="269" border="0" align="center" cellpadding="0" cellspacing="0">
          <tbody>
            <tr>
              <td style="font-family: arial, san-serif; text-align: center; padding: 10px; color: #666; font-size: 14px; line-height: 22px;">{$product.title}<br>
                {$product.description}</td>
            </tr>
            <tr>
              <td><table align="center" border="0" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td align="center" bgcolor="#1B9BA3" class="body-text" style="border-radius: 4px;"><a class="body-text" href="{$product.button_link}" style="font-size: 14px; font-family:Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; border-radius: 4px; padding: 12px 22px; text-transform:uppercase; font-weight:bold; display: inline-block" target="_blank">{$product.button_text}</a></td>
                    </tr>
                  </tbody>
                </table></td>
            </tr>
          </tbody>
        </table></td>
    </tr>
  </tbody>
</table>
{/foreach}

Congratulations, all of the example blocks have now been created and added to the block library!

Importing and Exporting Blocks

You are able to import and export blocks on the Sculpt Blocks page. The imported/exported files contain all block data including the HTML and the form builder, making it easy to share blocks across different accounts.

In the UI navigate to Content > Sculpt Blocks 

Exporting Blocks

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

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

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

Importing Blocks

To import a block, navigate to Content > Sculpt Blocks  and click the Import Blocks button.

Choose one or more Sculpt files (in either .ZIP or .JSON format) 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 block will be available in the block library.

Download the Example Blocks and Template

We made it easy to use our example blocks and template in your account using the following steps: 

  1. Download the example block ZIP file.
  2. Import the ZIP file using the Import Blocks feature.
  3. Create a new Sculpt template using the template HTML below.  

Example Template HTML

Copy the HTML below and paste into a new Sculpt template.

<html>
<meta name="viewport" content="width=device-width" initial-scale="1">
<head>
<meta charset="UTF-8">
<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>
<div sculpt-droppable="true"></div>
<table width="579" border="0" align="center" cellpadding="0" cellspacing="0" class="mobile_width">
  <tbody>
    <tr>
      <td bgcolor="#292929" style="height:20px">&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>

 

In the next article learn how to create message content using the Sculpt editor.

Related articles

Comments

0 comments

Please sign in to leave a comment.