Introduction
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:
- ✅ Backup database first
- ✅ Use Global Colors for future updates
- ✅ Document current CSS usage
- ✅ Test replacements with dry run
- ✅ Clear all caches after changes
- ✅ 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!