Tổng hợp các Editor Control của plugin Elementor để tạo Addon – Widget

Tổng hợp các Editor Control phổ biến hay dùng nhất để tạo Addon (hay còn gọi là Widget) trong thiết kế Website WordPress bằng plugin Elementor kéo thả.

Elementor là gì?

Elementor là plugin phổ biến nhất tính tới thời điểm hiện tại. Với bản Free cũng đủ giúp bạn thiết kế được một Website Landing Page hoặc Bán hàng đơn giản. Tuy nhiên với bản Elementor Pro hỗ trợ nhiều Addon hữu ích hơn, giúp bạn tạo ra những Website đầy đủ tính năng cao cấp.

Để có được bản Pro bạn phải tốn phí để mua, với những license hiện tại tính theo số lượng Domain theo năm. Nếu bạn chưa đủ kinh phí để sở hữu nó. Tôi đề nghị cho bạn một phương án khác là: tự viết cho mình các AddOn để dùng thông qua các Action mà Elementor cung cấp. Vậy làm sao để viết các Widget này? Ban kéo xuống cuối bài viết sẽ có một video giúp bạn từng bước xây dựng một addon hoàn chỉnh, nên bạn yên tâm nhé !

Sau khi xem xong Video bạn quay lại xem dưới đây các Control mà Elementor cung cấp phục vụ cho việc tạo ra các Widget chuyên nghiệp.

Rê chuột vào vùng code, rồi nhấp copy về sử dụng nhé !

1. Data Controls

1.1. Text Control

