Skip to main content

Columns

Add, resize, reorder, and optimize columns to create flexible layouts.

Columns let you place content side by side within a section. You can add new columns, resize them, change their order, make them equal height, or optimize layouts for mobile devices.

Add Columns

Add more columns to a section to display content side by side.

  1. Click the outer edge of the section.

  2. Open Section Attributes.

  3. Expand the Columns section.

  4. Click + Add Column.

  5. Repeat until you have the number of columns you need.

Section Attributes panel with the Columns dropdown and “+ Add Column” button visible.

Resize Columns

Resize columns to control spacing and create the layout you want.

  1. Locate the section you want to edit.

  2. Click the Manage Columns icon on the edge of the section. The icon displays a ruler with a pencil.

  3. Drag the center slider to adjust the column widths.

    • Drag the slider to the right to make the left column wider.

    • Drag the slider to the left to make the right column wider.

The column widths update in real time as you drag the slider.

Manage Columns panel with the resize slider positioned between two columns.

Reorder Columns

Change the order of columns to improve the visual flow of your content.

Reorder from the Canvas

  1. Click the outer edge of the section.

  2. Click the Manage Columns icon.

  3. Locate the Drag icon on the column. The icon displays four arrows.

  4. Drag the column to its new position.

  5. Release the mouse to update the layout.

A column being dragged to a new position from the canvas.

Reorder from the Layer Browser

The Layer Browser displays the structure of your email or landing page. It lets you quickly select and organize content.

  1. Open the Layer Browser.

  2. Locate the columns within the section.

  3. Click and drag a column layer to a new position.

  4. Release the mouse to update the order.

A column being reordered inside the Layer Browser.

Tip: Use the Layer Browser when working with complex layouts or nested content.

Make Columns Equal Height

Match the height of all columns within a section for a cleaner layout.

  1. Click the section that contains the columns.

  2. Open the Columns section in Section Attributes.

  3. Select Equal Height to make every column the same height.

  4. Select Fit Content if you want each column to match the height of its own content.

Columns settings with the Equal Height and Fit Content options.

Optimize Column Layouts for Mobile

Use mobile-specific settings to improve spacing and alignment on smaller screens.

Adjust Padding and Spacing

Reduce padding on mobile devices to improve spacing.

  • Set different padding values for desktop and mobile views.

  • Adjust row or column spacing to improve alignment.

  • Prevent borders or divider lines from extending too far across the screen.

Padding controls for desktop and mobile.

Use the Mobile Editor

The Mobile Editor lets you make changes that only appear on mobile devices.

  1. Complete your desktop layout.

  2. Open the Mobile Editor.

  3. Adjust padding, spacing, or alignment as needed.

  4. Preview the mobile layout.

Mobile editing view in email canvas.

Note: Changes made in the Mobile Editor appear only in the mobile view. They do not affect the desktop layout.

Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.

Related Articles
Adding Spacers
Change Section Or Column Properties
Nested Section
Divider Element
Table Element
Did this answer your question?