The QUORRA Canvas is your sacred design workspace—a divine forge where ideas transform into beautiful, functional websites. Think of it as your digital anvil, blessed by the goddess of smithing.

Understanding the Canvas

The Design Area

The main white/gray area where you build your website layout.

Infinite scroll workspace
Smart guides and grids
Responsive breakpoint indicators
Real-time preview updates

Device Previews

See how your design looks across different devices instantly.

Mobile (375px)
Tablet (768px)
Desktop (1024px)
Wide (1440px)

💡 Pro Tip: Start with Mobile

Since 60% of web traffic comes from mobile devices, QUORRA encourages a mobile-first approach. Start designing on the mobile view, then enhance for larger screens. This ensures your site looks great everywhere and loads fast on all devices.

Basic Canvas Interactions

Selection & Clicking

Single Click

• Select an element
• Show selection handles
• Display properties panel

Double Click

• Edit text content directly
• Enter edit mode for complex elements
• Quick access to common properties

Moving & Positioning

Drag to Move

Click and drag elements to reposition them anywhere on the canvas.

Smart Guides

Blue guide lines appear automatically to help align elements perfectly.

Snap to Grid

Elements automatically snap to an invisible grid for clean layouts.

Resizing Elements

When an element is selected, resize handles appear around it:

Corner Handles

• Resize width and height together
• Maintain aspect ratio (hold Shift)
• Perfect for images and containers

Side Handles

• Resize width only (left/right)
• Resize height only (top/bottom)
• Great for text boxes and buttons

Navigating the Canvas

Zoom Controls

Zoom InCtrl/Cmd + +

Zoom OutCtrl/Cmd + -

Fit to ScreenCtrl/Cmd + 0

100% ZoomCtrl/Cmd + 1

Panning & Scrolling

Pan CanvasSpace + Drag

Scroll VerticalMouse Wheel

Scroll HorizontalShift + Wheel

Navigate to TopHome

Advanced Selection Techniques

Multi-Selection

Using Click + Modifier

Ctrl/Cmd + Click to add elements
Shift + Click to select range
Edit properties for all selected elements

Drag Selection

Drag on empty canvas to create selection box
All elements inside box get selected
Perfect for grouping similar elements

Layer Selection

When elements overlap, use these techniques to select the right layer:

Layer Panel

Click element names in the layer panel for precise selection.

Deep Click

Hold Ctrl/Cmd while clicking to cycle through overlapping elements.

Hide Elements

Temporarily hide elements to access those underneath.

Common Canvas Questions

"I can't select an element!"

• Check if the element is locked (lock icon in layers panel)
• Try clicking in the layers panel instead of the canvas
• Make sure you're not in preview mode
• The element might be behind another element—use Ctrl/Cmd + click to cycle through

"Elements are jumping around when I move them!"

• This is snap-to-grid helping you align elements
• Hold Alt while dragging to disable snapping temporarily
• Adjust grid settings in View menu if needed
• Use arrow keys for pixel-perfect positioning

"My canvas is zoomed in too much!"

• Press Ctrl/Cmd + 0 to fit the entire design to your screen
• Use Ctrl/Cmd + minus to zoom out step by step
• Double-click the zoom percentage to type a custom zoom level
• Reset to 100% with Ctrl/Cmd + 1

Master the Canvas, Master QUORRA

The canvas is your foundation for everything else in QUORRA. Once you're comfortable with these basics, you'll be ready to dive into working with specific elements, responsive design, and advanced features.

🔥 Next: Start Building

Now that you understand the canvas, it's time to start adding elements to your design. Learn how to work with text, images, buttons, and other components.

Continue to: Working with Elements

Canvas Basics