1. Cloudbeds
  2. Cloudbeds Digital Marketing
  3. Cloudbeds Websites
  4. Cloudbeds Websites Support
  5. Website Builder Guide

The Editor's Interface Overview

Juss Reyes
Updated

The Editor's Interface provides users with the necessary tools to create the perfect website for your business.

This article includes a general overview of the main sections of the interface, its subsections, and how to use them to best meet your specific needs.

  Learn more about Cloudbeds Websites.

Overview

Your website is the foundation to a strong online presence. Cloudbeds Websites provides an easy-to-use Editor's Interface with three customizable sections to help you create a high quality website with optimized performance:

  1. The Top Navigation Bar
  2. The Side Panel
  3. The Content Area
  4. Site comments

 

Cloudbeds Websites Builder Sections

1. Top Navigation Bar

Use the Top Navigation bar to navigate your site, both by moving between different pages and device views. Click a page to view it, or click a device to preview the page layout (1).

The navigation bar includes controls to undo/redo actions, save your site, preview or republish, and an indicator for saved changes (2).

2. Side Panel

The Side Panel contains all of the widgets and features. Use it to edit most site components, apply broad changes, and configure settings.

For example:

  • Change color schemes or button styles in the Theme tab
  • Add widgets in the Widget tab
  • Adjust page configuration in the Pages tab
  • Access admin tools in the Settings tab

1. Theme Panel

  1. The Site Theme panel lets you customize text, buttons, background, and layout across your site.

  Changes to individual widgets/pages override Site Theme settings.

  1. Text: Controls all font elements (H1–H6)
  2. Colors: Define a palette linked to widgets
  3. Buttons: Style primary/secondary buttons
  4. Images: Edit image styles (layout, border, shadow)
  5. Rows and Columns: Set background and spacing

  Row/column edits override theme settings.

  1. Backgrounds: Color/image background control
  2. Site Layout: Set layout width (960px or 1200px)

  Layout changes may impact header appearance.

2. Pages

Edit and manage Pages: rename, organize, hide/show, publish, or delete with a few clicks.

3. Widgets

Widgets are the content blocks of your site (text, images, buttons, etc.).

Add Widgets

Drag widgets from the panel or context menu:

  1. Click Widgets to open the panel
  2. Search widgets or browse list
  3. Drag to location – placement shown with blue indicator

Edit Widgets

Hover + right-click to access widget edit options:

  • Edit Design: Colors, text, spacing
  • Entrance Animation: Fade, zoom, bounce
  • Select Container: Jump to row/column
  • Copy/Paste: Move widgets easily
  • Hide on Device: Customize mobile vs desktop
  • Set as Anchor: Enable anchor linking
  • Delete: Remove the widget
  • Alignment: Align widget left, center, or right

  Check how widgets display on each device.

4. Content Tab

This tab manages your media assets. It’s different from the Content Area.

  • Library: Request forms for site content
  • Media Manager: Visual assets
  • Connected Data: Auto-updated business info
  • Collections: Dynamic content for scale

5. Blog

Share valuable content with your audience. Create/manage posts, adjust layout, and configure settings.


6. SEO and Settings

Backend configuration for site structure, icons, domains, and SEO optimization.

3. Content Area

The Content Area is your design canvas. Add/edit elements like text, buttons, and images directly.

It differs from the Content Tab, which stores your media library.

4. Site comments

Use Site Comments for collaboration and feedback. This is the main channel for communication during site builds.

Key features on the right panel:

  1. Watch tutorial
  2. Add comment
  3. Comments log
  4. Hide comments

  Looking for options to customize your Cloudbeds Website? Click here to learn more!

 

 

Was this article helpful?
1 out of 2 found this helpful

Comments

4 comments
Date Votes
  • Avatar
    Christine Smyth

    How can I edit the actual text in a widget? I can see how to change the design font,size etc but I need to change the actual wording?

    0
  • Avatar
    Juss Reyes

    Hello, Christine Smyth, 

    We have created a new ticket for you so that our team of experts can take a closer look at your request and assist you. 

    Regards!

    0
  • Avatar
    Inn Keeper The General Stanton Inn

    Can we have more than 10 "pages"? I am trying to add a new page and do not see the option on my end. Is it because I have 10 pages and that is the max? 

    0
  • Avatar
    Juss Reyes

    Hello, Inn Keeper The General Stanton Inn, 

    We have created a new ticket for you, so that our Support Team can take a closer look at your request and offer dedicated assistance. 

    Regards!

    0

Please sign in to leave a comment.