Need to update CSS across multiple Elementor pages? Whether changing brand colors, updating font sizes, or modifying custom styles, finding and replacing inline CSS saves hours.

This guide shows you how to locate and update CSS in Elementor widgets, custom CSS sections, and inline styles site-wide.

Where CSS Lives in Elementor

1. Widget Inline Styles

Stored as: JSON in wp_postmeta

Example:

{
  "elements": [{
    "settings": {
      "background_color": "#3498db",
      "text_color": "#ffffff"
    }
  }]
}

2. Custom CSS Sections

Locations:

• Widget → Advanced → Custom CSS
• Section → Advanced → Custom CSS
• Site Settings → Custom CSS

Example:

selector .elementor-heading-title {
    color: #ff0000;
    font-size: 24px;
}

3. Global Settings

Found in:

• Elementor → Site Settings → Global Colors
• Theme Customizer → Additional CSS

Method 1: Global Color System (Easiest)

Setup Global Colors

Step 1: Define Colors

Elementor → Site Settings → Global Colors

Add colors:
- Primary: #3498db
- Secondary: #2ecc71
- Text: #333333
- Accent: #e74c3c

Step 2: Use Global Colors in Widgets

1. Select widget
2. Style tab → Color picker
3. Click globe icon
4. Select global color

Step 3: Update Everywhere at Once

Change global color definition
All instances update automatically
No search/replace needed!

Limitation: Only works if you used global colors initially.

Method 2: Database Search & Replace

For Hex Color Codes

