Manual: BrightEdit. This manual is written for MailPlus Marcom and ecom.

Transcription

1 Manual: BrightEdit This manual is written for MailPlus Marcom and ecom.

2 Table of contents Introduction BrightEdit set-up The main menu The toolbar The template The content blocks Actions with content blocks Adding a content block Moving a content block Duplicating a content block Deleting a content block Editing a content block BrightEdit article editor Article editor set-up General editing functions Icons... 20

3 Introduction MailPlus is a user-friendly marketing application that works intuitively. A component of MailPlus that, however, requires additional explanation is the MailPlus HTML editor: BrightEdit. You can create a professional HTML message or landing page based on a template with this editor. How does this actually work? This is explained in this manual. In this manual you will find information about the BrightEdit set-up (1), information about the content blocks (2) and finally a list of all the available functions of the article editor of BrightEdit (3). In case you have any questions or suggestions after reading this manual, please feel free to use the help function in MailPlus or call MailPlus Support: / support@mailplus.nl. 1

4 1 BrightEdit set-up You can use BrightEdit in the Message Center and the Page Manager of MailPlus for creating messages and landing pages. The set-up of this editor is described in this section. The editor s working screen consists of the following four components when BrightEdit is opened: 1. The main menu 2. The toolbar 3. The template 4. The content blocks Image 1.1 shows the different components in BrightEdit. 2

5 Image 1.1 BrightEdit set-up 3

6 1.1 The main menu The BrightEdit main menu provides access to the functions for composing your message or landing page. This includes the option of loading a template or previous version into the application and to use the seven shown icons. Loading a template The first step when creating a new message or new landing page is selecting a template. As a MailPlus user you may have multiple templates available in your MailPlus account. This ensures that you can use different templates as a communication medium for different target groups. You can select your template from the BrightEdit dropdown menu. One template is always loaded as standard when creating a message or landing page. Loading a previous version BrightEdit has an autosave function. A version will be saved automatically after you as the user have implemented ten changes and/ or after five minutes. You can select a previous version by using the dropdown menu on the right above the working screen to continue working from there. Icons In addition to loading a template and/or a previous version, you can use seven icons in the main screen. Below an overview of the related functions is provided: = Save You can save changes in the message or the landing page with this icon. Once you have, for example, moved an article, you can easily save the current setting and format by clicking this icon. MailPlus also has an autosave function (see 1.1.2, Loading previous version). CTRL-S can be used as the key combination for saving. 4

7 = Preview You can view a message or landing page in a new window by clicking this icon. This is the final view for your target group. The preview window will open in a new screen. You can simple exit this screen after use to return to the editor. You can quickly maximise the screen by using the CTRL-M key combination = Full screen You can display the editor in a full screen in the BrightEdit main screen. This will make using the editor easier (for example, additional scroll bars will not be displayed). You can then fully concentrate on your message or landing page. = Undo If you have changed something that does not have the desired effect, you can go back an action with this function. You can also go back multiple steps. You can even go back to the very beginning. = Redo If you have gone a step back too many using Undo, you can go a step forward again with this function. Or, rather, redo the action. = Show borders Your template is organised using tables (1.3, The template). These tables are hidden in BrightEdit. If you would prefer to see the structure of your template when defining a message or landing page, you can set this up by using this icon. CTRL-B is a shortcut key combination for viewing borders in BrightEdit. 1.2 The toolbar You can add new content blocks to a message or landing page by using the BrightEdit toolbar. 5

8 Position You can drag the toolbar to a practical position on your screen, for example, to the left or right of the template. When you scroll, the toolbar will stay at its position so that you can always immediately have all blocks at your disposal. The position of the toolbar will be saved with the message. The next time you use BrightEdit you will again see the toolbar at the same position. Functionality The content blocks are grouped in a number of main categories in the toolbar. You can make every main category drop down to view the related content blocks. You can, for example, use the Articles and Response main groups in the Message Center of MailPlus. The Page Manager toolbar will also display an option for different media. Image 1.2 Toolbar Message Center and Page Manager Difference between Message Center and Page Manager As specified, there is a difference between the content blocks of the toolbar in the Message Center and the Page Manager of MailPlus. These differences are due to the options available for a landing page when compared to the ones available for an message. 6

