# 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() {

		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' );

	}

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14