Skip to content
  • There are no suggestions because the search field is empty.

How to Change Colors

Adjusting various style settings for colors in Elementor

Elementor makes it easy to change colors across many parts of your website, including text, buttons, backgrounds, icons, sections, and other widgets. This guide walks through where to find color settings and how to update them safely.

Before You Start

Before making color changes:

  • Make sure you are logged into WordPress
  • Open the page you want to edit with Edit with Elementor
  • Know your brand colors if you are trying to stay on-brand
  • Preview your changes on both desktop and mobile before publishing

Where Colors Can Be Changed in Elementor

Color settings in Elementor are usually found in one of these places:

  • Style tab inside a widget
  • Style tab for a column, container, or section
  • Site Settings for global colors
  • Hover state settings for buttons, links, and interactive elements

Most color edits happen in the Style tab.

How to Change Text Color

To change the color of a heading, paragraph, or text block:

  1. Open the page in Elementor
  2. Click the text widget you want to edit
  3. In the left panel, click the Style tab
  4. Find the Text Color setting
  5. Choose a new color using the color picker or paste in a hex code

Common widgets with text color settings:

  • Heading
  • Text Editor
  • Icon Box
  • Call to Action
  • Button
  • Tabs and Accordions

How to Change Button Colors

To change the color of a button:

  1. Click the Button widget
  2. Go to the Style tab
  3. Update:
    • Text Color
    • Background Color
    • Border Color if used
  4. Click Hover to edit the button’s hover colors as well

Make sure to check both:

  • Normal
  • Hover

This is important so the button still looks good when someone moves their mouse over it.

How to Change Background Colors

You can change background colors for sections, containers, columns, or some widgets.

For a section or container background:

  1. Click the section, container, or column handle
  2. Go to the Style tab
  3. Open the Background area
  4. Choose Classic
  5. Select your new background color

For a widget background:

Some widgets include their own background settings in the Style tab. If they do, you can change the background there the same way.

How to Change Icon Colors

To update the color of icons:

  1. Click the widget that contains the icon
  2. Open the Style tab
  3. Find the Primary Color, Icon Color, or similar option
  4. Select the color you want

Widgets that often include icon color settings:

  • Icon
  • Icon Box
  • Icon List
  • Social Icons
  • Buttons with icons

How to Change Link Colors

Some text and heading widgets allow link color changes directly in the widget settings.

  1. Click the widget
  2. Open the Style tab
  3. Look for:
    • Link Color
    • Hover Color
  4. Set both as needed

If the link color is controlled globally, you may need to update it in Site Settings instead.

How to Change Form Colors

If you are using Elementor forms, you can change colors for:

  • Labels
  • Placeholder text
  • Field text
  • Field background
  • Border color
  • Button colors
  • Error and success message colors

To update form colors:

  1. Click the Form widget
  2. Open the Style tab
  3. Expand the part you want to edit, such as:
    • Fields
    • Labels
    • Buttons
    • Messages
  4. Adjust the colors as needed

How to Change Colors in Tabs, Accordions, and Toggles

For widgets like Tabs, Accordions, and Toggles:

  1. Click the widget
  2. Open the Style tab
  3. Update colors for:
    • Title text
    • Content text
    • Background
    • Border
    • Active state colors

Be sure to check how the active tab or open accordion looks compared to the inactive ones.

How to Change Overlay Colors

Some widgets and background images use overlays.

To change an overlay color:

  1. Click the section, container, or widget
  2. Go to Style
  3. Open Background Overlay
  4. Select the new overlay color
  5. Adjust opacity if needed

This is useful for making text easier to read on top of an image.

How to Change Global Colors

Global colors help keep your site consistent. If your website uses global colors, changing one global color can update it across multiple elements.

To edit global colors:

  1. In Elementor, click the hamburger menu in the top left
  2. Go to Site Settings
  3. Click Global Colors
  4. Update the colors you want to change
  5. Save changes

Use this carefully. A global color update may affect many pages and widgets at once.

Tips for Choosing the Right Place to Edit Colors

Use widget-level color changes when:

  • You only want to change one specific element
  • You are making a one-off design adjustment

Use global colors when:

  • You want a consistent brand color across the website
  • The same color is used in many places
  • You want easier long-term maintenance

Common Issues

My color change is not showing

Try these steps:

  • Make sure you clicked Update
  • Clear your website cache
  • Clear your browser cache
  • Refresh the page
  • Check whether the widget is using a global color that overrides your change

The color looks different on another device

Some widgets may have responsive settings or different spacing/background conditions on mobile. Always preview your changes on:

  • Desktop
  • Tablet
  • Mobile

I changed one color and other elements changed too

This usually means you edited a global color or a shared template element.

Best Practices

  • Stick to your brand color palette
  • Use high contrast for readability
  • Check hover states when editing buttons and links
  • Avoid changing too many colors on a single page
  • Preview before publishing
  • Use global colors for consistency when appropriate

When to Contact Support

Reach out to support if:

  • You are not sure whether an element is controlled locally or globally
  • A template or global style change is affecting multiple pages unexpectedly
  • The color settings do not appear where expected
  • You want help matching brand colors across your site