# Page Editor Tour

{% hint style="success" %}
The Page Editor is used to edit both *Pages* and *Forms* hence the information in this section applies to both.
{% endhint %}

To launch the page editor, click on a page or form and select the **`Edit`** option.

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F1AzqYRKRwoWwkJLBEPkX%2Fimage.png?alt=media&#x26;token=5cdaa1ed-f463-46ed-bbe8-c717b517c1d3" alt="" width="252"><figcaption></figcaption></figure></div>

***

The page editor consists of the following sections:

## Main Toolbar

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FP1VlLa0AuaGmz8sE5kcY%2Fimage.png?alt=media&#x26;token=ea36f2e4-dff8-4145-b3e7-65c8be64159a" alt="Zingy Page Editor Main Toolbar"><figcaption><p>Zingy Page Editor Main Toolbar</p></figcaption></figure></div>

The main toolbar provides access to important functionalities such as:

* &#x20;<img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FUel0raxKy2r19j0V3CC3%2Fimage.png?alt=media&#x26;token=ea35d33e-b159-49a3-9388-48504263e963" alt="" data-size="line"> Page Flow editor
* <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FUgbg67yy8BTMjDWjCk0j%2Fimage.png?alt=media&#x26;token=a0e929da-b104-4d39-a32d-f8adb85969e3" alt="" data-size="line">Functional preview of your page. For more information see [Page Preview](https://docs.zingy.ai/app-editor/page-editor/page-preview).
* <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FILPqsQWQZiRd8XtekFCj%2Fimage.png?alt=media&#x26;token=77fbd490-144e-4952-ad8f-be3ff4aef16d" alt="" data-size="line">Viewing/Editing your page's settings
* <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FLpRBHHXNPVa8yqpIlN17%2Fimage.png?alt=media&#x26;token=3065a319-d394-4e64-8fe1-51a53a6dc83b" alt="" data-size="line"> Saving your page
* <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FG6QdzOaDJ9F9vDJDOKi2%2Fimage.png?alt=media&#x26;token=4cf27fff-a51d-4989-857b-86eaa4d438ee" alt="" data-size="line"> Exiting the page editor

***

## Page Element Sidebar

{% hint style="info" %}
For a [Structured Page](https://docs.zingy.ai/app-editor/pages-and-forms/what-is-a-structured-page), no Page Element Sidebar is displayed in the page editor. Instead the Page Element Sidebar is present when you edit a page slice.
{% endhint %}

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fm4LVfMeKgs5DmvrCL03H%2Fimage.png?alt=media&#x26;token=e6423778-7cae-4564-b423-b442013e589c" alt="Zingy Page Editor - Page Element Sidebar"><figcaption><p>Zingy Page Editor - Page Element Sidebar</p></figcaption></figure></div>

The page element sidebar has two primary panels:

#### <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FqW1EdAKUAxl0sOXRTdB5%2Fimage.png?alt=media&#x26;token=611c309e-81f6-42d8-be67-ec17de2e0ebb" alt="" data-size="line">Page Element Library

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F8ZXdO3aXMhYD7HR6gRcr%2Fimage.png?alt=media&#x26;token=25a25618-d497-45e0-a75a-0513d942883d" alt="Page Element Library" width="143"><figcaption><p>Page Element Sidebar - Page Element Library</p></figcaption></figure></div>

The page element library provides quick access to various page elements that can be added to your page. The library is organized into categories that can be expanded or collapsed for ease of use.

#### <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F5HHHlxGIGYaY0n672pWP%2Fimage.png?alt=media&#x26;token=967acef6-2f07-477f-aca5-c34668b78fe8" alt="" data-size="line">Page Tree View

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FaKBSRtVpZ29DFDRtBal6%2Fimage.png?alt=media&#x26;token=b7fc22f4-03ee-4773-b3b8-80baca039d61" alt="Page Structure View" width="143"><figcaption><p>Page Element Sidebar - Page TreeView</p></figcaption></figure></div>

The page tree view shows your page in a hierarchical structure.&#x20;

For more information please see: [Page Tree View](https://docs.zingy.ai/app-editor/working-with-page-elements#page-tree-view) **.**

***

## <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FtrUDZlmu3Ll14sOy2oOr%2Fimage.png?alt=media&#x26;token=4e36401a-5c29-4e49-8dc9-ff7e206d1e51" alt="" data-size="line">:magic\_wand:AI Wiz

**`AI Wiz`** allows you to generate and add custom page elements by simply typing what you want in plain English. The generated elements are added to your Page Element library under the AI Wiz category.

For more information please see: [Using AI Wiz in the Page Editor](https://docs.zingy.ai/app-editor/page-editor/using-ai-wiz-in-the-page-editor).

## Page Content Area

<div align="left"><figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FGX9967XWUtM5x2btdTaf%2Fimage.png?alt=media&#x26;token=769343a7-dbae-4840-8bb4-5638829ec9dd" alt="Zingy Page Editor - Page Content Area"><figcaption><p>Zingy Page Editor - Page Content Area</p></figcaption></figure></div>

The page content area displays your page's content and allows you to edit or modify the page elements.

For a structured page, the page content area allows you to add, reorder or delete page slices for the header, body and footer sections.

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F4dtyb59aejq1RP3oFoQn%2Fimage.png?alt=media&#x26;token=b1fead58-86f1-41d1-aa85-30751fd923ca" alt=""><figcaption><p>Zingy Page Editor - Page Content Area for a structured page</p></figcaption></figure>

For more information please see:&#x20;

* [Adding Page Content](https://docs.zingy.ai/app-editor/page-editor/adding-page-content)&#x20;
* [Adding Content to Structured Pages](https://docs.zingy.ai/app-editor/page-editor/adding-content-to-structured-pages)

***

## Page Content Toolbar

{% hint style="info" %}
For a Structured Page, the Page Content Toolbar is present when you edit a layout on the page.
{% endhint %}

<figure><img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2FKQiKy6ewYnw9FNM6Rafo%2Fimage.png?alt=media&#x26;token=812b838d-fb16-4c23-b501-a76e4930b134" alt="Page Content Toolbar"><figcaption><p>Zingy Page Editor - Page Content Toolbar</p></figcaption></figure>

The page content toolbar allows you to:

* <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F5DGricR2qroxQEwkJrSn%2Fimage.png?alt=media&#x26;token=383c9ece-b947-46b4-8f52-871409171b64" alt="" data-size="line"> : View your page design in desktop, tablet and mobile screen sizes. See [Responsive Design](https://docs.zingy.ai/app-editor/page-editor/responsive-design) for more information.
* <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2F01r46w5hq0uGCnecEsfA%2Fimage.png?alt=media&#x26;token=482bdcec-0e23-4d98-8805-0a9366bcec80" alt="" data-size="line">: Show/Hide the dotted borders around elements
* <img src="https://3401585094-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmnBepgycwgisXr9ya1N4%2Fuploads%2Fr2ivI81RXazWE0kBUWy7%2Fimage.png?alt=media&#x26;token=cb2e05f7-dd81-4704-a85e-5c9178b1ddbd" alt="" data-size="line">: Setup data table information for *Forms* .