How to Use Rows and Columns in Templates
Why This Matters
Rows and columns are the building blocks of every template you create. They're the structural foundation that lets you organize content, create layouts with text and images side-by-side, and ensure your designs look professional and balanced. Understanding how to work with rows and columns gives you complete control over your template structure and helps you create designs that adapt beautifully to different screen sizes.
Every template starts with at least one row, and you can add as many as you need. Within each row, you can create multiple columns to place content side-by-side, making your designs more dynamic and visually interesting.
Understanding Rows and Columns
Rows are horizontal containers that hold all your content. Think of them as the shelves in a bookcase—each shelf is a row, and you can place items on each shelf.
Columns divide rows vertically, allowing you to place different content elements side-by-side. For example, you might put an image in the left column and text in the right column.
Rows can contain one to six columns. Content blocks (like text, images, and buttons) must be placed inside columns within rows.
Step-by-Step Instructions
1. Add a New Row
In the right sidebar, click the Rows tab. You'll see various pre-made row structures showing different column configurations (one column, two columns, three columns, etc.).
Click and drag your desired row structure onto the canvas. A blue placeholder line appears showing where the row will be placed.
Release your mouse to drop the row into position. The row is now ready to hold content.
2. Select a Row for Editing
To modify row properties, you need to select the entire row rather than individual content blocks inside it.
Move your cursor to the empty grey area to the left or right of your content area (outside the white content space). Click in this grey area to select the row.
When selected, the row highlights and the right sidebar displays Row Properties with all available row settings.
3. Choose Your Column Structure
When you first add a row, it comes with a preset column structure based on which row type you dragged in. You can change this structure at any time.
With the row selected, find the "Column Structure" or "Customize Columns" section in the Row Properties sidebar.
You'll see visual representations of your current columns. Click the "+ Add new" button to add additional columns to the right side of your row.
4. Adjust Column Widths
Columns are measured in column units (numbers), not pixels. All columns in a row must add up to 12 units total.
To resize columns, look for the separator line between columns in the Column Structure section. Click and drag this separator left or right to change how much space each column takes.
As you resize one column, adjacent columns automatically adjust to maintain the total of 12 units. Experiment until you achieve the proportions you want.
5. Add Content to Columns
Once your row and column structure is set, switch to the Content tab in the right sidebar.
Drag content blocks (text, images, buttons, etc.) into the columns. Each content block automatically adjusts to fit its column width.
You can add different types of content to different columns, creating rich, multi-element designs within a single row.
6. Remove Columns
To delete a column, select the row, then look in the Column Structure section for the column you want to remove.
Click the "Delete" button in the top-right corner of that column's settings. The column disappears, and its width is distributed to the remaining columns.
Note: You cannot delete a column if only one column remains in the row. Every row must have at least one column.
7. Align Content Vertically
When columns have different heights (like a tall text column next to a short image), you might want to control how content aligns vertically within the row.
With the row selected, find the "Vertical Alignment" option in Row Properties. Choose from:
- Top: Content aligns to the top of the row (default)
- Middle: Content centers vertically with equal space above and below
- Bottom: Content aligns to the bottom of the row
This creates more balanced, professional-looking layouts when column heights differ.
8. Set Row Background Colors
Rows offer two background color options: one for the entire row and one for just the content area.
Select the row, then in Row Properties find "Row Background Color" (colors the full width of the email) and "Content Area Background Color" (colors only the content area width).
Use background colors to create visual sections, highlight important content, or match your brand colors.
9. Add Borders and Rounded Corners
Select the row and scroll through Row Properties to find border and corner options.
You can add borders around your content area and adjust border width, style (solid, dashed, dotted), and color.
For rounded corners, use the "Content Area Rounded Corners" option to soften the edges of your content area within the row.
10. Duplicate or Delete Rows
To duplicate a row with all its content and settings, hover over the row until you see row controls appear. Look for the duplicate or copy icon.
Click to create an identical copy of the row, which appears directly below the original. This is perfect for creating consistent sections throughout your template.
To delete a row, select it and look for the delete or trash icon in the row controls. The row and all content within it will be removed.
Questions and Answers
Q: What's the difference between a row and a column?
A: Rows are horizontal containers that span the width of your template. Columns divide rows vertically, letting you place content side-by-side. Think of a row as a shelf and columns as sections on that shelf.
Q: How many columns can I have in one row?
A: Templates support up to 6 columns per row. However, keep in mind that on mobile devices, multiple columns typically stack vertically.
Q: Can I change the column structure after I've added content?
A: Yes. You can add or remove columns and resize them at any time. Your content will automatically adjust to fit the new column widths.
Q: Why can't I resize columns to exact pixel widths?
A: Columns use a proportional system based on units (adding up to 12 total) rather than fixed pixels. This ensures your designs remain responsive and adapt properly to different screen sizes.
Q: How do I move content from one column to another?
A: Click and drag the content block to a different column within the same row or to a column in a different row. The content moves to the new location.
Q: What happens to my columns on mobile devices?
A: By default, columns stack vertically on mobile screens to ensure content remains readable. You can control this behavior using mobile optimization settings in the Row Properties.
Q: Can I have different column structures in different rows?
A: Absolutely. Each row is independent, so one row can have two equal columns while the next row has three columns, and another has just one column.
Q: How do I create equal spacing between columns?
A: Use the "Cards Style" option in Row Properties. This lets you add consistent spacing between columns and even round the corners of each column for a modern card-style layout.
Q: Can I nest rows inside other rows?
A: No, rows cannot be nested. However, you can achieve complex layouts by using multiple rows with different column structures stacked on top of each other.
Q: What if my content in different columns has different heights?
A: Use the Vertical Alignment option in Row Properties to control how content aligns when columns have different heights. You can align content to the top, middle, or bottom of the row.
Q: How do I delete an entire row?
A: Select the row by clicking in the grey area beside your content, then click the delete icon that appears in the row controls. All content within that row will be deleted.
Q: Can I copy row settings without copying the content?
A: Not directly. When you duplicate a row, it copies both the structure and content. To reuse just the structure, consider creating a saved row template (if available) or manually recreating the column structure in a new row.
Guide Type: How-To Guide
Estimated Time: 7 minutes