Design Mode

Design Mode gives you visual control over the styling of your pages — change colors, fonts, spacing, and layout without writing code.

Enabling Design Mode

1. Open your content in the workspace
2. Click the Design Mode button in the toolbar
3. A visual design panel opens, allowing you to style any element

What You Can Change

• Colors — Background colors, text colors, border colors
• Typography — Font family, size, weight, line height
• Spacing — Padding and margins
• Layout — Alignment, display, positioning
• Borders — Width, style, radius
• Backgrounds — Solid colors, gradients, images
• Shadows — Box shadows and effects

How to Use Design Mode

1. Enable Design Mode from the toolbar
2. Click on any element on the page to select it
3. The design panel shows the element's current styles
4. Adjust properties using the visual controls
5. See changes in real time on the preview
6. Click Save to preserve your design changes

Design Mode vs Code Editor

• Design Mode — Visual controls, no code needed, great for quick styling
• Code Editor — Direct HTML/CSS editing, full control, for advanced users

Tips

• Use Design Mode together with a linked Styleguide for brand-consistent edits
• Check all preview modes (desktop, mobile, tablet) after making design changes
• Save your changes before switching to a different step or content type