> 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/settings-and-style-manager.md).

# Settings & Style Manager

## Select Settings to reveal the settings management panel. 

<figure><img src="/files/gwH2GjVycEvZdqAMZ81e" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="/files/o8ghcesnC2NV8dfokgh2" alt="" width="360"><figcaption></figcaption></figure>

**Settings** **-** each element has different settings

## Select Styles to reveal the style management panel.

<figure><img src="/files/ugnDY5HR47Vk5UVnjspz" alt="" width="563"><figcaption></figcaption></figure>

### Basic:

<figure><img src="/files/OSTiMJnCtb9AkLXArYeY" alt="" width="358"><figcaption></figcaption></figure>

**State** - Choose state to determine when an element is styled, or which child elements are styled.

* State - The default state will style the element chosen with no action
* Hover - When the mouse is hovering over the element
* Active - When an element has been selected
* Even - Even numbered child elements
* Odd - Odd numbered child elements

**Dimension** - Adjust the margins and padding of the element

**Font** - Easy to adjust the font type, color, size, etc

**Border** - Easy to adjust the border for the element

**Background** - Control the background style of the element

### Advanced:

<figure><img src="/files/uHTt4CvC9pzO5GI0LtNT" alt="" width="357"><figcaption></figcaption></figure>

**State** - Choose state to determine when an element is styled, or which child elements are styled.

* State - The default state will style the element chosen with no action
* Hover - When the mouse is hovering over the element
* Active - When an element has been selected
* Even - Even numbered child elements
* Odd - Odd numbered child elements

**Size** - Adjust the width and height

**Spacing** - Adjust the margin and padding

**Font** - Precise adjustments of the font including the type, color, etc

**Border** - Precise adjustments to the border for the element

**Effects** - Adjust the color, background, shadow, text shadow

**Extra** - Adjust the opacity of an element

**Flex** - Control flex properties of the element

## Select the arrow button to dock to the other side of the page.

<figure><img src="/files/S4pVIXvIrhL98cBmhMis" alt="" width="563"><figcaption></figcaption></figure>