Overview of the Site Builder
Explore the Site Builder’s tools to control layout, content, and styling.
The Site Builder is a WYSIWYG (What You See Is What You Get) editor that allows you to create and manage websites visually, without writing code. Changes you make in the editor are reflected immediately on the page, making it easy to design, edit, and publish content.
Key Features
- Visual Editing - Edit content directly on the page
- Drag-and-Drop Layouts - Easily move and reorder sections
- Reusable Components - Maintain consistency across pages
- Live Preview - See changes instantly as you work
- Responsive Design Tools - Optimize layouts for desktop and mobile
Navigating the Site Builder Interface
When you first open the Site Builder, this is the first view you’ll see. The interface is divided into several key areas:
1. Updates List and History Controls
Use this dropdown to switch between the base site, the reference point or version of the site for updates, and in-progress site updates. Use undo and redo buttons to manage changes.
2. Builder Canvas
The canvas is the main editing area where you build and preview your site. It displays the currently selected site update and shows changes in real time as you add, move, and edit content.
3. Viewport Toggle
Switch the canvas to different screen sizes to design and preview your site at various breakpoints. Adjustments made in each view affect only the layout in the canvas for design purposes—they do not alter the live site or published content. Use this feature to ensure your site is responsive and displays correctly across all devices.
4. Update Creation Button
Use the Create Update button to start a new draft version of your site
5. Preview Builder Button
When you click this button, a new build is triggered for your published site
Navigating the Site Update Interface
When a site update is in progress, interface provides additional controls and options. These include:
1. Site Builder Menu
The Site Builder menu is a sidebar that provides access to the main tools and features for building and managing your site. It’s organized into sections for:
- Pages - View, add, remove, and manage the hierarchy of pages on your site. This section helps you organize the overall structure of your website
- Layer Structure - Manage the stacking and organization of elements on a page. Layers allow you to control how components overlap and interact on the canvas
- Components - Access reusable elements such as text blocks, images, buttons, forms, and layout-related blocks that you can drag onto the canvas to build pages efficiently
- Content Item Layouts - Select reusable layouts for different content types
- Duplicate Webpage - Quickly create a copy of an existing webpage, preserving its structure, content, and styling for faster development
- Nala / AI Site Builder - Use Nala, our AI site builder tool, to automatically generate or suggest layouts, content, and design elements for your site
2. Configuration Panels
The Component Configuration Panel centralizes all settings for a selected element, giving you precise control over style, content, layout, and behavior. It streamlines editing by keeping all configurable options in one accessible location while showing immediate updates on the canvas.
The Page Settings Panel lets users manage settings that apply to the current page. It includes configuration options such as:
- Page type - Define the purpose of the page (webpage, external link, category page, detail page)
- Page name - Set the display name of the page
- URL - Define the page’s web address
- URL alias - Create an alternative URL for the page
- Navigation visibility - Control whether the page appears in the site’s navigation menu
3. Site Update Controls
Use these buttons to preview your update, save your progress, and merge changes into the base site
Merging changes into the base site is irreversible. Ensure your update is complete before merging; otherwise, any additional changes will require creating a new update