Tổng hợp các control của Elementor

elementor-control.php

<?php
/**
 * TEXT control.
 */
$this->add_control(
	'title',
	[
		'label' => __( 'Title', 'elementor' ),
		'type' => Controls_Manager::TEXT,
		'dynamic' => [
			'active' => true,
		],
		'default' => __( 'This is the heading', 'elementor' ),
		'placeholder' => __( 'Enter your title', 'elementor' ),
		'label_block' => true,
	]
);

/**
 * TEXTAREA control.
 */
$this->add_control(
	'description',
	[
		'label' => '',
		'type' => Controls_Manager::TEXTAREA,
		'dynamic' => [
			'active' => true,
		],
		'default' => __( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
		'placeholder' => __( 'Enter your description', 'elementor' ),
		'rows' => 10,
		'separator' => 'none',
		'show_label' => false,
	]
);

/**
 * WYSIWYG control.
 */
$this->add_control(
	'content',
	[
		'label' => __( 'Content', 'elementor' ),
		'default' => __( 'Content', 'elementor' ),
		'placeholder' => __( 'Content', 'elementor' ),
		'type' => Controls_Manager::WYSIWYG,
		'show_label' => false,
	]
);

/**
 * URL control.
 */
$this->add_control(
	'link',
	[
		'label' => __( 'Link', 'elementor' ),
		'type' => Controls_Manager::URL,
		'dynamic' => [
			'active' => true,
		],
		'placeholder' => __( 'https://your-link.com', 'elementor' ),
		'default' => [
			'url' => '',
		],
		'separator' => 'before',
	]
);

/**
 * SELECT control.
 */
$this->add_control(
	'size',
	[
		'label' => __( 'Size', 'elementor' ),
		'type' => Controls_Manager::SELECT,
		'default' => 'default',
		'options' => [
			'default' => __( 'Default', 'elementor' ),
			'small' => __( 'Small', 'elementor' ),
			'medium' => __( 'Medium', 'elementor' ),
			'large' => __( 'Large', 'elementor' ),
			'xl' => __( 'XL', 'elementor' ),
			'xxl' => __( 'XXL', 'elementor' ),
		],
	]
);

/**
 * CHOOSE control.
 */
$this->add_responsive_control(
	'align',
	[
		'label' => __( 'Alignment', 'elementor' ),
		'type' => Controls_Manager::CHOOSE,
		'options' => [
			'left' => [
				'title' => __( 'Left', 'elementor' ),
				'icon' => 'fa fa-align-left',
			],
			'center' => [
				'title' => __( 'Center', 'elementor' ),
				'icon' => 'fa fa-align-center',
			],
			'right' => [
				'title' => __( 'Right', 'elementor' ),
				'icon' => 'fa fa-align-right',
			],
			'justify' => [
				'title' => __( 'Justified', 'elementor' ),
				'icon' => 'fa fa-align-justify',
			],
		],
		'default' => '',
		'selectors' => [
			'{{WRAPPER}}' => 'text-align: {{VALUE}};',
		],
	]
);

/**
 * HIDDEN control.
 */
$this->add_control(
	'view',
	[
		'label' => __( 'View', 'elementor' ),
		'type' => Controls_Manager::HIDDEN,
		'default' => 'traditional',
	]
);

/**
 * COLOR control.
 */
$this->add_control(
	'color',
	[
		'label' => __( 'Text Color', 'elementor' ),
		'type' => Controls_Manager::COLOR,
		'scheme' => [
			'type' => Scheme_Color::get_type(),
			'value' => Scheme_Color::COLOR_1, // COLOR_1, COLOR_2, COLOR_3, COLOR_4.
		],
		'selectors' => [
			// Stronger selector to avoid section style from overwriting
			'{{WRAPPER}}.elementor-widget-heading .elementor-heading-title' => 'color: {{VALUE}};',
		],
	]
);

/**
 * TYPOGRAPHY control.
 */
$this->add_group_control(
	Group_Control_Typography::get_type(),
	[
		'name' => 'typography',
		'scheme' => Scheme_Typography::TYPOGRAPHY_1, // TYPOGRAPHY_1, TYPOGRAPHY_2, TYPOGRAPHY_3, TYPOGRAPHY_4.
		'selector' => '{{WRAPPER}} .elementor-heading-title',
	]
);

/**
 * TYPOGRAPHY control.
 */
$this->add_group_control(
	Group_Control_Text_Shadow::get_type(),
	[
		'name' => 'text_shadow',
		'selector' => '{{WRAPPER}} .elementor-heading-title',
	]
);

/**
 * DIMENSIONS control.
 */
$this->add_responsive_control(
	'margin',
	[
		'label' => __( 'Margin', 'pd-framework' ),
		'type' => Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px', '%' ],
		'selectors' => [
			'{{WRAPPER}} .pdvn-title .pdvn-title__line' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

/**
 * CODE control.
 */
$this->add_control(
	'html',
	[
		'label' => '',
		'type' => Controls_Manager::CODE,
		'default' => '',
		'placeholder' => __( 'Enter your code', 'elementor' ),
		'show_label' => false,
	]
);

/**
 * ICON control.
 */
$this->add_control(
	'icon',
	[
		'label' => __( 'Icon', 'elementor' ),
		'type' => Controls_Manager::ICON,
		'default' => 'fa fa-star',
	]
);

/**
 * ANIMATION control.
 */
$this->add_control(
	'lightbox_content_animation',
	[
		'label' => __( 'Entrance Animation', 'elementor' ),
		'type' => Controls_Manager::ANIMATION,
		'default' => '',
		'frontend_available' => true,
		'label_block' => true,
	]
);

/**
 * HOVER_ANIMATION control.
 */
$this->add_control(
	'hover_animation',
	[
		'label' => __( 'Hover Animation', 'elementor' ),
		'type' => Controls_Manager::HOVER_ANIMATION,
	]
);

/**
 * SLIDER control.
 */
$this->add_responsive_control(
	'icon_space',
	[
		'label' => __( 'Spacing', 'elementor' ),
		'type' => Controls_Manager::SLIDER,
		'default' => [
			'size' => 15,
		],
		'range' => [
			'px' => [
				'min' => 0,
				'max' => 100,
			],
		],
		'selectors' => [
			'{{WRAPPER}}.elementor-position-right .elementor-icon-box-icon' => 'margin-left: {{SIZE}}{{UNIT}};',
			'{{WRAPPER}}.elementor-position-left .elementor-icon-box-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
			'{{WRAPPER}}.elementor-position-top .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
			'(mobile){{WRAPPER}} .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
		],
	]
);

/**
 * HEADING control.
 */
$this->add_control(
	'heading_title',
	[
		'label' => __( 'Title', 'elementor' ),
		'type' => Controls_Manager::HEADING,
		'separator' => 'before',
	]
);

/**
 * REPEATER control.
 */
$repeater = new Repeater();

$this->add_control(
	'icon_list',
	[
		'label' => '',
		'type' => Controls_Manager::REPEATER,
		'fields' => $repeater->get_controls(),
		'default' => [
			[
				'text' => __( 'List Item #1', 'elementor' ),
				'icon' => 'fa fa-check',
			],
			[
				'text' => __( 'List Item #2', 'elementor' ),
				'icon' => 'fa fa-times',
			],
			[
				'text' => __( 'List Item #3', 'elementor' ),
				'icon' => 'fa fa-dot-circle-o',
			],
		],
		'title_field' => '<i class="{{ icon }}" aria-hidden="true"></i> {{{ text }}}',
	]
);

/**
 * SWITCHER control.
 */
$this->add_control(
	'divider',
	[
		'label' => __( 'Divider', 'elementor' ),
		'type' => Controls_Manager::SWITCHER,
		'label_off' => __( 'Off', 'elementor' ),
		'label_on' => __( 'On', 'elementor' ),
		'selectors' => [
			'{{WRAPPER}} .elementor-icon-list-item:not(:last-child):after' => 'content: ""',
		],
		'separator' => 'before',
	]
);

/**
 * MEDIA control.
 */
$this->add_control(
	'image',
	[
		'label' => __( 'Choose Image', 'elementor' ),
		'type' => Controls_Manager::MEDIA,
		'dynamic' => [
			'active' => true,
		],
		'default' => [
			'url' => Utils::get_placeholder_image_src(),
		],
	]
);

/**
 * MEDIA Group control.
 */
$this->add_group_control(
	Group_Control_Image_Size::get_type(),
	[
		'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
		'default' => 'full',
		'separator' => 'none',
	]
);

/**
 * GALLERY control.
 */
$this->add_control(
	'carousel',
	[
		'label' => __( 'Add Images', 'elementor' ),
		'type' => Controls_Manager::GALLERY,
		'default' => [],
		'show_label' => false,
		'dynamic' => [
			'active' => true,
		],
	]
);

/**
 * Image_Size Group control.
 */
$this->add_group_control(
	Group_Control_Image_Size::get_type(),
	[
		'name' => 'thumbnail', // Usage: `{name}_size` and `{name}_custom_dimension`, in this case `thumbnail_size` and `thumbnail_custom_dimension`.
		'separator' => 'none',
	]
);

/**
 * NUMBER control.
 */
$this->add_control(
	'autoplay_speed',
	[
		'label' => __( 'Autoplay Speed', 'elementor' ),
		'type' => Controls_Manager::NUMBER,
		'default' => 5000,
		'frontend_available' => true,
	]
);

/**
 * Group_Control_Border control.
 */
$this->add_group_control(
	Group_Control_Border::get_type(),
	[
		'name' => 'image_border',
		'selector' => '{{WRAPPER}} .gallery-item img',
		'separator' => 'before',
	]
);

/**
 * RAW_HTML control.
 */
$this->add_control(
	'anchor_description',
	[
		'raw' => __( 'This ID will be the CSS ID you will have to use in your own page, Without #.', 'elementor' ),
		'type' => Controls_Manager::RAW_HTML,
		'content_classes' => 'elementor-descriptor',
	]
);