Edit an Email Notification using the SmartWeb Designer

Using Extension Items

1. Select the appropriate item from the Extension Item List.

2. Drag and drop the Extension Item into the Layout Tree pane.

The SmartWeb designer will not allow you to connect Extension Items that are incompatible.

3. Click the item in the Layout Tree pane to open the Properties pane.

a. Right-click the Extension Item, or Email root properties to open the quick edit options.

i. Item Values are the properties and features of the selected item.

When you click an item, the selection will flash in the Preview pane.

4. Edit the Extension Item in the Properties pane.

a. Each Extension Item has default properties, which you can edit, as well as other features you can add for further customization.

b. Click + in the appropriate box to add a feature.

Features can be customized to fit into specific size browsers and devices, such as mobile, tablet, desktop, and large displays.

Properties and Features

Each Extension Item contains a list of properties and features which you can edit in the Properties pane. These properties and features may change depending on the Extension Item. All items contain the More Features... list and the Object Style property.

The More Features... list allows you to set Buyer-Mode Restrictions for your Extension Item.

The Object Style property allows you to choose a default style, or create a new design format for an object.

To create an Object Style:

Select the appropriate Extension Item from the Layout Tree pane.
Click Add in the Object Style box in the Properties pane.
Name your new style and click OK.
Edit your Object Style in the Properties pane.

To apply an Object Style to an Extension Item:

Select the appropriate Extension Item from the Layout Tree pane.
Choose the appropriate style from the No Style drop-down list in the Object Style box.

Some Extension Items will already have an Object Style assigned to them.

Root Properties

Important features located in Email Root Properties include Settings and Hidden Preview Text.

Settings: Create or edit your email subject line, and enter text in the altText box that will appear for email clients that do not display HTML.
Hidden Preview Text: Information that will appear in the email summary of the recipient's inbox.

Group Item

The Group item can act as the trunk or base of a branch in the Extension Item tree. It also help create a consistent layout for your email.

Layout Properties

Properties that determine the size and visual format of the Extension Item.

Distances are measured in pixels (px).

Group, Grid, and Flex Grid Properties:

Width: Set the Width of the item for different types of devices.
Height: Set the Height of the item for different types of devices.

The default device is Mobile, and the default mode is Auto. Click in the Properties box, to add another device.

MarketDirect StoreFront recommends you adjust the Width and Height properties for Mobile and Tablet devices.

Text

Text can be added to your email using Text boxes.

Add and Edit Text

1. Drag and drop the Text or Headline item onto the Layout Tree pane.

The Text extension item is recommended for the majority of text content, because it offers more options. The Headline extension item is recommended for titles and headlines.

2. Select the item you want to edit.

3. Click the Text box in the Preview pane.

4. Enter your new Text.

5. Hi-light Text and click for bold font.

6. Hi-light Text, click , and select the link type to insert a link into your Text box.

Text in a Headline item cannot be converted to a hyper-link.

7. Change the properties and features of the item in the Properties pane.

Text Properties

Paragraph Style: Select a pre-set Text style for different Text formats in a paragraph.

If you edit the Text style, all Text assigned to that Text style will change.

Text Style: Select a pre-set Text style for the Headline.

Text Alignment: Choose the alignment of the Text.

Text Shadow: Add a shadow around the Text.

Collapse Text on Mobile: Set up parameters for long sections of Text to collapse on a Mobile device.

Headline: Determine the HTML hierarchy for multiple Headlines.

Text Style Manager

The Text Style Manager is where you add, edit, and delete the Text Styles in your Campaign. The Text Style Manager is divided into two panes.

Note: Click Text Styles in the Resources drop-down list to open the Text Style Manager.

Text Styles: List of all Text Styles found in the SmartWeb designer.
Text Style Editor: Customizable options for editing the style selected in the Text Styles list.

Click in the Paragraph Style or Text Style property to open the Text Style Editor.

Color Manager: Add and edit colors found in the SmartWeb designer.

● Click Colors in the Resources drop-down list to open the Color Manager.

● If you edit the Color of a Text Style, all items assigned the Color of that Text style will change.

Images

Images can be added to your email as an Extension Item or Background Image of other Extension Items. Background Images are recommended for the majority of Image content, because they offer more options and consistency.

Image Extension Item

Image Extension items only contain the Image Type property, which determines the format of the Image.

Image Type: Select the type of image.

SmartWeb supports the following Image file types: png, jpg, jpeg, gif, and pdf.

External: Link your Extension Item to an external URL.
Uploaded: Choose an uploaded image, or upload an image from your computer.

Background Image Properties

A background image can be added to many Extension Items by clicking the Background box in the Email Properties pane. Any other content in the Extension Item will be placed over the background image.

