Pixel Perfect

Editor 2.0 gives you powerful tools to build and manage your website with more control, flexibility, and ease.

Before you dive into editing, it helps to understand how the interface is structured and what each part of the editor does.

Below, you'll find quick overviews and key takeaways from each major area of the editor. Use this guide to get familiar with the workspace and speed up your workflow.

Key Takeaways

• Top Toolbar
• Displays logo, brand colors, and tools
• Includes screen size icons (breakpoints) for Desktop, Tablet, and Mobile views
• Tooltips explain each breakpoint's function
• Edits in Desktop view apply across all sizes, but can be customized per breakpoint
• Breakpoints are based on screen size, not specific devices
• Side Panel (Left)
• Controls site-wide settings
• Use to update theme colors, manage page structure, and assign a domain
• Includes the Layers Panel:
• Shows a list of all elements on the page
• Lets you hide/unhide or rename items
• Design Panel (Right)
• Controls styles and visual settings
• Adjust fonts, button styles, and logo behavior on scroll
• Canvas (Center)
• Main workspace for building your page
• Add images, text, and layout elements here
  

Key Takeaways

• Page Indicator (Left Side)
• Shows which page you're editing
• Click to switch between pages using a dropdown menu
• Breakpoint Icons
• Let you preview and edit your site on:
• Desktop (1025px and above)
• Edits in Desktop view apply globally, unless customized per screen size
• Tablet (768px to 1024px)
• Mobile (767px and below)
• Info & Tools Section
• Info icon gives access to:
• Site name, status, and editor version
• Preview links and site stats
• Client details
• Language settings for the editor
• Save Indicator
• Gray check = unsaved changes
• Three dots = saving in progress
• White check = all changes saved
• Undo / Redo
• Use arrows to revert or repeat recent actions
• Preview Mode
• Toggle to preview your site with unpublished changes
• View how your site looks across devices in real time
• Publish Button
• Pushes updates live to your chosen destination
• Shows “Republish” if the site has been published before

Key Takeaways

• Side Panel Overview
• Your main control center for site structure, design, and functionality
• Click any icon to expand the corresponding panel
• Key Panels in the Side Panel
• Layers
• Shows a visual hierarchy of all page elements (widgets, columns, sections)
• Allows toggling visibility by breakpoint
• Site Theme
• Set global styles for buttons, text, images, backgrounds, and navigation
• Ensures consistent design across the entire site
• Pages
• View, reorder, and add pages
• Helps organize site structure for better user flow
• Widgets
• Drag-and-drop elements like text boxes, images, and galleries
• Use this panel to build page sections and add features
• Content Library
• Manage site assets (images, videos, docs)
• Use connected data to sync external content across widgets
• Blog
• Add and manage blog posts
  
• SEO & Settings
• Manage SEO, site icons, domains, SSL, redirects, backups, and more
  

Key Takeaways

• Accessing the Design Panel
• Click any element, then select Edit Design
• Or click the Design Panel icon (top right)
• Opens on the right side, with live preview of changes
• Context-Specific Options
• The panel adapts based on the selected element (section, column, widget, etc.)
• Sections
• Primary layout blocks
• Customize:
• Full bleed
• Column spacing
• Section height
• Columns
• Used for horizontal content layout
• Customize:
• Content alignment
• Element spacing
• Column width
• Inner Columns
• Allow nested layouts
• Offer advanced controls like:
• Size
• Width and height
• Layout flexibility
• Advanced Grid Settings
• Control number of rows/columns, gaps, and alignment
• Best for two-dimensional layouts
• Columns/inner columns are better for one-dimensional control
• Widget-Level Styling
• Customize each widget individually
• Example: buttons can be styled with:
• Colors
• Hover effects
• Typography
• Key Design Properties
• Alignment: Set element position (left, center, right, stretch)
• Stacking & Wrapping:
• Choose vertical/horizontal stacking
• Enable wrap (when stacking horizontally)
• Full Bleed: Available only for sections; lets content span screen width
• Spacing:
• Vertical: usually in pixels
• Horizontal: usually in percentages
• Margin: space outside the element
• Padding: space inside the element
• Size:
• Sections: adjust height (pixels only)
• Columns: adjust width (percentages)
• Inner Columns: adjust both height and width
• Size settings vary by element type

Key Takeaways

• What the Canvas Is
• Main area where you build and design your site
• Click to select, drag to move, and edit content directly on the page
• Selecting Elements
• Hover to see a blue outline showing what you’re about to select
• Click to select an element and access its settings
• Breadcrumb Navigation
• Appears at the top-left of the element container and design panel
• Shows the hierarchy (e.g., section > column > widget)
• Helps you understand where the element lives within the layout
• Layers Panel
• Visual map of your site’s HTML structure
• Use it to select, move, or reorganize elements easily
• Helps with navigating complex layouts
• Moving Elements
• Use arrow icons in the floating panel or drag elements directly on the canvas
• Blue indicator shows position relative to siblings
• Section fill indicator shows where you're placing it within a parent
• Box Model
• Canvas treats each element as a "box"
• Layout is defined by content, padding, border, and margin
• Helps support responsive design across devices
• Nesting Elements
• Build complex layouts by nesting containers
• Move one container to move all nested items with it
• Useful for keeping grouped content together (e.g., text, buttons, images inside columns)
• Styling Elements
• Use the Design Panel to style containers and elements:
• Adjust size, spacing, borders, backgrounds, and position
• Columns use Flexbox for one-dimensional layout (row or column)
• Advanced Grids use Grid Layout for two-dimensional control (rows and columns)