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

Mình tổng hợp các control của Elementor Pagebuilder để tiện cho việc lập trình plugin.

Chào các bạn, mình đang làm việc với plugin Elementor Pagbuilder, cảm thấy plugin này rất tuyệt vời để tạo Website, nên mình sẽ viết nhiều bài chia sẻ các vấn đề về plugin này. Và bài này mình xin tổng hợp các control của Elementor Paguilder để chúng ta dễ dàng cho việc code plugin với Elementor hơn.

<?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',
	]
);



Trả lời

Close Menu