The Builder Presets feature in Campaign Studio enables marketers to create, save, manage, and apply default styling and reusable content configurations when building emails and landing pages. Presets are predefined settings for content blocks such as buttons, text, and images that can be quickly applied when creating or editing emails and landing pages. They allow you to maintain consistent styles and configurations across multiple assets. They ensure brand consistency, streamline content creation, and reduce build time.
Creating builder presets¶
To create a builder preset, do the following:
- Log in to your Campaign Studio instance.
- In the upper right corner, click the Settings gear icon to expand the menu.
Click the Builder Presets tab.
Campaign Studio displays the Builder Presets list page.
- Click + New.
- Configure the following fields on the New Builder Presets page:
- Name: Enter a name for the preset.
- Alias: Leave this field blank as system generates a unique alias based on the name if this field remains empty. It is an alphabetical string used for URL generation of the preset.
- Published: Set the Yes/No toggle bar to publish or unpublish a preset.
- Configure the additional fields on the New Builder Presets page.
- Click Save & Close.
| Field | Description |
|---|
| H1 Color | - Sets the text color for H1 heading elements.
- Accepts color in HEX or RGB format.
|
| H1 Font Size | - Defines the font size for H1 heading elements.
- Accepts numeric values with CSS units.
|
| H1 Font Family | - Sets the font family for H1 heading elements.
- Accepts one of the configured font families from the system’s editor fonts.
|
| H1 Font Weight | - Defines the font weight (boldness) for H1 heading elements.
- Accepts the values Extra-light, Light, Regular, Medium, Semi-bold, and Bold.
|
| H1 Link Color | - Sets the color for hyperlinks in H1 heading elements.
- Accepts color in HEX or RGB format.
|
| H1 Text Align | - Defines the horizontal alignment for H1 heading elements.
- Accepts the values left, center, right, and justify.
|
| H1 Direction | - Sets the text direction for H1 heading elements.
- Accepts the values ltr (left to right) and rtl (right to left).
|
| H1 Letter Spacing | - Controls the spacing between letters in H1 heading elements.
- Accepts numeric values with CSS units.
|
| Field | Description |
|---|
| H2 Color | - Sets the text color for H2 heading elements.
- Accepts color in HEX or RGB format.
|
| H2 Font Size | - Defines the font size for H2 heading elements.
- Accepts numeric values with CSS units.
|
| H2 Font Family | - Sets the font family for H2 heading elements.
- Accepts one of the configured font families from the system’s editor fonts.
|
| H2 Font Weight | - Defines the font weight (boldness) for H2 heading elements.
- Accepts the values Extra-light, Light, Regular, Medium, Semi-bold, and Bold.
|
| H2 Link Color | - Sets the color for hyperlinks in H2 heading elements.
- Accepts color in HEX or RGB format.
|
| H2 Text Align | - Defines the horizontal alignment for H2 heading elements.
- Accepts the values left, center, right, and justify.
|
| H2 Direction | - Sets the text direction for H2 heading elements.
- Accepts the values ltr (left to right) and rtl (right to left).
|
| H2 Letter Spacing | - Controls the spacing between letters in H2 heading elements.
- Accepts numeric values with CSS units.
|
| Field | Description |
|---|
| H3 Color | - Sets the text color for H3 heading elements.
- Accepts color in HEX or RGB format.
|
| H3 Font Size | - Defines the font size for H3 heading elements.
- Accepts numeric values with CSS units.
|
| H3 Font Family | - Sets the font family for H3 heading elements.
- Accepts one of the configured font families from the system’s editor fonts.
|
| H3 Font Weight | - Defines the font weight (boldness) for H3 heading elements.
- Accepts the values Extra-light, Light, Regular, Medium, Semi-bold, and Bold.
|
| H3 Link Color | - Sets the color for hyperlinks in H3 heading elements.
- Accepts color in HEX or RGB format.
|
| H3 Text Align | - Defines the horizontal alignment for H3 heading elements.
- Accepts the values left, center, right, and justify.
|
| H3 Direction | - Sets the text direction for H3 heading elements.
- Accepts the values ltr (left to right) and rtl (right to left).
|
| H3 Letter Spacing | - Controls the spacing between letters in H3 heading elements.
- Accepts numeric values with CSS units.
|
Title ¶
| Field | Description |
|---|
| Align | Defines the horizontal alignment for title elements. Accepts the values left, center, right, and justify.
|
| Padding Top | |
| Padding Right | |
| Padding Bottom | |
| Padding Left | |
General¶
| Field | Description |
|---|
| Background Color | - Sets the overall background color for the template.
- Accepts color in HEX or RGB format.
|
| Content Area Background Color | - Sets the background color for the main content area of the template.
- Accepts color in HEX or RGB format.
|
| Content Area Width | - Defines the width of the main content area in the template.
- Accepts numeric values with CSS units.
|
| Default Font | - Sets the default font family to be used throughout the template.
- Accepts one of the configured font families from the system's editor fonts.
|
| Link Color | - Sets the default color for hyperlinks throughout the template.
- Accepts color in HEX or RGB format.
|
Text¶
| Field | Description |
|---|
| Text HTML | |
| Text Color | |
| Text Link Color | |
| Text Font Size | |
| Text Font Family | |
| Text Padding Top | |
| Text Padding Right | |
| Text Padding Bottom | |
| Text Padding Left | |
Image ¶
| Field | Description |
|---|
| Image Border Radius | |
| Image Padding Top | |
| Image Padding Right | |
| Image Padding Bottom | |
| Image Padding Left | |
| Image Align | Sets the default horizontal alignment for image blocks. Accepts the values left, center, and right.
|
Row ¶
| Field | Description |
|---|
| Row Background Color | |
| Row Content Area Background Color | |
| Row Column Border Radius | |
| Row Columns Padding Top | |
| Row Columns Padding Right | |
| Row Columns Padding Bottom | |
| Row Columns Padding Left | |
| Row Columns Background Color | |
| Field | Description |
|---|
| Button Color | |
| Button Font Size | |
| Button Font Family | |
| Button Background Color | |
| Button Padding Top | |
| Button Padding Right | |
| Button Padding Bottom | |
| Button Padding Left | |
| Button Block Padding Top | |
| Button Block Padding Right | |
| Button Block Padding Bottom | |
| Button Block Padding Left | |
| Button Align | Sets the horizontal alignment for button blocks. Accepts the values left, center, and right.
|
Divider ¶
| Field | Description |
|---|
| Divider Line | Sets the default styling for divider lines including width, style, and color. Accepts the format width style color.
|
| Divider Padding Top | |
| Divider Padding Right | |
| Divider Padding Bottom | |
| Divider Padding Left | |
Social ¶
| Field | Description |
|---|
| Social Align | Sets the horizontal alignment for social media blocks. Accepts the values left, center, right.
|
| Social Padding Top | |
| Social Padding Right | |
| Social Padding Bottom | |
| Social Padding Left | |
Icons Block ¶
| Field | Description |
|---|
| Icons Color | |
| Icons Align | Sets the horizontal alignment for icon blocks. Accepts the values left, center, right.
|
| Icons Padding Top | |
| Icons Padding Right | |
| Icons Padding Bottom | |
| Icons Padding Left | |
| Icons Item Spacing | |
| Icons Size | |
| Icons Spacing Padding Top | |
| Icons Spacing Padding Right | |
| Icons Spacing Padding Bottom | |
| Icons Spacing Padding Left | |
Spacer ¶
| Field | Description |
|---|
| Spacer Height | - Sets the default height for spacer blocks used to create vertical spacing.
- Accepts numeric values with CSS units.
|
Paragraph ¶
| Field | Description |
|---|
| Paragraph Color | |
| Paragraph Font Size | |
| Paragraph Font Family | |
| Paragraph Font Weight | Defines the font weight for paragraph text. Accepts the values Extra-light, Light, Regular, Medium, Semi-bold, and Bold.
|
| Paragraph Line Height | Controls the line height for paragraph text. Accepts numeric values, percentages, CSS units, or keywords.
|
| Paragraph Text Align | Defines the horizontal alignment for paragraph text. Accepts the values left, center, right, and justify.
|
| Paragraph Direction | |
| Paragraph Letter Spacing | |
| Paragraph Link Color | |
| Paragraph Spacing | |
| Paragraph Block Padding Top | |
| Paragraph Block Padding Right | |
| Paragraph Block Padding Bottom | |
| Paragraph Block Padding Left | |
Using builder presets¶
Builder Presets can be applied to emails and landing pages.
Using builder presets in emails¶
To apply a preset to an email, do the following:
- Log in to your Campaign Studio instance.
- In the left navigation pane, click Channels > Emails.
- Click + New.
- Select either the New Template Email type or the New Segment Email type.
- In the configuration form on the right, locate the Builder Presets dropdown.
- Select the name of the builder preset that you want to apply to the email.
For more information, visit Email basics.
Using builder presets in landing pages¶
To apply a preset to a landing page, do the following:
- Log in to your Campaign Studio instance.
- In the left navigation pane, click Components > Landing pages.
- Click + New.
- In the configuration form on the right, locate the Builder Presets dropdown.
- Select the name of the builder preset that you want to apply to the landing page.
For more information, visit Landing page basics.
Builder Presets list page¶
The Builder Presets list page provides the list of presets in your Campaign Studio instance.
To access this page, do the following:
- Log in to your Campaign Studio instance.
- In the upper right corner, click the Settings gear icon to expand the menu.
Click the Builder Presets tab.
Campaign Studio displays the Builder Presets list page with the following information for each preset:
| Column | Description |
|---|
| NAME | The name of the builder preset. |
| ALIAS | The alias of the builder preset. |
| DATE ADDED | The date when the builder preset is created. |
| IS USED | YES/NO indications to indicate if the builder preset is used for an email or landing page. |
| ID | The ID of the message indicating the position at which the builder preset is created in Campaign Studio. For example, an ID of 4 indicates that it is the fourth builder preset that is created in Campaign Studio. |
The dropdown list for each builder preset contains the following options:
- Edit: To edit the builder preset.
- Clone: To clone the builder preset.
- Delete: To delete the builder preset.
The header row of the table contains a Select All checkbox that can be used to select and bulk delete the builder presets.
- Search: The Search option before the table helps you to search for a builder preset in the list using filters.
- +New: The +New button at the upper-right corner of the page helps you to create a new builder preset.