Adding a Section

Styling a Section

Organizing Sections

Sections are the most fundamental part of building inside the Design Editor. By default, sections are set to 100% width of the browser window and 900px height. While the width cannot be adjusted, the height is fully customizable.

Sections are great for dividing your content and organizing in the layer panel. Beyond that, sections make adapting your design to be responsive by breakpoint/device type a much more streamlined process.

Adding a Section

  • From the top menu bar, click on the Section next to the add menu (Shortcut: K )

  • Hover over the canvas

  • Click where it says Add section here

Styling a Section

  • Spacing top: Add padding to the top of the section in pixels or % to keep spacing between sections

  • Spacing bottom: Add padding to the bottom of the section in pixels or % to keep spacing between sections

  • Width: The width of a section can't be altered, it'll always be set to cover the 100%

  • Height: Set the height of the section in Pixels, % or set it to Auto so that it grows as you add content to it

  • Min H: Sets the minimum amount of height pixels a section can be. A red stippled horizontal line inside your section will reflect the minimum height

  • Clip content: Toggle to hide the content that goes beyond the section's edges

  • Resize to fill vertically: Click to set the section's height to 100%

  • Background:

    • Add fill: Add a color as the section's background

    • Add gradient: Combine colors to add a gradient as the section's background

    • Add background image: Upload an image or choose an image from one of our free stock images libraries and use it as the section's background

  • Border: Set a border color, opacity, and line weight for the container

  • Effects: Add different types of shadows or blur effects to both the container

  • Opacity: Adjust the transparency of the section

Aspect Ratio

Specifying and locking the aspect ratio of a section will allow you to adjust and resize it but still maintain the overall relationship between height and width.

Tip: Right-click the aspect lock to open up a menu of popular aspect ratios.

Organizing Sections

Once a section has been added it'll appear in the layers panel, you can drag it above or below other sections to place it where you need it in your project. Follow the steps below to learn how to do it.

  • Select the section in the layers panel

  • Click and hold it

  • Drag it above or below the section you want

Did this answer your question?