Navigate the Cloudbeds Websites Editor

Introduction

The Cloudbeds Websites Editor brings navigation, content, design, publishing, and collaboration tools into one workspace. Understanding where each control lives helps you move through the editor more confidently and choose the right tool for the change you want to make.

This guide focuses on interface orientation. Detailed workflows for customizing the site, managing media, working with widgets, and using Site Comments belong in their dedicated guides.

Table of contents

• Editor 2.0 overview
• Top Navigation Bar
• Side Panel
• Design Panel
• Widget and element controls

Editor 2.0 overview

The Editor 2.0 workspace is organized around the Top Navigation Bar, the Side Panel, the Design Panel, and the controls that appear when you select an element or widget on the page. Together, these areas let you move around the site, manage site-wide tools, and edit individual page elements.

Use the full editor view to familiarize yourself with where these areas appear before working with the individual controls described below.

The full editor view shows the website canvas together with the navigation and editing controls that remain available while you work.

Top Navigation Bar

Use the Top Navigation Bar to switch pages and device views, review or publish the site, access collaboration tools, and open site-level resources.

• Hamburger menu: Opens options such as Project Dashboard, editor language, and Help.
• Project Dashboard: Opens site-level information such as site overview details, activity, metrics, and form responses.
• Language: Changes the language of the editor interface. It does not change the language of your website content.
• Help: Opens available help and support resources.
• Page selector: Switches between the pages of your website.
• Device views: Switches between desktop, tablet, and mobile views so you can review how the page displays on each device type.
• Undo and Redo: Reverses or reapplies recent changes.
• Save status: Shows whether your latest changes have been saved.
• Site Comments: Opens the comments panel so you can add or review feedback directly on the site.
• Share: Opens the available options for sharing the site.
• Preview: Opens a preview so you can review the site and test its functionality before publishing changes.
• Publish or Republish: Publishes the site or applies your latest changes to an already published site.
• Home: Returns you to the main site or dashboard area.

The Top Navigation Bar keeps page navigation, device previews, review tools, and publishing controls available while you work.

The Top Navigation Bar keeps the main navigation, device views, collaboration, preview, and publishing controls together across the top of the editor.

Side Panel

The Side Panel is the main command center for building, organizing, and managing your website. Each icon opens a different group of tools, from adding page elements to managing site-wide settings.

• Add: Add elements and widgets to the page.
• Pages: Build and organize the site structure and manage page-specific settings.
• Layers: Review the visual hierarchy of the page, including how elements are organized and nested.
• Theme: Manage site-wide design settings such as global colors, typography, buttons, images, and backgrounds. Changes made to individual elements or pages may override Site Theme settings. For detailed design workflows, see Website Customization Options.
• CMS / Content Management: Access content-management tools, including Media Manager and Business Data.
• Media Manager: Upload and organize reusable site media. For image and media guidance, see Images guidelines for Cloudbeds Websites.
• Business Data: Manage structured business information that can be connected to site elements.
• SEO / AEO: Review search and AI visibility, traffic, optimization status, and recommendations for improving SEO and AEO.
• Blog: Create, publish, and manage blog posts.
• More / Settings: Access additional site-level settings and tools, including favicon and social images, Google tools, URL redirects, site backups, privacy settings, form responses, 404-page settings, site export, and Progressive Web App settings.
• AI Assistant: Use AI-powered tools to help create, refine, and optimize website content. See Cloudbeds Websites Editor AI Assistant for dedicated guidance.

Use the Side Panel when you need to open a site-level tool rather than change the styling of one selected item.

The Side Panel remains fixed on the left side of the editor so you can open site-level tools without leaving the page canvas.

Design Panel

Select an element, widget, column, or another editable area on the page to open the design options available for that item in the Design Panel. Use this panel to adjust the appearance and styling of the selected item.

The Design Panel applies to the selected item, while Theme in the Side Panel manages broader site-wide design settings. Use this distinction to determine whether a design change should affect one item or the site more broadly.

The Design Panel appears beside the editor canvas when you select an editable area and open its design controls.

In this example, selecting a column and choosing Design opens the settings available for that column in the panel on the right.

Widget and element controls

When you select an element or widget on the page, a floating toolbar provides quick actions for that item. The available actions vary depending on what you select.

• Edit Content: Change the content displayed by the selected element.
• Edit Design: Open design options for the selected element.
• Reposition: Move the selected element within the page structure.
• Add: Add another element or widget nearby.
• Duplicate: Create a copy of the selected element.
• Align: Adjust the element's alignment when the selected element supports it.
• Delete: Remove the selected element.
• More: Open additional actions available for the selected element.

For complete widget workflows, including adding and managing widgets, see Widgets for Cloudbeds Websites.

The floating toolbar gives you quick access to common actions without leaving the selected element.

Selecting an existing page element displays its floating toolbar, while the panel on the right shows the design settings available for that selected item.

Related articles

Now that you can identify the main areas of the Editor 2.0 interface, review these resources for broader Cloudbeds Websites orientation and additional design options:

• Cloudbeds Website Builder - Everything You Need to Know
• Website background customization