Duda Design Panel
Duda Design Panel
Effective Date: February 1, 2026
Last Updated: February 1, 2026
Overview
The Duda Design Panel is the central styling and layout interface within Editor 2.0. It provides appearance, spacing, alignment, and responsive controls for whichever element—Section, Column, Inner Column, or Widget—is currently selected. The Design Panel ensures that visual adjustments follow a consistent system and remain aligned with theme settings, responsive behavior, and the broader Smart Site framework.
Definition
The Design Panel contains the element-level controls that determine how content looks and behaves within the Editor 2.0 structure. It is divided into multiple sections—commonly including Layout, Spacing, Alignment, Background, Border, and Size—each responsible for a different aspect of styling. These controls allow teams to adjust the appearance of an element while preserving the site’s overall structure and theme integrity.
Consistency Across Breakpoints
- Styling decisions should remain consistent unless a breakpoint-specific adjustment is required for readability or layout integrity.
- Spacing, alignment, and size changes on smaller breakpoints should support the intended responsive design, not override it.
- Avoid styling differences between breakpoints unless they serve a clear functional purpose.
What Should Not Be Overridden
The Design Panel supports extensive customization, but certain elements must remain aligned with system defaults:
Theme-Driven Styling
- Do not override Theme Colors with one-off custom colors unless the design explicitly requires it.
- Do not replace Theme Text settings with manual font choices for standard headings or paragraphs.
Manual or Unsupported Workarounds
Avoid the following:
- Using empty widgets for spacing
- Forcing fixed heights or widths to control layout
- Overlapping elements through negative margins
- Applying extensive styling overrides that prevent templates from remaining flexible
Additional Notes
- The Design Panel controls appearance and layout, not structure—Sections, Columns, and Inner Columns must remain in their defined hierarchy.
- Because responsive inheritance begins at the Desktop breakpoint, styling updates at the top level cascade downward unless intentionally modified on Tablet or Mobile.