# Customize page styles

Many pages templates have the same general style settings. These settings let you customize the content width, top and bottom padding, and animation styles.

### Page colors

***

You can change the page colors by assigning a color scheme using the color scheme picker in the page section settings.

Color schemes are sets of colors. You can add and define different color schemes in **Theme settings > Colors**.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FBM1GveFBgQ8ADa8UVq0B%2Fsection-color-scheme.png?alt=media&#x26;token=d8d1dfbb-ce34-44bd-9c5d-12ae77841b00" alt="" width="267"><figcaption></figcaption></figure>

### Content width

***

Change the **Page width** to adjust how far the section spans across the page. Available width options will vary depending on the type of section.

`Click Page section to find settings`

| Setting                                               | Description                                | Options                                                                                                                            |
| ----------------------------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------- |
| <mark style="color:blue;">Content width</mark>        | Choose the width of the section content.   | <p><strong>Page width</strong><br><strong>Custom width</strong> <em><mark style="background-color:yellow;">Default</mark></em></p> |
| <mark style="color:blue;">Custom content width</mark> | Set a custom width for the section content | *<mark style="background-color:yellow;">Default</mark>*<mark style="background-color:yellow;">: 650</mark>                         |

### Section padding

***

Use the sliders to add space at the top or bottom of the section. Set to 0 to remove spacing.

`Click Page section to find settings`

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Ff5c92UQJcOOBX0wltGWz%2Fsection-padding-setting.png?alt=media&#x26;token=77489636-e7f2-4eec-aa4a-2c1206bb9335" alt="" width="338"><figcaption></figcaption></figure>

### Animations

***

Eclipse uses **animation** effects when loading images and text to create a more engaging user experience.

<table><thead><tr><th width="265">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable text animation</mark></td><td>When enabled, headings and text slide up and fade into view upon loading.</td></tr><tr><td><mark style="color:blue;">Image animation</mark></td><td><p>Change the animation style of how the image loads. Select <strong>None</strong> to disable load animations.<br><br><strong>Fade</strong>: The image gradually fades into view.<br></p><p><strong>Iris swipe</strong>: The image is revealed in the form of a growing circle.</p></td></tr></tbody></table>