[ 'title' => __('Small'), 'icon' => 'eicon-sm', ], 'medium' => [ 'title' => __('Medium'), 'icon' => 'eicon-md', ], 'large' => [ 'title' => __('Large'), 'icon' => 'eicon-lg', ], 'xl' => [ 'title' => __('Extra Large'), 'icon' => 'eicon-xl', ], 'xxl' => [ 'title' => __('XXL'), 'icon' => 'eicon-xxl', ], ]; } /** * Register heading widget controls. * * Adds different input fields to allow the user to change and customize the widget settings. * * @since 1.0.0 */ protected function _registerControls() { $this->startControlsSection( 'section_title', [ 'label' => __('Title'), ] ); $this->addControl( 'title', [ 'label' => __('Title'), 'type' => ControlsManager::TEXTAREA, 'dynamic' => [ 'active' => true, ], 'placeholder' => __('Enter your title'), 'default' => __('Add Your Heading Text Here'), ] ); $this->addControl( 'link', [ 'label' => __('Link'), 'type' => ControlsManager::URL, 'dynamic' => [ 'active' => true, ], 'default' => [ 'url' => '', ], 'separator' => 'before', ] ); $this->addControl( 'size', [ 'label' => __('Display'), 'type' => ControlsManager::CHOOSE, 'options' => self::getDisplaySizes(), 'style_transfer' => true, ] ); $this->addControl( 'header_size', [ 'label' => __('HTML Tag'), 'type' => ControlsManager::SELECT, 'options' => [ 'h1' => 'H1', 'h2' => 'H2', 'h3' => 'H3', 'h4' => 'H4', 'h5' => 'H5', 'h6' => 'H6', 'div' => 'div', 'span' => 'span', 'p' => 'p', ], 'default' => 'h2', ] ); $this->addResponsiveControl( 'align', [ 'label' => __('Alignment'), 'type' => ControlsManager::CHOOSE, 'options' => [ 'left' => [ 'title' => __('Left'), 'icon' => 'eicon-text-align-left', ], 'center' => [ 'title' => __('Center'), 'icon' => 'eicon-text-align-center', ], 'right' => [ 'title' => __('Right'), 'icon' => 'eicon-text-align-right', ], 'justify' => [ 'title' => __('Justified'), 'icon' => 'eicon-text-align-justify', ], ], 'selectors' => [ '{{WRAPPER}}' => 'text-align: {{VALUE}};', ], ] ); $this->addControl( 'view', [ 'label' => __('View'), 'type' => ControlsManager::HIDDEN, 'default' => 'traditional', ] ); $this->endControlsSection(); $this->startControlsSection( 'section_title_style', [ 'label' => __('Title'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'title_color', [ 'label' => __('Text Color'), 'type' => ControlsManager::COLOR, 'scheme' => [ 'type' => SchemeColor::getType(), 'value' => SchemeColor::COLOR_1, ], 'selectors' => [ '{{WRAPPER}} .elementor-heading-title' => 'color: {{VALUE}};', ], ] ); $this->addGroupControl( GroupControlTypography::getType(), [ 'name' => 'typography', 'scheme' => SchemeTypography::TYPOGRAPHY_1, 'selector' => '{{WRAPPER}} .elementor-heading-title', ] ); $this->addGroupControl( GroupControlTextStroke::getType(), [ 'name' => 'text_stroke', 'selector' => '{{WRAPPER}} .elementor-heading-title', ] ); $this->addGroupControl( GroupControlTextShadow::getType(), [ 'name' => 'text_shadow', 'selector' => '{{WRAPPER}} .elementor-heading-title', ] ); $this->addControl( 'blend_mode', [ 'label' => __('Blend Mode'), 'type' => ControlsManager::SELECT, 'options' => [ '' => __('Normal'), 'multiply' => 'Multiply', 'screen' => 'Screen', 'overlay' => 'Overlay', 'darken' => 'Darken', 'lighten' => 'Lighten', 'color-dodge' => 'Color Dodge', 'saturation' => 'Saturation', 'color' => 'Color', 'difference' => 'Difference', 'exclusion' => 'Exclusion', 'hue' => 'Hue', 'luminosity' => 'Luminosity', ], 'selectors' => [ '{{WRAPPER}} .elementor-heading-title' => 'mix-blend-mode: {{VALUE}}', ], 'separator' => 'none', ] ); $this->endControlsSection(); } /** * Render heading widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 */ protected function render() { $settings = $this->getSettingsForDisplay(); if ('' === $settings['title']) { return; } $this->addRenderAttribute('title', 'class', 'elementor-heading-title'); if (!empty($settings['size'])) { $this->addRenderAttribute('title', 'class', 'ce-display-' . $settings['size']); } $this->addInlineEditingAttributes('title'); $title = $settings['title']; if (!empty($settings['link']['url'])) { $this->addLinkAttributes('url', $settings['link']); $title = sprintf('%2$s', $this->getRenderAttributeString('url'), $title); } printf('<%1$s %2$s>%3$s', $settings['header_size'], $this->getRenderAttributeString('title'), $title); } /** * Render heading widget output in the editor. * * Written as a Backbone JavaScript template and used to generate the live preview. * * @since 2.9.0 */ protected function contentTemplate() { ?> <# var title = settings.title, header_size = settings.header_size; if ( '' !== settings.link.url ) { title = '' + title + ''; } view.addRenderAttribute( 'title', 'class', ['elementor-heading-title', 'ce-display-' + settings.size] ); view.addInlineEditingAttributes( 'title' ); #> <{{ header_size }} {{{ view.getRenderAttributeString( 'title' ) }}}>{{{ title }}}