前言介紹
- 這款 WordPress 外掛「Custom CSS for Elementor」是 2021-10-18 上架。
- 目前有 4000 個安裝啟用數。
- 上一次更新是 2024-12-04，距離現在已有 151 天。
- 外掛最低要求 WordPress 5.0 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 8 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
ikamal | gtarafdarr | sayedulsayem |
外掛標籤
css | elementor | custom css | responsive css | elementor addons |
內容簡介
Custom CSS for Elementor 是一個方便的工具，可以在桌面、平板電腦和行動裝置上為元素製作 CSS 代碼，可以協助您省去多次書寫媒體查詢等困擾。Custom CSS for Elementor 外掛附帶預設媒體查詢系統。
請查看外掛的 GitHub 存儲庫，網址：Custom CSS for Elementor
所需工具
只支援 Elementor 免費版
如何使用 Custom CSS for Elementor
此外掛為即插即用，未提供任何設定頁面，安裝 Custom CSS for Elementor 外掛後，編輯任何 Elementor Widget 後，切換到「進階」選項卡，您將看到 Custom CSS for Elementor 的新手風琴式選單。展開風琴式選單後，您將看到三個不同的欄位，可為元素製作 CSS 代碼。如果您要為不同裝置顯示不同設計，按需選擇裝置面板即可。
步驟：編輯任何 Elementor Widget > 進階選項卡 > Custom Css for Elementor
注意：根據一般 CSS 邏輯，如果您為較大的屏幕 (桌面電腦) 編寫 CSS，它將按照時間順序自動應用于較小的裝置。如果您想為較小的裝置更改任何設計，必須為較小的裝置編寫不同的 CSS。
在 Custom CSS for Elementor 外掛中，如果您想要添加全局 CSS，只需在桌面/全局面板中編寫 CSS 代碼，代碼會自動應用於其他螢幕。如果您想為平板電腦更改 CSS，必須在我們的平板電腦 CSS 面板中編寫不同的 CSS。對於行動裝置，如果您想更改 CSS，請在我們工具的行動裝置 CSS 面板中編寫不同的 CSS。
請不要忘記檢查下面的屏幕截圖，以獲得有關工具的清晰概述。
為什麼需要這款工具
如果您知道 Elementor 的多個 DOM 創建問題，您就會知道其中的困擾。但是，如果您使用簡單的 CSS，可以減少很多臃腫的代碼。但是，如果要為各種裝置編寫 CSS，必須成為 CSS 專家，因為您必須每次處理媒體查詢。但是，我們的 Custom CSS for Elementor 外掛將成為您的救星。我們處理您痛苦的部分。此外，如果您使用 Elementor Free 來管理您的網站，您不需要轉到佈景主題自訂器的其他 CSS 中添加自定義 CSS，因為我們為您構建此工具。它只是 Elementor Pro 內置的 Custom CSS 面板的進階版本。
Elementor Custom CSS 外掛的關鍵功能
作為一個基本工具，我們已經與您分享了。總而言之，以下是 Elementor 自定義 CSS 外掛的其他功能：
這是一個輕量級的外掛，將使用 Elementor CSS 文件來併入自定義 CSS。不會產生新的 CSS，以減少伺服器請求。
當您通過樣式控制更改樣式時，您可能會面臨缺少選項的問題，但是我們的 Custom CSS for Elementor 外掛允許您透過編寫 CSS 來解決這些缺點。
我們通過維護世界級的安全方法來準備這個工具。而且，我們已經執行了惡意軟體測試，測試通過了。
它能夠與任何 Elementor widget 以及第三方 Elementor addons widgets 一起使用。
隱私政策
我們不收集您的任何個人數據或任何類型的日誌。因此，透過此外掛不會有違反您的隱私的機會。
技術支援
我們都知道沒有什麼是完美的。但是，通過共享和關懷，我們都能讓一切對每個人都變得完美。如果您在給我們一個負評之前發現任何錯誤，請告訴我們。支援站台
原文外掛簡介
Custom CSS for Elementor is a handy tool for writing CSS codes within different devices like Desktops, Tablets & Mobile for Elementor Widgets. It will help you to not bother with writing media queries several times. Custom CSS for Elementor plugin comes with the default media query system.
See the plugin’s GitHub repository Custom CSS for Elementor
📢 Big Announcement –
After getting several requests we have added live preview mode while styling with CSS. Now you can see the reflection instantly. No hassle of continual preview checks in the front end.
Enjoy styling with CSS without any hassle.
Required Tools
Elementor Free Only
📘 How to Use Custom CSS for Elementor
First of all, it’s a plug-and-play tool. You will not get any setting page. So, after installing the Custom CSS for Elementor tool, just navigate to any Elementor Widget editing panel, then jump on the Advanced tab section; you will get a new accordion of Custom CSS for Elementor. Unfold the accordion, and you will get three different fields to write CSS codes for your widgets. If you want to show different designs for different devices, choose the device panels according to your needs.
Direction: Edit any Elementor Widget > Advanced Tab > Custom Css for Elementor
Note: According to general CSS logic, if you write CSS for a bigger screen (Desktop), it will be automatically implemented on smaller devices chronologically. If you want to change anything for a smaller screen, you have to write different CSS for smaller screens.
In our Custom CSS for Elementor addon, if you want to add global CSS, just write CSS code in the desktop/global panel, and the code will be automatically implied to the other screen. If you want to change the CSS for Tablets, you have to write different CSS in our Tablet CSS panel. And same goes for mobile devices. If you want to change the CSS for Mobile devices, write different CSS in the Mobile CSS panel of our tool.
Don’t forget to check the Screenshots below to get a clear overview of the tool.
❓ Why You Need This
If you know the Elementor’s plenty of Dom creation issues, you will know the pain. But you can reduce so many bloated codes if you use simple CSS. But writing CSS for various devices, you need to be an expert on CSS as you have to deal with the Media Query every time. But our Custom CSS for Elementor addon will be the savior for you. We are handling the pain part of yours. Moreover, to add custom CSS, you don’t need to go to the Additional CSS of the theme customizer if you are using Elementor Free to manage your site as we build this tool for you. It’s just an advanced version of the Elementor Pro’s Default Custom CSS panel.
🔥 What Are the Key Features of Elementor Custom CSS Plugin
As the essential tool, we have shared with you. But in short, here are the other features of the custom CSS addon for Elementor,
It’s a lightweight plugin that will use Elementor CSS files to enqueue custom CSS. Won’t generate any new CSS to reduce server requests.
You can face lacking options during change style through style control, but our Custom CSS for Elementor Addon will allow you to write CSS to overcome these lackings.
We prepared this tool by maintaining a World-class safety methodology. Also, we have run the malicious test, and it passed all the tests.
It works with any Elementor widget and other third-party Elementor addons widgets too.
💻 How to Change Breakpoints in WordPress
To modify breakpoints for tablet and mobile devices in WordPress, you can add custom code to your theme’s functions.php file. Breakpoints determine when your website layout switches between different screen sizes, ensuring optimal display across devices.
Changing Tablet Breakpoint
To adjust the breakpoint for tablets, follow these steps:
Open your WordPress theme’s functions.php file.
Add the following PHP code snippet:
add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints ) {
$default_breakpoints['tablet'] = 768; // change this value
return $default_breakpoints;
}, 20, 1);
Save the file.
Changing Mobile Breakpoint
To customize the breakpoint for mobile devices, use the following instructions:
Navigate to your theme’s functions.php file.
Insert the following PHP code:
add_filter( 'custom_css_for_elementor_breakpoints' , function( $default_breakpoints ) {
$default_breakpoints['mobile'] = 425; // change this value
return $default_breakpoints;
}, 20, 1);
Save the changes.
By adjusting these breakpoints, you can fine-tune your website’s responsiveness and ensure a seamless viewing experience across various devices.
PRIVACY POLICY
We are not collecting any of your personal data or any kind of logs. So there will be no chance to violate your privacy through this plugin.
For Technical Support
We all know nothing is perfect. But we all make everything perfect for everyone by sharing and caring. If you find any bug before giving us a negative rating, please report us here. We will definitely try to resolve your issue asap. Without your support, we cannot run this project so longer smoothly.
ABOUT THE MAKER
I am Sayedul Sayem, a Bangladeshi full-stack WordPress developer and free and open source enthusiast. As Custom CSS for Elementor is an open-source project, you can encourage me by giving me a 5* rating. Nothing also, you can contact me on my LinkedIn for consultation or just to say hello. I love talking to new people. So don’t hesitate.
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Custom CSS for Elementor」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.1.0 | 1.2.0 | 1.3.0 | 1.3.1 | 2.0.0 | 2.1.0 | trunk |
延伸相關外掛（你可能也想知道）
Simple Custom CSS and JS 》這個 WordPress 外掛讓您可以輕鬆地新增自訂 CSS 和 JS 代碼，甚至不用修改主題或外掛檔案，就能客製化您的 WordPress 網站外觀。對於增加自訂 CSS 調整來說...。
Insert Headers And Footers 》WP Headers and Footers 外掛程式可以協助您在 WordPress 網站的頁首和頁尾中插入程式碼，例如 Google Analytics 追蹤碼、Facebook 像素碼、Google Optimize ...。
Simple Custom CSS Plugin 》無需麻煩地將自訂 CSS 新增到 WordPress 網站中。, 這是一個易於使用的 WordPress 外掛，可以添加自訂 CSS 樣式以覆寫外掛和佈景主題的預設樣式。該外掛旨在...。
Simple CSS 》需要在你的網站中添加自定義 CSS 嗎？Simple CSS 提供一個很棒的管理編輯器和 Customizer 中的即時預覽編輯器，讓你能夠輕鬆添加 CSS。, 想讓你的 CSS 僅應用...。
WP Add Custom CSS 》WP Add Custom CSS 外掛允許您在整個網站及個別文章、頁面和自訂文章類型（例如 Woocommerce 產品）中添加自訂的 CSS。, 對整個網站應用的 CSS 樣式將覆蓋您...。
WP Coder – Code Snippets + HTML, CSS, JS and PHP Injection 》WP Coder 是一個用於在網站添加自定義代碼的外掛程式。您可以輕鬆地將 HTML、CSS 和 JS 代碼添加到網站頁面中。此外掛程式非常適合連接各種腳本或樣式，使網...。
TJ Custom CSS 》這款外掛將在管理頁面啟用自定義 CSS 管理器，讓您可以添加自訂的 CSS 代碼到您的 WordPress 網站。它會自動覆蓋任何主題或外掛的預設樣式。如果您想要為您的...。
Custom CSS and JavaScript 》這款外掛可以讓您在 WordPress 網站中添加自訂全站 CSS 樣式和 JavaScript 代碼，有助於覆蓋佈景主題樣式和添加客戶端功能。功能包括：, , 代碼編輯器，帶有...。
Custom CSS Pro 》專業的即時 CSS 編輯器，適合那些想編寫 CSS 的使用者。, 主要功能, , 專業的 CSS 編輯器。, 即時預覽。, 簡潔易用的使用者介面。, 。
CodeKit – Custom Codes Editor 》使用 CodeKit 外掛，您可以在 WordPress 網站中加入自訂的 SASS、CSS、JS、PHP 和 HTML 代碼，並使用最先進且簡單的自訂程式碼編輯器。從未如此容易更改您的...。
Instant CSS 》在 WordPress 中使用 Visual Studio Code 的威力寫你的 CSS 或 SCSS。, 該外掛使用 autoprefixer 將你的 CSS/SCSS 解析成可在舊版瀏覽器上運行的 CSS，不需要...。
AccessPress Custom CSS 》AccessPress Custom CSS是一個免費的WordPress外掛，可以讓您在網站上添加自己的自定義CSS，覆蓋插件和佈景主題的默認樣式表。使用此外掛，您可以在不編輯主...。
Insert Headers CSS and Insert Footers CSS, Custom CSS, Custom Script, Facebook Pixel, Google Tag Manager, Analytics, GA4, Ads 》使用 Skyboot Insert Headers CSS 和 Insert Footers CSS 外掛，您可以在頁首和頁尾標籤中插入自訂 CSS 和自訂 Javascript 代碼，例如 Facebook 像素代碼、Go...。
Custom Script Integration 》此外掛會在 WordPress 的預設頁面和文章中提供自訂的元資料框，讓你能在各自的頁面或文章中加入任何腳本，例如：, , Google AdWords 追蹤轉換, Google AdSens...。
Custom CSS 》建立自訂 CSS 和 JS 代碼。搭配我們強大的條件邏輯，您可以輕鬆地指定欲顯示自訂 CSS 代碼之位置。, 您可以在美觀的 ACE 編輯器中撰寫 CSS 和 JS 代碼，並以...。