Control Styles

Elementor Core Intermediate

When you create new Elementor controls and need to register custom stylesheets, they must be registered using the wp_register_style() (opens new window) function and enqueued using wp_enqueue_style() (opens new window) function. To ensure that Elementor loads the stylesheets only in the editor, use the control enqueue() method.

Registering Control Styles

In the example below, we'll register stylesheets and enqueue them when creating new controls:

class Elementor_Test_Control extends \Elementor\Base_Control {

	protected function enqueue(): void {

		wp_register_style( 'control-style-1', plugins_url( 'assets/css/control-style-1.css', __FILE__ ) );
		wp_register_style( 'control-style-2', plugins_url( 'assets/css/control-style-2.css', __FILE__ ), [ 'external-framework' ] );
		wp_register_style( 'external-framework', plugins_url( 'assets/css/libs/external-framework.css', __FILE__ ) );

		wp_enqueue_style( 'control-style-1' );
		wp_enqueue_style( 'control-style-2' );

	}

}