--- title: "Design Panel Tour: A Guide to Element Styling & Layout" description: The Design Panel is your central hub for controlling the appearance, layout, and responsiveness of every element on your website. This article breaks down how to access the panel and use its key features. --- [Skip to content](https://help.steercrm.com/knowledge/the-editors-design-panel-tour#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 # Design Panel Tour: A Guide to Element Styling & Layout The Design Panel is your central hub for controlling the appearance, layout, and responsiveness of every element on your website. This article breaks down how to access the panel and use its key features to style your site's structure, from main sections to individual widgets. ### Accessing the Design Panel You can open the Design Panel in two primary ways: 1. **Element-Specific Access:** Click on any element on your canvas and select the **"Edit Design"** option that appears in its context menu. 2. **Global Access:** Click the **design panel icon** (resembling a left facing arrow) located in the top right corner of the editor. ![Screenshot 2025-10-14 at 1.47.19 PM](https://help.steercrm.com/hs-fs/hubfs/Screenshot%202025-10-14%20at%201.47.19%20PM.png?width=241&height=696&name=Screenshot%202025-10-14%20at%201.47.19%20PM.png) ### Key Features and Element Adaptation The features available in the Design Panel adapt based on the element you've selected, giving you precise control over your layout hierarchy. | Element Type | Primary Function | Key Design Properties | Layout Optimization | | --- | --- | --- | --- | | **Sections** | Primary page structure/building blocks. | **Full bleed**, spacing between columns, **section height**. | D Layout (Typically vertical stacking). | | **Columns** | Organize content horizontally within a section. | Content alignment, **wrap**, spacing between elements, **column width**. | D Layout (Focus on individual rows or columns). | | **Inner Columns** | Complex, nested layouts for advanced designs. | Similar to columns, plus customizable size, width, and height. | D Layout (Focus on individual rows or columns). | | **Advanced Grid** | Two-dimensional, structured design. | Number of **columns, rows, gaps, and alignment** options. | **D Layout** (Simultaneous manipulation of rows and columns). | | **Widgets** | Individual components (e.g., buttons, text boxes). | **Widget-specific styling** like color, **hover effects**, and **typography**. | D or D, depending on the widget. | ### Core Design Properties Explained These properties are the fundamental controls you'll use to style and position your elements: #### Alignment and Layout Settings Alignment focuses on positioning, while Layout controls distribution and arrangement. - **Alignment:** Positions elements (left, center, right, or stretch) relative to the edges of their container. It handles both horizontal and vertical placement. - **Layout Settings:** - Arranges and distributes elements within a container (like a Section or Column). - For Columns/Inner Columns, you control **horizontal** and **vertical alignment** and the **stacking direction** of content. - The **"Wrap"** property becomes available when you choose a horizontal stacking direction, allowing content to flow onto a new line if it runs out of space. - **"Full bleed"** is a section-specific setting that allows content to span the **entire width of the screen**. #### Spacing: Margins and Padding Spacing sets uniform distances and is typically measured in **pixels** (vertical spacing) or **percentages** (horizontal spacing). - **Margins:** Control the space **outside** an element, pushing it away from other elements. - **Padding:** Adjusts the space **inside** an element, pushing the content away from the element's own border. #### Size Adjustments Size settings (height and width) are highly **element-dependent**, and the default unit of measurement varies. | Element | Adjustments Available | Default Units | Notes | | --- | --- | --- | --- | | **Sections** | Height only | Pixels (px) | | | **Columns** | Width only | Percentage () | Width is measured as a percentage of its parent container. | | **Inner Columns** | Both Height and Width | Varies | Provides the most granular control over size. | | *Max and min* height/width values are often available to ensure responsiveness. | | | |   - [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