The editor's interface

Juss Reyes

Updated September 20, 2023 18:48

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:

The Top Navigation Bar
The Side Panel
The Content Area
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 by moving between different device views. Click a page to view it, or click a device to see how your current page looks on that device (1)

The navigation bar has controls to undo or re-do simple actions in the editor, save your current site, and preview or republish your site (2) It also has the options to undo/redo your last edit, and also an indicator for when changes in the editor are saved.

2. Side Panel

The Side Panel contains all of the widgets and features. Here you can find tools to edit almost anything on your site. The side panel has features to make broad, sweeping changes to the entire site.

For example:

Changing the color scheme or button design in the Theme tab
Add new features and widgets with the Widget tab
Change your pages' configuration in the Pages tab
Make administrative changes in the Settings tab (for example, changing the site's URL)

1. Theme Panel

The Site Theme panel lets you make changes that affect your entire site. Customize your site's text, buttons, images, background, and navigation widgets from the design panel.

Changes that you make to specific widgets or pages will override themes set in the Site Theme panel. We recommend you first decide on a site theme, and then customize sections of your site to stand out or look different than the rest.

Text: Control text for your site, both for text and headings of all sizes (H1 to H6). Changing the font size, style, color, and other edits will affect future paragraph, and other text types as well.
Colors: Define a color palette and link the individual colors to any or all widget with color settings. The color of any element that is linked to the theme colors will automatically be updated when the linked color is changed in the theme colors settings.
Buttons: Define the style of primary and secondary button widgets on your site.
Images: This section lets you control the style of the image widgets on your site. Change the image layout, add or edit the border style, rounded corners, or shadow effects.
Rows and Columns: This section allows you to define the theme for row and column design in terms of background color and default spacing.

Edits that will be made on individual rows or columns will override the theme row and column settings.

Backgrounds: This section lets you control Background style for your site. Choose between using a color or image as your background.
Site Layout: Control the site layout navigation on desktop, tablet and mobile. For the desktop version, you can choose from two widths: 960px or 1200px.

Changing your navigation's layout often affects the behavior of your header and sometimes the rest of your site. If your header suddenly looks incorrect after changing the layout, try a different layout.

2. Pages

Edit and manage your site's Pages. The Pages section allows you to rename, organize, hide/show pages, publish or delete pages in just a few clicks.

3. Widgets

Widgets are the building blocks of your site that contain the text, images, buttons, and other content. See below how to add or edit your widgets.

Add Widgets

To add widgets to your site, drag and drop them from the left panel or from the context menu:

Click Widgets to open the widgets panel
Search for widgets by browsing through the list or using the widget search bar
Click and drag the widget to the location you want in the site. A blue placement indicator appears. The widget appears in the location shown by the blue placement indicator.

Edit Widgets

Customize widgets to adjust the appearance and layout of your site with greater control over what features your site has and how these features behave.

To edit a widget, hover over the widget, and right-click the widget to see the context menu. Every widget has different options, but the following are common to almost every widget.

Edit Design: Change the style of the widget, including color, text, images and more, as well as change the blank space surrounding the widget. Click a widget, and click the Design tab.
Entrance Animation: Allows you to customize how the element appears on the screen; for example, fading in, bouncing in, or zooming in. Right-click the widget, click Entrance Animation, and select an animation.
Select Container: Selects the column or row this widget is contained in, allowing you to easily find and edit it. Right-click the widget, click Select Container, and select Column or Row.
Copy and Paste: Copying a widget saves it so that you can paste it later in another location. The paste option only appears if you have a widget that has been copied. Right-click the widget, and click Copy or Paste.
Hide on Device: Use the hide on device feature to change your content depending on the device your visitor uses to access your website. For example, show a click-to-call widget for mobile users or a contact form for desktop users. Widgets hidden by the Hide On Device feature are not deleted; you can see all of the hidden elements on a page by clicking Unhide Elements at the bottom of the left panel. Right-click the widget, click Hide On Device, and select a device.
Set as Anchor: Anchor links let you send visitors to a specific section of the page, making it easier for them to get from place to place on a longer page or to a specific section that you want to reference. Right-click the widget, and click Set As Anchor.
Delete: To delete a widget, removing it from all devices, right-click the widget, and click Delete.
Alignment: Set whether the widget is aligned to the left, right, or center of its area. Some widgets behave very differently in different views. To set the alignment, right-click the widget, and click an Align Left, Align Center, or Align

Check the way your widget displays in each view after adding it to make sure it displays correctly.

4. Content Tab

The Content tab is different from the Content Area. The Content tab refers to the content library where you can save and manage your website's media resources.

This tab includes:

A Library: Where you can send clients a content request form to get site texts, images and other files.
A Media Manager: Where you can find visual resources to edit your website
The Connected Data section: To easily create, connect and update your site with the most accurate details about your business, all in one place.
The Collections section: Collections are structured data that make it easy to manage site content at scale. Connect your collections to dynamic pages, custom widgets and more.

5. Blog

Add a blog to your website to share valuable and relevant content to your visitors. The Blog section allows you to create and manage posts, edit your settings, edit your layout, and so much more.

6. SEO and Settings

Manage your site icons, site domain, SEO and more. This section includes all the management back-end tools to have full control and optimize your website structure.

3. Content Area

The Content Area is the canvas where you can move or add any of our features, or click and edit to change them.

It is different from the Content tab, while the content area allows you to change images, text, edit and delete buttons, and more, the Content tab is the place where you can store your media.

4. Site comments

After reviewing the website, it is time to let us know about your feedback. Site Comments is a collaboration tool that enables us to communicate with each other while building sites. This is our single channel for receiving feedback and responding to it.

The comments bar on the right of the screen, and it controls the Site Comments functions, including the following actions/tabs: