Create Layered Content

Follow these steps to add a new layer to an image in Content Builder.

  1. Click Add Layer at the top of the Layers panel.

    Animated demonstration of a user clicking the 'Add Layer' and reviewing the types of layers available

  2. Adjust the priority of layers as necessary. Click and drag a layer to the desired position in the panel.

    Animated demonstration of a user dragging a layer to adjust the priority of multiple layers

A click zone layer works even if it doesn't have the top priority over other layers. However, the click zone area only appears on the canvas when you select its layer in the Layers panel.

Keyboard Shortcuts

The following keyboard shortcuts may be helpful when using Content Builder:

Keyboard ShortcutAction
Command + Shift (while resizing)Maintains the proportions of the layer while resizing
Command + ZUndo the most recent action
Command + Shift + ZRedo the most recent action
Alt (while dragging)Scale layer symmetrically
DeleteDeletes the current layer

Image Layers

When an image is added, options for background, border, and shadows populate the properties panel on the left.

Callout of the styles properties for an image layer displayed in the left-hand panel of Content Builder

Along with the options in the properties panel, you can click the image layer and drag it anywhere on the canvas, rotate, and resize the image to fit your needs. If you want to add a link to an image layer, click the additional options menu (...) and then select Add link.

For this example, the opacity has been adjusted to show a rectangle underneath, and a border with a shadow has been added.

Rectangle Layers

When you add a rectangle, options for color, opacity, borders, and shadows populate the properties panel.

Callout of the styles properties for a rectangle layer displayed in the left-hand panel of Content Builder

Along with the options in the properties panel, you can click the rectangle layer and drag it anywhere on the canvas as well as resize the rectangle. To add a link to a rectangle layer, click the additional options menu (...) and then select Add link.

Text Layers

When you add text, options for text box color, text box opacity, text box borders, and text box shadows populate the properties panel. Additionally, a text toolbar appears when you click the text layer. It contains options for changing the font, text size, line height, alignment, styling, text color, and text background color. Use it too to add dynamic text fields. See Add Dynamic Text to Creatives for more information.

A text layer active and the text-formatting toolbar active

Along with the options in the properties panel, you can click and drag the text layer anywhere on the canvas. To add a link to a layer, click the additional options menu (...) and then select Add link.

Callout of the 'Add link' option in the additional options menu for a rectangle layer

You can upload your own font files to use in Content Builder. See Upload Fonts for the instructions.

Link Layers

When you add a link, options for link URL, alternate text, CSS class, and URL launch location populate the properties panel.

View of the Link properties fields

The alt attribute only populates if you enter a link address. If you don't want the link to take the visitor anywhere, then you can enter #, which keeps the visitor on the current page. Otherwise, you can also HTML content instead and then manually input the alt attribute.

If you choose In a pop up window for the URL launch location, additional options appear.

View of the Link properties fields, with the 'In a pop up window' option selected

Along with the options in the properties panel, you can click and drag the link layer anywhere on the canvas as well as resize it to fit your needs.

Saving and Closing

Once you create the content, click SAVE in the top-right corner of Content Builder.

Callout of the SAVE button in Content Builder

Anything you edit in Content Builder is saved in Content Manager. After you click SAVE, you can access the new content and any other images, code, fonts, or location in Content Manager.

Additionally, you can download content to your computer by opening it in Content Builder and then clicking PREVIEW.

Callout of the PREVIEW button in Content Builder

A modal appears showing the content. Click DOWNLOAD to save the file to your computer.

Callout of the DOWNLOAD button in the 'Content Preview' modal