The Customer’s Canvas Template Editor can be used to create design elements as well as manage their behavior within the editor. You may occasionally need to restrict end-users from manipulating design elements to prevent them from ruining the final design. You can do this by prohibiting certain manipulations like moving, resizing, and deleting, or you can manage the behavior of image placeholders and text elements. All of these operations can be performed in the properties panel in the Behavior tab.

In this article we will cover:

   Set up allowed manipulations with objects

   Text Tool offset

   Configure the Image Placeholder behavior

   Manage the behavior of text elements

   Set up variable elements

   Save design settings and test them


Set up allowed manipulations with objects

For each element, you can fine-tune the allowed behavior, such as deleting, resizing, moving, and other manipulations. To do so, select the design element > open the Behavior tab > expand the group of permissions > set up the desired properties.

For example, if you only want to allow end-users to move a design element horizontally, disable deletion and rotation. You can see it here:

If you want to completely block an element, there are two primary ways: 1) Use the Behavior tab; or 2) Select an object > open the Main Layers > click the lock icon, or after selecting the object, press the Ctrl+Shift+L hotkey.

Text Tool offset

When using the Text Tool, first baseline offset and first baseline min offset can be used to alter the vertical placement of text within a bounding box. This works very similarly to text field baseline options in InDesign. 

You can set a value for First baseline offset however this field will use the text formatting (font, point size) to determine the initial baseline then offset it. With First baseline min offset you can set a minimum value for the offset. This is helpful for when the user may have permission to change the font (which can alter the initial baseline) but you still need the baseline to be shifted a minimum amount. 


Configure the Image Placeholder behavior

A placeholder is an area on the design where end-users place their logo or image. When the user resizes or moves the image, it doesn't go outside of this box, but instead, it is zoomed and cropped according to the placeholder boundaries.

Let's look at how to manage the placeholder behavior 1) for a logo and 2) for a photo.

Logo Placeholder

Imagine that you want to make a placeholder for a company logo. Here, we expect the inserted design to fit the placeholder boundaries. Let's do the following steps for this task:

  1. Choose Main layer > select the Placeholder tool in the top menu bar. Create a placeholder of the necessary size > left-click on the upload icon inside the placeholder > select an image.
  2. Select Placeholder > go to the Placeholder tab in the panel properties.
  3. Choose Fit in the Initial resize.
  4. Set up Vertical and Horizontal Alignment in the Center.

    Tip: Instead of showing an empty placeholder, you can place an image encouraging users to select images for it. To do this, choose Stub Image under Behavior to the right.

Photo Placeholder

We can expect slightly different behavior for a photo. It should fill the entire placeholder, and the parts of the image that don’t fit should be cropped. We also want to ensure that end-users don’t resize the image, which would leave empty fields. To do so:

  1. Create one extra placeholder of the necessary size.
  2. Select a placeholder > go to the Placeholder tab > expand it.
  3. Choose Fill in the Initial resize.
  4. Toggle on the Prevent Blank Space option.

Manage the behavior of text elements

Copyfitting

By default, text that doesn't fit within the bounds of a text object will be cropped. If we want the font size to decrease automatically, we can configure copyfitting behavior. Let's try to add some text with copyfitting:

  1. Create a Bounded Text element by selecting the Text Tool and drawing a rectangle in the design area.
  2. Select the object > go to the Behavior tab in the properties panel.
  3. Expand the Copyfitting settings.
  4. Set the Overflow Strategy to Fit to box and leave Shrink mode as default (Size).

    Important: Copyfitting only works with Bound Text. If you create a clickable Point Text element, copyfitting won't be available.

Now, by changing the text property in the Design panel, you will see that the text starts to shrink when the length of the text is exceeded.

If you want to automatically expand the height of the text box instead, set the Overflow Strategy to Expand Box.

Limiting text length

If you want to prevent the user from entering text that is too long, you can set limits on the number of lines and characters. For example, let’s set up an address block that allows end-users to enter no more than three lines and no more than 42 characters.

  1. Create a Text element (the type doesn't matter).
  2. Select the object > go to the Behavior tab in the properties panel.
  3. Expand Limits.
  4. Enable toggle for Number of lines. In the pop-up window, type 3.
  5. Enable toggle for Max single line length. In the pop-up window, type 42.

Set up variable elements

If you are setting up a template for the editor that will be used for variable data printing, then you need to configure the objects that will be variables. For example, let's add two text fields: Address Line 1 and Address Line 2, which we want to automatically fill in with data.

  1. Create a Text element (the type doesn't matter).
  2. Go to the Behavior tab in the properties panel > change the item Name to Address Line 1. Another method: right-click on the text element in the layer tree > select Rename.
  3. Expand the Variable Data group and toggle on Variable field.
  4. Duplicate the text field by right-clicking and selecting the Duplicate command or using the Ctrl+D hotkey.
  5. Rename the text element to Address Line 2 and the standard text, as described in the second step in this list.

Save design settings and test them

Don't forget to save all your settings. Click Save or press the Ctrl+S hotkey. You can now check how the end-user will see it by connecting your design to the editor, as described in the tutorial about connecting a template-based editor.