SugarCRM SupportProduct GuidesSugar MarketSugar Market User GuideEmail CampaignsDesigning Emails
Sugar Market was formerly known as Salesfusion.

Designing Emails

Overview

The Email Builder 2.0 wizard lets you quickly style your email campaigns with its drag-and-drop editor. Access the editor on Step 3 of the Email Builder wizard.

Working in the Editor

The editor is comprised of the main canvas area where your email is displayed, a tray containing style elements, and the Email Builder wizard toolbar. The editor canvas is divided into the header, body, and footer sections. Within these sections, you can add blocks (rows and columns) for text and page elements. 

SM UG EMB editorcanvas

Click an element in the left sidebar to expand the tray. When expanded, click the X to collapse the tray.

SM UG EMB buildertray

Setting Global Styles

Global styles affect your entire email, though you can override some individual styles by editing in the block (e.g. page text). We strongly recommend you set your global styles as the first step in your email styling and to save your preferences as a template.

Click the Styles icon in the left sidebar to customize the global styles of your email, as described below.

SM UG EMB styles

Preheader

The preheader is displayed immediately after the email subject line. Since this can drive people to open your email, you should put careful thought into what you include here. If left blank, the email client may pull the first line of your email text, an image's Alt text, or other undesirable elements.

Email Width

The default width is 600 px, which is optimal for all email clients. A larger width may force a horizontal scroll in many email clients.

Background

Choose a color or image to stretch across the entire message. Pay attention to where you are adding background colors and images: if a column is selected when you add a background, it will only display in that column. If you add the background to the whole row, then it will display across both columns.

Note: Some older email clients do not support background images; please use the Advanced Testing Center to see how your email will display in various clients.

Color

The background color sets the color for the entire message (outside of the content area). Click in the Background Color field to select a color from the picker or type a specific hex, RGB, or HSL code.

SM UG EMB color (1)

Image

Identify a background image by uploading a file, linking by URL (preferably one you own), or choosing from the Asset Library or a stock photo. 

Border

Identify a style, width, and color for a border to display around the entire email.

Fallback Font

Some fonts available in Email Builder are not considered "web-safe" fonts, which means they may not render in an aesthetically pleasing manner in some email clients. To combat this, select an alternative font from the fallback font list that matches your selected font as closely as possible.

Page Text/Anchors/Headings

Define default text font settings for page text, anchors, and headings separately. These settings apply to the entire email message and will update any existing text when you make changes to these settings. You can override these settings on an individual basis as described in the Editing Page Elements section. We recommend a 14 point font size for optimal viewing.

In addition to font styles, you can set the following text spacing options:

  • Line Height : The spacing between the lines of text as a percentage relative to the font size.
  • Letter Spacing : The spacing between letters in pixels.
  • Margin : The space between the text and the edge of the text box.

Adding Rows and Columns

Sections, rows, and columns can have different background images, background colors, and sizing options. Click the Blocks icon in the left sidebar and drag rows and columns to your email.

SM UG EMB blocksmenu

Adding Page Elements

From text to code, content widgets allow you to use your creativity to fully customize your email. Click the Widgets icon in the left sidebar, and then drag and drop the widget to add content to your email. Wait until the blue line appears on the canvas before you drop the widget.

SM UG EMB widgets

Text

Choose from multiple fonts (including Google fonts), styles, colors, alignments, and line height. Make your email connect more with your customers by using merge tags and hiding specific content on mobile devices.
EMB2-Text 1

Note: To set inline styling for link text, click the link text to display the available editing options.

 inlinelink22.7

Images

Upload images from the Asset Library, your computer, or add high definition photos via Unsplash to make your email stand out. Set the image to full width or resize it to an exact pixel. Ensure you include alt text for all images for accessibility purposes and to help with spam diagnostics. We also recommend you keep your image size below 30K to improve your deliverability.
EMB2-Image 1

Spacers and Horizontal Lines

A spacer is a blank, adjustable content block that allows you to control the white space and positioning of content in your email. A horizontal line is a fixed-size content block that contains a centered line that you can use to divide the content in your email.
emb 2 space lines sidebyside

Buttons

Customize the size, shape, color, border, font, style, and alignment of buttons to ensure your calls to action are not missed.
EMB2-Button 1

Code Blocks

