This panel is draggable.
Introduction
This app is intended to help in the design of an HTML-format email; it is part of the
KamPages membership suite. The email is a simple example of how an email can be personalised for each recipient. In this case a letter is being sent to each member of the organisation.
The email has a white background and a width of 800px, and will be centred on the recipient's screen.
The email has 5 distinct horizontal sections, most of which are optional.
- The top section is for a graphic of some kind - logo, photo, drawing, banner image.
- The second section allows you have a banner title as text.
- The third secton is for a bar of solid color, to separate the graphic from the text.
- The next section is for the header. This is where the customisation takes place.
- The final section contains the message.
About this page
- All 5 horizontal sections are shown. For the design process each section is colour-coded; on the left is a column showing the section name, on the right-hand side is another colour-coded column.
- Each section can be edited separately. At the right-hand side of the email canvas is the (draggable) edit panel. Each button in the panel is colour-coded to match the colour-coding of the relevant section, as is the pop-out editor panel that appears when you click on a button. Note that the coloured sections are there to help during design - they will not be present in the final email.
- All of the editor panels can be dragged around the screen.
Special note about colours
There is a basic list of 17 colours - those described by w3schools.com as being 'standard' (see
here).
You can add your own colour - select 'new' at the bottom of the drop-down list. A new input box will appear - put your new colour in here.
IMPORTANT: the new colour MUST be in hexadecimal AND have SIX characters; there is no error-checking. Visit the site mentioned above to get the code for the colour you want.
Use the 'show effect' button to see the new colour in action; when you're happy with the colour, click on the 'save changes' button. The colour will appear in the drop-down list.
Graphic
The graphics section is optional. If you choose to have a graphic, you can upload it to the server via the editor panel. The chosen file will be saved with the name "logo"; it will be displayed automatically in the graphics section. Note that the image is not resized. The graphics section will automatically re-size to accommodate the image. We recomend the use of small images. You can upload as many images as you want - but each one will over-write the previous one, so that there is never more than one on the server. You can choose to position the graphic at the left, or the right, or in the centre.
Title
This is optional.
Many email clients do not show images automatically. Therefore you may prefer to have a title in plain text - which will be displayed. This is the place to put it. To create the title, just type in the input box; the formatted text will appear in the title section. Note that only one line of text is permitted.
Separator bar
Here you have the option of separating the graphic from the message by means of a band of solid colour.
Header
This is optional; it is also where the customisation take place. You have the option of adding the addressee's title, first name, last name (in any combination).
The header text can be given a colour and a size; it can also be placed to the left, center or right of the page. To create the header, just type in the input box; the formatted text will appear in the header section. Note that only one line of text is permitted.
Message
The font-size and colour of the message text can be chosen, as can the type of justification you want for the text. You can paste or type the text into the input box and the formatted text will appear in the message section (whose height will increase automatically as needed.)
Preview and finalise
Click on 'preview email' to see what the email will look like. The customisation of the link takes place during the emailing process - it uses data from the database.
You can finalise the design on the preview page. Alternatively, you can go back to the designer to do some more editing.