Editor
      Back to home
      1. Knowledge Base
      2. Editor

      How to Add a Zone

      • What are Zones
      • How to Add a Zone
      • Configuring a Zone
      • Configuring Locking on a Zone

      What are Zones

      Zones are square or rectangular areas that you can designate on the Template for your user to place a design element (image, video, PDF or SVG) in. Zones allow you to control whether the design element will be masked or fit fully within the area. This feature is great for logos, headshots, headers, and more.

      • Mask: Image or video will take up the entire space leaving no margin. Elements that don’t fit the Zone exactly will be cropped.
      • Fit: Image, video, PDF, or SVG will be placed in the Zone but can be resized or repositioned anywhere within the designated space. Elements will not be cropped. If you do not want the Zone boundary to be enforced for the user, uncheck Enforce Boundary.

       

      How to Add a Zone

      Zones can be created two separate ways in the Editor. 

      The first option is to:

      1. Click the Images or Media button on the left menu 
      2. Click the Zone option creating an empty Zone (a placeholder icon will appear)

      The second way you can do this is to:

      1. Add an image, video, vector graphic or square/rectangle shape to the editor
      2. Select the Convert to Zone option in the left menu

       

      Configuring a Zone

      Once the Zone is added there are a few properties you need to set. 

      1. Choose the Element Position to be either Fit or Mask. 
      2. If you do not want the Zone boundary to be enforced for the user, uncheck Enforce Boundary (this only applies to Fit Zones)
      3. Select the Default Orientation (sets where an element placed will be within the Zone). *If you chose Mask on Step 1, you will skip steps 3 & 4.
      4. Select the Default Margin. This will set how much space the element will have between the edges of the Zone and the borders of the element. 
      5. Select the Rotation. This will set the angle at which the element will be placed.
      6. Set the Transparency on the Zone from the slider at the bottom. If the transparency is set, any image, video, or vector element will inherit the transparency set.
      7. Optionally set a default image/video within the zone as a placeholder.

      You will notice there is a Configuration Mode which allows you to preview the default placement and position for example elements of different aspect ratios given the options listed above. Turn on configuration mode to generate a preview within the Zone for you to visualize.

      Enforce Boundary is set by default for Zones that have been set to Fit. This gives the user the ability to only move the added element within the boundaries of the Zone. However, if Enforce Boundary is unchecked, the user will have the ability to resize and reposition the element anywhere across the canvas. 

       

      Configuring Locking on a Zone

      To configure locking controls on the Zone, follow these steps:=

      1. Click the Select button to choose which elements can be uploaded into the Zone. Lock the options that you don’t want available. You can optionally choose to allow uploads of only vector vs raster images. 
      2. Click the Raster Image, Vector Image, or Video buttons to adjust locking for what the user can edit on specific elements added to the Zone. Vector Images will not be available if you have chosen to Mask.
      3. Save your Locking configuration on the left menu.

      *Note that if an admin sets a default image/video within the Zone, locking on this element is still controlled individually by clicking that element in Locking Configuration Mode.

      *All zones will show with a placeholder button by default for your end users.