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
Edit a Section
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.
Adjust Column Properties
Each column can have its own styling and layout settings.
Open Column Attributes to customize an individual column.
Customize Column Settings
You can:
Set a column background color
Change vertical alignment
Add rounded corners
Add borders
Adjust padding
Add, Clone, or Delete Columns
Manage columns directly from the Column Attributes panel.
Select the section from the canvas or Layer Browser.
Open Section Attributes.
Expand Column Attributes.
Locate the column you want to manage.
Click the three-dot menu beside the column.
Select one of the following:
Add Column to insert a new column
Clone Column to duplicate the selected column
Delete Column to remove the column
Make Columns Equal Height
Equal-height columns create a consistent layout across a section.
Select the section that contains the columns.
Open the Columns dropdown.
Select one of the following options:
Equal Height to make every column the same height
Fit Content to size each column to its content
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com.