Add custom content by using the inline HTML/CSS code widget.
Screen Shot 2019-05-02 at 4.29.42 PM

Social Buttons

Grow your social channels by drawing your customers' eyes to the social buttons typically found in the email footer. Specify which channels to use and customize the order, links, color, size, border, and other styles of your social buttons.
EMB2-SocialIcons 1

Image Group

The Image Group widget lets you add several images as a set to a specific block. These images are treated as one when styling and editing. Image groups are useful for mobile responsiveness since the group will compress and stay side-by-side in mobile view, while separate images placed side-by-side on the canvas will be stacked in mobile.

Image Caption

The Image Caption widget lets you add an image grouped with an associated caption inside a text box. To add a caption to an image that already exists on the page, delete the image and then drag the image caption widget to the image's previous location, and then add the image. Image captions are also useful for mobile responsiveness since both the image and caption will remain together in mobile view.

Dynamic Elements

With dynamic email content, you can configure select elements in your email to have dynamic content displayed to specific recipient segments.

Note: A user must have the "Marketing Admin - Dynamic Email Content" permission enabled to create dynamic email content. Without this permission enabled the following options will not be visible.

Follow these steps to add and configure dynamic elements in your email:

  1. Click the Widgets icon in the left sidebar.
  2. From the Dynamic Elements section, drag and drop a dynamic element into your email.
    decdrag
  3. Once the dynamic element is added, click the element to display the available element edit options.
  4. Click the lightning icon to configure the element's dynamic content.
    light
  5. From the dropdown, click the Settings option to manage the dynamic element's segments.
    decdrop
  6. To create a new segment, click the "Create Segment" button to create a new segment or click the "Use Existing Segment" button to choose an existing segment. For more information on defining segments in Sugar Market, refer to the Defining Segments section of the Working With Segments user guide.
    Note: Users must have the "Marketing Admin - Segment Creation/Editing" permission enabled to create and edit segments.
    newsegbuild
  7. Once a segment is saved it will appear as a line item in the element's dynamic content settings. You can change the order of your saved segments by dragging and dropping.
    movseg
    Note: Records included in multiple selected segments will be sent the dynamic email content of the first segment they meet the conditions of, in the order that the segments appear in the list.
  8. Additionally, you can copy, edit, and delete saved segments as needed by clicking the respective icons within each line item.
    editsegline
  9. Once a segment is saved, it will also be listed in the lightning icon dropdown.
  10. Clicking a segment from the dropdown will allow you to review and edit the element's dynamic content for that segment.
    segselect
  11. Click the Default Segment option from the lightning dropdown to edit the element's default dynamic content. This content will be displayed to any recipients not included in your saved segment or segments.

Editing Rows and Columns

You can customize row top and bottom margins, duplicate the row, and set visibility for mobile devices. To edit rows, mouse over the row and grab the settings icon at the top right. Slide borders to resize the row.

EMB2-Row 1

You can customize column padding, adjust the alignment, duplicate the column, and set visibility for mobile devices. To edit columns, mouse over the column and grab the settings icon at the bottom right. Slide borders to resize the column.
EMB2-Column 1

Note: While many features in the editor are the same as the Page Builder editor, the method for resizing blocks differs between the two builders.

Editing Page Elements

There are several options available for editing page elements individually.

To edit page elements:

  1. Mouse over the page element and check the label at the top left of the bounding box to ensure you have the correct element.
  2. Click into the element to display the editing options available for that element. 
    SM UG EMB editelement
  3. To move the element, drag and drop to another location on the canvas.

Creating Calls-to-Action

Call-to-action (CTA) elements can help your email stand out in your recipients' inbox and quickly drive them to your website, email address, or phone number. This section describes how to easily add these CTA elements to your emails.

To add a CTA element to your email:

  1. Add a text, image, or button page element to your email.
  2. Select the element on the canvas to display its context menu, and then click the link icon.
    EMB20 ctabutton
  3. Identify the URL, email address and content, or phone number to which you want the element to link, and then click the Update button.
    EMB20 cta url emb20 cta email EMB20 ctaconfigure
  4. To confirm your settings, use the Preview option to mouse over the element and display the value at the bottom right of the page.
    EMB20 cta preview

When your recipient clicks the CTA element, the associated application launches populated with the value defined (e.g., phone, browser, email client).

Last modified: 2022-05-17 21:38:43