Editor Basics - Master the Mediaweb Website Builder
Learn the fundamentals of the Mediaweb visual editor, including interface layout, navigation, and essential building tools.
Editor Basics
The Mediaweb editor is a visual website builder that allows you to create and customize websites through a drag-and-drop interface. This guide covers the core interface elements and basic functionality.
Header
Located at the top of the editor, the header contains essential controls for project management and device preview.
Left Side Controls:
- Undo button - Reverts the last action with full history
- Redo button - Restores a previously undone action
- Zoom controls - Adjust canvas zoom level (25% to 400%)
- Fit to screen - Auto-adjust zoom to fit canvas
Device Preview Modes
The center of the header features device preview capabilities for responsive design testing.
Breakpoint Tabs:
- Mobile - 375px width, portrait orientation, touch simulation
- Tablet - 768px width, both orientations available
- Desktop - 1200px+ width, full responsive behavior
Publishing Controls
The right side of the header provides project management and publishing controls.
Available Actions:
- Preview button - View your website as visitors will see it
- Save button - Manually save your progress
- Publish button - Make your website live
Sidebar
The sidebar contains multiple tabs for different functions:
Components Tab (+ icon)
Access all available elements to add to your webpage including text, images, buttons, and layout components.
Key features:
- Drag-and-drop interface for easy element placement
- Organized categories for quick navigation
- Real-time preview of elements before placement
- Responsive elements that adapt to all screen sizes
Fonts Tab (T icon)
Browse and add different fonts to your website. Manage typography settings and font families.
Key features:
- Extensive font library with Google Fonts integration
- Custom font upload capabilities
- Typography presets for consistent styling
- Real-time font preview and testing
CSS Variables Tab (color palette icon)
Customize global design variables including colors, spacing, and other design tokens.
Key features:
- Global color palette management
- Spacing and sizing variable controls
- Design system consistency tools
- Real-time variable preview and updates
Layers Tab (layers icon)
View the hierarchical structure of your webpage. Rearrange elements by dragging them within the layer tree.
Key features:
- Hierarchical element organization and structure
- Drag-and-drop layer reordering capabilities
- Element visibility toggle controls
- Quick element selection and navigation
Files Tab (folder icon)
Manage uploaded assets including images, videos, and other media files.
Key features:
- Drag-and-drop file upload functionality
- Organized asset library with search capabilities
- Image optimization and compression tools
- File format support for web-optimized media
Icons Tab (icon library)
Access the built-in icon library to add visual elements to your website.
Key features:
- Extensive collection of professional icons
- Categorized icon sets for easy browsing
- Customizable icon colors and sizes
- Search functionality for quick icon discovery
AI Tab (AI icon)
Interact with the AI assistant for automated design suggestions and content generation.
Key features:
- Intelligent design recommendations and suggestions
- Automated content generation and copywriting
- Layout optimization and improvement tips
- Real-time design assistance and guidance
Main Canvas
The center area displays your website as you build it. This is where you:
- View your website in real-time
- Select and manipulate elements
- See changes as you make them
Toolbar and Properties
When you select an element, a blue outline appears and a context toolbar provides editing options. The properties panel on the right shows customization controls.
Key capabilities:
- Design & Styling - Colors, fonts, spacing, and visual appearance
- Events & Interactions - Click actions, hover effects, and animations
- Data & Content - Dynamic content, forms, and data binding
- Responsive Design - Device-specific layouts and breakpoints
- Selectors & Targeting - CSS selectors and element targeting
Keyboard Shortcuts
Essential shortcuts for efficient editing:
- Ctrl+Z / Cmd+Z: Undo
- Ctrl+Y / Cmd+Y: Redo
- Ctrl+S / Cmd+S: Save
- Ctrl+C / Cmd+C: Copy
- Ctrl+V / Cmd+V: Paste
- Delete: Remove selected element
- Ctrl+D / Cmd+D: Duplicate element
Next Steps
Master advanced editor capabilities with these specialized guides:
- Design & Styling - Colors, fonts, spacing, and visual appearance
- Events & Interactions - Click actions, hover effects, and animations
- Data & Content - Dynamic content, forms, and data binding
- Responsive Design - Device-specific layouts and breakpoints
- Selectors & Targeting - CSS selectors and element targeting