Skip to main content

Nested Section

Use nested sections to divide a column into smaller sections. Create flexible layouts with multiple content blocks side by side.

What Are Nested Sections?

Nested sections let you split a single column into multiple columns.

Use nested sections 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.

Add and Configure a Nested Section

Follow these steps to add a Nested Section content block and customize your layout.

Step 1: Add the Nested Section Content Block

  1. Open the Builder.

  2. Drag the Nested Section content block into an existing column.

  3. Drop it into place.

    Dragging and dropping a nested section content block into an asset.

Step 2: Adjust Nested Section Columns

By default, a nested section includes two columns.

  • Add columns

  • Delete columns

  • Clone columns

  • Edit column settings

  1. Click the nested section.

  2. Locate the Columns panel.

  3. Add or remove columns as needed.

Column attribute options to add, edit, clone, and delete columns in the nested section attributes section.

Adjust Column Width

  1. Click inside the nested section.

  2. Select the pencil and ruler icon in the bottom right.

  3. 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

  1. Drag content blocks into each column.

  2. Add text, images, buttons, or other elements.

    Dragging and dropping an image content block into an empty column in a nested section.

Example layout:

  • Text block in Column 1

  • Image block in Column 2

Step 4: Customize Nested Section Columns

Customize the appearance of each column inside your nested section.

  1. Select the nested section.

  2. Locate the column you want to customize in the right-side panel.

  3. Open Column Attributes.

  4. Adjust the settings as needed.

You can customize:

  • Background color

  • Vertical alignment

  • Corner radius

  • Borders

  • Padding

To create consistent modules, apply borders and rounded corners at the nested section level. Use even padding to control the space around your content.

Editing the column attributes of a nested section

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.

adjusting mobile and desktop values.

Troubleshooting Mobile View Issues

Mobile layout issues are often caused by desktop settings carrying over.

1. Preview in Mobile Editor

  1. Open the Mobile Editor.

  2. Review section alignment.

  3. Confirm spacing is consistent.

2. Adjust Mobile Padding

  1. Open the Mobile Editor.

  2. 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

  1. Review Divider elements in mobile view.

  2. Adjust padding as needed.

  3. 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.

Related Articles
Did this answer your question?