# 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FUGp659YebL4fFJbva7MQ%2Fimage.png?alt=media&#x26;token=3d533c9e-a9e4-4740-9465-3dcdac000dc2" alt=""><figcaption></figcaption></figure>

***

## Blocks

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FrfbZdlsxjeBlS8HmtcBl%2Fimage.png?alt=media&#x26;token=af4207dc-a367-49a9-b17f-63829923cc0d" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FvEwJCWicbEz3HcQA1Xaz%2Fimage.png?alt=media&#x26;token=3da95a32-7549-48f0-8bc5-349e4a1d083b" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fr3BnmVMwsRwH10QDBTWN%2Fimage.png?alt=media&#x26;token=d7091681-21b5-4d5c-b5c7-52151dfe80aa" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FWh2MuZ2h6GNXZwqVBpFe%2Fimage.png?alt=media&#x26;token=1a64df79-1e5d-490d-a508-65e6bb45473a" 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](https://help.checkoutchamp.com/funnel-builder/creating-and-editing-funnels-pages/funnel-visualizer-and-page-builder/page-builder-2.0/builder-toolbar/device-view-changer) for more information.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F6E4lRygh28NqLaKQ0VLf%2Fimage.png?alt=media&#x26;token=c3b5db0a-e2f9-4b96-8319-200510e06054" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FxyK12NCQVp54EaAIMDrD%2Fimage.png?alt=media&#x26;token=468dcdb4-bddb-40ff-ac0d-b8835d1c0f7c" alt=""><figcaption></figcaption></figure>

## ChatGPT

Use ChatGPT to help with page content

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FYMZlVUudivIN7GGByHR5%2Fimage.png?alt=media&#x26;token=5819d2e4-3fb9-425d-8df8-c46b02ff5ffc" alt=""><figcaption></figcaption></figure>

## View Components

Choose to hide or reveal the component borders

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fv5NhBOkIAZvQdOrPQHcN%2Fimage.png?alt=media&#x26;token=ac069d37-9d4d-4440-918d-732025853bed" alt=""><figcaption></figcaption></figure>

## Popup

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F38fuzvhZSeVPOuwIQPMo%2Fimage.png?alt=media&#x26;token=52fccc1d-ce7c-4294-8747-fe7ab629743f" alt=""><figcaption></figcaption></figure>

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FNTRL6XQw0IFp06DRb64Z%2Fimage.png?alt=media&#x26;token=1b0a0a41-9f01-41b6-8830-8bcab14c28e6" alt="" width="375"><figcaption></figcaption></figure>

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

## Sticky Bar

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FqEUmMHkUUEmehXnrBHoj%2Fimage.png?alt=media&#x26;token=35086255-f235-44d7-9b86-05a55a780fb4" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FRLHJnwEWbjkCfDJpLMUH%2Fimage.png?alt=media&#x26;token=536a2f80-ffe2-4c8b-8923-2c436c2fcd10" alt=""><figcaption></figcaption></figure>

Enter the URL and press **Import**

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FutbXHrbFvQfEm0GxG9R7%2Fimage.png?alt=media&#x26;token=36a5e5e5-bd80-4009-a9b2-a41cbe80ac60" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FKg2ImRbqo3Mv75KazgXw%2Fimage.png?alt=media&#x26;token=4bffbe5c-c45b-4755-ada1-66c68c8ce0ec" alt=""><figcaption></figcaption></figure>

## Help

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2F559EHseRlLOfLNJz3d7q%2Fimage.png?alt=media&#x26;token=a3819067-3c99-4928-8da9-db857601b8dc" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FkfxmBnMm0orKUiLpMgbq%2Fimage.png?alt=media&#x26;token=3e8e1ddb-2daa-423e-bd4e-a3caa9f9260d" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fg4XQxRQ786YNDOtuI8Gv%2Fimage.png?alt=media&#x26;token=132684a7-da74-4e2c-b494-11d60213c68c" 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FWWLEcRP6GYqZsSzAXJfV%2Fimage.png?alt=media&#x26;token=b0785dad-8d8c-4fce-b3a5-4b94d8e9ac14" alt=""><figcaption></figcaption></figure>

## Preview

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FxpLgtjtMkuYVQnHgiiNE%2Fimage.png?alt=media&#x26;token=7f47a37d-2ae3-424d-8956-9682fc7f60a1" alt=""><figcaption></figcaption></figure>

## Save

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

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fw0V9kYQCQkpRS2fzVwwD%2Fimage.png?alt=media&#x26;token=905d52d9-f3e0-497d-8c00-a48f6823ad16" alt=""><figcaption></figcaption></figure>
