Interface6 min read•Audience: All, Designers
Editor Overview
Master the 3-panel PostBrix interface: the Block Tray, Visual Canvas, and Properties Inspector.
Key Takeaways
- Left Panel: Draggable layouts, content blocks, dynamic logic widgets, and saved reusable components.
- Center Canvas: Live WYSIWYG editing space with inline text controls, drag-and-drop handles, and breadcrumb trails.
- Right Panel: Contextual property inspector for typography, dimensions, colors, borders, and mobile overrides.
- Top Bar: Undo/redo history, responsive view toggles (desktop/mobile), preview mode, code inspection, and export triggers.
The 3-Panel Architecture#
The PostBrix workspace is organized into three synchronized panels:
1. Left Panel (Component Drawer)
Contains all building blocks categorized by type:
- Layouts: 1-Column, 2-Column (50/50, 30/70, 70/30), 3-Column, and 4-Column sections.
- Content Blocks: Text, Heading, Image, Button, Divider, Spacer, Table.
- Interactive & Special: QR Code, Countdown Timer, Video Thumbnail, Social Icons, Navbar, Accordion.
- Dynamic Logic: Loop (
logic-loop) and Condition (logic-condition) blocks for Handlebars logic. - Saved Blocks: Custom reusable components saved by your team.
2. Center Panel (Visual Canvas)
The live interactive design canvas. You can:
- Drag blocks to reorder them vertically or move them between columns.
- Click any block to select it and reveal the floating quick-action bar (Duplicate, Delete, Move Up/Down).
- Double-click any Text or Heading block to activate inline rich text formatting (bold, italic, links, font sizing).
3. Right Panel (Properties Inspector)
Updates dynamically based on your current selection:
- When a Section is selected: configure background color, background image, padding, and full-width stretch.
- When a Column is selected: adjust column width percentage, vertical alignment (top, middle, bottom), and inner padding.
- When an Element is selected: fine-tune typography (font family, size, line-height, letter-spacing), colors, borders, padding, and URL targets.
Frequently Asked Questions
Can I undo accidental deletions or changes in the editor?
Yes. PostBrix includes full history tracking with Cmd+Z / Cmd+Shift+Z (or Ctrl+Z / Ctrl+Y on Windows) and undo/redo toolbar buttons.
Can I design emails on mobile screens?
The drag-and-drop editor is optimized for desktop and tablet screens, but you can preview your email on 375px mobile viewports at any time using the Mobile toggle.