9 clients offer far fewer options than landing pages where the content type is concerned. For example, Flash and JavaScript does not work in but it does work on landing pages. This means that you have fewer different content blocks when creating an HTML message than when creating a web page. 1.3 The template When you wish to create an HTML message or landing page in MailPlus, you will be working with a template. A template can best be compared with a template as used in Microsoft Word. You can define all style elements in a template such as the company logo, colours, in-house font (your own font and size), a header and footer and the layout. The great benefit of creating a message or landing page by using a template is that you no longer have to worry about the formatting. You only need to focus on the text, images and click through links. The use of a template, moreover, ensures that there is a consistent image. Set-up When you have selected a template, it will be displayed in BrightEdit. We would like to provide further details about the structure of a template before you start using the editor. A template is built up from HTML code (formatting code for website pages) and consists of tables. For example, the first row of your template can be the header and the bottom row of the table can be the footer. Often the table structure is slightly more complex than as in this example. There may, for example, be different columns per row that, in turn, contain nested tables. All with their own sizes and properties. To ensure that we do not go into too many details, we would like to only discuss the issues that are important to you to create a good or landing page. You will, therefore, see a simplified template structure in the following example. 7

10 Image 1.3 Set-up HTML template 8

11 Non-editable components The coordinating template does not just consist of content blocks. A header or footer may have been included as a standard template element and, therefore, will not be editable. Depending on the set-up of your template, you may, therefore, have non-editable elements. When you do wish to edit these elements, the template must be changed. Moving and positioning content blocks The template will contain a definition of where new content blocks can be inserted. When you insert a content block, these available locations in the template will be highlighted. Your template may also contain content blocks that cannot be moved but that are editable. When you do wish to move this type of content blocks, a drag icon will not be displayed. For more information about moving content blocks consult section 2.2. Do you wish to insert a content block in a non-available location or move a fixed content block anyway? The template will have to be changed 1.4 The content blocks Every content block is built up from a bar (1) at the top, a block menu (2), an icon that indicates whether it is a standard, optional or adaptive content block (3) and the content itself (4) Image 1.4 Content block set-up 9

12 Below we provide a simple explanation of these elements. For more detailed information about working with content blocks consult chapter 2. 1) Block bar The bar on top of a content block has two functions: making a content block recognisable and being able to drag it. Section 2.2 explains how a content block can be moved. The bar contains the block menu and the icon for special content blocks. 2) Block menu A menu with options is available in the block bar for each content block. This menu offers the option of editing, duplicating and deleting a content block, selecting a template and, if required, adding social media options. The last two options require further explanation: Block template In addition to the template for a complete message or landing page, BrightEdit uses minitemplates for content blocks. These block templates determine the text alignment, fonts and position of any used images or figures. You can select this type of block template in the block menu for the Form, Survey, Poll and YouTube video content block types. The article content blocks are an exception to this function. You can select the template in the article editor and not in the block menu since the content of articles can still be edited in BrightEdit. This ensures that an article is not unintentionally replaced by a template and that content cannot be lost. Social media When you have inserted a trackable link in a content block (consult 3.3 for more information about inserting links), you can have your reader share it with a social network. The reader can press the Hyves, Facebook, LinkedIn and/or Twitter icon to share the link with one of the networks. 10

13 But how can I set this myself in a content block? You must have a content block with a trackable link available. Select the Social media option in the block menu of this content block. A dropdown screen comparable to the following image will be displayed. Image 1.5 Add social media Specify with which social networks you wish to allow sharing and provide a suitable name. Next, select the relevant trackable link. The description that you provide here will be displayed as the default text when it is shared by your reader. The reader can, if required, change this before sharing the link. The icons will be positioned at the bottom of the content block after having pressed OK. 11

14 3) Icon for optional or adaptive content blocks Every new content block that you insert in a message or on a landing page is a standard block. This standard block will be visible to all contacts (in the final target group). As a MailPlus Campaigns user you, however, have the option of making a content block optional by clicking the indicated icon. You can determine with this who can see and who cannot see this content block based on target group profiles. Image 1.6 Optional content block 4) Block content You will always find the content of a content block under the block bar. Depending on the block type, an article text, video or form can, for example, be displayed here. Not all content types are editable. Section 2.5 provides more information about this. 12

