{"id":260026,"date":"2025-11-19T12:53:45","date_gmt":"2025-11-19T12:53:45","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/advanced-custom-css-for-elementor\/"},"modified":"2025-11-19T13:26:19","modified_gmt":"2025-11-19T13:26:19","slug":"advanced-custom-css-for-elementor","status":"publish","type":"plugin","link":"https:\/\/twd.wordpress.org\/plugins\/advanced-custom-css-for-elementor\/","author":23198366,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","version":"1.0","stable_tag":"1.0","tested":"6.8.5","requires":"6.3","requires_php":"7.4","requires_plugins":null,"header_name":"Advanced Custom CSS for Elementor","header_author":"Agreem Technologies","header_description":"Adds a custom CSS field to Elementor's Advanced settings for each widget.","assets_banners_color":"27266d","last_updated":"2025-11-19 13:26:19","external_support_url":"","external_repository_url":"","donate_link":"","header_plugin_uri":"","header_author_uri":"https:\/\/agreemtech.com\/","rating":5,"author_block_rating":0,"active_installs":10,"downloads":260,"num_ratings":1,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.0":{"tag":"1.0","author":"agreem2016","date":"2025-11-19 13:26:19"}},"upgrade_notice":{"1.0":"

First release \u2014 adds responsive Custom CSS controls to Elementor widgets.<\/p>"},"ratings":{"1":0,"2":0,"3":0,"4":0,"5":1},"assets_icons":{"icon-256x256.png":{"filename":"icon-256x256.png","revision":3399000,"resolution":"256x256","location":"assets","locale":""}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3399000,"resolution":"772x250","location":"assets","locale":""}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3399000,"resolution":"1","location":"assets","locale":""},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3399000,"resolution":"2","location":"assets","locale":""},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3399000,"resolution":"3","location":"assets","locale":""},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3399000,"resolution":"4","location":"assets","locale":""}},"screenshots":[],"jetpack_post_was_ever_published":false},"plugin_section":[],"plugin_tags":[250909,2001,76538,4206,30738],"plugin_category":[],"plugin_contributors":[240285],"plugin_business_model":[],"class_list":["post-260026","plugin","type-plugin","status-publish","hentry","plugin_tags-acce","plugin_tags-custom-css","plugin_tags-elementor","plugin_tags-frontend-editor","plugin_tags-responsive-design","plugin_contributors-agreem2016","plugin_committers-agreem2016"],"banners":{"banner":"https:\/\/ps.w.org\/advanced-custom-css-for-elementor\/assets\/banner-772x250.png?rev=3399000","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/advanced-custom-css-for-elementor\/assets\/icon-256x256.png?rev=3399000","icon_2x":"https:\/\/ps.w.org\/advanced-custom-css-for-elementor\/assets\/icon-256x256.png?rev=3399000","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/advanced-custom-css-for-elementor\/assets\/screenshot-1.png?rev=3399000","caption":""},{"src":"https:\/\/ps.w.org\/advanced-custom-css-for-elementor\/assets\/screenshot-2.png?rev=3399000","caption":""},{"src":"https:\/\/ps.w.org\/advanced-custom-css-for-elementor\/assets\/screenshot-3.png?rev=3399000","caption":""},{"src":"https:\/\/ps.w.org\/advanced-custom-css-for-elementor\/assets\/screenshot-4.png?rev=3399000","caption":""}],"raw_content":"\n

Advanced Custom CSS for Elementor (ACCE) adds a dedicated Custom CSS section to the Advanced<\/strong> tab of every Elementor widget.
\nIt lets you write clean, widget-scoped CSS using the selector<\/code> keyword and provides separate fields for Desktop<\/strong>, Tablet<\/strong>, and Mobile<\/strong> styling.<\/p>\n\n

No premium version required \u2014 works with both Elementor Free and Elementor Pro.<\/p>\n\n

Perfect for users and developers who need fast, responsive CSS control directly inside the Elementor editor.<\/p>\n\n

Features<\/h3>\n\n
    \n
  • Adds a Custom CSS panel<\/strong> to all Elementor widgets.<\/li>\n
  • Separate CSS fields for Desktop<\/strong>, Tablet<\/strong>, and Mobile<\/strong>.<\/li>\n
  • Supports the selector<\/code> keyword for precise widget-only CSS.<\/li>\n
  • Uses Elementor's live preview for instant visual updates.<\/li>\n
  • Breakpoints can be customized with a simple filter.<\/li>\n
  • Lightweight, fast, and requires no additional settings.<\/li>\n<\/ul>\n\n

    Usage<\/h3>\n\n

    In Elementor editor:<\/p>\n\n

      \n
    1. Select any widget.<\/li>\n
    2. Open the Advanced<\/strong> tab.<\/li>\n
    3. Scroll down to ACCE Custom CSS<\/strong>.<\/li>\n
    4. Add your CSS using the selector<\/code> keyword.<\/li>\n<\/ol>\n\n

      Example:<\/p>\n\n

      selector {\n background: #f3f3f3;\n border-radius: 8px;\n}<\/p>\n\n

      Developer Notes<\/h3>\n\n

      You can override the default breakpoints (Tablet: 768px, Mobile: 425px) using this filter:<\/p>\n\n

      add_filter('ACCE_custom_css_breakpoints', function($defaults) {\n return [\n 'tablet' => 900,\n 'mobile' => 600,\n ];\n});<\/p>\n\n

      License<\/h3>\n\n

      This plugin is licensed under the GPLv2 or later.<\/p>\n\n\n

        \n
      1. Upload the plugin folder to \/wp-content\/plugins\/<\/code>.<\/li>\n
      2. Activate the plugin through the Plugins<\/strong> screen in WordPress.<\/li>\n
      3. Open Elementor, select any widget, and go to Advanced > ACCE Custom CSS<\/strong>.<\/li>\n<\/ol>\n\n\n
        \n

        Does it work with Elementor Pro?<\/h3><\/dt>\n

        Yes, it works with both Elementor Free and Elementor Pro.<\/p><\/dd>\n

        Does it support live preview?<\/h3><\/dt>\n

        Yes. CSS updates appear instantly in Elementor\u2019s visual editor.<\/p><\/dd>\n\n<\/dl>\n\n\n

        1.0<\/h4>\n\n

        Initial release with device-based CSS fields and breakpoint customization.<\/p>","raw_excerpt":"Advanced Custom CSS for Elementor.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/260026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=260026"}],"author":[{"embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/agreem2016"}],"wp:attachment":[{"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=260026"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=260026"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=260026"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=260026"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=260026"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/twd.wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=260026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}