Scenario: Change brand blue (#3498db) to new blue (#2980b9)

Using Better Search Replace:

Tools → Better Search Replace

Search for: #3498db
Replace with: #2980b9

Select tables:
☑ wp_postmeta (Elementor widget styles)
☑ wp_posts (custom CSS in content)
☑ wp_options (global settings)

☑ Run as dry run first!

Review results:

wp_postmeta: 45 changes (widget styles)
wp_posts: 12 changes (custom CSS)
wp_options: 3 changes (global settings)

Total: 60 color instances updated

For CSS Properties

Scenario: Change all font-size: 18px to font-size: 20px

Search for: font-size: 18px
Replace with: font-size: 20px

Or for variations:
Search: font-size:18px (no space)
Replace: font-size:20px

Important: Be specific to avoid unintended matches:

Bad: font-size: 1
Good: font-size: 16px;

(Bad would match 10px, 12px, 14px, etc.)

Method 3: Using Search Regex

For Pattern-Based Replacements

Install:

Plugins → Add New → "Search Regex"
Install and activate

Find All Hex Colors:

Pattern: #[0-9A-Fa-f]{6}
Matches: #3498db, #FF5733, #000000

Replace: (manual review each or use capture groups)

Find Font Sizes in Range:

Pattern: font-size:\s*(1[6-9]|20)px
Matches: 16px, 17px, 18px, 19px, 20px

Replace: font-size: 18px
(Normalizes all to 18px)

Find Specific CSS Property:

Pattern: background-color:\s*#3498db
Replace: background-color: #2980b9

Common CSS Update Scenarios

Scenario 1: Update Brand Colors

Old brand colors:

Primary: #3498db (blue)
Secondary: #2ecc71 (green)
Accent: #e74c3c (red)

New brand colors:

Primary: #2c3e50 (dark blue)
Secondary: #27ae60 (dark green)
Accent: #c0392b (dark red)

Process:

Replacement 1:
Search: #3498db
Replace: #2c3e50

Replacement 2:
Search: #2ecc71
Replace: #27ae60

Replacement 3:
Search: #e74c3c
Replace: #c0392b

Tables: wp_postmeta, wp_posts, wp_options

Scenario 2: Increase Font Sizes Site-Wide

Goal: Make all text 2px larger

Challenge: Many different sizes used

Solution 1: Specific replacements

font-size: 14px → font-size: 16px
font-size: 16px → font-size: 18px
font-size: 18px → font-size: 20px
(etc.)

Solution 2: CSS calc() addition

Find: font-size: (\d+)px
Replace: font-size: calc($1px + 2px)

Better: Update global typography settings in Elementor

Scenario 3: Change CSS Class Names

Old classes:

.my-custom-button
.old-widget-class

New classes:

.btn-primary
.new-widget-class

Process:

Search: my-custom-button
Replace: btn-primary

Search: old-widget-class
Replace: new-widget-class

Scenario 4: Update Background Image URLs

In custom CSS:

/* Old */
background-image: url('http://oldsite.com/image.jpg');

/* New */
background-image: url('https://newsite.com/image.jpg');

Replacement:

Search: http://oldsite.com
Replace: https://newsite.com

Advanced: Custom CSS in Widgets

Locating Widget Custom CSS

Where it’s stored:

• Database: wp_postmeta table
• Meta key: _elementor_data
• Format: JSON

Example JSON:

{
  "id": "abc123",
  "settings": {
    "custom_css": "selector h2 { color: #ff0000; }"
  }
}

Bulk Update Widget Custom CSS

Method 1: Search in JSON

Search: "custom_css":"selector h2 { color: #ff0000; }"
Replace: "custom_css":"selector h2 { color: #00ff00; }"

Caution: Exact match required, including all spacing.

Method 2: Pattern match

Search: color:\s*#ff0000
Replace: color: #00ff00

Works regardless of selector or context

Elementor-Specific CSS Locations

1. Global Widget Styles

Check:

Elementor → Site Settings → Global Widget Settings
Each widget type has default styles

Update:

1. Change global setting
2. Affects all NEW instances
3. Old instances unchanged

2. Page Settings CSS

Check each page:

Edit with Elementor
⚙️ Page Settings → Advanced → Custom CSS

Update:

Search database for CSS patterns
Or edit pages manually (tedious for many pages)

3. Template Library CSS

Templates store CSS too:

Elementor → Templates → Saved Templates
Each template has custom CSS

Update:

Database search includes templates (wp_postmeta)
Or edit templates individually

Safety Considerations

Before Replacing CSS

1. Backup

☐ Database backup
☐ Download backup locally
☐ Test restore process

2. Test Specificity

☐ Search term not too broad
☐ Won't match unintended CSS
☐ Dry run shows expected count

3. Consider Scope

☐ Apply to all pages?
☐ Or specific post types?
☐ Include templates?

Color Replacement Gotchas

Issue 1: Color format variations

CSS accepts multiple formats:
- #3498db (hex 6-digit)
- #39d (hex 3-digit shorthand)
- rgb(52, 152, 219)
- rgba(52, 152, 219, 1)
- hsl(204, 70%, 53%)

Must search for all variations!

Issue 2: Case sensitivity

#3498db vs #3498DB
Usually not case-sensitive in CSS
But search/replace might be

Issue 3: Spacing variations

color:#ff0000 (no space)
color: #ff0000 (space)
color:  #ff0000 (double space)

Use regex to handle variations

Best Practices

1. Use Global Systems When Possible

Instead of inline styles:

✓ Use Global Colors
✓ Use Global Fonts
✓ Use Theme Styles
✓ Use CSS Classes

Avoid: Inline styles in every widget

Advantage: Update once, changes everywhere automatically.

2. Organize Custom CSS

Bad approach:

Custom CSS in every widget
Custom CSS in every section
Duplicated styles everywhere

Good approach:

1. Site-wide CSS in Site Settings
2. Page-specific CSS in Page Settings
3. Widget CSS only when truly unique

3. Document Custom CSS

Create CSS map:

Spreadsheet:
| Color | Hex Code | Usage | Pages |
|-------|----------|-------|-------|
| Brand Blue | #3498db | Primary buttons | All |
| Accent Red | #e74c3c | CTAs | Homepage, Contact |

Makes finding/replacing easier later.

4. Use CSS Variables (Advanced)

Define in Custom CSS:

:root {
  --brand-blue: #3498db;
  --brand-green: #2ecc71;
}

.my-button {
  background-color: var(--brand-blue);
}

Update once:

Change: --brand-blue: #3498db;
To: --brand-blue: #2980b9;

All instances update automatically!

Troubleshooting

CSS Changes Not Showing

Problem: Replaced CSS but styles unchanged

Solutions:

1. Regenerate Elementor CSS:
   Elementor → Tools → Regenerate CSS

2. Clear all caches:
   - Elementor CSS
   - Plugin cache
   - Browser cache (Ctrl+Shift+R)

3. Check specificity:
   - Original CSS might be overridden
   - Check with browser inspector (F12)

4. Verify replacement worked:
   - Check database directly
   - View page source for actual CSS

Partial Replacements

Problem: Some instances updated, others missed

Causes:

1. Multiple color formats used
2. Spacing variations
3. Case differences
4. CSS in different locations

Solution:

Run multiple searches:
- Search: #3498db
- Search: #3498DB
- Search: rgb(52, 152, 219)
- Check custom CSS in: Appearance → Customize

Tools Summary

For Color Updates:

• Global Color System (Elementor)
• Better Search Replace (database)
• Theme Customizer (global CSS)

For Pattern Matching:

• Search Regex (regex patterns)
• WP-CLI with regex flags

For Testing:

• Browser Inspector (F12)
• Color picker tools
• CSS validation

Conclusion

Finding and replacing CSS in Elementor is most effective when using Global Colors for new projects. For existing sites, database search/replace with Better Search Replace handles most cases.

Quick Action Plan:

1. ✅ Backup database first
2. ✅ Use Global Colors for future updates
3. ✅ Document current CSS usage
4. ✅ Test replacements with dry run
5. ✅ Clear all caches after changes
6. ✅ Verify in browser inspector

Best practice: Implement Global Colors now to avoid manual replacements in future.

Frequently Asked Questions

Q: Can I search for CSS classes? A: Yes! Search for the class name in wp_postmeta table where Elementor stores widget data.

Q: Will this affect Global Colors? A: If you replace hex codes, yes. Better to update Global Color definitions directly.

Q: How do I find all custom CSS in my site? A: Search wp_postmeta for “custom_css” meta values. Lists all widgets with custom CSS.

Q: Can I automate CSS updates? A: With WP-CLI and regex, yes. Or use Global Colors for automatic updates.

Q: What about responsive CSS (@media queries)? A: Same search/replace process works. Be specific with media query breakpoints.

Updated your CSS? Share your before/after color schemes in the comments!

The post Find & Replace Inline CSS in Elementor appeared first on Elementor Search & Replace.