In this article, we will explore how to use Nested Sections and the benefits they provide.
What are Nested Sections?
Nested Sections are a feature that allow you to divide a column into smaller sections. This is useful when you want to have multiple content blocks side by side, or when you want to have a larger content block with smaller elements beside it.
How to Use Nested Sections
Using Nested Sections is simple. Follow these steps to create your own Nested Sections.
Step 1. Drag and Drop a Nested Section into a Column
Note: At this time Knak does not support adding a nested section into another nested section.
Step 2. Make any Adjustments to your Nested Section columns
The default when adding in a nested section is to add 2 columns, but you can add more columns or delete them. Find the Columns section to add columns, edit columns, clone columns, or delete columns.
|
|
You can also adjust column width in your nested section by clicking into the nested section and selecting the pencil and ruler icon on the bottom right and sliding the bar from left to right.
Step 3. Drag and Drop your Content Blocks into your Nested Section
Add in text boxes/picture elements/etc into your nested section. In the example below we've added a text box to column 1 and an image block to column 2.
Step 4. Personalize your Nested Section
Columns are a great way to organize and display content on your website. To edit your columns, you will need to access the "Column Attributes." Navigate to the column you would like to edit on the right menu and click the three buttons beside the column. This will open up the column attributes for you to edit.
From here you can make adjustments to your background color, vertical alignment, column corners, add a border, or add padding!
Step 5. Utilize Responsive Options for Nested Sections
You can also utilize responsive options which allows for further customization between desktop and mobile view. Open your "Nested Section Attributes" to add different pixel values to adjust padding, hide the nested section on either mobile or desktop, choose to not stack your columns, or reverse column order on mobile. Inconsistent padding or alignment between sections on mobile is a common issue often caused by desktop-specific settings being applied to mobile views. Ensure that padding and alignment configurations are independently verified and adjusted for mobile to maintain consistent presentation.
Troubleshooting Mobile View Issues
When using Nested Sections for mobile, you may encounter inconsistent padding or alignment between sections. These problems often arise from settings initially designed for desktop views. Follow these steps to troubleshoot and resolve the issues:
Adjust Padding for Mobile:
Identify any padding that has been automatically carried over from desktop settings.
Clear or update these values specifically for the mobile view. Example: If left padding is set at 2px for desktop, ensure that you explicitly set it to "0" or an appropriate value for mobile.
Save and Preview:
Save your changes and preview the page in the mobile view.
Confirm that all sections are aligned consistently after the adjustments.
Adjust Further if Needed:
If inconsistencies persist, revisit the settings to ensure no residual values remain from desktop settings.
By actively addressing these issues, you can ensure a consistent and professional mobile view of your Nested Sections.
By actively addressing these issues, you can ensure a consistent and professional mobile view of your 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