customer community Getting started Visual Editor Guide!

Transcription

1 Getting started! 1

2 Contents Introduction... 3 Visual Editor Options Advanced Tips Do s and Don ts Testing Messages

3 Welcome The Visual Editor tool is the ideal resource for creating messages without needing html coding skills. The Visual Editor is a WYSIWYG (What You see Is What You Get) tool designed to be simple and easy to use. Regular users of Microsoft Word, and other word processing packages will be familiar with its features with many of the standardised text formatting options available. Visual Editor Options Text Editing Font family The following font faces are provided as web-safe fonts. Trebuchet MS Verdana Andale Mono Arial Book Antiqua Webdings Times New Roman Arial Black Courier New Comic Sans MS Tahoma i Σψμβολ Georgia Helvetica Impact Wingdings 3

4 Font size This uses the size attribute of the text instead of pixels (px). Format Format allows you to apply hierarchy to your text by setting it to a paragraph, a heading, or an address. Each has slightly different attributes. Paragraphs apply a clean space between each section without the use of a carriage return, each heading has a different default height with heading 1 being the largest and heading 6 the smallest. You can alter the default sizes of headings using the Font size drop down. Text decoration The following is a list of standard text decorations found in the Visual Editor tool bar. Bold Makes the selected text bold. Italic Makes the selected text italic. Underline Underlines the selected text. Strikethrough Strikes through the selected text. Subscript Makes the selected text subscript. Superscript Makes the selected text superscript. Outdent Decreases the margin of the selected text. Indent Increases the margin of the selected text. Left align Aligns the selected text to the left. Right align Aligns the selected text to the right. Centre align Aligns the selected text to the centre. Force justify Forces the text to fill the full width of the given area. Numbered list Applies a set of numbers to a list. Bullet list Applies bullets to a list. Text colour Sets the foreground colour of the selected text. Background colour Sets the background colour of the selected area. 4

5 Advanced options The following is a list of advanced options found in the Visual Editor tool bar. Horizontal rule Insets a horizontal line at the selected point. Add link Create a link to an external web page. Remove link Deselects an elements link status. Add Anchor Inserts or edits and anchor, a reference point, at the selected place with the specified name. Insert image Add images to your message. Find Opens a search box. Insert custom character Inserts the more unusual characters into your message, in the correct format. Redo Redoes an action you applied the undo to. Undo Undoes the last action. Toggle guidelines Displays guides to where table cells and other elements appear. Full screen Set the visual Editor to fill the screen. Help Opens PureResponce help. Creating Tables The following is a list of table options found in the Visual Editor tool bar. Insert table Create a new table. Table row properties View or change the properties of the selected row in a table. Table cell properties View or change the properties of the selected cell in a table. Insert row before Inserts a new row above the one that is currently selected on a table. Insert row after Inserts a new row below the one that is currently selected on a table. Insert column before Inserts a new cell to the left of the one that is currently selected on a table. Insert column after Inserts a new cell to the right of the one that is currently selected on a table. Delete column Removes the currently selected cell on a table. Split table cells Breaks apart merged cells on a table. Merge table cells Joins cells together on a table, so they form one larger cell. Delete row Removes the currently selected row on a table. 5

6 Advanced Tips Working with links Mailto: It is possible to set any web link to an address. This is done by entering mailto: before the desired address. For example, Note: Whilst this is an accepted format, the mailto function opens the default client installed on the recipients machine. This is not always the desired option for the end user. Images as links When making an image a link, by default a blue link border is activated around the image. To remove this, select the image by clicking on it once, and the use the from the tool bar. Select the appearance tab and set the border to 0. Setting link colours Select the link you wish to change by highlighting it in the Visual Editor window. Click the insert/ edit link button. Click on the advanced tab and add additional settings using the styles text field. Colours are set using a hexadecimal reference. This is always prefixed with a # symbol. You can view a full list of the certified web-safe colours at Here is an example of a colour setting. Note: html use US English. color:#fff; (white) color:#000; (black) 6

7 Additional link styles Multiple styles can be applied to any element using the style text field. After each style attribute add a semi colon to show the end of a given attribute. To remove the default underline option add the following to your style. text-decoration:none; Here is an example of a style setting which changes the colour and underline on a link: color: #fff; text-decoration: none; Do s and Don t s Don t Copy and Paste from Microsoft Word Microsoft Word (in particular the most recent 2007 Office edition) uses its own version of HTML to render the content. As a result, when text is copied into the Visual Editor this background information is carried across resulting in some unsightly content and errors. We advise copying your word document into a plain-text editor, such as notepad before pasting into the Visual Editor. Additional Content Add an image This is a legacy feature which can be found under the Additional Content menu. This allows for an image to be embedded into a message rather than referenced from a website. This is no longer a supported option in marketing. 7

8 Additional Content Add an attachment This is a legacy feature which can be found under the Additional Content menu. This allows for an image to be embedded into a message rather than referenced from a website. This is no longer a supported option in marketing. Another legacy feauture, although it is acceptable to send attachments, it greatly increases the spam rating when sending to high volumes. Oversize images Maximum width for a single image is 600px. You will receive a maximum file size warning for any image over 80 kilobytes. Use images that are copyright Don t pick images up from public sites such as Flickr, or from random searches with services such as Google Images. If you do not have permission to use the images in your you can end up in some very hot water. Always check copyright and usage terms on all images you use. Do Save regularly We ve all done it. You work for hours on something and then the PC crashes or the power goes out and all your hard work is gone. Make sure you regularly save your work, you can also create copies of your messages if you wanted to create iterations of each message. 8

9 Resize images Make sure to upload your images to either Upload Library, or a image host of your choice at the size you wish to us them at. This ensures that your message is streamlined and is as small as possible. It also reduces the risk of an image losing its downscaled settings when sent and ruining your message. Create plain text versions Always make a plain text version of your message. It may be that the majority will never read it or even see it, but it increases the value of your message and reduces its spam rating. Use the spam checker You can check your messages for errors and spam warnings at any point. Always check your message before sending it out. Test and test some more Try to check your message across as many clients as possible. You can send your message to a list of test accounts or use our inbox preview, to be sent screen shots of how your message looks across the world s most popular mail clients. Contact support If you are having difficulty with getting your message out exactly how you want it to, the Pure360 support team is available to diagnose the problem and aid in finding the best solution to your problem. They are available Monday to Friday 09:00 18:00*. You can talk to support on or support@pure360.co.uk. 9

10 Testing Testing messages There is a lot more to creating a professional looking than you may think. Each client, both web mail and PC mail (Microsoft Outlook, Eudora, Hotmail, Yahoo) display s differently. Some accept certain formatting styles which others don t. For example, you cannot provide a background colour to the body of your message in Hotmail, but you can in Gmail. You should always test your messages before sending them. All web clients are free to sign up for, set up accounts to test across each one. In addition you can use the inbox preview function in PureResponse to see screen shots of how your message appears across the most popular mail clients. 10