Difference between revisions of "Using the Campaign Editor (WYSIWYG)"

From Email Marketing Wiki
Jump to: navigation, search
(Created page with "The Campaign Editor, also known as WYSIWYG, is an all-in-one software solution to create complete email templates. What-You-See-Is-What-You-Get (WYSIWYG) means that all elements ...")
 
(No difference)

Latest revision as of 14:43, 2 August 2013

The Campaign Editor, also known as WYSIWYG, is an all-in-one software solution to create complete email templates. What-You-See-Is-What-You-Get (WYSIWYG) means that all elements of the page will be displayed on the exact same position.

You can create an email template without learning HTML. Just drag and drop objects to the page position them 'anywhere' you want and when you're finished test your campaign to see the results.

Layout

The Futuremail Campaign Editor has a number of features exclusive to Futuremail, and the layout may appear different to other WYSIWYG editors for other pages or websites.

W1.png


1. Code and Visual Editing

If you are familiar with HTML code, you can use these buttons at the top to swap between the Visual mode, where you have drag and drop functions, and Code Editing, where you can type HTML code directly into email template. The template auto saves whenever you change between the two, and updates on the code side will show instantly back on the visual side.


2. Automation and Personalisation

Automations allow you to import information and display it in your Campaign when it is sent out.

Personalisations allow you put the receiver's name or information into the email itself, or allow you to send only certain content to subscribers that match the criteria you set.

Personalisations and Automations will show up as %code%, however, you can send a test email to see how the content will be displayed before sending out your campaign.


Fetch From URL

Futuremail allows you to import a template directly from a website. Please note that the webpage at the address you type in will override your current template. This is handy when starting a new template that you wish to look like a website.


Insert RSS

If you have an RSS Feed that you would like to include in your email, put the cursor where you want the feed to show, then click the button, and follow the steps to insert the Automation code.

Please be aware that some RSS feeds may bring some formatting along with them, and it is advised to send a test email first to yourself to ensure the feed displays correctly.


Insert Conditional Content

Conditional content is when you wish to show certain images or text on your screen depending on which subscriber you are sending to.

Examples include sending different phone numbers to different recipients depending on where they live (i.e. 08 for WA or 02 for NSW), or more information for people who have clicked links or liked facebook.


Personalize Message

Personalize message gives you a quick option for pasting in the %code% for subscriber information (such as name/email), special links (such as unsubscribe), Social Links (for facebook/twitter etc), and other dynamic information (such as date/time).

It is a requirement for all Futuremail users that the unsubscribe link is included in every campaign.


3. WYSIWYG Toolbars

The toolbars for the WYSIWYG editor are what you use to add content and change your layout. Most functions should look similar to other WYSIWYG and most text/document editors, for example, Bold and Align Left.

These are explained later.


4. Content Window

The content window is where you type or paste in your content, and allows you to drag items around on the screen.

The content windows also allows you to right click on an element that you wish to modify, and gives you functions for adding new tables, and adjusting images, tables, and cells.


5. Text Only Version

Some people are not able to read HTML messages, generally because their email program is either unable to read them, or it has been disabled.

As a general rule, Futuremail will send the email in such a way, that if the recipient cannot open HTML emails, they will still be able to read the text from your email. Futuremail will format the text nicely, and ensure it is readable and presentable.

This can be disabled, and Futuremail allows you to create your own text version of your email.


Toolbar Description

Each button/image in the toolbar is listed below. Please note that some may function differently depending on your web browser and the version of Futuremail you are using.


Row1.png


  • First Row
    • Toggle Full Screen Mode - Changes the webpage to hide everything except for the Toolbars and the Drag and Drop section. This button will then toggle the page back.
    • Edit HTML Source - Similar to the Code Editor, however, it appears in a popup window. Changes may not appear until 'Update' is clicked.
    • Bold - Will make any characters you have selected Bold, and any new characters you type in the same line bold.
    • Italic - Same as Bold, except it will make your font Italicized.
    • Underline - Same as Bold and Italic, except Underlined
    • Strikethrough - Same as Bold, Italic, and Underline, except Crossed Out
    • Align Left - This will set the current paragraph to be left aligned. Text will start against the left hand side.
    • Align Center - Same as Align Left, except the paragraph will try to be towards the center.
    • Align Right - Same as Align Left, except the paragraph will be pushed against the right hand side.
    • Align Full - Similar to Left align, except sentences will be spread out to fill in the gaps along the right hand side.
    • Format - This specifies what HTML code you want the editor to use. You can choose paragraph
    • Font Family - This lets you set the font for any words you select.
    • Font Size - This lets you select the size of your font. Probably best to rely on Format when you are making headings


