Design a Story Layout

Story layouts save a lot of design time by standardizing the way your mailing stories look. While Informz comes with several common story layouts, you'll probably find it handy to create your own down the line.

This article walks through the process you'll follow to create your own custom story layouts. And, once you've built a new story layout, it'll be ready for use in all of your future mailings (in fact, you can use a story layout in a previously-created mailing if you subsequently modify the content in the future).

Below, you'll learn the steps to create a story layout with a headline, placeholder text, "read more" link, and image.

Steps

Creation

Navigate to Mailings > Story Layouts

Click Create.

The HTML Editor opens.

Enter a descriptive name for your new story layout. Make sure it's a name that your colleagues will understand so they know where to use it.

Click the Table icon to insert a tab. This example uses a 1x3 table (the top cell for a headline, the middle cell for body text, and the bottom cell for buffer space).

Each cell will be contain different placeholder text. Let's look at how to format each cell.

Headline Text

In the first cell, type "Headline Text. Ensure cursor is still inside the cell and navigate to the html tag path and select td (the td tag means "table data").

You'll know that the td cell has been selected when the cell appears with a blue highlight.

Click the CSS icon on the toolbar.

The Style window opens. Here, apply the font type, size, and color.

Click the Box tab and apply padding (e.g. 5 pixels). This provides a comfortable amount of white space around the headline. To ensure that the pixels apply from each direction, check the Same for All checkbox.

Click Update.

Placeholder Text

Placeholder text generally uses Lorem Ipsum (AKA Latin Placeholder) text. You'll need two paragraphs of Lorem Ipsum text to use as placeholder (click here for a commonly-used Lorem Ipsum text generator or search them web for your own).

Copy (Ctrl + C) the Lorem Ipsum text.

Click the Paste as Text icon to activate the Paste as Text feature.

Press Ctrl + V on your keyboard to paste your Lorem Ipsum text into the second cell of the 1x3 table. As above, select this table cell and click the CSS icon on the toolbar (remember, you'll use the td tag in the HTML path to select the cell).

Apply font style, size, and color as well as five pixels of padding.

"Read More" Link

Identify a location for your "Read more" link and type the text "Read more..."

Highlight the text and select the icon for Insert/Edit Hyperlink.

Click the Hyperlink Type dropdown list and select Web Page.

Enter the URL and name the link.

Click Insert Hyperlink.

To style the hyperlink, click your cursor on the hyperlink text. Next, in the HTML path, click a.

Click the CSS icon and assign the desired CSS attributes (font, color, etc.).

Adding an Image

Place your cursor in the beginning of the placeholder text and insert another table.

Navigate inside the table using the HTML path and click the Insert/Edit Image icon.

The Insert Image window opens. Enter a URL for your desired image.

Enter the necessary dimensions for the image (e.g. 150 x 150 pixels).

Click Insert.

Next, right-click on the new table and select Table Properties.

Set the Width to zero (blank) and the table alignment to Right. Additionally, apply cell padding to keep the image from crowding the text (e.g. 5 pixels).

Click OK.

Finished Story Layout

Below is an image of how the finished story layout appears.

How Do You Get to Carnegie Hall?

Now that you are equipped with the basics of what to do, you should go forth an practice, practice, practice! Like anything, the more you practice, the better you'll become. And, while you may not like every single layout you create from scratch, you'll find that each experience helps you understand the ins and outs of both story layouts and the Informz HTML editor.