15 2 Actions with content blocks Now that the set-up of BrightEdit has been generally explained, we will provide in-depth information in this section. You will find more information about the most important component of BrightEdit here: working with content blocks. You can perform the following actions with content blocks in BrightEdit: Add a new block Move a block Duplicate a block Delete a block Edit a block The possible actions are explained in the sections below. 2.1 Adding a content block You can easily add a new block to your template. Do this by selecting the correct content block in the toolbar (1.2), keep the left mouse button pressed, and dragging it to the correct position in your template. You will now see that a grey area (a landing zone ) will be displayed where the block is being positioned when you release the mouse button. Image 2.1 Adding a content block 13

16 2.2 Moving a content block When your content blocks are not in the correct sequence, you can move them using the top bar of the content block. Position your mouse above the block bar so that your mouse changes into a drag icon. Keep this bar selected with your mouse and drag the block to the required position. You can release the block for positioning at the highlighted locations (that appear when you drag a block). Image 2.2 Moving a content block Fixed blocks A drag icon may not be displayed at some block bars. These are blocks that have been given a fixed position when creating the template. As a user, you can, however, change the content of the block but not change the position. If you wish to display such a fixed block at another position, you will have to change this (or have it changed) in the template. 2.3 Duplicating a content block You can easily duplicate a block through the block menu. Open the menu and press Duplicate. A copy of the block will be placed under the 14

17 original block. You can, if required, move this new block to the correct position in the template and/or edit it. 2.4 Deleting a content block You again use the block menu to delete a content block. Select the Delete option after having selected this menu. A pop-up window will be displayed in which you will be asked to confirm the deletion. If you press OK, BrightEdit will delete the complete block. 2.5 Editing a content block You can edit the content of a block by double clicking the block or by using the block menu. How you can edit the content will depend on the content type. The content of the Form, Survey, Poll and YouTube video content blocks cannot be edited in BrightEdit. You can, however, use Form, Survey and Page Manager to edit them. You can only select which content must be displayed but the content itself can, therefore, not be edited in your message or landing page in BrightEdit with regard to these types of content blocks. The following figure shows an example of a form content block where you can select a form from the Form Manager after double clicking: Image 2.3 Form content block 15

18 Is the block of the Article type? A pop-up with the article editor will then be displayed after double clicking the block. We describe the way in which this article editor works in section 3. Below an overview of the editing options in BrightEdit is provided based on the content block type: Content block Content Edit in Article - Free formatting Text and/or images BrightEdit Article - RSS Text and/or images BrightEdit Respons - Form Formulier Form Manager Respons - Survey Survey Survey Manager Respons - Poll Poll Poll Manager Respons - Formulierafschrift Resons - YouTubevideo Formulierafschrift - YouTube-video - 16

19 3 BrightEdit article editor An article editor will be displayed in a pop-up window after double clicking an article content block. The displayed article will contain example content. How you can create your own article based on the example content by using the article editor is explained in this section. 3.1 Article editor set-up You can use a number of general editing functions and an icon menu in the article editor. The following sections provide an explanation of these functions and icons. Before you can start to create an article, you must first select a block template from the dropdown menu on top of the icons. Image 3.1 Article editor 17

20 3.2 General editing functions The example article that is initially displayed can be used as the basis for your own content. You can select, delete, move and insert as new content (text and/or images) using the general editing functions in the editor. Selecting text You can select text items when formatting a content block to, for example, change the formatting or to make it into a click-through link. You can select a piece of text in BrightEdit by pressing the left mouse button and selecting the text using the mouse. Selecting an image To place a click-through link behind an image or to delete an image, select this image. You can make your selection by clicking the image using your left mouse button. A selected image is indicated by the 8 squares that surround it. Image 3.2 Selected image You can deselect the image by positioning the cursor outside the image and again pressing the left mouse button. 18

21 Moving items Items can be moved in your article block such as, for example, images. This can be done by keeping the left mouse button pressed on an item or a selected text piece and then dragging it to the required new position. Hard return versus soft return There is a difference between a hard and a soft (also known as a line break ) return (Enter). Only the Enter key is pressed with a soft return and a new line will be displayed without an additional empty line (white). A hard return, that is, a combination of the Shift and Enter keys, and produces a new line after an empty line (a new paragraph). Inserting a hard or soft return will influence the HTML code of the message. A property is inserted in here in the background to make a distinction between a new paragraph (hard return) and a new line (soft return). Functions such as numbering, enumeration, indentation and alignment always work based on paragraphs and, therefore, you should use a hard return for this. Saving changes When you are satisfied about the result of your edits, press OK to save the changes. This button can be found at the bottom of the article edit window. Image 3.3 Saving changes 19

