Visual builder

The visual builder has a modern interface with four areas: • Topbar – Save, publish, responsive preview (mobile/tablet/desktop), toggle theme • Sidebar (left) – Tabs for Pages, Layers, Media and Blocks • Canvas (centre) – Your page as visitors see it • Inspector (right) – Settings for the selected block Click a block on the canvas to select it. The settings appear on the right.

The Pages panel (left sidebar) shows all pages of your website. Click a page to open it in the editor. The current page is highlighted. You can search by page name.

The Layers panel shows the tree structure of all sections on the current page. Click a layer to select the corresponding section on the canvas (and vice versa). Handy for complex pages with many sections.

• Media panel – Browse your media library and drag images onto the canvas • Blocks panel – All available components per category. Drag a block onto the canvas to add it Components are grouped in categories like Basics, Layout, Forms and Media.

Click the mobile, tablet or desktop icons in the topbar to see how your page looks on different screen sizes. Use Ctrl+1 (mobile), Ctrl+2 (tablet) or Ctrl+3 (desktop) as shortcuts.

The editor supports keyboard shortcuts for common actions. Shortcuts do not work when a text field is focused (except Escape). • Ctrl+S – Save • Ctrl+Shift+P – Publish • Ctrl+Z – Undo • Ctrl+Shift+Z – Redo • Ctrl+K – Open command palette • Ctrl+D – Duplicate selected section • Delete / Backspace – Remove selected section • Ctrl+1 – Mobile viewport (375px) • Ctrl+2 – Tablet viewport (768px) • Ctrl+3 – Desktop viewport (100%) • Ctrl+\ – Toggle sidebar • Ctrl+Shift+\ – Toggle inspector • Escape – Deselect or close overlay

Press Ctrl+K (or Cmd+K on Mac) to open the command palette. Type an action to quickly navigate or execute actions: • Save / Publish • Toggle theme (dark/light) • Go to Pages • Open version history • Collapse/expand sidebar or inspector • Toggle AI Chat • Mobile / Tablet / Desktop viewport Navigate with arrow keys and press Enter to execute an action. Escape closes the palette.

The sidebar and inspector are resizable. Drag the edge between a panel and the canvas to adjust the width. • Sidebar: minimum 200px, maximum 400px • Inspector: minimum 240px, maximum 480px The width adjusts in real-time as you drag (no delay).

Select a section in the editor and find the "Animation" field in the inspector. Choose a preset: • Fade – Gradually become visible • Slide up/down/left/right – Slide in from a direction • Scale / Zoom – Zoom in • Bounce – Bouncing effect Choose under "Trigger" whether the animation plays on scroll or on load. The animation is only visible on the live website.

The editor includes a heading analyser that warns if your heading hierarchy is incorrect (e.g. an H1 followed by an H3 without H2). This is important for accessibility and SEO.

Many blocks now have granular settings that let you create dozens of variations without choosing a different block. Open a block in the inspector and you'll see extra fields: • HeroSection – layout (centered/left/right/split), mediaType (image/video/none), badge, 2 CTA buttons, overlay, inline stats • FeatureCardsSection – columns (2-6), iconPosition (top/left/inline/none), cardStyle (elevated/bordered/flat/glass), hoverEffect (none/lift/glow/border-color), contentAlign • TestimonialSection – layout (grid/carousel/masonry/single), avatarShape (circle/square/rounded), quoteStyle, rating display • PricingSection – highlightStyle (border/background/badge/glow), billing toggle, priceSize, checkStyle • CTABannerSection – layout (centered/left-right/stacked/minimal), backgroundType, urgency badge, icon position • FooterSection – layout (simple/columns/centered/minimal), socialPosition, newsletter field, divider style All settings are optional — existing blocks continue to work with their default values.

The VideoHeroSection block lets you set a video as the background. Supported sources: • YouTube – Paste a YouTube URL (e.g. https://youtube.com/watch?v=...) • Vimeo – Paste a Vimeo URL • MP4 – Upload an .mp4 file or paste a direct URL The video plays automatically (muted, looping). On mobile, a poster image is shown for faster loading. Settings in the inspector: • videoUrl – The URL of your video • posterImage – Fallback image (shown while loading and on mobile) • overlayOpacity – How dark the overlay is over the video (0-100%) • overlayColor – Colour of the overlay • contentAlign – Text left, centred or right • showVideoOnMobile – Show video on mobile too (off by default)

Every block now has an "Advanced" panel in the inspector with a _customCSS text field. Here you can write free CSS that only applies to that specific block. Examples: • Glassmorphism: background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); • Custom shadow: box-shadow: 0 20px 60px rgba(0,0,0,0.3); • Border animation: border: 2px solid transparent; transition: border-color 0.3s; The CSS is automatically scoped so it only affects this block, not the rest of the page.

Every block now supports two animation fields: • _animation – The animation type (fade, slide-up, slide-down, slide-left, slide-right, scale, zoom, bounce) • _animationTrigger – When the animation plays (scroll or load) You'll find these fields in the inspector under the selected block. The animation is only visible on the live website, not in the editor. During a URL import, animations are automatically detected and assigned to the correct blocks.

Every block now has more styling options via StyleOverrides. Find them in the inspector under "Style": • textColor – Override text colour • accentColor – Accent colour for highlights • buttonBackground / buttonTextColor / buttonBorderRadius – Button styling • paddingTop / paddingBottom – Vertical space above/below the block • marginTop – Space above the block • borderColor – Border colour • backdropFilter – Background effects (blur, saturate, brightness, etc.) • backgroundImage – Background image (gradients only, no external URLs) For card components (FeatureCards, ServiceCards, Pricing, Team, BentoGrid) there are also hover states: • cardHoverBoxShadow – Shadow on hover • cardHoverTransform – Transform on hover (e.g. scale(1.02)) • cardHoverBorderColor – Border colour on hover

You can enable a dark mode per site. If the site supports dark mode, a sun/moon icon appears on the website so visitors can switch. How to set it up: 1. Go to site settings → Design Tokens 2. Fill in the darkColors (background colour, text colour, primary colour for dark mode) 3. Save — the toggle appears automatically on the website The visitor's preference is saved in localStorage and persists on the next visit. If no darkColors are configured, the toggle is not shown.