Row2.png


  • Second Row
    • Paste - Same function as CTRL+V and drag and drop.
    • Paste as Plain Text - Toggles the paste option to put in the text without formatting.
    • Paste from Word - Special paste option for copying from Word documents as Word documents not always compatible.
    • Find - Find or replace text on the page.
    • Insert/Remove Bulleted List - Changes the current paragraph into a dot point.
    • Insert/Remove Numbered List - Changes the current paragraph into a numbered point.
    • Decrease Indent - Decreases padding on the left of the text. Option is unclickable if padding is already zero.
    • Increase Indent - Increases padding on the left of the text.
    • Undo - Undoes the last action. Able to undo all changes while in Visual Editor Mode.
    • Redo - Repeats the last action if it was undone. Making new changes will prevent the redo button from working.
    • Insert/Edit Link - Changes the selected text into a hyperlink or edits the selected hyperlink.
    • Unlink - Removes the hyperlink, but keeps the text.
    • Insert/Edit Anchor - Adds an invisible placemarker to the page. Hyperlinks can then be added to navigate directly to that part of the email.
    • Insert/Edit Image - Adds an Image where the cursor is currently situated, and edits current images. Allows custom styling and sizing.
    • Select Text Color - Change the selected text to the colour showing under the 'A'. Change the colour by clicking the down arrow next to it.
    • Select Background Color - Highlights the current text. For setting the background of a whole section, use the Table Properties or Table Cell Properties.


Row3.png


  • Third Row
    • Insert/Edit Table - Adds a Table onto the page and Edits its style.
    • Table Row Properties - Modifies the table row. Most styling will not work unless it is applied to the whole table or an individual cell.
    • Table Cell Properties - Modifies the current table Cell. Allows styling including size, and colours.
    • Insert Row Before - Adds a new Row before the current cell.
    • Insert Row After - Adds a new Row after the current cell.
    • Delete Row - Deletes the current row. Will delete the whole table if this is the last row.
    • Insert Column Before - Inserts a column to the left of the current cell.
    • Insert Column After - Inserts a column to the right of the current cell.
    • Delete Column - Deletes the current column. Will delete the whole table if this is the last column.
    • Split Merged Table Cells - Will attempt to split cells. This can affect how the table looks dramatically and may be best to insert a row or column.
    • Merge Table Cells - Will attempt to merge the current cells. This can affect formatting, and may be best to remove unused rows or columns, or add a new table within a table cell as necessary.
    • Remove Formatting - Sets the current text to display without any styling.
    • Subscript - Similar to Bold etc, except that the characters appear smaller and below the text. Useful for footnotes[1].
    • Superscript - Similar to Subscript, except that the characters appear above the text. Useful with Math equations (x2), and dates (4th of July).
    • Insert Special Character - Similar to the character map in Windows. Always best to use superscript or normal characters where possible.
    • Insert Horizontal Line - Adds a line onto the page as an image in it's own cell. Set the width and height. Creating a table cell with a coloured background may give more flexibility.
    • Document Properties - Allows global modification of the document. May be best to set styles on a cell or table.


Basic Tutorials

Creating a Campaign is easiest when either an existing website or template is used. Select the template when setting up your Campaign, or choose any template then "Fetch From URL" when the WYSIWYG Editor appears.

When editing the Campaign, it is always good to remember that most email programs will not be able to show the email properly if everything is not set out in table format.

Once the content has been completed, and the style has been set, ensure the Unsubscribe link is added (Usually in the footer), and you are ready to test your campaign.


Creating Tables

To insert a table, click the Insert/Edit Table button on the toolbar, or right click and choose Insert/Edit Table.


Table add.png


Set the Cell padding and spacing to zero when you are creating tables just for the layout itself. You can leave the padding there if you are planning to put text etc into those cells.