22 Cancel changes When you are not satisfied with the implemented edits with regard to an article, press the Cancel button or the cross on the right at the top of the edit screen so that the content block is not changed. The pop-up window will be closed and you will return to the BrightEdit main screen. 3.3 Icons In addition to the general editing functions, there is an icon menu at the top of the article editor. These icons can be used to complete your article. The following options are available: = Insert a link You can insert a click-through link in the article editor after selecting a word (or part of a sentence) by using this icon. A new window will be opened after you have pressed this icon in which you can define the link specifications. Image 3.4 Insert a link 20

23 You can make a choice based on 7 link types: Link (with tracking) to an external web page This is a link to a web page where a count is made regarding how often the link is clicked and by whom. The results of this can be found in the report in the Mailing Manager. Link (with tracking) to a page in the Page Manager This link type refers to a web page that you have created in Page Manager. Internal link to a bookmark in this You can refer to a position in your message or landing page that is marked with a bookmark (also known as an anchor) with this option (also see Insert bookmark ). An example of this is a reference to a specific paragraph. This link type is often used when creating a table of contents. Link to an address A new message will be opened from the standard application when the reader clicks this link. A few default values that you can specify for this. Special link Two special links are available: a link to the web version of a message and a unsubscribe link through . The special links are usually already specified. Link to a document You can link to a document in the Document Manager in MailPlus. Link (without tracking) to an external webpage This is a link to a web page regarding which measurement results are not tracked. = Deleting a link You can delete the link by clicking this icon after selecting a text with a click-through link in your message or landing page. = Anker invoegen A bookmark is a marker to which a reference can be made. For example, the start of a paragraph or at the top of your message. An often used application is at the top of a table of contents with clickthrough-links to the articles included further along in the text. You then 21

24 insert a bookmark at every article to be able to refer to them. To insert a bookmark, first position your cursor at the required position. Next, click the bookmark icon and enter a name in the pop-up screen. The bookmark will be placed after you press OK. You can read how you can next make a link to a bookmark in the section: Insert link, link type 3. = Inserting/editing an image A new window with three tabs will open after clicking this icon. You will see examples of the images that you have uploaded through Image Manager in the Image work folder tab. You will not see the real dimensions of the images. You can click an image for this. Next, the image will be displayed in its original format in a window. Behind every image you will see an insert link. When you click this, you will automatically jump to the first Image information tab. You will see that the URL with the path to the image has already been entered. If you wish to use an image that can be found at a different location, you can now continue to Image information to specify the URL there. You will have a number of options in the General tab to influence the image properties. 22

25 Image 3.5 Insering/editing an image Alignment The alignment option contains a list of options that can be used to align the image with regard to the surrounding text. When you work with alignment, the most convenient method is to position the image completely at the beginning of the paragraph. Alt. text The Alt. text appears in a small window when you move your cursor above the image. In addition, the alternate text is also displayed to the recipient when images are not yet available/loaded in an message. 23

26 Vertical and horizontal space You can define the white space around an image with this option. Border The number that you specify here is the thickness of the border around the image in pixels. The colour of the border is defined in the template and you cannot change it here. Style and classes When you are familiair with HTML code, you can use these fields to add new classes and influence the styling of an image. = Special characters You can add special characters to your text such as: currency symbols, punctuation characters and mathematical symbols. = Inserting personalisation You can personalise your message and landing page through this function. All database fields of your MailPlus account can be used for this. A special personalisation field is the Salutation field. This is a combination of gender, prefix and surname. If, for example, the gender is not available, it will become Dear Mr/Ms Jones. If the surname is missing, the whole text will be replaced by an alternative such as: customer or business relation. This can be set based on your preferences when your MailPlus account is set up. = Cut Use this function when you do not wish to duplicate text but, instead, wish to move it. Cut the selected text and, next, paste it using the paste icon at the required position in the message. CTRL-X is the alternative key combination for this function. 24

