--- title: "Understanding the Canvas: Your Main Workspace for Website Design" description: The editor's canvas is your primary work area where you design and build your website. It operates on the box model and allows for complex, nested layouts using intuitive selection, movement, and styling. --- [Skip to content](https://help.steercrm.com/knowledge/understanding-the-canvas-your-main-workspace-for-website-design#main-content) English Show submenu for translations [![Steer\_AutoOps\_Brand\_Marks-all-white](https://help.steercrm.com/hs-fs/hubfs/Steer_AutoOps_Brand_Marks-all-white.png?width=100&height=34&name=Steer_AutoOps_Brand_Marks-all-white.png)](https://help.steercrm.com/knowledge?hsLang=en) - Events & Webinars Show submenu for Events & Webinars - [2026 July Town Hall](https://steer.io/events/july-town-hall-2026) - [All Recorded Events](https://steer.io/events) - Campaign Templates Show submenu for Campaign Templates - [Email Templates](https://steer.io/email-templates) - [Post Card Templates](https://steer.io/direct-mail-postcards) - [Letter Templates](https://steer.io/direct-mail-letters) - Video Tutorials Show submenu for Video Tutorials - AutoOps Tutorials - Steer Tutorials - Steer Phones Tutorials - Login Show submenu for Login - [AutoOps Dashboard](https://dashboard.autoops.com) - [Steer Dashboard](https://app.steercrm.com) - [Steer Phones Dashboard](https://phones.steerphones.com) Open main navigation Close main navigation - Events & Webinars Show submenu for Events & Webinars - [2026 July Town Hall](https://steer.io/events/july-town-hall-2026) - [All Recorded Events](https://steer.io/events) - Campaign Templates Show submenu for Campaign Templates - [Email Templates](https://steer.io/email-templates) - [Post Card Templates](https://steer.io/direct-mail-postcards) - [Letter Templates](https://steer.io/direct-mail-letters) - Video Tutorials Show submenu for Video Tutorials - AutoOps Tutorials - Steer Tutorials - Steer Phones Tutorials - Login Show submenu for Login - [AutoOps Dashboard](https://dashboard.autoops.com) - [Steer Dashboard](https://app.steercrm.com) - [Steer Phones Dashboard](https://phones.steerphones.com) - English Show submenu for translations - [Support](mailto:help@steer.io) [Support](mailto:help@steer.io) How can we help you? - There are no suggestions because the search field is empty. 1. [Help Center](https://help.steercrm.com/knowledge?hsLang=en) 2. [AutoOps Websites](https://help.steercrm.com/knowledge/autoops-websites?hsLang=en) 3. [Website Editor Guides](https://help.steercrm.com/knowledge/autoops-websites?hsLang=en#website-editor-guides) October 14, 2025 # Understanding the Canvas: Your Main Workspace for Website Design The editor's **canvas** is your primary work area where you design and build your website. It operates on the **box model** and allows for complex, nested layouts using intuitive selection, movement, and styling tools. ### ![Screenshot 2025-10-14 at 1-51-08 PM-png](https://help.steercrm.com/hs-fs/hubfs/Screenshot%202025-10-14%20at%201-51-08%E2%80%AFPM-png.png?width=688&height=338&name=Screenshot%202025-10-14%20at%201-51-08%E2%80%AFPM-png.png) ### Selecting and Navigating Elements #### Element Selection and Hierarchy To select any element, simply **hover** over it until a **blue outline** appears, and then **click**. Once selected, the editor provides several tools to understand the element's position: - **Breadcrumb Navigation:** Located in the top-left corner, this shows the element's hierarchical relationship (e.g., *Section \> Column 1 \> Button*), making it easy to see and navigate its **nested position**. - **Design Panel:** Selecting an element updates the **design panel** to show its specific properties and hierarchy. - **Layers Panel:** This panel offers a detailed, tree-like view of the site's **HTML structure**, making it easy to locate and adjust deeply nested or overlapping elements. #### Moving Elements Elements can be repositioned using two main methods: 1. **Drag and Drop:** Click and hold an element on the canvas or within the **Layers Panel** to move it. 2. **Floating Design Panel:** Click an arrow in the floating panel that appears upon selection to quickly shift the element's position. **Visual Indicators** will guide your placement: - A **blue indicator** shows the position relative to **sibling elements** (elements at the same hierarchical level). - A **section fill indicator** highlights the **parent element** you are moving it into. The final placement is determined by the element's internal **display settings and properties** for precise layout control.   ### The Box Model and Nesting #### The Box Model The canvas is built upon the **box model**, the fundamental concept in CSS, a styling language used to control the visual appearances of web pages. Every element is treated as a rectangular **box** composed of four layers: 1. **Content:** The actual text, image, or media. 2. **Padding:** Space *inside* the box, between the content and the border. 3. **Border:** The line surrounding the content and padding. 4. **Margin:** Space *outside* the box, separating it from other elements. This model is essential for **responsive design**, as it allows elements to consistently adapt and size correctly across different screen resolutions. #### Creating Layouts with Nesting **Nesting** is the practice of placing containers within other containers to create flexible and complex layouts. - **Containers:** Elements like **Sections, Columns, Inner Columns, and Advanced Grids** are designed to hold and organize other elements. - **Cohesive Movement:** When you move a parent container, **all nested elements move with it**, ensuring your complex layout remains cohesive. - **Example:** A **Section** may contain two **Columns**. Each column might then hold a mix of text, images, and buttons, with further nesting possible inside **Inner Columns** for even finer control.   ### Styling and Layout Control #### Styling with the Design Panel The **Design Panel** is where you apply **CSS properties** to both containers and individual elements: - **Dimensions:** Control height, width, minimum, and maximum sizes. - **Spacing:** Use **margins** (outer space) and **padding** (inner space) to control distances. - **Appearance:** Set backgrounds, borders, colors, typography, and positioning. Click Here to view our article that tours the elements of the [Design Panel.](https://help.steercrm.com/knowledge/the-editors-design-panel-tour?hsLang=en) #### Changing Element Layouts To control the flow and arrangement of child elements within a container, use the layout widgets from the **Widgets Panel**: - **Columns/Inner Columns:** These use **Flexbox** technology, which is optimized for **one-dimensional** layouts (arranging elements primarily in a horizontal **row** or vertical **column**). - **Advanced Grid:** This uses **Grid Layout** technology, which is optimized for **two-dimensional** layouts (arranging elements simultaneously across defined **rows and columns**).   - [Booking](https://help.steercrm.com/knowledge/booking?hsLang=en#main-content) - [Steer x AutoOps](https://help.steercrm.com/knowledge/booking?hsLang=en#steer-x-autoops) - [Lead Management & Marketing Tracking](https://help.steercrm.com/knowledge/booking?hsLang=en#lead-management-marketing-tracking) - [Availability & Capacity Management](https://help.steercrm.com/knowledge/booking?hsLang=en#availability-capacity-management) - [Issue Tree Management](https://help.steercrm.com/knowledge/booking?hsLang=en#issue-tree-management) - [Steer Scheduling Tool (Retiring Soon)](https://help.steercrm.com/knowledge/booking?hsLang=en#steer-scheduling-tool-retiring-soon) - [AutoOps Websites](https://help.steercrm.com/knowledge/autoops-websites?hsLang=en#main-content) - [Tutorials & Videos](https://help.steercrm.com/knowledge/autoops-websites?hsLang=en#tutorials-videos) - [Website Editor Guides](https://help.steercrm.com/knowledge/autoops-websites?hsLang=en#website-editor-guides) - [AutoOps Pro Features](https://help.steercrm.com/knowledge/autoops-pro-features?hsLang=en#main-content) - [AutoOps Website Chat](https://help.steercrm.com/knowledge/autoops-pro-features?hsLang=en#autoops-website-chat) - [Phones](https://help.steercrm.com/knowledge/phones?hsLang=en#main-content) - [Step-By-Step Guides](https://help.steercrm.com/knowledge/phones?hsLang=en#step-by-step-guides) - [Understanding Steer Phones](https://help.steercrm.com/knowledge/phones?hsLang=en#understanding-steer-phones) - [Marketing](https://help.steercrm.com/knowledge/marketing?hsLang=en#main-content) - [Outreach Planning](https://help.steercrm.com/knowledge/marketing?hsLang=en#outreach-planning) - [Campaign Creation & Management](https://help.steercrm.com/knowledge/marketing?hsLang=en#campaign-creation-management) - [Follow-Up Campaigns](https://help.steercrm.com/knowledge/marketing?hsLang=en#follow-up-campaigns) - [Outreach Campaigns](https://help.steercrm.com/knowledge/marketing?hsLang=en#outreach-campaigns) - [Maintenance Reminder Campaigns](https://help.steercrm.com/knowledge/marketing?hsLang=en#maintenance-reminder-campaigns) - [Deferred Service Campaigns](https://help.steercrm.com/knowledge/marketing?hsLang=en#deferred-service-campaigns) - [Steer Reviews & Surveys](https://help.steercrm.com/knowledge/steer-reviews-surveys?hsLang=en#main-content) - [Reputation Management](https://help.steercrm.com/knowledge/steer-reviews-surveys?hsLang=en#reputation-management) - [Steer Surveys](https://help.steercrm.com/knowledge/steer-reviews-surveys?hsLang=en#steer-surveys) - [Steer Dashboard Analytics](https://help.steercrm.com/knowledge/steer-dashboard-analytics?hsLang=en#main-content) - [Steer Data & Analytics](https://help.steercrm.com/knowledge/steer-dashboard-analytics?hsLang=en#steer-data-analytics) - [Steer Dashboard Management](https://help.steercrm.com/knowledge/steer-dashboard-analytics?hsLang=en#steer-dashboard-management) - [Steer Customer & Vehicle Profiles](https://help.steercrm.com/knowledge/steer-dashboard-analytics?hsLang=en#steer-customer-vehicle-profiles) - [Steer Ultimate](https://help.steercrm.com/knowledge/steer-ultimate?hsLang=en#main-content) - [Auto-Reply](https://help.steercrm.com/knowledge/steer-ultimate?hsLang=en#auto-reply) - [Call Intelligence/CallerID+](https://help.steercrm.com/knowledge/steer-ultimate?hsLang=en#call-intelligence-callerid) - [Digital Glovebox](https://help.steercrm.com/knowledge/steer-ultimate?hsLang=en#digital-glovebox) - [Opportunity Hub/Today's Call List](https://help.steercrm.com/knowledge/steer-ultimate?hsLang=en#opportunity-hub-todays-call-list) - [Mobil 1™ Performance+](https://help.steercrm.com/knowledge/mobil-1-performance?hsLang=en#main-content) - [Mobil 1 AutoOps Menu](https://help.steercrm.com/knowledge/mobil-1-performance?hsLang=en#mobil-1-autoops-menu) - [Mobil 1 Dashboard & Rebates](https://help.steercrm.com/knowledge/mobil-1-performance?hsLang=en#mobil-1-dashboard-rebates) - [Mobil 1 Maintenance Reminders](https://help.steercrm.com/knowledge/mobil-1-performance?hsLang=en#mobil-1-maintenance-reminders) - [Admin & Settings](https://help.steercrm.com/knowledge/admin-settings?hsLang=en#main-content) - [Steer General Settings](https://help.steercrm.com/knowledge/admin-settings?hsLang=en#steer-general-settings) - [Integrations](https://help.steercrm.com/knowledge/admin-settings?hsLang=en#integrations) - [Texting Compliance](https://help.steercrm.com/knowledge/admin-settings?hsLang=en#texting-compliance) - [User Permission & Notifications Settings](https://help.steercrm.com/knowledge/admin-settings?hsLang=en#user-permission-notifications-settings) - [What's New?](https://help.steercrm.com/knowledge/whats-new?hsLang=en#main-content) - [Steer Updates: 2026](https://help.steercrm.com/knowledge/whats-new?hsLang=en#steer-updates-2026) - [2025 & Older Releases](https://help.steercrm.com/knowledge/whats-new?hsLang=en#2025-older-releases) [![Steer\_AutoOps\_Logo\_Cobranded\_White](https://help.steercrm.com/hs-fs/hubfs/Steer_AutoOps_Logo_Cobranded_White.png?width=186&height=24&name=Steer_AutoOps_Logo_Cobranded_White.png "Steer_AutoOps_Logo_Cobranded_White")](https://help.steercrm.com/knowledge?hsLang=en) [Book a Demo](https://steer.io/book-a-demo) Copyright © 2025, Steer