Widget_Divider()
Elementor divider widget.
Description
Elementor widget that displays a line that divides different elements in the page.
Changelog
Version | Description |
---|---|
1.0.0 | Introduced. |
Methods
- _content_template — Render divider widget output in the editor.
- _register_controls — Register divider widget controls.
- get_categories — Get widget categories.
- get_icon — Get widget icon.
- get_keywords — Get widget keywords.
- get_name — Get widget name.
- get_title — Get widget title.
- render — Render divider widget output on the frontend.
Source
includes/widgets/divider.php
class Widget_Divider extends Widget_Base { /** * Get widget name. * * Retrieve divider widget name. * * @since 1.0.0 * @access public * * @return string Widget name. */ public function get_name() { return 'divider'; } /** * Get widget title. * * Retrieve divider widget title. * * @since 1.0.0 * @access public * * @return string Widget title. */ public function get_title() { return __( 'Divider', 'elementor' ); } /** * Get widget icon. * * Retrieve divider widget icon. * * @since 1.0.0 * @access public * * @return string Widget icon. */ public function get_icon() { return 'eicon-divider'; } /** * Register divider widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 1.0.0 * @access protected */ protected function _register_controls() { $this->start_controls_section( 'section_divider', [ 'label' => __( 'Divider', 'elementor' ), ] ); $this->add_control( 'style', [ 'label' => __( 'Style', 'elementor' ), 'type' => Controls_Manager::SELECT, 'options' => [ 'solid' => __( 'Solid', 'elementor' ), 'double' => __( 'Double', 'elementor' ), 'dotted' => __( 'Dotted', 'elementor' ), 'dashed' => __( 'Dashed', 'elementor' ), ], 'default' => 'solid', 'selectors' => [ '{{WRAPPER}} .elementor-divider-separator' => 'border-top-style: {{VALUE}};', ], ] ); $this->add_control( 'weight', [ 'label' => __( 'Weight', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 1, ], 'range' => [ 'px' => [ 'min' => 1, 'max' => 10, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-divider-separator' => 'border-top-width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'color', [ 'label' => __( 'Color', 'elementor' ), 'type' => Controls_Manager::COLOR, 'default' => '', 'scheme' => [ 'type' => Scheme_Color::get_type(), 'value' => Scheme_Color::COLOR_3, ], 'selectors' => [ '{{WRAPPER}} .elementor-divider-separator' => 'border-top-color: {{VALUE}};', ], ] ); $this->add_responsive_control( 'width', [ 'label' => __( 'Width', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'size_units' => [ '%', 'px' ], 'range' => [ 'px' => [ 'max' => 1000, ], ], 'default' => [ 'size' => 100, 'unit' => '%', ], 'tablet_default' => [ 'unit' => '%', ], 'mobile_default' => [ 'unit' => '%', ], 'selectors' => [ '{{WRAPPER}} .elementor-divider-separator' => 'width: {{SIZE}}{{UNIT}};', ], ] ); $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', ], ], 'default' => '', 'selectors' => [ '{{WRAPPER}} .elementor-divider' => 'text-align: {{VALUE}};', ], ] ); $this->add_responsive_control( 'gap', [ 'label' => __( 'Gap', 'elementor' ), 'type' => Controls_Manager::SLIDER, 'default' => [ 'size' => 15, ], 'range' => [ 'px' => [ 'min' => 2, 'max' => 50, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-divider' => 'padding-top: {{SIZE}}{{UNIT}}; padding-bottom: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'view', [ 'label' => __( 'View', 'elementor' ), 'type' => Controls_Manager::HIDDEN, 'default' => 'traditional', ] ); $this->end_controls_section(); } /** * Render divider widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 * @access protected */ protected function render() { ?> <div class="elementor-divider"> <span class="elementor-divider-separator"></span> </div> <?php } /** * Render divider widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @since 1.0.0 * @access protected */ protected function _content_template() { ?> <div class="elementor-divider"> <span class="elementor-divider-separator"></span> </div> <?php } }