Advanced Custom CSS for Elementor

Bởi Akash Patel

Mô tả

Advanced Custom CSS for Elementor (ACCE) adds a dedicated Custom CSS section to the Advanced tab of every Elementor widget.
It lets you write clean, widget-scoped CSS using the selector keyword and provides separate fields for Desktop, Tablet, and Mobile styling.

No premium version required — works with both Elementor Free and Elementor Pro.

Perfect for users and developers who need fast, responsive CSS control directly inside the Elementor editor.

Features

Adds a Custom CSS panel to all Elementor widgets.
Separate CSS fields for Desktop, Tablet, and Mobile.
Supports the selector keyword for precise widget-only CSS.
Uses Elementor’s live preview for instant visual updates.
Breakpoints can be customized with a simple filter.
Lightweight, fast, and requires no additional settings.

Usage

In Elementor editor:

Select any widget.
Open the Advanced tab.
Scroll down to ACCE Custom CSS.
Add your CSS using the selector keyword.

Example:

selector {
background: #f3f3f3;
border-radius: 8px;
}

Developer Notes

You can override the default breakpoints (Tablet: 768px, Mobile: 425px) using this filter:

add_filter(‘ACCE_custom_css_breakpoints’, function($defaults) {
return [
‘tablet’ => 900,
‘mobile’ => 600,
];
});

License

This plugin is licensed under the GPLv2 or later.

Ảnh màn hình

Cài đặt

Upload the plugin folder to /wp-content/plugins/.
Activate the plugin through the Plugins screen in WordPress.
Open Elementor, select any widget, and go to Advanced > ACCE Custom CSS.

Hỏi đáp

Does it work with Elementor Pro?: Yes, it works with both Elementor Free and Elementor Pro.
Does it support live preview?: Yes. CSS updates appear instantly in Elementor’s visual editor.