# Group Controls

Elementor Core Basic

Group controls are used to group together several regular controls and return them as a small popup in the editor. This helps improve UX by displaying a large number of controls in single line.

# Using Group Controls

The following controls are included in Elementor:

  • Typography – Font size, font family, font weight, text transform, font style, line height, letter spacing and word 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 dimensions.
  • CSS Filter – Apply CSS filters like blur, brighten, contrast, saturation or hue.

# Extending Group Controls

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


class Elementor_Test_Control extends \Elementor\Group_Control_Base {