Build a Basic Template with CKEditor

Read on for an easy walk through or just look at the short version:

Now that you've logged into your JangoMail account, you need to create a message. We try to make this as easy as possible for you, but there are some tips that you should keep in mind. HTML for email can be a confusing thing at first. I'll try to make it a bit less confusing. With that in mind, let's start with the first big tip.

Don't use Microsoft Word or other Microsoft Office applications to create your content. These applications do many things very well. They create beautiful documents, and offer many great features. Email-compatible HTML is not one of these features. If you must use content that originated in Microsoft Word, then you should first strip the formatting from the content by pasting it into Notepad. You can then copy and paste from Notepad into our CKEditor.

This is because we want to use a basic workflow while we create our message. The workflow helps us ensure that our formatting is properly done in the final document. This workflow is as follows:

• Structure
• Content
• Style
• Test

This being a workflow, we must start with the first item, Structure. When you think about what you want your message to look like, you think in terms of logos, titles, text, and links. We want to think about how these will be laid out across the page. Having assisted many customers who first did not know this next clue, I can assure you that this one is a biggie.

Create a table for your message content. One outer table allows you to constrain your content, preventing stretching. Setting the table's width is like knowing how wide a piece of paper is. In today's wide-screen world, controlling this can be useful. Unless you're using one of our smart adaptive templates, this hint is for you.

Go to your messages screen and click the button to create a new message. On the next page, click the “with a New Blank Message” icon. On the page that loads you will see the message edit screen. For now, we only need to worry about entering a subject line. Enter any subject line you wish. Go ahead. I'll wait.

The next hint isn't a biggie, but I've seen more than a few people stumble over it. Click into the message edit area of the CKEditor to place your cursor. If you don't tell the editor where you want something, it isn't going to know where to place it. Since our next step is to create a table, we want to make sure we tell it where to place the table.

To create our boundary table, we want to set a width that is appropriate for the reader. For this example we'll use 700 pixels. This may seem small, if your monitor width is nearly 2000 pixels. If, though, you read your email in a smaller window, with your folders to the left, you may actually be reading your emails in less than 1000 pixels. The important thing to remember is that your readers have all sorts of different display spaces, so control can be important. Let's click that button to create a table at the cursor's location.

A little box will pop up with a bunch of settings. Set the marked boxes to the values shown in the image below. In this case, we only want to set boundaries for the message, so we only need one row and one column, for a total of one large cell. (Think spreadsheets.) The width we want is 700 pixels, but we're going to leave the height blank. This is because the height needs to adjust to the content within, but the width does not.

Border size is set to zero as this table is entirely structural. If you want it to be a design element, you can set this to “1” and select a color. Cell spacing is set to zero. Cell padding is as well. Think of a wall covered with photographs. Cell spacing is the space between frames. Cell padding is the matte material between the frame and the photograph itself. For this table we need neither. Vertical alignment “top” simply means that the content within the table should start at the top.

You should end up with a very boring, very empty, and rather small grey box on your screen. That's exactly what we want. This box is our piece of paper, only it's as long as we need it to be.

We're still in the structure part of our process, so now we need to think about what we want our actual message to look like within the box. For this, I'm going with a basic top, middle, bottom structure. Click into the box so that your cursor is blinking inside, and press the [ENTER] key twice. Now, click on the top row so that your cursor is blinking at the left near the top. Click the “table” button in the toolbar to create a new table. The settings will be similar, but we're going to have a little fun with this one. It's logo space, after all.

This table will also be one cell by one cell, but the width is 100% so that it fills the available space within the outer table. Cell spacing and padding are also still zero, and vertical alignment is still Top. This time, though, we're going to give the space a background color. Click the “Choose” button beside the background color field, and you'll have access to a great color picker. Once you're done, click “OK” to see the result.

It's another boring box, but it's a different color. If there's any space above it, you may need to click into that space and backspace or delete to remove it. Now, click on the bottom row in your big box, and create another table. Again, it's a little different.

We're going with two columns this time, but otherwise it's pretty much the same as our last one. Again, if you have some space below it, you can clean it up. If everything worked perfectly the first time, though, you should have something that looks like this.

This bottom section is divided in two, so you can put contact information in the left, and something else in the right. This is a common setup if you want to include icon links to your social media pages. The thing is, for the purposes of our example, the 50/50 layout of the two cells just isn't going to work for us. We need more space on the left, and less on the right.

We have a couple options for doing this. Perhaps we want to use 65% of the space on the left, and 35% on the right. If we know the actual width we need on one side or the other, we could set them manually. Let's assume, for this example, that we know the exact space we need on the right side is 160 pixels, and the left side just doesn't matter.

We'll need to adjust the two sides separately. The table is created with a default setting of 50% as the width for each cell, so we'll just go ahead and change that. Right-click into the right cell of that bottom table, and you'll see a menu popup. Hover over “Cell” and then select “Cell Properties” from the submenu.

The cell properties dialog will popup. We want to change the width to 160 and make sure that the pulldown beside it reads “pixels.” When we press “OK” we should see the result in our table.

Here's the thing, though. The size on the right matters, but the size on the left doesn't. This assumes that the email client can handle such an assumption without doing bad things to your message. Let's not assume. That left side matters just as much. It needs to have an actual size set. Since the outer cell's width is 700 pixels, and 700-160=540, let's change the width of the left cell to 540 pixels. Go ahead. I'll wait.

