The Design Panel is your central hub for controlling the appearance, layout, and responsiveness of every element on your website. This article breaks down how to access the panel and use its key features to style your site's structure, from main sections to individual widgets.
Accessing the Design Panel
You can open the Design Panel in two primary ways:
-
Element-Specific Access: Click on any element on your canvas and select the "Edit Design" option that appears in its context menu.
-
Global Access: Click the design panel icon (resembling a left facing arrow) located in the top right corner of the editor.
Key Features and Element Adaptation
The features available in the Design Panel adapt based on the element you've selected, giving you precise control over your layout hierarchy.
| Element Type | Primary Function | Key Design Properties | Layout Optimization |
| Sections | Primary page structure/building blocks. | Full bleed, spacing between columns, section height. | |
| Columns | Organize content horizontally within a section. | Content alignment, wrap, spacing between elements, column width. | |
| Inner Columns | Complex, nested layouts for advanced designs. | Similar to columns, plus customizable size, width, and height. | |
| Advanced Grid | Two-dimensional, structured design. | Number of columns, rows, gaps, and alignment options. | |
| Widgets | Individual components (e.g., buttons, text boxes). | Widget-specific styling like color, hover effects, and typography. |
Core Design Properties Explained
These properties are the fundamental controls you'll use to style and position your elements:
Alignment and Layout Settings
Alignment focuses on positioning, while Layout controls distribution and arrangement.
-
Alignment: Positions elements (left, center, right, or stretch) relative to the edges of their container. It handles both horizontal and vertical placement.
-
Layout Settings:
-
Arranges and distributes elements within a container (like a Section or Column).
-
For Columns/Inner Columns, you control horizontal and vertical alignment and the stacking direction of content.
-
The "Wrap" property becomes available when you choose a horizontal stacking direction, allowing content to flow onto a new line if it runs out of space.
-
"Full bleed" is a section-specific setting that allows content to span the entire width of the screen.
-
Spacing: Margins and Padding
Spacing sets uniform distances and is typically measured in pixels (vertical spacing) or percentages (horizontal spacing).
-
Margins: Control the space outside an element, pushing it away from other elements.
-
Padding: Adjusts the space inside an element, pushing the content away from the element's own border.
Size Adjustments
Size settings (height and width) are highly element-dependent, and the default unit of measurement varies.
| Element | Adjustments Available | Default Units | Notes |
| Sections | Height only | Pixels (px) | |
| Columns | Width only | Percentage ( |
Width is measured as a percentage of its parent container. |
| Inner Columns | Both Height and Width | Varies | Provides the most granular control over size. |
| Max and min height/width values are often available to ensure responsiveness. |