# Data Controls

Elementor Core Basic

Data controls are simple controls, used to return a single value and save it in the database.

# Using Data Controls

The following controls are included in Elementor:

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

# Extending Data Controls

To create your own data control, you need to extend the \Elementor\Base_Data_Control abstract class:


class Elementor_Test_Control extends \Elementor\Base_Data_Control {