Breadcrumbs

E NEWSLETTER

3 Making a Header

Create a Free E Newsletter Part 3 Making a Newsletter Header

In the previous article, we discussed modifying the first three sections of the HTML code for our custom Newsletter. In this article, we will discuss how to create a new header image and use it to replace the default header image in the AcyMailing template.

FOURTH SECTION: HEADER IMAGE:

You can tell that the header is now bigger and the light green background color is a better match for the light blue background color and the dark green frame around the entire email.

Our next task is to replace the box image with our own image. Studies show that the first part of any email to be read is the upper right corner. So this HEADER IMAGE needs to tell a story.

This next section opens with yet another table – with a new row in this table. This one is 11 pixels and puts a top light green space above the header image and header text.

<tbody>

<tr>

</tr>

The comes another row. This one begins with a cell which is only 7 pixels wide.

<tr>

The second cell is the image cell

The key thing to understand about your header image is that it MUST be stored inside your website images folder, ideally in a separate folder called newsletter. These images should be pre-sized to fit approximately in the space provided (in other words, less than 200 pixels wide and less than 190 pixels high). Also the images must be compressed or optimized with a file size of well under 50 KB so that they do not slow down processing and opening the emails.

The file type is typically jpg or png. I use a free open source program called SNAG SCREEN to capture images as jpg files. I then optimize and size the images using Microsoft Office Picture Manager. It is better to have the picture be slightly too small than slightly too big. We are going to load a picture to our website which is only 10KB in file size and 160 pixels in actual size. By the way, there should be no capital letters and no spaces in the file name of the image.

To upload the image to your website, first SAVE the template to get back to the main Joomla Administration screen. Next click on SITE > Media Manager.

Next click on STORIES. It is important to store all images in the stories folder because this is how they can be accessed by AcyMailer Templates and Newsletter.

You can see I already have a bunch of folders to hold images for different sections of this website. We will add a new folder called newsletter. Simply type the word news in the white box and then click on Create Folder. Then click on the newsletter folder in order to open it.

Then click on the BROWSE button at the bottom of the page to locate the image file you want to use. Then click on START UPLOAD.

Click on DETAIL VIEW to get the name and pathway to this image. It is

Images/stories/newsletter/ 2011_spring160.jpg

It is a good habit to always put the size of your pictures in the file name in case you later want to make bigger or smaller sizes of the same picture you will be able to tell them all apart and not accidentally insert the wrong onw.

Now that we have uploaded the HEADER IMAGE and we know its file name, we can go back to the template and replace the existing header image. . Locate the part in the HTML which says:

http://www.acyba.com/images/templates/newsletter-1/logo-icon.png

Add replace it with

http://www.yourwebsite.com/images/stories/newsletter/2011_spring160.jpg

You must put in the full path, not merely the relative path. But also the full path must be from your website – not another one. So If you have two different newsletters from two different websites, you will need to create two different templates and download separate header images to each.

We will show you another simpler way to insert images in just a minute. But it is important to understand where the image name is actually coming from. It must come from your website’s stories/newsletter folder – not from some other website.

Then click on APPLY to see the change:

Sadly, the box image is still there. But the other AcyMailing Image (the one BELOW the Header Text) is gone and has been replaced by the Header Image we want. So I think I have tortured you enough with all of these boxes and tables and rows. Things can get very confusing. And the above exercise was mainly to help you appreciate what we are going to do next. Here is the better way to create the changes we want. We will simply SKIP the HTML Code and make the changes directly on the AcyMailing Graphic User Interface!

Begin by clicking on the box image. This will bring up little dots in the corners showing the image has been selected. Now use the DELETE button on your computer to delete this image. Then go down to the lower left corner of the screen and click on the IMAGE button. This brings up the Stories Folder.

Click on the newsletter folder to open it.

There is only one image in this folder – the one we just loaded. Click on this image to select it. Then click on the INSERT button in the upper right corner. Now click on APPLY and view the result.

The power and beauty of Joomla combined with AcyMailing is that you really do not need to know much about HTML or Tables or anything else. It is not much harder to write an E Newsletter than it is to type out a regular Word document.

Changing the Header text is even easier. Simply select the text that is there and delete it. Then type in “Our Community Newsletter Spring 2011” Select it and click on the CENTER Icon in the Text Editor. Then click on APPLY. Here is what it now looks like:

The HEADER SLOGAN ROW

First delete the tiny image in the upper right corner. Then type in the following:

Working together for a better future.

It needs to be smaller, lower, bolder and have a blue line below it. So select it, change the font size to 14, use the Enter key to lower it one line, select it again and bold it. Then click on the format button in the text editor and select heading 2.