[WordPress] 外掛分享： Advanced Custom CSS for Elementor

內容簡介

**摘要:**
Advanced Custom CSS for Elementor (ACCE) 為每個 Elementor 元件的進階選項卡添加了一個專用的自訂 CSS 部分。
它讓你使用選擇器關鍵字編寫乾淨的、針對元件的 CSS，並提供桌面、平板和手機樣式的獨立字段。
不需要付費版本 — 可與 Elementor Free 和 Elementor Pro 一同使用。
非常適合需要在 Elementor 編輯器內直接進行快速、響應式 CSS 控制的使用者和開發者。

**特點:**
- 為所有 Elementor 元件添加自定義 CSS 面板。
- 桌面、平板和手機分開的 CSS 字段。
- 支持選擇器關鍵字，用於精確的僅元件 CSS。
- 使用 Elementor 的實時預覽進行即時視覺更新。
- 斷點可以使用簡單的篩選器進行自定義。
- 輕量、快速，不需要額外設置。

**用法:**
在 Elementor 編輯器中：
1. 選擇任何元件。
2. 打開進階選項卡。
3. 向下滾動至 ACCE 自定義 CSS。
4. 使用選擇器關鍵字添加你的 CSS。

**開發者筆記:**
你可以使用以下篩選器來覆蓋默認斷點 (平板: 768px, 手機: 425px)：
```
add_filter('ACCE_custom_css_breakpoints', function($defaults) {
return [
'tablet' => 900,
'mobile' => 600,
];
});
```

**許可證:**
此外掛根據 GPLv2 或更高版本許可證授權。

**問題與答案:**
1. Advanced Custom CSS for Elementor (ACCE) 主要功能是什麼？
- 答: 它為每個 Elementor 元件的進階選項卡添加了一個專用的自訂 CSS 部分，讓使用者可以為桌面、平板和手機獨立地編寫乾淨的 CSS。

2. ACCE 是否支持 Elementor 的付費版本？
- 答: 是的，ACCE 可與 Elementor Free 和 Elementor Pro 一同使用，並不需要付費版本。

3. 請描述如何在 Elementor 編輯器中使用 ACCE 的自定義 CSS 功能。
- 答: 先選擇任何元件，接著打開進階選項卡，向下滾動至 ACCE 自定義 CSS，運用選擇器關鍵字添加想要的 CSS。

外掛標籤

開發者團隊

原文外掛簡介

Custom CSS for Elementor lets you add custom CSS to every Elementor widget without requiring Elementor Pro. Write widget-specific CSS using the familiar selector keyword, preview changes instantly, and create responsive styles for desktop, tablet, and mobile—all directly inside the Elementor editor.
If you are searching for an Elementor CSS plugin, Elementor free custom CSS support, or a way to add CSS to Elementor widgets without upgrading to Pro, this plugin is built for exactly that workflow.
With this plugin enabled, you get a dedicated Custom CSS area in the Advanced tab for each widget. You can keep styles local to a single widget, avoid global CSS conflicts, and maintain cleaner design control while editing pages.
Why Use Custom CSS for Elementor?

Add Custom CSS without Elementor Pro.
Style individual Elementor widgets without affecting the whole page.
Write widget-level CSS using Elementor selector syntax.
Create responsive CSS for Desktop, Tablet, and Mobile.
See live preview updates while editing in Elementor.
Keep your setup lightweight with no extra configuration.
Works with both Elementor Free and Elementor Pro.

Features

Add Custom CSS to Elementor widgets from the Advanced tab.
Create widget-specific CSS without impacting unrelated elements.
Use it as a free alternative when you only need Elementor Pro Custom CSS behavior.
Separate responsive CSS fields for Desktop, Tablet, and Mobile.
Supports Elementor selector syntax for precise targeting.
Instant live preview inside Elementor editor.
Lightweight plugin with zero settings pages.
Compatible with modern WordPress and Elementor versions.

Usage

Open any page in Elementor.
Click a widget you want to style.
Go to Advanced > ACCE Custom CSS.
Add CSS in Desktop, Tablet, or Mobile tabs.
Use selector to target the current widget only.

Example 1:
selector {
background: #000;
color: #fff;
}
Example 2:
selector:hover {
transform: scale(1.05);
}
Example 3:
selector img {
border-radius: 20px;
}
Use Cases

Quickly style CTA buttons on one landing page section.
Apply hover effects to selected cards only.
Create mobile-specific spacing for hero widgets.
Add custom border, shadow, and typography tweaks per widget.
Prototype CSS ideas in Elementor before moving to theme stylesheets.

Developer Notes
Default breakpoints are Tablet: 1024px and Mobile: 767px.
You can override breakpoints using this filter:
add_filter( ‘ACCE_custom_css_breakpoints’, function( $defaults ) {
return [
‘tablet’ => 900,
‘mobile’ => 600,
];
} );
Troubleshooting
= My CSS is not applying. What should I check? =
– Make sure you used selector for widget-scoped rules.
– Confirm your CSS syntax is valid.
– Clear Elementor and site cache after changes.
– Check whether another CSS plugin is overriding the same styles.
Responsive styles look different than expected. Why?
Check your media query logic and verify custom breakpoints if your project overrides defaults.
License
This plugin is licensed under the GPLv2 or later.