Properties menu

The properties menu is on the right of the canvas. You can open and close it by clicking the paint brush icon.

You can also access it by selecting a component or HTML element on the canvas then clicking the pencil icon.

A bubble menu will appear of attributes you can modify. Click More properties to open the right hand panel and view all available attributes.

Click the counter-clockwise arrow icon to reset any attribute to its default value.

Backgrounds

From the properties menu, you can set the background of a custom component, standard component, or HTML element.

• For a custom component, you'll need to set a property with type background so you can modify the background in the properties menu.
• For a standard component, you can modify the background of boxes, columns, and sections. You can also modify the background of your base component through message settings.
• For an HTML element, you'll have to use background under Advanced > CSS style. You'll have to add CSS directly and should check that your code does not break across email clients.

For any of these, you can set a background image, gradient, or solid color.

Solid color

To set a solid, background color for a component:

1. Click the component you want to modify.
2. Under Styles, locate the Background or Fill field. Enter the hex value of the color and the opacity percentage or click the preview icon to choose a color and opacity.

   

3. Preview your changes in the visual editor and send a test to see how it renders in your email client.

To reset your background color, click the subtraction icon to the right of the field.

Image

To set an image as the background of your component:

1. Click the component you want to modify.
2. Under Styles, locate the Background or Fill field. Set a fallback color in case your customers' email clients do not support images.
3. Click Add Gradient/Image.
4. Click the new field then choose Image from the pop-up.

   

5. Paste the image URL if hosted outside Parcel or choose "Select Media" and browse for a file in your workspace. Keep in mind, when you officially send this email, you must host these images outside of Parcel.
6. Modify the layout properties as you see fit. You can change the position, size and repeat of the background image.
7. Preview your changes in the visual editor and send a test to see how it renders in your email client.

To remove the background image, click the subtraction icon to the right of the field.

Gradient

To set a gradient as the background of your component:

1. Click the component you want to modify.
2. Under Styles, locate the Background or Fill field. Set a fallback color in case your customers' email clients do not support gradients.
3. Click Add Gradient/Image.
4. Click the new field and you'll see that by default, we set a linear gradient based on your background color.
5. To change the gradient to radial and access other settings, click the icon beside the gradient in the pop-up.
6. You can also set layout properties. Modify the size then specify how you want the gradient to repeat or how you want to position it in the background.
7. Preview your changes in the visual editor and send a test to see how it renders in your email client.

To remove the gradient, click the subtraction icon to the right of the field.

We do not support conic gradients.

Gradient settings

To access gradient settings, click the gradient in the properties menu then select the gradient preview.

Eyedropper

Use the eyedropper to identify a color not in your email yet. Any color in use in your email will appear at the bottom of the gradient pop-up.

Gradient type: linear or radial

By default, we set a linear gradient. You can change the angle of the gradient by typing a different degree (0-360).

You can also switch to a radial gradient by clicking the radial icon.

Color stops

Add color stops by clicking a location on the top slider. While selected, choose an existing color from the bottom or type in the hex or rgba value.

Alternatively, you can choose a color from the second slider then change the shade up top. Adjust the opacity as you see fit on the bottom slider.

Click the trash icon to delete the selected stop.

Fallbacks

If you're setting a background on your message or component, set a solid color as a fallback. Not all email clients support gradients and background images, but they do solid colors. You can find out more about email client support at Can I Email.

Also note, your background settings are evaluated from top to bottom. In the example above, if the email client doesn't support multiple, layered backgrounds or if it doesn't support gradients, then we will provide a fallback of the image over the solid, background color. If images aren't supported either, then just the solid color background will render. You can change the order by clicking the arrows to the left of the items.