Sections are foundational components within the Design Editor, essential for structuring your project effectively. By default, sections occupy the entire width of the canvas and have a set minimum height of 900px. However, the height is fully adjustable to suit your needs.
Adding a Section
To add a section:
Click the 'Section' button in the top toolbar (Shortcut:
K).Click anywhere on the canvas to add it.
Alternatively, if you are starting from a blank page, quickly add a section from the canvas by selecting 'Add a blank section'.
Editing and styling a Section
Access all styling options for a section in the right-side style panel. Here's what you can adjust:
Spacing
Maintain consistent spacing between sections by adding padding to the top or bottom.
You can achieve this by:
Editing the spacing fields in the right panel.
Holding
shiftand dragging the spacing handle on the canvas.
Sizing
Sections always cover 100% of the canvas width (W), but you can adjust the minimum height (Min H) to suit your needs.
The Min H defines the minimum height the section must have, while the default section height (H) is set to auto. This ensures the section keeps a certain height but will automatically increase if the content is taller than the Min H.
You can easily adjust the Min H by hovering your cursor at the bottom of the section and dragging the blue indicator to resize or edit the field in the right-side style panel.
Tip: Quickly resize your section to fill 100% of the height by using the Resize button.
Aspect ratio
Enabling aspect ratio locks a width-to-height ratio of the section. The width always fills 100% of the screen size, which means the section height will automatically adjust to the ratio set.
Click on the aspect ratio button on a section to enable it. The height (H) field will activate and the Min H will be disabled. In the height field, you can edit the ratio that the section should keep.
Tip: Right-click the aspect ratio button to select from popular aspect ratios.
Clip content
Use the 'Clip content' option to hide content outside the section container. This is useful for cases where content overlaps sections.
Styling
Style your section with various options:
Background: Add color fill, gradient, or background image.
Border: Customize border color, opacity, and line weight.
Effects: Apply shadows or blur effects.
Opacity: Adjust transparency as needed.