> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.uplisting.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Editor Overview

# Editor Overview

This article covers the areas of the editor and how to add and configure sections, rows, columns, inner rows, and widget alignment.In the editor there are several predefined sections: the top navigation bar, the side panel, the central content area (often referred to as the editor canvas), and the design panel on the side. These sections\
are the basis for constructing websites according to the user’s vision.

> **📘**
> **NOTE**:
> Not all elements in the editor can be modified directly.
> See this guide  [Editing The Design and Content](https://uplisting.crisp.help/en/article/editing-design-and-content-p5l26o/) to learn more on what can be edited in the website Editor

## Top Navigation Bar

The top navigation bar contains helpful shortcuts for different site actions.

![](https://files.readme.io/c3045d6376e92a2e2f93054270e8f3ecdd72e7d12f5640f4fc3c7f3face578a0-image.png)

The top navigation bar allows you to:

* **Page Navigation:** Click on the pages menu to access a dropdown menu displaying all available\
  pages on your site. You can navigate between pages by selecting them from this menu.
* **Switch between different screen size views (also called breakpoints)** by *clicking* on the device icons.\
  This allows you to preview how your current page appears on various screen sizes, from desktop to tablet to mobile. To learn more, see [Screen Sizes and Devices](https://uplisting.crisp.help/en/article/screen-sizes-and-devices-uzlp/)
* **Feedback Tab:** *Click* on the comment and sparkle icon to provide feedback about the editor. Share suggestions, ask questions, report bugs, or provide other comments.
* **Search Functionality:** *Click* on the magnifying glass icon to search for anything you need within the\
  editor or access the help center for assistance.
* **Info and Tools:** *Click* on the information icon to access the following information:
  * **Site Info.** Displays the site name, published status, editor version, and a link to the site dashboard.
  * **Preview Link.** Displays the preview link for the site. To copy the link, select the device type and\
    *click* Copy.
  * **Stats.** Displays basic stats for the site. To see more information, *click* Open Stats. This information\
    is only available for published sites. For more information, see Site Stats and Analytics.
  * **Editor Language.** Switch the editor language. This does not affect the language of the site. To\
    switch the editor language, select a language from the drop-down menu.
* **Save Progress Indicator:** The check mark icon serves as an indicator of your current site progress\
  and whether changes have been successfully saved.
* **Undo or Redo:** You can use the undo and redo functionalities represented by the back and forward\
  circle arrows to revert or reapply recent actions performed in the editor.
* **Preview Changes:** *Click* on the eye icon to preview your site, including unpublished changes, on all\
  or individual device screen sizes.
* **Publish or Republish:** Use the publish or republish button to publish your site with the latest\
  changes.
* **Home Button:** *Click* on the home icon to return to your site dashboard.

## Side Panel

The side panel serves as a comprehensive toolkit for managing various aspects of your site's design\
and functionality.

![](https://files.readme.io/4b6e72fd0518c6de96c6cbe56a32c47be2320e39ed9603e473180cfa62c56e77-image.png)

The following are the default options available in the side panel:

* **Add.** From this element you can easily drag and drop Widgets, Media, and Site Text onto the canvas.
* **Pages.** Add, view, and manage pages and popups.
* **Layers** (only available in Classic Editor using flex mode or in Editor 2.0). Provides a hierarchical view\
  of your site page’s elements, allowing you to easily navigate and manage complex structures.
* **Theme.** Define default styles and settings for all text, colors, buttons, images, backgrounds, rows,\
  columns, layout, width and spacing on your site.
* **Content.** Manage collections and content collected from clients.
* **SEO.** Manage SEO settings for pages, images, internal and external links, and more.
* **More.** Provides access to Personalization, Settings, and Site Dashboard.

## Content Area / Canvas

The Content Area / Canvas is where you can move or add any of our features, or *click* and edit to\
change them. The content area allows you to change images, text, edit and delete buttons, and more.

> **📘 NOTE**
> To learn how to add and configure elements on the canvas, see [Design with Flex](https://uplisting.crisp.help/en/article/design-with-flex-am3j8b/)
> For more on canvas editing options, see [Canvas Actions and Options](https://uplisting.crisp.help/en/article/canvas-actions-and-options-1kfdxni/)

![](https://files.readme.io/6ed09076a610b8e2196429d11c402753f10b0959695871be77ed21ad1586205e-image.png)

## Design Panel

The design panel offers a range of design settings for selected elements, enabling precise customization. Whether you are tweaking layout content alignment, spacing between elements, animation, and\
background, the design panel provides a comprehensive set of tools to enhance your website's visual\
appeal. Design options include layout adjustments, sizing configurations, alignment settings, and more,\
tailored to the selected element

![](https://files.readme.io/76c77a5b22db60b4c4aff5ab0d27dc4579dc9bdc1002df7275ca8aa7736a3027-image.png)

To learn more about the Design Panel and its sections, see [Design Panel](https://support.uplisting.io/docs/how-to-identify-the-editor-version-your-site-uses-1)

# Website Builder Structure

The Website Builder is built from a header, footer, rows, sections, and columns. Every widget you add is\
inserted into one of these sections.

> **📘 NOTE**
> If you are using flex mode, rows are named "sections".  To learn more, see [Design with Flex.](https://uplisting.crisp.help/en/article/design-with-flex-am3j8b/).

## Rows

Rows are the horizontal sections of your site. When you add widgets and columns to your site, they\
are placed within these rows. To change how content is displayed in the mobile view, click the reverse\
column order toggle in the row editor.

You can add rows to your site by dragging widgets into the site. When you drag a widget between rows\
or into a space where want to add a row, a new row will be created when you drop the widget.

To delete a row, right-click anywhere on the row to open the context menu, and then click *Delete*.\
Alternatively, click the *Row* button at the top left corner of the row and click *Delete*.

## Background Image Slider

Background Image Sliders can be used to set background images for rows or columns.

After selecting multiple images in the image picker, *click* Done. Once the slider is created, select a Slide\
transition from the drop-down menu, and move the slider to select a Slide speed (seconds).

Any of the other background image options such as Background Overlay, Positioning, and display style\
can be applied to the slider.

## Designed Sections (Pre-Designed Section Templates)

Sections are pre-built rows of elements which users can add to their responsive sites. Sections enable\
users to build great looking sites quickly by saving time during the design process. The infrastructure\
was built in order to provide a better user experience with a variety of pre-made sections.

> **📘 NOTE**
> * Sections do not use any custom CSS, and are all build within the editor by designers.
> * Sections do not use the text color or text font settings from the site theme settings.\
> However, you can always clear the format and apply your design.

## Add Sections

To add sections of widgets:

1. Hover between rows, and click *Add Section*.
2. *Select Designed*. Sections display in the side panel.
3. In Section Mode, a gallery of pre-made sections is available in the left panel, grouped into categories (Intro, Features, About, Team, Testimonials, and so on).
4. In the side panel, *click* a section to display it as a new row. You can then browse sections within the\
   same group by using the arrows keys or by selecting a section from a different group.
5. To embed the section into the site, click *Save*. Alternatively, click *Save & Add Another* to continue\
   adding sections to your site. The section converts into a row and all elements in the section are\
   editable.

## Widget Alignment

When aligning widgets within the same column, the website builder attempts to Snap to Align them to\
be the exact same size. As you resize, the builder jumps ahead or behind to snap to location. This\
should make it easier to make widgets the exact same size.

There is also a Snap to Grid feature. The Snap to Grid feature helps lay widgets in the pages of\
your site with professional precision. This system allows you to align widgets horizontally and vertically\
within columns and rows. Rulers are presented when moving an element in its row or column, or when\
resizing the widget. The aligned elements are marked with a colored border. A widget may be aligned\
with more than one other widget, depending on the specific use case.

Alignment is supported in the views of the three different devices (desktop, tablet, mobile).

## Header and Footer

For more information on configuring headers and footers, see:

* [Headers](https://uplisting.crisp.help/en/article/headers-24rmub/)
* [Footers](https://support.uplisting.io/docs/footer)