$this->add_control(
            'widget_title',
            [
                'label' => esc_html__( 'Tiêu đề', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::TEXT,
                'default' => esc_html__( 'Học Học WordPress tại wpshare247.com', 'wpshare247' ),
                'placeholder' => esc_html__( 'Nhập tiêu đề vào đây', 'wpshare247' ),
            ]
        );

1.2. Number Control

$this->add_control(
            'column',
            [
                'label' => esc_html__( 'Số cột', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::NUMBER,
                'min' => 1,
                'max' => 12,
                'step' => 1,
                'default' => 4,
            ]
        );

1.3. Textarea Control

$this->add_control(
            'description',
            [
                'label' => esc_html__( 'Mô tả', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::TEXTAREA,
                'rows' => 10,
                'default' => esc_html__( 'Học WordPress tại wpshare247.com', 'wpshare247' ),
                'placeholder' => esc_html__( 'Nhập mô tả vào đây', 'wpshare247' ),
            ]
        );

1.4. WYSIWYG Control

$this->add_control(
            'content',
            [
                'label' => esc_html__( 'Nội dung', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::WYSIWYG,
                'default' => esc_html__( 'Học WordPress tại wpshare247.com', 'wpshare247' ),
                'placeholder' => esc_html__( 'Nhập nội dung vào đây', 'wpshare247' ),
            ]
        );

1.5. Switcher Control

$this->add_control(
            'title_hide',
            [
                'label' => esc_html__( 'Hiện tiêu đề', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::SWITCHER,
                'label_on' => esc_html__( 'Hiện', 'wpshare247' ),
                'label_off' => esc_html__( 'Ẩn', 'wpshare247' ),
                'return_value' => 'yes',
                'default' => 'yes',
            ]
        );

1.6. Select Control

$this->add_control(
            'border_div',
            [
                'label' => esc_html__( 'Border', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::SELECT,
                'default' => 'solid',
                'options' => [
                    '' => esc_html__( 'Mặc định', 'wpshare247' ),
                    'none' => esc_html__( 'None', 'wpshare247' ),
                    'solid'  => esc_html__( 'Solid', 'wpshare247' ),
                    'dashed' => esc_html__( 'Dashed', 'wpshare247' ),
                    'dotted' => esc_html__( 'Dotted', 'wpshare247' ),
                    'double' => esc_html__( 'Double', 'wpshare247' ),
                ],
                'selectors' => [
                    '{{WRAPPER}} .your-class' => 'border-style: {{VALUE}};',
                ],
            ]
        );

1.7. Select2 Control

$this->add_control(
            'category',
            [
                'label' => esc_html__( 'Danh mục', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::SELECT2,
                'label_block' => true,
                'multiple' => true,
                'options' => [
                    'shirt'  => esc_html__( 'Áo sơ mi', 'wpshare247' ),
                    'music' => esc_html__( 'Âm nhạc', 'wpshare247' ),
                    'food' => esc_html__( 'Thực phẩm', 'wpshare247' ),
                ],
                'default' => [ 'music', 'food' ],
            ]
        );

1.8. Choose Control

$this->add_control(
            'text_align',
            [
                'label' => esc_html__( 'Căn lề', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::CHOOSE,
                'options' => [
                    'left' => [
                        'title' => esc_html__( 'Trái', 'wpshare247' ),
                        'icon' => 'eicon-text-align-left',
                    ],
                    'center' => [
                        'title' => esc_html__( 'Giữa', 'wpshare247' ),
                        'icon' => 'eicon-text-align-center',
                    ],
                    'right' => [
                        'title' => esc_html__( 'Phải', 'wpshare247' ),
                        'icon' => 'eicon-text-align-right',
                    ],
                ],
                'default' => 'center',
                'toggle' => true,
                'selectors' => [
                    '{{WRAPPER}} .your-class' => 'text-align: {{VALUE}};',
                ],
            ]
        );

1.9. Color Control

$this->add_control(
            'text_color',
            [
                'label' => esc_html__( 'Màu chữ', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::COLOR,
                'selectors' => [
                    '{{WRAPPER}} .your-class' => 'color: {{VALUE}}',
                ],
            ]
        );

1.10. Font Control

$this->add_control(
            'font_family',
            [
                'label' => esc_html__( 'Font Family', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::FONT,
                'default' => "'Open Sans', sans-serif",
                'selectors' => [
                    '{{WRAPPER}} .your-class' => 'font-family: {{VALUE}}',
                ],
            ]
        );

1.11. Date Time Control

$this->add_control(
            'due_date',
            [
                'label' => esc_html__( 'Ngày', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::DATE_TIME,
            ]
        );

1.12. Gallery Control

$this->add_control(
            'gallery',
            [
                'label' => esc_html__( 'Thêm ảnh', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::GALLERY,
                'show_label' => false,
                'default' => [],
            ]
        );

1.13. Repeater Control

$this->add_control(
            'list',
            [
                'label' => esc_html__( 'Lặp lại danh sách', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::REPEATER,
                'fields' => [
                    [
                        'name' => 'list_title',
                        'label' => esc_html__( 'Tiêu đề', 'wpshare247' ),
                        'type' => \Elementor\Controls_Manager::TEXT,
                        'default' => esc_html__( 'Mặc định' , 'wpshare247' ),
                        'label_block' => true,
                    ],
                    [
                        'name' => 'list_content',
                        'label' => esc_html__( 'Nội dung', 'wpshare247' ),
                        'type' => \Elementor\Controls_Manager::WYSIWYG,
                        'default' => esc_html__( 'Mặc định' , 'wpshare247' ),
                        'show_label' => false,
                    ],
                    [
                        'name' => 'list_color',
                        'label' => esc_html__( 'Màu', 'wpshare247' ),
                        'type' => \Elementor\Controls_Manager::COLOR,
                        'selectors' => [
                            '{{WRAPPER}} {{CURRENT_ITEM}}' => 'color: {{VALUE}}'
                        ],
                    ]
                ],
                'default' => [
                    [
                        'list_title' => esc_html__( 'Tiêu đề #1', 'wpshare247' ),
                        'list_content' => esc_html__( 'Nhấp vào đây để thay đổi nội dung.', 'wpshare247' ),
                    ],
                    [
                        'list_title' => esc_html__( 'Tiêu đề #2', 'textdomain' ),
                        'list_content' => esc_html__( 'Nhấp vào đây để thay đổi nội dung.', 'wpshare247' ),
                    ],
                ],
                'title_field' => '{{{ list_title }}}',
            ]
        );

1.14. Entrance Animation Control

$this->add_control(
            'entrance_animation',
            [
                'label' => esc_html__( 'Hiệu ứng', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::ANIMATION,
                'prefix_class' => 'animated ',
            ]
        );

1.15. Exit Animation Control

$this->add_control(
            'exit_animation',
            [
                'label' => esc_html__( 'Thoát hiệu ứng', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::EXIT_ANIMATION,
                'prefix_class' => 'animated ',
            ]
        );

1.16. Hover Animation Control

$this->add_control(
            'hover_animation',
            [
                'label' => esc_html__( 'Hover Animation', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::HOVER_ANIMATION,
            ]
        );

2. MultiValue Controls

2.1 Media Control

$this->add_control(
            'image',
            [
                'label' => esc_html__( 'Chọn hình', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

2.2 Image Dimensions Control

$this->add_control(
            'custom_dimension',
            [
                'label' => esc_html__( 'Kích thước hình', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::IMAGE_DIMENSIONS,
                'description' => esc_html__( 'Ảnh sẽ tự động cắt theo tỉ lệ.', 'wpshare247' ),
                'default' => [
                    'width' => '',
                    'height' => '',
                ],
            ]
        );

2.3 Icons Control

$this->add_control(
            'icon',
            [
                'label' => esc_html__( 'Icon', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::ICONS,
                'default' => [
                    'value' => 'fas fa-circle',
                    'library' => 'fa-solid',
                ],
                'recommended' => [
                    'fa-solid' => [
                        'circle',
                        'dot-circle',
                        'square-full',
                    ],
                    'fa-regular' => [
                        'circle',
                        'dot-circle',
                        'square-full',
                    ],
                ],
            ]
        );

2.4 Text Shadow Control

$this->add_control(
            'custom_text_shadow'
            [
                'label' => esc_html__( 'Đỗ bóng cho chữ', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::TEXT_SHADOW,
                'selectors' => [
                    '{{SELECTOR}}' => 'text-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{COLOR}};',
                ],
            ]
        );

2.5 Box Shadow Control

$this->add_control(
            'custom_box_shadow',
            [
                'label' => esc_html__( 'Đỗ bóng cho thẻ', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::BOX_SHADOW,
                'selectors' => [
                    '{{SELECTOR}}' => 'box-shadow: {{HORIZONTAL}}px {{VERTICAL}}px {{BLUR}}px {{SPREAD}}px {{COLOR}};',
                ],
            ]
        );

3. Unit Controls

3.1 Slider Control

$this->add_control(
            'width',
            [
                'label' => esc_html__( 'Width', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::SLIDER,
                'size_units' => [ 'px', '%', 'custom' ],
                'range' => [
                    'px' => [
                        'min' => 0,
                        'max' => 1000,
                        'step' => 5,
                    ],
                    '%' => [
                        'min' => 0,
                        'max' => 100,
                    ],
                ],
                'default' => [
                    'unit' => '%',
                    'size' => 50,
                ],
                'selectors' => [
                    '{{WRAPPER}} .your-class' => 'width: {{SIZE}}{{UNIT}};',
                ],
            ]
        );

3.2 Dimensions Control

$this->add_control(
            'margin',
            [
                'label' => esc_html__( 'Margin', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::DIMENSIONS,
                'size_units' => [ 'px', '%', 'em', 'custom' ],
                'selectors' => [
                    '{{WRAPPER}} .your-class' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
                ],
            ]
        );

4. UI Controls

4.1 Heading Control

$this->add_control(
            'more_options',
            [
                'label' => esc_html__( 'Tiêu đề nhóm', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::HEADING,
                'separator' => 'before',
            ]
        );

4.2 Raw HTML Control

$this->add_control(
            'important_note',
            [
                'label' => esc_html__( 'Important Note', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::RAW_HTML,
                'raw' => esc_html__( 'Dùng để chú thích cho các control khác', 'wpshare247' ),
                'content_classes' => 'your-class',
            ]
        );

4.3 Divider Control

$this->add_control(
            'hr',
            [
                'type' => \Elementor\Controls_Manager::DIVIDER,
            ]
        );

5. Group Controls

5.1 Typography Group Control

$this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                'name' => 'content_typography',
                'selector' => '{{WRAPPER}} .your-class',
            ]
        );

5.2 Text Stroke Group Control

$this->add_group_control(
            \Elementor\Group_Control_Text_Stroke::get_type(),
            [
                'name' => 'text_stroke',
                'selector' => '{{WRAPPER}} .your-class',
            ]
        );

5.3 Text Shadow Group Control

$this->add_group_control(
            \Elementor\Group_Control_Text_Shadow::get_type(),
            [
                'name' => 'text_shadow',
                'selector' => '{{WRAPPER}} .your-class',
            ]
        );

5.4 Box Shadow Group Control

$this->add_group_control(
            \Elementor\Group_Control_Box_Shadow::get_type(),
            [
                'name' => 'box_shadow',
                'selector' => '{{WRAPPER}} .your-class',
            ]
        );

5.5 Border Group Control

$this->add_group_control(
            \Elementor\Group_Control_Border::get_type(),
            [
                'name' => 'border',
                'selector' => '{{WRAPPER}} .your-class',
            ]
        );

5.6 Background Group Control

$this->add_group_control(
            \Elementor\Group_Control_Background::get_type(),
            [
                'name' => 'background',
                'types' => [ 'classic', 'gradient', 'video' ],
                'selector' => '{{WRAPPER}} .your-class',
            ]
        );

5.7 Image Size Group Control

$this->add_control(
            'image',
            [
                'label' => esc_html__( 'Chọn ảnh', 'wpshare247' ),
                'type' => \Elementor\Controls_Manager::MEDIA,
                'default' => [
                    'url' => \Elementor\Utils::get_placeholder_image_src(),
                ],
            ]
        );

        $this->add_group_control(
            \Elementor\Group_Control_Image_Size::get_type(),
            [
                'name' => 'thumbnail',
                'exclude' => [ 'custom' ],
                'include' => [],
                'default' => 'large',
            ]
        );

5.8 CSS Filter Group Control

$this->add_group_control(
            \Elementor\Group_Control_Css_Filter::get_type(),
            [
                'name' => 'custom_css_filters',
                'selector' => '{{WRAPPER}} .your-class',
            ]
        );

6. Custom Control

Ngoài 5 nhóm chính được liệt kê bên trên, Elementor cũng chỗ trợ các Dev tự tạo các Control đúng theo mục đích, yêu cầu để phục vụ cho chính mình.

Bạn có thể thao khảo thêm action:

add_action( 'elementor/controls/register', 'register_new_controls' );

7. Section Control

Section chứa một hoặc nhiều control

//Mở Section
$this->start_controls_section(
            'content_section',
            [
                'label' => esc_html__( 'Content', 'textdomain' ),
                'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
//Thêm các Control của bạn vào đây

//Nhớ đóng lại Section
$this->end_controls_section();

 

 

Xem video hướng dẫn cách tạo plugin Addon đơn giản của Elementor dưới đây.

Ngoài Elementor còn rất nhiều plugin hỗ trợ làm web kéo thả khác. Bạn có thể tham khảo thêm Gutenberg được tích hợp sẵn trong WordPress cũng rất hay và hữu ích.