Color: Select the color of the background.
Image: Select the type of image.

External: Link your Extension Item to an external URL.
Uploaded: Choose an uploaded image, or upload an image from your computer.
Personalized: Select a personalized image set and edit the content.
Logo: Set the Campaign logo as the image.

Image Width: Enter the Width of the image.

Image Width is set to Auto by default.

The Personalized Image Type contains two unique properties.

● Edit Content: Add a variable or enter text to be displayed in the personalized image.

● Transparency: Click the check-box to make the image transparent, so only the text is visible.

Email Extension Items

Email Extension Item Chart

Extension Item	Function
Headline	Adds headline text.
Group	Trunk or base of a branch within a stripe.
Text	Adds a text box.
Image	Adds an image.
Link	Adds a hyper-link.
Line	Adds a visual line for aesthetic purposes.
Share	Adds social media links.
HTML	Adds a CSS and/ or HTML language box.

Email Items with Fixed Size Chart

Extension Item	Function
Email Body	Trunk or base of a branch within a stripe.
Link	Adds a hyper-link.
Headline	Adds headline text.
Text	Adds a text box.
Horizontal Group	Group that allows you to add and arrange content in a horizontal line.
Vertical Group	Group that allows you to add and arrange content in a vertical line.
HTML	Adds a CSS and/ or HTML language box.
Image	Adds an image.
Line	Adds a visual line for aesthetic purposes.
Share	Adds social media links.

Email Items with Fixed Size are not compatible with Email Extension Items.

Email Items with Fixed Size

Email Items with Fixed Size extension items keep a fixed size regardless of what device (PC, mobile, tablet) is used to view them.

Email Items with Fixed Size are helpful for use with a custom domain or when sending emails to a Gmail account.

Using Email Items with a Fixed Size

1. Select the Email Body item from the Email Items with Fixed Size section of the Extension Item List.

2. Drag and drop the Email Body item onto the Layout Tree pane.

The Email Body item is the Group item that acts as a trunk for all other Email Items with a Fixed Size.

3. Connect other Email Items with Fixed Size to the Email Body item.

4. Click the item in the Layout Tree pane to open the Properties pane.

5. Edit the item in the Properties pane.

Create and Edit Stripes

Stripes help define the purpose and placement of the information in your email.

Create a Stripe

Stripes are composed of Extension Items.

1. Add an Extension Item to the Layout Tree pane.

Group Items are used to start a Stripe, because they act as the trunk of the Extension Item tree.

2. Select a Purpose from the Stripe Properties box in the Properties pane.

Assigning the appropriate Purpose is important, because it helps the SmartWeb designer define when and where to put each Stripe.

Purposes for email:

Header: Used in all emails and appears at the top of the email.
Info: Used in the invitation email.
Action: Used in the invitation email.
Reminder: Used in the reminder email.
Footer: Used in all emails and appears at the bottom of the email.
Other

A well constructed email will have Stripes that are placed in a logical order. For example, invitation emails are often arranged with Header, Action, Info, and Footer stripes.

3. Connect Extension Items to build the Stripe.

Edit the Properties of a Stripe

1. Select the trunk Extension Item.

2. Make the appropriate edits in the Properties pane.

View your Stripes

1. Stripes are labelled and divided on the Layout Tree pane of your email.

Stripe Toolbar

2. The Stripe Toolbar appears when you hover over a Stripe in the Preview pane.

Stripe options available in the Preview pane.

: Purpose of the Stripe, which defines how it behaves in your email.

: Add a new Stripe.

To add a new stripe:

1. Click and select the appropriate theme from the Theme pane.

2. Click the new Stripe from the Preview pane.

: Delete the Stripe.

: Move the Stripe up or down on your email.

You can also move a Stripe by clicking and dragging the trunk Extension Item in the Layout Tree pane.

Managing Translations

1. Click to open the Manage Translations window.

2. Click Add to create a new translation.

3. Enter the word you want to translate in the Add translation field and click OK.

4. Locate the column for the language you want to translate your original key word.

5. Select the box and enter your translation.

6. Repeat steps 2 and 3 to create new key words.

7. Repeat steps 4 and 5 to add new translations.

8. To delete a key word or translation, hi-light the appropriate column and click Delete.

You can Import translations using a csv file, or Export translations into a csv file.

The File menu contains options for handling and managing your emails.

Save: Save your current email design.
Export: Export a .tre file of the current email.
Import: Import a .tre file of a previous email.
Create Theme: Create a new theme that can be applied to your emails.
Apply Theme: Open the Theme list window where you can edit existing themes or apply a theme to your current email.