# Builder Toolbar

The Builder Toolbar is a quick navigation menu which supports valuable functions.  It is found at the top of every Checkout Champ page within the Page Builder.

<figure><img src="/files/2yQDsmdgrtj9xZt0pkP1" alt=""><figcaption></figcaption></figure>

***

## Blocks

Open the Blocks Menu to add new elements to the page.

<figure><img src="/files/1NDBoqyiU3sZ6k51CoZn" alt=""><figcaption></figcaption></figure>

## Layer Manager

Open the Layer Manager to view, rename, reorganize, lock, and show/hide the layers on the page.

<figure><img src="/files/mL9Wr64wcnYWO6CgHqVF" alt=""><figcaption></figcaption></figure>

Use the "Show Hidden Layers" button to highlight your hidden layers.

Use the "Expand All" button to expand all of the layers on the page.

## Edit Code

View and edit all page code.  Use the right and left arrows to expand the viewing area for either html or css.  Use **Format** to make a section more easily viewable.

<figure><img src="/files/HFAK8yKcaxSOjdnNuQNu" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/q6SxezvlcMPq07qw7Yu2" alt=""><figcaption></figcaption></figure>

## Device Selection

Switch between devices.  There are 5 options - desktop, large tablet, tablet, large mobile, mobile.

Please see [Device View Changer](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar/device-view-changer.md) for more information.

<figure><img src="/files/45fCbvufcji4LNVLi1Dz" alt=""><figcaption></figcaption></figure>

## Page Selection

Switch between pages in the funnel.  Edit multiple pages without leaving the page builder.  You will be prompted to save any pending edits when switching pages.

<figure><img src="/files/qYkuFsPVFleQ3jbIZtlK" alt=""><figcaption></figcaption></figure>

## ChatGPT

Use ChatGPT to help with page content

<figure><img src="/files/QXKS2HaeJMiIUTaMUdCb" alt=""><figcaption></figcaption></figure>

## View Components

Choose to hide or reveal the component borders

<figure><img src="/files/3P5gPToDdrnvR9UjX6cZ" alt=""><figcaption></figcaption></figure>

## Popup

Use the Popup button to launch the Popup Manager.  Add and edit popups here.

<figure><img src="/files/Jok0Cm4XohDHBRUGnMeU" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/fw3cMBUKVLwm6tAb6CR3" alt="" width="375"><figcaption></figcaption></figure>

Please see [Popup Documentation](/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar/popups.md) for more information.

## Sticky Bar

Select Sticky Bar to add and edit the page sticky bar.

<figure><img src="/files/ZWNliXIDthF7Df99TdEJ" alt=""><figcaption></figcaption></figure>

&#x20;A sticky bar is a horizontal bar that you can “stick” on the bottom of your Checkout Champ page to display a message, product button, picture or anything interesting so that it is always displayed prominently, yet non-intrusively.

## Import

If you have built your page outside of Checkout Champ, you can import it by selecting the import feature.

<figure><img src="/files/4ywYpKNataG2zCELe9vC" alt=""><figcaption></figcaption></figure>

Enter the URL and press **Import**

<figure><img src="/files/10DcJln25F3XwDsLkIRd" alt="" width="375"><figcaption></figcaption></figure>

## Undo and Redo

Undo and Redo allow you to easily remove or add changes back as you are editing.

<figure><img src="/files/Ip1CulsN9mrlHcle3bf4" alt=""><figcaption></figcaption></figure>

## Help

Select the ' ? ' to access all Checkout Champ Knowledge Base articles, like this one!

<figure><img src="/files/Ufq0I6anhtIQmW0wS3K8" alt=""><figcaption></figcaption></figure>

## Clear Canvas

Clear Canvas will allow you to wipe the canvas clear and start with a blank page.

<figure><img src="/files/71sA3RPEBrvYAwl83AL8" alt=""><figcaption></figcaption></figure>

If the canvas is mistakenly cleared, then use Undo to revert it or exit the page builder without saving.

## Absolute/Relative Position

The Absolute/Relative toggle allows you to move an element to an absolute position or to a position relative to other components.

<figure><img src="/files/ZkFe6P4HTbt3cj9JnGzB" alt=""><figcaption></figcaption></figure>

## Light/Dark Mode

The Light/Dark Mode toggle allows you to set the page builder color scheme based on your preference.

<figure><img src="/files/OSi3OQLT7dDgCpRH4Es0" alt=""><figcaption></figcaption></figure>

## Preview

Use the Preview button to open the page in a new tab

<figure><img src="/files/ZMWhgbgjSvWMyeeKsHfl" alt=""><figcaption></figcaption></figure>

## Save

Save your changes to the page.  There are options - Save, Save & Close, and Close.

<figure><img src="/files/y8K4lNQtnIkiS4hpf5il" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
