Editing mailing content

This topic describes how to use the Easy Edit CMS with integrated rich text editor to edit mailings in the Template Kit. The mailing is displayed as it will look when sent.

Image: Easy edit

Editable content elements have a menu bar with buttons for editing, moving, copying and deleting. Depending on your template configuration, you might be able to, for example, edit some elements, but not move or delete them. In this case, the menu bar shows only the Edit button Optimizely image.

Click Tour next to the action buttons at the upper right edge of the editor window for an interactive tour of the Template Kit.

On the left side above is the sender, subject, attachments area. You must enter a sender, a sender email address and a reply-to email address to send the mailing. For more information, see Smart Campaigns Step 2. Configuring the Message.

Paragraphs

On the left side, you can find a preview of your message template with its paragraphs (content elements). Paragraphs can contain various content types (text, images, banners, lists, and so on). In a template, content is included as a paragraph. You can add,import, edit, move, copy, and delete paragraphs.

Add

The New: ... button appears wherever you can insert a new paragraph. Click it to insert one. Depending on the complexity of your template, you must select a sub-type of the inserted paragraph in the next step. Click Save to add the new element to your mailing.

Import

See Easy Copy.

  1. Click New: ....
  2. Click Import paragraph and select the source.
  3. In the Source client drop-down list, select a client The working environment of Optimizely Campaign. A client is a stand-alone and closed system that serves to organize your mailings. Campaign users can use one or more clients for your scenario.. If you only use one client, it is already selected.
  4. In the Source content drop-down list, select a message or message template and click Next. Importable paragraphs from the source are shown.
  5. Check the boxes of paragraphs you want to import.
  6. Click Import paragraphs.

Edit

To edit a paragraph click Edit Optimizely image. The edit area opens in a new layer on the right side.

You can edit texts by using the rich text editor.

Paragraph types contain several tabs and input fields for entering content, setting the layout, and assigning target groups or click profiles Click profiling allows target groups to be generated quickly and easily. Click profiles work in a similar way to assigning keywords (tags). For example, email recipients who frequently click Blu-ray offers are segmented via a click profile then supplied with targeted and highly relevant information.. See Template Kit.

Inline editing

Instead of using the rich text editor, you can edit texts directly by clicking the text below a paragraph. The editor toolbar with buttons for text formatting appears.

Image: Inline editing

The rich text editor has an additional Source button that lets you edit the text's HTML code.

Move

Some paragraphs cannot be moved everywhere, or can only be moved within a certain section. You can only add new paragraphs at the end of a content section (header, footer, paragraph group and so on).

To move a paragraph, click Move Optimizely image and move the cursor where you want to insert it. When the message Click here to move the selected paragraph above this paragraph appears, click again.

Copy

To copy a paragraph, click Copy Optimizely image then move the cursor to the position where you want to insert it. When the message Click here to copy the selected paragraph above this paragraph appears, click again to drop and insert the copied paragraph.

Delete

To delete a paragraph, click Delete Optimizely image.

Some paragraphs cannot be deleted.

Working with the rich text editor

For any text input (except headlines, subtitles or links), templates provide a rich text editor. The rich text editor opens in the right side configurations window when clicking the name of a paragraph or when creating a new content paragraph with optional text.

Image: Rich text editor

The editor toolbar has buttons for simple text formatting similar to those in text processing software.

Change the content and click Apply; a preview appears on the left side. You can change the view mode to HTML, mobile, text and online preview of the mailing.

Editing source code

To edit the HTML code of the text, click Source. To return to the text view, click Source again.

Inserting field functions

In the editor toolbar, click Insert field function Optimizely image to insert a field function. Field functions can insert the content of a recipient list field, a personalization algorithm, or other personalized content.

Personalized links

You also can use field functions to create personalized links in your mailings. You can use field function placeholders in the domain part or path of a URL and in URL parameters. The link tracking of personalized links works as in regular links.

Changing background color

When working in the rich text editor with a white font or very light font, change the editor background color to make editing easier. Click Change background color  in the toolbar of the relevant text field. Click the button again to change the background back to white.

Inserting images

You can insert images directly into the text field by clicking Image .

Some paragraph types also let you insert an image, either in the General tab or in Image tab. If an image can be inserted, you find a Browse... button and an Alternative URL field.

Images can either be uploaded from your computer or referenced via a URL. If you choose the latter option, make sure the image is available at the indicated server when the mailing is being sent. Otherwise, the sending cannot be done.

  • Image files can be formatted as .jpg, .jpeg, .png or .gif.
  • Images used in a mailing are automatically scaled to the size defined in the template. For the best image quality, however, you should resize images to fit before uploading them.

To delete an image, click Delete then Save.

You can use anchors to refer to places within the mailing. To create anchor links, do the following:

  1. Place the cursor in the text in the rich-text editor where you want to place the anchor.
  2. Click Anchor Image: Anchor icon   on the editor toolbar and enter a name for the anchor.
  3. Select the text in the rich-text editor where you want the link to the anchor.
  4. Click Link Image: Link icon on the editor toolbar.
  5. In the Link dialog box, in the Link Type drop-down list, select Link to anchor in the text.
  6. Under Select an Anchor, select the anchor.

