Style Elementor Widget Without Plugin

The problem

Sometimes the widget you need is not in WordPress or Elementor, or a setting cannot be changed globally. Many people install an extra plugin for this. Each plugin adds code to every page and can slow the site.

The fix, step by step

1. Publish or preview the page so you can see the widget on the front end.
2. Right-click the widget and choose Inspect. The browser shows the widget HTML.
3. Find the exact class name of the widget in that HTML. Write it down.
4. In Elementor, open the widget and go to Advanced. Add your own CSS class, for example my-custom-box. This makes sure your style affects only this widget.
5. Write the selector in Additional CSS. Start with your class, then add the inner class you found.
6. Check the result on desktop, tablet and mobile.

A simple example

This example gives one heading a gradient colour. It is only an example. Use the class names you find in your own page.

.my-custom-box .elementor-heading-title {
  background: linear-gradient(90deg, #761fe3, #CB8DE7);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Why this helps

• You skip a plugin, so the site stays lighter.
• The style applies to one widget only, so nothing else changes.
• You can reuse the same class on other widgets.

Mistakes to avoid

• Using an auto-generated ID that can change. A custom class is safer.
• Writing a broad selector that changes other widgets.
• Forgetting to check the mobile view.

Tools used

Browser inspect tool, Elementor, Additional CSS.

Need this done for you? See my website speed optimization service.

← All solutions