This should leave us with pretty much the same thing we had in the last image, so I won't include another one. Now it is time to paste in some content. Place your cursor in the blank white space in the middle. Paste in your text copy. Don't forget what I said about Microsoft Word before. Make sure you're pasting in clean text. You may need to go in and clean it up a little bit if it has line breaks, or an extra carriage-return between paragraphs. As a side note, a carriage-return or line break (resulting from holding shift and pressing [ENTER]) forces a new line in the same paragraph and retains all the same formatting, giving the structure of a single spaced line. A paragraph return (resulting from hitting [ENTER]) starts a new paragraph and gives the visual of a double space or a gap between paragraphs. Again, I can wait while you clean it up. If you don't have content already, you can simply start typing.

Right now the fonts for the text are at their defaults. Since we're going to be doing a bit more work, we don't want to mess up the fonts. We're saving the actual font assignments for later. If it's a little ugly, that is fine. Saving your font changes for one of the last steps gives you better control over formatting.

My example uses bullet points. The editor has the tools to add these, just as a word-processor would. These lines should be entered normally, then highlighted and converted to bullet points by clicking the indicated button. This is much better, and much easier, than trying to do it yourself in preformatted text.

Now it is time to add a logo. You'll need an image to upload. The CKEditor allows you to access your existing images, or to upload new images as needed. Make sure to resize your images before you upload them to JangoMail. While you can adjust image size inside the CKEditor, a better outcome results from uploading images that are already close to the size they will be in your message. Resizing your images beforehand will also keep your data usage low. You can use a program like Paint or other similar tool to accomplish this.

Click on the image button in the bottom row of the toolbar.  A box will pop up. Click the "Upload" tab. Click "Choose File" to select the logo file from your computer.  Once you've selected it, click "Upload to Files."

Once you've uploaded the image, go to the "Image Info" tab. Click "Browse" and select your new image. It can be a good idea to put some alternative text in for your logo.  This does two things.  One is to provide information for readers whose images fail to load, for some reason.  The other is for optimization, just in case you share the message as a web-page for social media or other purposes. Once you're done, click "OK".

Wow, does my example look boring against that grey background. I didn't think of that.  I suppose it has to change. I'll just right-click into that table, because I set the color at the table level, and change the table settings.  Remember how we chose colors before? I'll just do that again.  A nice light purple looks much better anyway. If I wanted, I could go to the cell properties for one of the cells in the footer table, and change the background color only for that cell. I think I'll leave mine as it is, though. If you're editing a past message and can't find the designated color in the table properties, try looking in the cell properties. Or if you're looking in the cell properties, try looking in the table properties.

Now for that footer, we'll want to put in basic contact information. Click your mouse into the left box at the bottom, and start typing.  It's a great place for your address, website, email address, and maybe even your business name. Instead of pressing [ENTER] at the end of each line, hold down the shift key and then press [ENTER].  This causes a line break, rather than a new paragraph. Formatting addresses is much easier, knowing this.

We can now insert graphics, and text, as we need around our message. When we add them to the message body, though, we may want them to flow a bit better.  We have ways to handle this, but we want to make sure all of our text is ready before we start.

When you insert an image, you want to be able to tell it how to settle into the page.  It can be displayed alone, or surrounded by text.  How this is handled is a pretty neat trick.

You'll want to insert the image as the first character in a paragraph.  This might sound funny at first, but think of this as a really old, hand-written book. The first character of a page, or major section of a page, might be an elaborately drawn image of the actual letter. This is how we want to treat our image, though we have the freedom to put the image where we need it.

Click to place your cursor before the first letter in the paragraph you want to flow around your image. As before, click the insert image button in the toolbar, upload your image, browse for it in your library, add any alt-text, but then don't click "OK" yet. There are two settings for horizontal and vertical alignment.

Horizontal and vertical alignment are where the flow comes in. Horizontal is the most-important.  If you set this to "Right" and click the "OK" button, you'll see your image to the right in your text, with the text flowing around to the left. There are also settings for horizontal and vertical space, which can add space around your image. You can set these, but you'll want to set them to a number from 0 to about 5. One pixel goes a long way. Our example has Jack aligned to the right with 1 pixel VSpace and HSpace.

After you've added your images, it is time to turn our mind toward hyperlinks.  Somewhere in your message, you undoubtedly have text or images you want people to click on.  Adding links to them is very easy.  For text, you'll start by highlighting the text you want to link. In my example, we'll link the company name in the footer. When creating hyperlinks, it's always better to use text than part of a URL, especially if you intend to use click-tracking. Instead of using the text "www.jangomail.com", we want to use just "JangoMail." We'll insert the URL behind the scenes.

After highlighting the text, click the little chain link icon in the middle of the middle row of the toolbar. Since we let you choose the protocol of "http://" you only need to enter the address itself.  In this case, all that is needed is "www.jangomail.com."

Once you've done all that, it is time to actually format our text. Highlight all of your text in the middle box, images and all. Stay in the box, though.  You want to format text in each cell separately, even if it is all the same. Once you've highlighted, select a font and a font size.  I like "Tahoma" at size 12 most of the time, so that is what I'll choose here.

If you have any section titles you want to make bigger, or sections to italicize, bold, or underline, now is your chance. For best results follow the carpenter's rule of "Measure twice, cut once."  If a font change didn't work the way you expected, use [CTRL-Z] to undo one level rather than try to directly fix it. Multiple attempts to change the same section of text can cause nested tags, and confusion.  We don't want that.

Take a look at our sample template!

I hope that this little tutorial has helped you get started with the CKEditor.  Using these basic hints, you should be able to build fantastic messages for your recipients. A better-designed message is a more engaging message. If you need any help, submit a support ticket!