# Update The Colors

Flexivi offers a powerful **Global Color Customization** feature, enabling you to manage your website's color scheme efficiently. By utilizing global colors, you can ensure consistency across all pages and elements. Modifying a global color will automatically update all associated elements site-wide.

### Update the colors from the Button Preset

* Edit any page with Divi and open the Button Module settings.
* Click on the **Preset** link and **Edit** the Preset Styles.&#x20;

<div align="left"><figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FR2mUNqzgo9oT743ifLCS%2Fbutton-preset-ss.jpg?alt=media&#x26;token=4e3c6db0-e875-4c79-8cd8-0cd1f46fb879" alt=""><figcaption></figcaption></figure></div>

* The Modal will flip, then open the **Design tab > Button > Button Background > Gradient Tab.**
* Select the color and click on the **Global** option, then click on **Gear** Icon.
* Select the desired color and click on the **Green Checkmark**.

<div align="left"><figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FydD3v3LQ8SGd1LMYM7Ed%2Fbutton-color-ss.jpg?alt=media&#x26;token=16b30cb8-4cc2-4d8d-ab12-96ed8f4c3d8e" alt=""><figcaption></figcaption></figure></div>

And you will get the confirmation modal. Click on **Yes** button if you are sure with the new color.

<div align="left"><figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2F3UG5CH89dNbyU9bZo1tr%2Fcolor-confirm-ss.jpg?alt=media&#x26;token=d275a11e-8858-47c9-87e2-f3d17f9dc51a" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
If some colors still appear like Flexivi theme color, this will probably happen because they can be changed in the Module Settings by enabling Divi Builder on the Page.
{% endhint %}

***

### Active Pricing toggle button color

<div align="left"><figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FqJ1uUoNC0ouEVkU7Qo2R%2Fpricing-toggle-ss.jpg?alt=media&#x26;token=f20ffd5e-2614-4132-b3f2-58feb0c46cda" alt=""><figcaption></figcaption></figure></div>

To update these colors, Please follow these steps.

<div align="left"><figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FDrJM10HztTUkR7RhN6wo%2Fpricing-toggle-css-ss.jpg?alt=media&#x26;token=f816bc18-9054-4a2b-a402-ec7299d06d9a" alt=""><figcaption></figcaption></figure></div>

***

### Portfolio grid border color & shadow color on hover&#x20;

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FXYMzQFSf701CARUAW1U9%2Fportfolio-grid-ss.jpg?alt=media&#x26;token=72263cc0-8995-4624-8ef8-0776148478c8" alt=""><figcaption></figcaption></figure>

You can update here..

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FPlByCogV5FJGlabDFYTw%2Fportfolio-grid-hover-css-ss.jpg?alt=media&#x26;token=322ce7b4-499f-4258-90cf-76a67669987e" alt=""><figcaption></figcaption></figure>

***

### Filterable Portfolio grid background colors

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FfpS5CUaGk2UxLXYmEGGH%2Ffilterable-portfolio-ss.jpg?alt=media&#x26;token=05b8cafd-76da-434d-bb63-f2d79d196162" alt=""><figcaption></figcaption></figure>

You can update here..

<div align="left"><figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FG5LMzHzVAbqXaYaHyUOs%2Ffilterable-portfolio-css-ss.jpg?alt=media&#x26;token=8a2d5bda-2cd5-469d-9d3f-46a98176ce52" alt=""><figcaption></figcaption></figure></div>

***

### Active Portfolio Filter option border colors

<div align="left"><figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FvKi6S4268gMSDpf95yfL%2Fportfolio-fiter-option-ss.jpg?alt=media&#x26;token=2bd791f9-82b1-4f33-ac49-2b962883e3ed" alt=""><figcaption></figcaption></figure></div>

You can update here..

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FJSlHgMZ0cGl2q4ebS4NE%2Fportfolio-fiter-option-css-ss.jpg?alt=media&#x26;token=e21b9822-4466-4e13-bc22-ef46114278b0" alt=""><figcaption></figcaption></figure>

***

### Pagination colors

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2F6mm66NW1IZwcKyZdMPWr%2Fpagination-ss.jpg?alt=media&#x26;token=12227669-b7b2-4668-83e8-074d4aee87d2" alt=""><figcaption></figcaption></figure>

You can update here..

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2F0nhg3AmZ9WQ8qOwt797M%2Fpagination-css-ss.jpg?alt=media&#x26;token=6d2ce868-3db9-48a5-9943-7bce9e802c65" alt=""><figcaption></figcaption></figure>

***

### Portfolio Pagination colors

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2Fp2Os6IMdpjsxmpMCnXkc%2Fportfolio-pagination-css-ss.jpg?alt=media&#x26;token=18146b43-379a-409c-bc81-9c5ff3b28f43" alt=""><figcaption></figcaption></figure>

***

### Single Post colors

You can update the all css colors for single post template from the css line **386 to 581**.

<figure><img src="https://2984353288-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FeSPO7OYLgBtsHqTspB4E%2Fuploads%2FtwxpJb1vzh1GbYNODvPm%2Fsingle-post-css-ss.jpg?alt=media&#x26;token=28fbc7a1-ab16-482e-a273-1ea5b099b461" alt=""><figcaption></figcaption></figure>
