Interface Overview
Learn how to navigate TheDock's interface and understand its main components.
Watch: Getting Started with TheDock (5 min) - This video covers the complete interface walkthrough.
Main Layout
TheDock's interface is divided into several key areas:
Interface Regions:
┌─────────────────────────────────────────────────────────────────┐
│ TOP HEADER BAR │
│ [TheDock Logo] [Save] [Undo/Redo] [History] [Export] [WP] │
├─────────────────────────────────────────────────────────────────┤
│ NAVIGATION TABS │
│ [A. Design] [B. Layout] [C. Build] │
├─────────────┬───────────────────────────────────────────────────┤
│ │ │
│ LEFT │ PREVIEW AREA │
│ SIDEBAR │ │
│ │ (Live theme preview) │
│ Context- │ │
│ sensitive │ │
│ controls │ │
│ │ │
├─────────────┴───────────────────────────────────────────────────┤
│ DEVICE PREVIEW SWITCHER │
│ [Desktop] [Tablet] [Mobile] │
└─────────────────────────────────────────────────────────────────┘
Top Header Bar
The header bar provides global controls:
| Element | Function |
|---|---|
| TheDock Logo | Returns to the main dashboard |
| Save Button | Saves your current work to WordPress |
| Undo/Redo | Step backward or forward through changes |
| History Panel | View complete history of all changes |
| Export Theme | Generate and export your WordPress theme |
| Back to WordPress | Return to the WordPress admin dashboard |
Auto-Save
TheDock automatically saves your work every 30 seconds. A notification appears in the header when saving occurs.
Navigation Tabs
TheDock is organized into three main sections, accessible via the navigation tabs:
A. Design
Control your theme's visual appearance:
- Dashboard - Overview preview of your homepage
- Typography - Fonts, sizes, line heights, letter spacing
- Colors - Color palette with auto-generated tints and shades
- Spacing - Margins, padding, and grid settings
- UI - Buttons, inputs, borders, shadows
- UX - Animations and transitions
- Icons - Icon libraries and UI indicators
- WooCommerce - E-commerce styling (if enabled)
B. Layout
Build your page structures:
- Templates - Full page layouts for different content types
- Modules - Reusable sections that can appear across templates
- Header - Global site header configuration
- Footer - Global site footer configuration
- Forms - Form builder for contact forms, etc.
C. Build
Configure WordPress integration:
- Theme Structure - Assign templates to WordPress template hierarchy
- Menu Locations - Configure WordPress menu positions
- Custom Fields - ACF integration settings
- Custom CSS - Add theme-specific styles
- Custom JS - Add theme-specific scripts
- Theme Functions - PHP functions for your theme
- Theme Partials - Reusable PHP template parts
Left Sidebar
The left sidebar changes based on your current section:
In Design Mode
Shows design controls organized by category (typography, colors, etc.)
In Layout Mode (Editing)
Shows the Control Panel with:
- Tree View - Hierarchical structure of your layout
- Element Settings - Properties for the selected element
- Actions - Add, duplicate, delete, move elements
In Build Mode
Shows configuration options for WordPress integration.
Preview Area
The central preview area shows a live, interactive preview of your theme:
- Real-time updates - Changes appear instantly
- Clickable elements - Click to select and edit
- Responsive - View adapts to device preview size
- Grid overlay - Toggle to see the underlying grid structure
Preview Controls
At the bottom of the preview:
| Control | Function |
|---|---|
| Desktop | Preview at desktop width (1200px+) |
| Tablet | Preview at tablet width (~768px) |
| Mobile | Preview at mobile width (~375px) |
| Fullscreen | Expand preview to full browser window |
Working with the Tree View
When editing templates or modules, the Tree View shows your layout hierarchy:
Template
├── Header (Module)
├── Section: Hero
│ └── Grid
│ ├── Area: Content
│ │ ├── Block: Heading
│ │ └── Block: Text
│ └── Area: Image
│ └── Block: Image
├── Section: Features
│ └── Grid
│ ├── Area: Feature 1
│ ├── Area: Feature 2
│ └── Area: Feature 3
└── Footer (Module)
Hierarchy Explained
| Level | Description |
|---|---|
| Template | The complete page layout |
| Section | Full-width horizontal band (like a "row") |
| Grid | Container for arranging areas in columns |
| Area | Column within a grid |
| Block | Individual content element (text, image, button, etc.) |
Context Menus
Right-click (or use action buttons) on elements to access:
- Add - Insert new child element
- Duplicate - Copy the element
- Move Up/Down - Reorder within parent
- Delete - Remove the element
- Copy - Copy to clipboard
- Paste - Paste from clipboard
- Save as Module - Convert section to reusable module
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Ctrl/Cmd + S | Save |
Ctrl/Cmd + Z | Undo |
Ctrl/Cmd + Shift + Z | Redo |
Escape | Deselect / Close modal |
← / → | Navigate onboarding steps |
Delete | Delete selected element |
Help System
Click the help icon (life buoy) in any section to get contextual help about that feature.
Each help modal explains:
- What the feature does
- How to use it effectively
- Tips and best practices
Next Steps
Now that you understand the interface:
- Build Your First Theme - Hands-on tutorial
- Understanding Colors - Start customizing