How to Use Convert to Frame

Convert to Frame allows you to turn a floating image or video into an editable frame. A frame can simply be a shape with a customizable stroke that acts as a border, or it can serve as a container that masks the media inside it. This allows users to reposition or zoom the media without changing the frame itself, while the entire framed element can be moved and resized as a single object.

This is helpful when you want to create a cleaner, more flexible alternative to traditional image zones while maintaining a consistent border or frame around your media.

**Note: Convert to Frame is a feature that must be enabled by the Design Huddle team. Once enabled, it is available to both template creators and end users.

When to use this

Convert to Frame is useful when you want to:

• Add a consistent border or stroke around an image.
• Keep the media and its border together when moving or resizing.
• Allow users to reposition or zoom the media within a frame.
• Create movable image elements instead of fixed image zones.
• Simplify designs by eliminating the need for a separate border shape behind an image.

How it works

When you convert a floating image to a frame, the media is automatically masked inside a rectangular shape. Because the frame is treated as a shape rather than an image zone, users can:

• Move and resize the entire framed element.
• Reposition or zoom the media inside the frame.
• Apply a stroke to create a visible border around the frame.

Unlike an image zone, the frame behaves as a single movable object while still allowing the media inside it to be adjusted independently.

Convert to Frame vs. Convert to Zone

Convert to Frame creates a movable frame that contains an image or video. Users can move and resize the entire framed element while also repositioning the media inside it. A stroke or border can be added directly to the frame. This option is best for floating images or shapes that should remain flexible within the design.

Convert to Zone creates a traditional image zone that acts as a fixed placeholder. The zone remains in place within the design layout while users replace or reposition the media inside it. Borders typically require an additional design element. This option is best for placeholder-style image replacement.

How to convert an image to a frame

To convert floating media to a frame, follow these steps:

• Add an image or shape to the editor
• Select the element
• In the left menu, select Convert to Frame
• Optionally, apply a stroke to create a border around the frame

Once converted, the media is masked inside the frame and can be repositioned independently while the frame remains intact.

Integrated templates

For integrated templates that automatically populate images, the integration may need to pass the mask_media property along with the image URL so the media is correctly displayed within the frame. Click Here for the relevant API Documentation.