About Sections and Columns
Sections create the structure of your email. Each section can contain one or more columns. You place content objects, such as text, images, or buttons, inside those columns.
You can customize both sections and columns to control spacing, backgrounds, borders, responsive behavior, and accessibility.
Edit Section Properties
Use Section Attributes to customize the appearance and behavior of a section.
Open the Layer Browser panel.
Select the section you want to edit.
You can select it from the Layer Browser or directly from the email canvas.
View the Section Attributes panel on the right.
Update the section settings as needed.
Configure Background Settings
Use the Background dropdown to customize the appearance of a section.
You can:
Set a section background color
Set an inner content background color
Add a background image
Configure backgrounds for both light mode and dark mode
Background Color Hierarchy
Background colors can be applied at multiple levels. The following order determines which background appears:
Level | Description |
Text Attributes | Applies only to the selected text object. |
Column Attributes | Applies to a single column. |
Section Attributes | Applies to the entire section. |
Understanding this hierarchy helps you identify which background color takes priority.
Adjust Section Padding
Padding controls the space inside a section. Increase padding to create more space between the section edges and the content.
You can:
Adjust the top, right, bottom, and left padding independently
Set the same padding value for all sides
Configure different padding values for desktop and mobile views
Customize Borders and Corners
Use borders to visually separate sections.
You can customize:
Border color
Border thickness
Border style
Solid
Dashed
Dotted
Border placement
Top
Bottom
Left
Right
Corner radius for rounded corners
Select More Options to:
Apply borders to specific sides
Set different border values for desktop and mobile
Configure Accessibility Options
Accessibility features help assistive technologies, such as screen readers, understand the structure of your email. Use Accessibility Options to assign a semantic role to the section.
Available roles include:
Header
Body
Footer
None
Configure Responsive Settings
Responsive settings control how sections appear on different screen sizes.
You can:
Hide a section on desktop
Hide a section on mobile
Stack columns on mobile
Reverse the column order on mobile
Reverse Column Order on Mobile
For sections with multiple columns, columns normally stack from left to right on mobile devices.
Enable Reverse Column Order on Mobile to display the columns in the opposite order on mobile while keeping the original order on desktop.
Edit Column Properties
Columns let you place content side by side inside a section. Each column can have its own style and layout settings.
Customize Column Settings
Use Column Attributes to change how a single column looks.
Select the section from the canvas or the Layer Browser.
Open Section Attributes.
Expand Column Attributes.
Select the column you want to edit.
Use these settings to:
Set a column background color
Change the vertical alignment
Add rounded corners
Add borders
Adjust padding
Note: A column background color shows over the section background color.
Add, Clone, or Delete Columns
Add columns to show content side by side. Clone a column to copy its content and settings. Delete a column you no longer need.
Select the section from the canvas or the Layer Browser.
Open Section Attributes.
Expand Column Attributes.
Find the column you want to manage.
Click the three-dot menu beside the column.
Select one of these options:
Add Column to insert a new column
Clone Column to copy the selected column
Delete Column to remove the column
Resize Columns
Change column widths to control the layout of a section.
Select the section you want to edit.
Click the Manage Columns icon on the edge of the section. The icon shows a ruler with a pencil.
Drag the center slider to change the column widths.
Drag right to make the left column wider.
Drag left to make the right column wider.
Reorder Columns
Change the order of columns to improve the flow of your content.
Reorder from the Canvas
Select the section.
Click the Manage Columns icon.
Find the Drag icon on the column. The icon shows four arrows.
Drag the column to its new position.
Release the mouse to update the layout.
Reorder from the Layer Browser
The Layer Browser shows the structure of your email or landing page. Use it to select and organize content.
Open the Layer Browser.
Find the columns inside the section.
Drag a column layer to a new position.
Release the mouse to update the order.
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.
Click the section that contains the columns.
Open the Columns section in Section Attributes.
Select Equal Height to make every column the same height.
Select Fit Content if you want each column to match the height of its own content.
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.
Use the Mobile Editor
The Mobile Editor lets you make changes that only appear on mobile devices.
Complete your desktop layout.
Open the Mobile Editor.
Adjust padding, spacing, or alignment as needed.
Preview the mobile layout.
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.