Changing view

You can change the view mode of the mailing preview to HTML, Mobile, Text and Online Version. To change the view mode, click one of the tabs at the top left.

  • In HTML preview mode, menu bars and buttons are hidden, and you see the mailing as it will appear to recipients.
  • The Mobile tab displays a preview of your newsletter on several mobile devices and with various display modes. See also: Previewing on a mobile device.

    Image: Mobile preview

  • The Text tab shows the text-only version of the mailing.
  • The Online Version tab shows the mailing as recipients will see it when they click the online version link on top.

Previewing on a mobile device

The Mobile tab lets you preview your mailing on mobile devices. If you use a template with integrated mobile version/Mobile Fusion, the optimized layout for each device is automatically shown. If you do not use a Mobile Fusion template, the HTML version appears and scales to fit the display of the selected mobile device.

The preview of a mailing serves only to test content and layout of the mobile version. The actual appearance on the devices may differ due to software versions and settings. To implement a preview for a mobile device not listed here, contact customer support.

To test different devices and display modes, perform the following steps:

  1. In the list above the preview, click a mobile device. The mailing preview for this device is displayed.
  2. Hover over the mailing preview; the arrow changes to a hand icon.
  3. Click and move the mailing to scroll down and up in the preview.
  4. Click Rotate device Optimizely image to switch between portrait and landscape mode.
  5. Move the slider on the right to change the scale of the preview.

Action buttons

Image: Action buttons

  • Target Groups. Does not become active until at least one content element uses a target group Subset of recipients defined by rules and conditions and a logic relationship between them. For example, all recipients in the United Kingdom.. Click Target Groups, select one or more target groups, and click Submit Selection. In the mailing preview, only the content elements that are assigned to the selected target groups are displayed.
  • Test Message…. Send a test message to check the appearance of the mailing before the actual dispatch. For a test email, do the following:
    1. In the top toolbar in the editor, click Test Message….
    2. In the Recipient List drop-down list, select a test list.

      Only use test lists and no real customer data. See also Recipient lists.

    3. If you want to simulate a target group, select a target group in the Simulate Target Group drop-down list.

      The test recipients selected in the next step can also belong to other target groups.

    4. In the Recipients list, select one or more recipients.

      To create a new test recipient, click Create Recipient… and enter the necessary recipient data. Then click Submit.

    5. Click Send Email to send the test messages in multi-part format, or click Send HTML Version or Send Text Version if you want to test only one format.

    If you want to send a test message of type print, SMS or Mobile Push, see Nodes and elements.

  • Landing Pages…. Create a new landing page or manage existing ones. If you create a new landing page, the layout of the selected mailing template is used. You can edit landing pages like a mailing in the editor and use your own layouts.

    Image: Creating a landing page

    To link to a landing page in the mailing, enter the placeholder {Landing page:n°} in the URL box. In this placeholder, substitute the element with the landing page number (for example, {Landing page:1}). You can find the landing page number under Landing Pages in the list of available landing pages.

    Image: Link a landing page

  • More. Contains further options:
    • Content report. Get a content report for link validation.
    • Print. Print the mailing preview.
    • HTML (PNG). Save the HTML preview of the mailing as an image in PNG format.
    • Encoding/Offline HTML. Specify the character set with which you want to encode your mailing and attach images and style sheets directly to the email. See Encoding/Offline HTML.
    • Edit tracking links. Opens and clicks are tracked as standard in both the HTML and text versions of a message. You can apply these settings globally or configure the tracking function for each link in a message. See Tracking.
    • Retrieve RSS feeds. Retrieve the data of all RSS feeds within this mailing.

      Already existing RSS feeds will be deleted and manual changes are undone.

    • Import mailing content. If you use the free-text template as content type, you can upload a ZIP file with the entire mailing content including HTML and text file as well as graphics. See Import mailing content.
    • Edit directly. See Edit directly (HTML).

      The rich text editor cannot be used after the Edit directly option is enabled.

Closing the editor window automatically saves changes.

Edit directly (HTML)

If you activate the Edit directly mode, the original template cannot be edited afterwards. If you switch back from the Edit directly mode to the template editor, changes made in this mode are lost.

Instead of editing a template, you can edit the mailing's HTML source code. In the editor window's top toolbar, click the action button MoreEdit directly.

Edit the HTML source code or the text version of your mailing. Select the tab to edit the desired version. Before you save changes, select the Activated check box.

Image: Editing tools

When editing HTML code, you have the following options:

  • Format Content. The code is reformatted, inserting line breaks and indenting the tags.
  • Compress Content. Remove the line breaks and indented tags before saving. This removal ensures that velocity elements in the HTML code (for example, field functions) work correctly.

Image: Editing options