# Designing your email - Using Columns

Columns create a layout that gives you the ability to use multiple pieces of content in one section.

![](https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2F35cabb85-8680-4576-92a6-1a605cda3c1c.png\&width=768\&dpr=4\&quality=100\&sign=f3dd4332d37516ee86948467d835e613ca9c3eed32c5e5afab4d7c5217099a25)

Let's take a look at some real-world examples of columns in action. Here, dribble is using 2 columns, with 2 images in each column.

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fddc0c2ab-c7aa-42ce-8fb1-0915744b6b5a.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=1e222e5f391bd32de9a692b0b19879d658836a83dcecf68522df87a787c60c99" alt=""><figcaption></figcaption></figure>

Trello using columns in their latest email update, with 1 image and 1 block of text displayed side by side.

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fbc6872b1-08f6-48ed-8bcd-381061613c81.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=6439703ddc02f225549c23941cd1ba34b0f3760aa418022ee19ed30f6079f8d2" alt=""><figcaption></figcaption></figure>

Etsy nails my interests with three columns of images and text combined.

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fed087773-f8fb-4eea-8711-553e9b13dde7.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=8a3a3547262b1062e7053bf515698ebb6a32b6810bac167efa818fbaca8bdc79" alt=""><figcaption></figcaption></figure>

Vudu goes hard in the paint, using 4 columns to brag about having movies Netflix doesn't want.

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fdea9e632-42f3-4c25-b5a5-e7a3760ae4cc.jpg&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=c10961da9638455ab0aa8ac3f23bbfd0ff5c65cda600029e63b92e83f3376408" alt=""><figcaption></figcaption></figure>

**Adding columns to your message**

When you drag your columns component onto the canvas, you'll get a popup that. allows you to select the number of columns you want, and the amount of space each column will use in the row

This opens up possibilities for many design styles:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fe9b05e66-63ce-4e00-a116-2db0242dcc64.gif&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=40e914f901b1cab90825748ff8f0110b13d347e0fc54e96fb5bf3e9244e1c7d8" alt=""><figcaption></figcaption></figure>

We've selected a two-column layout to use for our example:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fbc8d527c-2200-49de-b5d9-b996e10319b7.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=dd19d650c728628ab66ccbe4dbfc6e334221cd6faee1c4c665addf9879b850fd" alt=""><figcaption></figcaption></figure>

Now that our column layout has been selected, two placeholders appear on the canvas where we can drop components such as images, text, or buttons:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2F05bc6adc-3726-4e2a-b313-76cfcc430fe9.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=f2227d54490cb8e98259ed44578d1d87fb15b442dc7e352c4d6ef1af65cc79c9" alt=""><figcaption></figcaption></figure>

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2F5851d1ae-0b38-4d12-8cd1-4e938ee5b0e1.gif&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=64889f82c8e5cddc80ce2668712765f3f27e9ba7d92c806722f95dc62cdbef42" alt=""><figcaption></figcaption></figure>

The row your columns layout is inside of is called a **section**, the section area is indicated by the blue highlight.

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fb4c4bf68-9bad-405e-91c6-ab131460f4b1.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=1a939546e6eb1822b017d0c24967b77f6d7b458f6e4743e91e7ebbae7d8e80cd" alt=""><figcaption></figcaption></figure>

While a **column** inside of a section is indicated by a purple highlight.

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2F3b6707af-565a-4b1c-8c11-6036e7e1e114.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=9e3181e0a9350b91cc1f7efe621192689f62934bb085d8959020d1203d8ea655" alt=""><figcaption></figcaption></figure>

When you click inside of a purple highlight, you get the toolbar for the component being used in the column, in our example where we're using an image in the column, we'll see the image toolbar:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2F77dda8f0-ab87-4fad-bbc3-6b8642f99c82.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=692cda5670920807290ea18cf8d3eeb83f01bdbe4f7c8e8119bde3984aa9a892" alt=""><figcaption></figcaption></figure>

When you click inside of a blue highlight, you get the toolbar for the section:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fb0f9ab0a-d832-4547-8d9c-db1315777d48.gif&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=3becf1d74fa7ec2b966daf1f25cf0b0be40e78399c1ac22cc03aa365da5452d5" alt=""><figcaption></figcaption></figure>

Clicking the edit pencil on the section opens an action menu where you can select whether you want your content to display at the top, middle, or bottom of each column:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2F8f4decec-cef8-4fb1-81d6-ab188e0f01d0.gif&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=93f7999e1872e3548fbbbd7af6ad654d5e32b58c610c654a88a09a8ae7e8816e" alt=""><figcaption></figcaption></figure>

You can also use the **section** edit pencil to adjust the number of columns, your column proportions, and drop in more content:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2F9100919d-3189-40fd-aa70-46acf92ca904.gif&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=24e7ecd328d55a072644e59f69e407683aa75ba0e062fb5b9181f04aa96b0950" alt=""><figcaption></figcaption></figure>

To change the number of columns you have in your section, first, click the section edit pencil, then select the number of columns you want:

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fa9d1fe90-49ef-488f-87d4-0e30f002d51f.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=1ae0aef1177637de274dbbef879a35b8b2c6bf52548b1bb069fdc97b1260bda6" alt=""><figcaption></figcaption></figure>

To change the proportions of your columns, modify the layout by adjusting how much space each column will take up in the **section**, check adjust widths in the section edit pencil:

[<br>](https://docs.emaildelivery.com/docs/using-the-drag-and-drop-email-composer/component-section-toolbar)

<figure><img src="https://docs.emaildelivery.com/~gitbook/image?url=https:%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2Fe0384b56-4f90-47bf-9077-d8a44f0eb175%2F2a05d828-eb35-44b0-9b70-bfc4c7204e36%2F2018%2F12%2F19%2Fb171a716-1b86-4185-b035-2c02a2797a23.png&#x26;width=768&#x26;dpr=4&#x26;quality=100&#x26;sign=28472c02ca26df75e9a978a7f2b837619b969cac7ccfd6aa3af111ed0d561dd7" alt=""><figcaption></figcaption></figure>
