Elementor Controls

Elementor Controls are input fields and UI elements that are used to construct an element interface. Controls allow the user to customize the available settings from the panel and change the design in the preview. Elementor includes a wide array of controls out-of-the-box.

Controls are created by extending the Base_Control abstract class. Each control has a custom template and optional default settings, default values, and other methods that affect the output of the control in the panel.

Base Controls

Elementor has several base controls extending the abstract base class, each built to serve a different purpose:

  • Base_UI_Control – A base control for creating UI controls visible only in the panel,  they don’t return any value.
  • Base_Data_Control – A base control for creating data controls that returns a single value.
  • Control_Base_Multiple – A base control for creating controls that returns multiple values.
  • Control_Base_Units – A base control for creating unit control that returns unit based values.
  • Group_Control_Base – A base control for creating group controls that group together several regular controls.

Elementor Controls

The following controls come with Elementor:

UI Controls

  • Heading – Display a heading in the panel.
  • Raw HTML – Display an HTML content in the panel.
  • Button – Display a button in the panel that can trigger an event.
  • Divider – Display a separator between controls.

Data Controls

  • Text – A simple text field.
  • Number – A simple number field.
  • Textarea – A textarea field.
  • WYSIWYG – The WordPress rich-text editor (TinyMCE).
  • Code – A code editor textarea based on Ace editor.
  • Hidden – A hidden input field in the panel, to save data in the database without an input field in the panel.
  • Switcher – A switcher control (on/off), a fancy representation of checkbox.
  • Popover Toggle – A toggle button to open and close a popover.
  • Select – A simple select box field.
  • Select2 – A select box field based on the Select2 plugin.
  • Choose – A radio buttons styled as groups of buttons with icons.
  • Color – A color picker field with an alpha slider.
  • Icon – (DEPRECATED) A font icon select box field based on Font Awesome fonts.
  • Font – A font select box field based on Google Fonts library.
  • Date-Time – A date/time picker field based on the Flatpickr library.
  • Entrance Animation – An entrance animation select box field based on Animate.css library.
  • Hover Animation – A hover animation select box field based on Hover.css library.
  • Gallery – A gallery field based on the WordPress media library.
  • Repeater – Repeater controls allow you to build repeatable blocks of fields.

Multiple Controls

  • URL – A URL field with a button to open the link in an external tab.
  • Media – A media chooser section based on the WordPress media library.
  • Image Dimensions – A component with image width, input, image height input and an apply button.
  • Text Shadow – Input fields for horizontal shadow, vertical shadow, shadow blur and shadow color.
  • Box Shadow – Input fields for horizontal shadow, vertical shadow, shadow blur, shadow spread and shadow color.
  • Icons Control – Elementor’s Icon Library for Font Icons or SVG upload based on the WordPress media library.

Unit Controls

  • Slider – A draggable scale to choose between a range of numeric values.
  • Dimensions – A component with 4 number fields, suitable for setting top/right/bottom/left settings.

Group Controls

  • Typography – Font size, font family, font weight, text transform, font style, line height and letter spacing.
  • Text Shadow – Add a shadow effect to texts.
  • Box Shadow – Add a shadow effect to elements.
  • Border – Border type, border width and border color.
  • Background – Background color, background image, background gradient or background video.
  • Image Size – Select image sizes (thumbnail, medium, medium_large, large) or custom dimension.
Note: Using `selector` parameter in group control is not supported.