How to customize your mailing layout
This article goes over the different ways you can design your mailings in your Frankie account and provides an overview of the content blocks that customize your layouts.
You don't say the same thing in every email, so why should each one have the same layout? With Frankie's easy-to-use drag and drop editor, it's a breeze to rearrange content and create a custom layout no matter what your experience level is. Read on for more details on the many options you have available at your fingertips.
How to add or remove columns
You can change the number of columns in your mailing at any time and the existing content will adjust to fit your selection. While in the drag and drop editor, click the Columns tab that is at the top left of your template, then click on the desired column layout to select it, and click on Save.
Want to see it in action? As an example, let's add a right sidebar to this one-column mailing:
Before: One-column look
After: One-column + a sidebar look
Content blocks overview
When using the drag and drop editor in your Frankie account, you'll build or adjust the layout of your mailing with an arrangement of content blocks. Each block has its own properties and formatting options, so what you choose depends upon what you're looking to do. Here's an overview of the different content blocks you can use and what they can do.
The combo blocks give you a preset image and text area. There are two combo block options, left-aligned and right-aligned, but you can also change the alignment of the block in the Settings tab after you place the block on your template.
The text block is a preset box for your copy / text, complete with different font choices, header size options, and a toolbar editor.
The Image blocks offer you a preset box for images that you insert from your computer, image library, Facebook, or Flickr account. The first image block contains just one single image. The second one contains three image placeholders, which are horizontally aligned by default, but you can make them vertical or delete a placeholder if you don't need it.
The Follow block allows you to link your social accounts to your mailings; you can connect your Twitter, Facebook, Pinterest, Instagram, LinkedIn, and YouTube accounts.
The Video block gives you the option to insert a YouTube or Vimeo video link, which is styled with an overlayed play button.
The Divider block will add a dividing line between other content blocks, you can adjust the padding and other elements by selecting the Change block styles and options icon.
The HTML block offers a preset box for adding your own HTML code. It's easy to add your own HTML coding to a mailing you've created using the drag and drop editor, simply drag a code content block into your mailing from the menu on the left. Then hover over the block and click the Edit HTML tab. Paste in your code and click Save.
The HTML block is a good option when you have an image with distinct clickable areas, or a calendar or other table with already built-in HTML. However, be sure to avoid adding JavaScript or other code that doesn't perform well in email. Read our HTML for email guide for more details.
The Button block creates a clickable button to call attention to a link you want the user to click on. You can adjust the size and styling of it, however, Outlook 2007, 2010, and 2013 only support square buttons.
The RSS block allows you to quickly import content from an RSS feed into a mailing. Generally, these are the latest updates from 3rd party websites in an easy-to-read format.
The Event block connects with your Eventbrite account and lets you insert invitations and collect RSVPs right from your email.
The Survey block gives you a quick and easy way to link to your active SurveyMonkey surveys from within the editor and track the responses. An advantage of using this block is being able to view the responses by each individual email recipient, whereas if you try to view responses via your SurveyMonkey account, those responses will be anonymous.
Adding and arranging content blocks
Now that you know a bit about how the content blocks work, you can add them to your mailing. Here's a quick tutorial of that.
- Create or open a campaign in your Frankie account.
- Click on one of the content blocks to the left of your mailing, drag it over to your mailing, and drop it in any spot marked in yellow.
- The yellow drop spot will turn green as you hover over it, so you know just where the content block will appear in the mailing. Once you release the click, the block will appear in the place you designated.
- To rearrange the content blocks you've added, hover over the content block to reveal the yellow editor border. Click on the four-way location button on the left side of the block and drag the block to another location in your mailing. You'll see the yellow drop spots again – and one will turn green as you initiate the drop, then release the click to place the block.
When rearranging content blocks on your mailing, you can add or move them above or below existing content blocks on the page but not inside an existing block. If you're working within a two- or three-column layout, you can move content blocks from one column to another within the mailing. Just use the yellow drop spots as a guide.
Changing styles and settings in a content block
It's easy to customize your content blocks with background colors, borders, and more. To do so, hover over the content block, and click on the gear icon. The panel that pops up lets you change the way the content block looks as a whole.
On that popup, there are two menu options, Styles and Settings.
In the Styles menu, you'll see options to:
- Change the Background color of the content block
- Adjust the Margin (click the gear for advanced settings)
- Adjust the Padding (click the gear for advanced settings)
- Add and customize a Border
In the Settings menu, you'll see options to:
- Turn off Text, which will turn a combo block into an image-only block
- Turn off Wrapping to prevent text from wrapping around an image
- Turn off Images, which will turn a combo block into a text-only block
- Change the Count to adjust the number of images in the content block
- Turn off Smart Sizing (although we recommend keeping it on). Smart Sizing automatically resizes your images so they're proportionate within the same content block.
- Turn on Captions below the image(s) in a combo block
- Change the Position of your image in a combo block to left-aligned, center-aligned, or right-aligned
- Turn on Button to add a button to the content block
