# Introduction to Email Layouts ## What are layouts?[](#what-are-layouts)  Layouts are only available in our rich text or code editors. You cannot use layouts with [Design Studio](/journeys/design-studio-overview/) or our drag and drop editor; instead, start from a template. Or learn more about the reusable content features available in Design Studio ([components](/journeys/components-overview/)) and the drag and drop editor ([saved rows](/journeys/drag-and-drop/#save-rows), [snippets](/journeys/snippets/)). When using our Rich Text and Code editors to design your email templates, there are two parts to emails: the content and the layout. The **layout** is everything except the body of your email. Your content, or message, fits *into* the layout. Here’s an example of a layout on its own in the **Email Layouts** area of Customer.io: [![a preview of a layout that an image at the top and a footer](https://docs.customer.io/images/image%28277%29.png)](#fba5f39f779be1522b1e3c108dedeefe-lightbox) In this case, the image header, the white wrapper, and the text at the bottom is the **layout**. The `{{content}}` tag in the middle indicates where future content will go. That content might change, but the layout will always stay the same. If you use this layout in an email, the [content](/journeys/2-email-basics/) in the editor replaces the `{{content}}` tag. Here’s the above example with content: [![image.png](https://docs.customer.io/images/image%28278%29.png)](#06709061bfbc15e3e7c9d1c820f33c33-lightbox) ## Add a layout[](#how-to-use-a-layout)  Layouts are only available in our rich text or code editors. You cannot use layouts with [Design Studio](/journeys/design-studio-overview/) or our drag and drop editor; instead, start from a template. Or learn more about the reusable content features available in Design Studio ([components](/journeys/components-overview/)) and the drag and drop editor ([saved rows](/journeys/drag-and-drop/#save-rows), [snippets](/journeys/snippets/)). ### Using a layout[](#using-a-layout) #### Rich text editor[](#rich-text-editor) When you’re composing an email in the rich text editor, click **Layout & Preview**: [![image.png](https://docs.customer.io/images/image%28279%29.png)](#063d99aad6d770ce2e30bcc18aef52ab-lightbox) From Preview mode, click **Change Layout**: [![image.png](https://docs.customer.io/images/image%28280%29.png)](#ae0c437688e265540cbed2530cda611b-lightbox) Choose an layout to preview it in your message. Then click **Apply Layout**. [![image.png](https://docs.customer.io/images/image%28281%29.png)](#2ea9765786d31367ce6df65f50f47585-lightbox) #### Code editor[](#code-editor) When you’re composing an email in the code editor, click to open the email envelope: [![Email envelope where layout shows GTM template](https://docs.customer.io/images/code-editor-layout.png)](#5cf31938ae10c680c981c89c64b2eabb-lightbox) Then click next to **Layout** to choose one. The selection renders in the preview on the right. ## Create a layout[](#creating-a-new-layout) If you need a new layout, go to [*Content > Email Layouts*](https://fly.customer.io/workspaces/last/journeys/layouts). Until you start creating your own layouts, we use a default “plaintext” layout with no formatting. Click **Create Layout** to get going. You’ll see this: [![image.png](https://docs.customer.io/images/image%28282%29.png)](#c3a9c3776a8ba57300f89986a6b391cb-lightbox) We offer a set of responsive starters for you to get started with, or you can start from scratch and paste in your own HTML if you’ve got it. Just remember that [HTML and CSS work a little differently for emails than they do on the web](/journeys/1-html-and-css/). If you need help customizing the starters, [we have a guide for that](/journeys/customizing-layout-starters/)! Whatever option you choose, the one thing you **must** have in your layout is this: `{{content}}` That’s where Customer.io will insert your email’s content— the words you write— in the future when you use that layout. ### Plaintext layouts[](#plaintext-layouts) If you’d like a plaintext layout, all you need in the editor is `{{content}}` and nothing else: [![Plaintext layout with only {{content}} tag](https://docs.customer.io/images/layout-edit.png)](#93cc562849269eb154158564315fdb97-lightbox) ## Best practices[](#best-practices) Here are some best practices and tips for how to create and manage layouts in Customer.io: * **Layouts are for design, not content**: Generally, we recommend that your content go in an email’s body, rather than in the layout. This gives you much more control over what you send to your customers, and prevents anyone getting incorrect content. * **Try not to use Liquid in layouts**: we can’t validate it the way we do when we send emails, so you might end up sending missing attributes to your customers. * Build **re-usable layouts**, ones that you can re-use across campaigns, rather than building them on a per-campaign basis. * You need **an unsubscribe link**; you can handle this yourself, or Customer.io can do it for you. If you want us to handle unsubscribes, just use this piece of code in your layout: ```fallback Unsubscribe Text ```