What Are Nested Sections?
Nested Sections let you split a single column into multiple columns.
Use nested sections when you want to:
Place content side by side
Add smaller elements next to a larger content block
Create more advanced layouts inside a section
Note: You cannot add a nested section inside another nested section.
How to Create a Nested Section
Follow these steps to build your layout.
Step 1: Add a Nested Section to a Column
Open the Builder.
Drag Nested Section into an existing column.
Drop it into place.
Step 2: Adjust Nested Section Columns
By default, a nested section includes two columns.
You can:
Add columns
Delete columns
Clone columns
Edit column settings
Click the nested section.
Locate the Columns panel.
Add or remove columns as needed.
 |  |
Adjust Column Width
Click inside the nested section.
Select the pencil and ruler icon in the bottom right.
Drag the slider left or right to adjust column width.
⚠️ Important: Column width adjustments apply to both desktop and mobile views. This setting is not responsive. Changes made here affect all device types.
Step 3: Add Content Blocks
Drag content blocks into each column.
Add text, images, buttons, or other elements.
Example layout:
Text block in Column 1
Image block in Column 2
Step 4: Edit Column Attributes
Customize the appearance of each column.
Open the right-side panel.
Locate the column you want to edit.
Open Column Attributes.
From here, adjust:
Background color
Vertical alignment
Corner radius
Borders
Padding
From here you can make adjustments to your background color, vertical alignment, column corners, add a border, or add padding!
Step 5: Use Responsive Settings
Responsive settings let you customize layouts for desktop and mobile.
Expand responsive options section to:
Prevent columns from stacking
Reverse column order on mobile
Additionally, click the desktop/mobile icon to set different values for mobile and desktop:
Adjust padding for desktop and mobile separately
Hide the section on mobile or desktop
Important: Mobile view may inherit desktop padding. Always check mobile settings separately.
Troubleshooting Mobile View Issues
Mobile layout issues are often caused by desktop settings carrying over.
1. Preview in Mobile Editor
Open the Mobile Editor.
Review section alignment.
Confirm spacing is consistent.
2. Adjust Mobile Padding
Open the Mobile Editor.
Set mobile-specific padding.
Example:
If desktop left padding is set to 2px, set mobile padding to 0px or another value manually.
3. Optimize Divider Elements
Review Divider elements in mobile view.
Adjust padding as needed.
Replace placeholders with supported Divider components if necessary.
Best Practices
Always check desktop and mobile views separately.
Set padding intentionally for each device type.
Keep layouts simple when stacking multiple nested sections.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com