Configuring Columns on Templates

The Columns Content element provides an additional way to introduce a new Block with a multi-column layout within your template. Columns divide a horizontal section into separate areas so different Content elements can be positioned side by side while remaining part of the same Block.

Multi-column layouts can be useful when you want to create designs such as an Image beside a Paragraph, two event announcements displayed together, multiple program highlights across a section, or several calls to action arranged within the same row.

Understanding Columns and Blocks

Columns exist within a Block, which acts as the full horizontal row or section of the template. A Block can contain a single column or multiple columns, and each column can then contain its own Content elements.

For example, a two-column Block could contain:

• An Image in the left column

• A Heading, Paragraph, and Button in the right column

You can manage each side independently, while the Block controls the overall structure that holds the columns together.

If you are not sure where a Block begins or ends, click in the open spacing to the left or right of the Content within the row. When you select the Block, the entire row will be outlined in blue, and the settings on the right will change from individual Content settings to Block row settings.

Adding Columns to a Template

DonorDock provides two ways to add a multi-column layout to your template.

Add Columns Using the Columns Content Element

The Columns Content element provides a quick way to introduce a new multi-column Block while you are working from the Content tab.

1. Open the Content tab in the Template Editor.

2. Click and drag Columns onto the desired location on your template.

3. Select the column layout you want to use.

4. Drag additional Content elements into the available columns.

Once the Columns element has been added, each column becomes an available area where you can place other Content such as Headings, Paragraphs, Images, Buttons, or other supported elements.

💡 Both methods ultimately create a Block containing columns. Choose the method that is most convenient for where you are working in the Template Editor.

Adding Content to Columns

Once your column structure is in place, you can add Content elements to each column independently.

1. Open the Content tab on the right side of the Template Editor.

2. Locate the Content element you want to add.

3. Click and drag the element toward the desired column.

4. Watch for the placement indicator showing where the Content will be inserted.

5. Release the element when it is positioned in the correct column.

6. Repeat these steps to add additional Content elements as needed.

Each column can contain multiple Content elements. For example, one column might contain an Image, while the adjoining column contains a Heading, two Paragraphs, and a Button.

Moving Content Between Columns

Content can also be moved from one column to another without recreating it.

Select the Content element you want to move and use the four-arrow Move icon. Click and drag the element toward the destination column, then release it when the placement indicator appears where you want the Content to be placed.

Content can be moved:

• Higher or lower within the same column

• From one column to another

• Into another Block elsewhere in the template

This allows you to experiment with different layouts while preserving the Content and formatting you have already created.

Adjusting Column Widths

Columns within the same Block do not need to be equal in width. You can resize adjoining columns when one side of the layout needs more space than the other.

1. Select the Block row containing the columns you want to adjust.

2. Confirm that the full Block is outlined in blue.

3. Locate the vertical divider between the adjoining columns.

4. Click and hold the divider.

5. Drag it horizontally toward the column you want to make narrower.

6. Release the divider when the columns are proportioned the way you want.

As the divider moves, one column becomes wider while the adjoining column becomes narrower. This can be useful for layouts such as a smaller Image beside a larger area of written content.

For example, instead of displaying two equal columns, you could create a layout where:

• A smaller Image occupies approximately one-third of the row

• A longer story or call to action occupies approximately two-thirds of the row

This can create a more balanced design when the Content on each side has different space requirements.

As you resize the columns, also review the individual Content inside them. A column that becomes too narrow may cause Paragraphs to wrap excessively, Buttons to feel cramped, or Images to become too small to be useful.

Designing with Multiple Columns

Columns can help organize information and make longer communications more visually interesting, but the number of columns should fit the amount and type of information you are presenting.

A two-column layout is often useful for pairing related Content, such as an Image and a story. A three-column layout can work well for short, similarly sized items such as program highlights, event summaries, or calls to action.

When several columns contain very different amounts of Content, adjusting their relative widths can help create a more balanced layout.

Columns and Mobile Display

Multi-column layouts should always be reviewed in both Desktop and Mobile views.

Columns that appear side by side on a desktop will generally stack vertically on smaller screens so each piece of Content has enough width to remain readable. This responsive behavior helps multi-column emails adapt to narrower devices.

The order in which Content is arranged within the Block can therefore become especially important on mobile. Review the Mobile view to make sure the stacked Content still appears in a logical order.

Do Not Stack on Mobile

There may be situations where you want columns to remain side by side instead of stacking vertically on a mobile device.

Select the Block containing the columns and open its Mobile settings. Enable Do Not Stack on Mobile when you want the columns to remain in the same horizontal arrangement on smaller screens.

Use this setting carefully. Keeping multiple columns side by side reduces the amount of horizontal space available to each column and can make Paragraphs, Buttons, Images, or other Content difficult to read or select on a mobile device.

Column Tips

Use columns when they help establish a clear relationship between Content rather than simply filling horizontal space. Keep related elements together, give each column enough room for its Content, and adjust column proportions when equal widths do not provide the best balance.

After creating or resizing columns, review the complete Block in both Desktop and Mobile views. Pay particular attention to written Content wrapping, Image sizing, Button width, spacing, and the order in which Content appears if the columns stack.

If a multi-column layout becomes crowded or difficult to read, consider simplifying the section or moving some of the Content into a separate Block.