> For the complete documentation index, see [llms.txt](https://help.checkoutchamp.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar.md).

# 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>
