Does this support responsive design?

Yes, it includes documentation and code snippets for using add_responsive_control to handle specific styles for desktop, tablet, and mobile devices.

Which Elementor versions are supported?

The skill follows modern Elementor 3.x+ API standards for control registration, group controls, and the latest UI components.

What is the Elementor Controls skill?

It is a specialized Claude Code capability that provides technical reference and implementation patterns for building custom Elementor widget panels in WordPress.

Can I use this for custom CSS in Elementor?

Absolutely, it covers the {{WRAPPER}} and {{VALUE}} patterns for scoped CSS targeting, ensuring your widget styles don't leak into other parts of the page.

Does it cover conditional logic?

Yes, the skill includes syntax for both simple and complex conditional display of controls, allowing you to show or hide fields based on other user selections.

Elementor Widget Controls Reference

Name: Elementor Widget Controls Reference
Author: peixotorms

bypeixotorms

0•

Content Management

Streamlines the creation and configuration of custom Elementor widget controls with comprehensive PHP and CSS reference patterns.

The Elementor Controls skill provides Claude with deep technical knowledge for developing custom WordPress widgets within the Elementor ecosystem. It includes detailed syntax for all data control types—from basic text inputs to complex repeaters and group controls like typography and backgrounds. By utilizing scoped CSS patterns like {{WRAPPER}} and implementing conditional display logic, this skill enables developers to build intuitive, responsive, and production-ready editor panels for the world's most popular WordPress page builder. It is an essential resource for WordPress developers looking to extend Elementor with bespoke functionality.

Key Features

01Standardized PHP syntax for all Elementor data control types including TEXT, COLOR, and MEDIA

02Implementation guides for Group Controls such as Typography, Backgrounds, and Borders

03Responsive control patterns for per-device styling across Desktop, Tablet, and Mobile

040 GitHub stars

05Advanced UI organization using Sections, Tabs, and Popover toggles

06Scoped CSS selector mapping using the {{WRAPPER}} and {{VALUE}} placeholders

Use Cases

01Creating dynamic widget interfaces with conditional visibility logic and repeater fields

02Building custom WordPress widgets with complex, user-friendly configuration panels

03Implementing responsive styling that adapts to different screen sizes within the Elementor editor

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peixotorms/odinlayer-skills elementor-controls

For use in Claude.ai and ChatGPT

Download Skill