前言介紹
- 這款 WordPress 外掛「Advanced Custom CSS for Elementor」是 2025-11-18 上架。
- 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
- 上一次更新是 2025-11-19，距離現在已有 99 天。
- 外掛最低要求 WordPress 6.3 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 1 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
外掛標籤
ACCE | elementor | custom css | frontend editor | responsive design |
內容簡介
**摘要:**
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。
原文外掛簡介
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.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Advanced Custom CSS for Elementor」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
延伸相關外掛（你可能也想知道）
WP Frontend Admin – Display WP Admin Pages in the Frontend 》WP Frontend Admin 是一個能夠在前端管理網站、在前端顯示 WP Admin 頁面並創建自訂前端儀表板的外掛程式。, 當你在 wp-admin 中時，你會在工具列上看到「在...。
Front-end Editor for WordPress 》功能, , 起草和編輯文章。, 自動儲存。編輯完畢後立即發布。, 上下文工具。粗體、斜體、刪除線、連結、標題、清單和引用。, 使用 WordPress 媒體庫添加媒體。...。
STAX Header Builder 》Stax 是一個 WordPress 首頁拖放式視覺化標頭建立的前端外掛，讓使用者可以在實時、視覺化的方式下建立網頁標頭。透過這個外掛，你可以專注於網頁標頭的設計...。
ACF Front End Editor 》Advanced Custom Fields 外掛的擴充套件：前端編輯器, , 這是一個針對 WordPress Advanced Custom Fields 外掛 的擴充套件。, 透過這個擴充套件，管理員可以...。
LiveLang – Smart Visual Translator 》總結文案：LiveLang是一款智能的WordPress視覺翻譯工具，讓你直接從前端翻譯或修改任何文本。啟用翻譯模式，點擊文本，進行編輯，保存即可，無需編輯文件、搜...。
PostEase – Frontend Post Editor & Inline Content Editing for WordPress 》**總結：**, PostEase – Frontend Editor是一個WordPress外掛，允許您（和特定角色）直接從前端編輯WordPress的文章、頁面和自訂文章類型，無需切換到後端編...。
Frontpress 》Frontpress 可以讓使用者在前端編輯文章，使用起來十分方便。, 如果你是網站管理員，你的客戶會很喜歡這個插件，因為他們通常會害怕進入後台。, 使用方式：, ...。
Frontend Post Builder 》### 摘要：Frontend Post Builder 外掛允許網站管理員或使用者從您的網站前端提交 WordPress 文章（或任何自定義文章類型）。該外掛適用於需要前端內容提交的...。
Frontend Product Editor Manager for WooCommerce 》總結：Frontend Product Editor Manager for WooCommerce 是一個外掛，讓商店管理員和店長可以直接從前端商店頁面編輯產品細節，無需進入後台儀表板，可隨時...。