When starting from a blank template, create a table that will form the shape of the outside of your email. This will normally be a table with 1 Column, and at least 3 rows (Header, Body, and Footer). From there, more tables can be added to each section with a number of columns.

Set the width to how wide you want your campaign to appear, and center the alignment if you want it to appear similar to the other templates. 

Best practice is also to create a table for each article in your template. This process allows you to choose how each Article in your template or campaign will appear, as well as designing menus or spacing titles and headers. If you adjust the table later by deleting columns, it will only affect that one article.

Editing a table gives you the same options as when you put it into your Campaign.


Inserting Images

Images are a great way of providing a visual representation of the content in your campaigns, and can help the receiver to find an article they may be interested in quickly.

If you are already using a template, it usually comes with stock images to show how the layout will look.

There are two ways of adjusting images, right clicking, and using the Insert/Edit Image button on the toolbar.


Image general.png


To change the image itself, you can type in the URL of an image that is on the internet, or click the Browse button at the right to open your Library.

The Image Description and Title are not always necessary, however, they can help illustrate when should be shown if the images are not able to be opened.
Image Description will appear in the email itself if the picture is missing, and Title will appear in a little box if the cursor is held over the picture.


Image library.png


Click on an image in your library, and it will replace the one in your template or campaign. If you need to add more images to your library, click the 'upload' option to load the upload wizard.


Image appearance.png


Styling can be applied on the appearance page. By default, no alignment will be set, and the dimensions will match the original size of the image.

If an alignment is set, then text will flow around the image, however, it is sometimes better practice to put image files in their own table cell.

As well as size and alignment, spacing and borders can be added and adjusted by typing a number into their respective boxes. Once changes have been made, the style section will show what the HTML code will look at, and allows you to make manual changes to any of the styling. Classes may not be recognised by certain email programs, so it is normally best to rely on the style section instead.

Once you have finished selecting the settings for your image, click update, and your template or campaign will now have the image that you want.


Deleting Images

Deleting an image is as simple as clicking on the image, and pressing Delete on the keyboard.

If your image is inside a table cell, and has left a space in your template once it has been deleted, then it may be best to remove the cell, either by deleting the row or the column. Most layouts have images next to each article, so as long as each article is in it's own table, deleting the column would be the better option.


Change Background Colour

Background Colour can be adjusted for a particular table, cell, or the whole email. In most cases is it best to leave the background of the email blank, and adjust either the specific cell or table.


Table Background Colour

Put the cursor into the table that you need to adjust, and open the table properties by clicking Insert/Edit Table.

Only the smallest table will be edited, if you have you cursor in the cell of a table that is nested within another table.

Click on the Advanced tab to show the styling you can add to the table.


Table advanced.png


Background images do not work in some Email Programs, including Outlook 2007.
It is best to use banner images, and solid background colours where possible.

Type in the colour you wish to use, or use the picker to select a colour. You can use either words, or the colour code. The colour code will appear automatically if you use any of the colours in the Picker, Palette, and Named tabs. The Named' tab will also show what words you can type to choose colours.


Cell Background Colour

Put the cursor into the table cell that you want edited, and open the Cell properties by clicking Table Cell Properties.

Same as adjusting the tables above, this will only edit the cell in the smaller table if it is nested within another table.

The General Tab is used for standard properties such as size and alignment. Click on the Advanced Tab for other styling options.


Cell advanced.png


Similar to the table background colour properties, type in or select the colour you want the background to be from the Picker.

Before you finish changing the style, you can select which Cells this style will be applied to.


Cell update.png


Update All Cells in Row is handy when you have a title or header that you want to be coloured differently.
When applying changes to multiple cells, this will override any styling the other cells previously had.


Changing Font

Changing the font is as easy as highlighting the words you wish to adjust, and clicking the buttons along the toolbar, or using keyboard shortcuts, such as CTRL+B.

If you find that your text is a mixture of different fonts, the easiest way to remove all formatting is the Remove Formatting button on the third row of the toolbar, then applying new font styles using drop down menus in the toolbar.

The colour of the text can be set by highlighting the words you want to adjust, and clicking on the Select Text Color button on the toolbar.

  • Clicking on the button itself will set the text to the colour underneath the A.
  • Clicking the arrow to the right of the A will allow you to select a different colour, and set that new colour as the default colour.
  • Links can also have their colour changed in this fashion