27 = Copy You can copy a selection by clicking this icon after which you can have it appear at another position or in another document (also use the paste function for this). CTRL-C can be used as the shortcut key combination for copy. = Paste After having cut or copied a selection, you can add it by using the paste function. Do, however, position the cursor in advance at the position where the copied or cut text should be added. CTRL-V is the shortcut key combination for paste. = Paste as plain text When you copy text from another location, for example, a website or PDF, the probability is already high that a style has already been linked to this. A style (font, size, colour, etc.) is also already available in your template. We recommend that you paste text as plain text to ensure that inconsistent design is avoided. This will ensure that all unnecessary styles are deleted and that the text will automatically use the style defined in your template. = Undo If you have changed something that does not have the desired effect, you can go back an action with this function. You can also go back multiple steps. You can even go back to the very beginning. = Redo If you have gone a step back too many using Undo, you can go a step forward again with this function. Or, rather, redo the action. = Find/replace This function is very useful when your message or page contains a lot of text. You can search for a specific character or a whole word. 25

28 You have two additional options to refine your search instruction: Match case You can use this to search for capital letters. Find whole words only You can use this option to find one or multiple whole words. This can be very useful when searching for a small word that can also be a part of a larger word. You can also search and replace text. Image 3.6 Find and replace = Table Adding a table can be very useful to create, for example, a clear overview or a plan. You can define a number of properties in a new window when inserting a table. Image 3.7 Insert table 26

29 = Insert divider You can insert a divider to, for example, make a distinction between articles. Position your cursor at the required position in the content block and click the icon. The horizontal line will become as wide as the content section of the specific insert location. = Source code This is the option to toggle between the WYSIWYG editor and the HTML editor. The code can be influenced that has been created using the WYSIWYG editor in the HTML editor. HTML knowledge, however, is required to ensure this is done correctly. = Bold Selected text can be printed in bold with this function. = Italic Use this icon when you wish to display the text in italic. First, however, select the relevant text before using the icon. = Underlined An underlined text or sentence can be created by using this function. = Strikethrough When you wish to display the text as being strikedthrough, use this icon. You can, for example, use this to display an old price for a product or service that you offer. = Subscript A selection of the text can be shown in subscript with this function. = Superscript If text should be displayed in superscript, use this icon in BrightEdit. 27

30 = Paragraph Use this icon when you want to start your text in a new paragraph. This icon has the same effect as an hard return (3.2). = Numbered list A numbered list can be inserted by using this function. If you click the icon again, the numbering will be removed. = Bullet list A bullet list of your text can be inserted by using this icon. If you wish to again delete an enumeration, click this icon again. = Decrease space Do you want to move your text or bullet list less to the right? Use this icon to decrease the left space. = Increase space Do you want to move your text or bullet list more to the right? Use this icon to increase the left space. = Align left This icon can be used to align a paragraph with text to the left. Without editing, text will always be aligned left as standard. = Centreren You can display text in a paragraph in the centre by using this icon. = Rechts uitlijnen You can display text in a paragraph aligned to the right by using this icon. 28

31 = Justify A paragraph can be justified and, therefore, the text will fill the content block up to the borders. = Paragraph The Format dropdown menu in the article editor offers the option to visually change the selected text. When the menu has dropped down, you will also see the options you can use in the example format. = Font family The font family can be set up to a character level through this menu. This can be simply achieved by selecting text and a font from the list. = Font size The font can be set with a character level accuracy. This is very useful to, for example, emphasise specific words. = Text color A screen with colored areas will be displayed when you use this icon. These are the default colors that you can use for the colors of the text after selection. You can also use More colors for a greater variety. Image 3.8 Select color 29

32 = Background color The background color can be assigned in the same way as the text color. In this case, the color behind the text will be given a specific color. When you change the background color, pay attention to the contrast between this color and the text color. It will be a lost opportunity if your text becomes (partially) illegible because of these edits. = Clear formatting If you have assigned text format elements such as color or size but you are not satisfied with the result, you can delete the formatting by using this icon. Do, however, first select the relevant text. = Show borders As explained in chapter 1, your template is built up from tables. These tables are hidden in BrightEdit. If you would prefer to see the structure of your content block when creating a message, you can set this by using this icon. You can again hide the borders by clicking the same icon again. = Full screen You can display BrightEdit using the full screen in the article editor of BrightEdit. This makes it easier to use the editor (for example, additional scroll bars will not be displayed). You can then fully concentrate on the article. 30