Mixed Title Elementor Widget

start_controls_section(
‘section_content’,
[
‘label’ => esc_html__( ‘Content’, ‘elementor’ ),
‘tab’ => \Elementor\Controls_Manager::TAB_CONTENT,
]
);

$this->add_control(
‘header_tag’,
[
‘label’ => esc_html__( ‘HTML Tag’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SELECT,
‘options’ => [
‘h1’ => ‘H1’,
‘h2’ => ‘H2’,
‘h3’ => ‘H3’,
‘h4’ => ‘H4’,
‘h5’ => ‘H5’,
‘h6’ => ‘H6’,
‘div’ => ‘div’,
‘p’ => ‘p’,
],
‘default’ => ‘h1’,
]
);

$this->add_control(
‘main_text_1’,
[
‘label’ => esc_html__( ‘Main text line 1’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::TEXT,
‘default’ => esc_html__( ‘PREMIUM PAINTING’, ‘elementor’ ),
‘dynamic’ => [
‘active’ => true,
],
]
);

$this->add_control(
‘accent_text’,
[
‘label’ => esc_html__( ‘Accent text (italic)’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::TEXT,
‘default’ => esc_html__( ‘For Your Home’, ‘elementor’ ),
‘dynamic’ => [
‘active’ => true,
],
]
);

$this->add_control(
‘accent_position’,
[
‘label’ => esc_html__( ‘Accent position’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SELECT,
‘options’ => [
‘after’ => esc_html__( ‘After main text’, ‘elementor’ ),
‘before’ => esc_html__( ‘Before main text’, ‘elementor’ ),
],
‘default’ => ‘after’,
‘prefix_class’ => ‘acento-‘,
]
);

$this->add_control(
‘main_text_2’,
[
‘label’ => esc_html__( ‘Line 2 text’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::TEXT,
‘default’ => esc_html__( ‘IN WINCHESTER, MA’, ‘elementor’ ),
‘dynamic’ => [
‘active’ => true,
],
‘condition’ => [
‘show_line_2’ => ‘yes’,
],
]
);

$this->add_control(
‘show_line_2’,
[
‘label’ => esc_html__( ‘Show line 2’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SWITCHER,
‘label_on’ => esc_html__( ‘Show’, ‘elementor’ ),
‘label_off’ => esc_html__( ‘Hide’, ‘elementor’ ),
‘return_value’ => ‘yes’,
‘default’ => ‘yes’,
]
);

$this->add_control(
‘show_decorative_line’,
[
‘label’ => esc_html__( ‘Show decorative line below accent’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SWITCHER,
‘label_on’ => esc_html__( ‘Show’, ‘elementor’ ),
‘label_off’ => esc_html__( ‘Hide’, ‘elementor’ ),
‘return_value’ => ‘yes’,
‘default’ => ‘yes’,
]
);

$this->end_controls_section();

// Style Section: Main Text
$this->start_controls_section(
‘section_style_main’,
[
‘label’ => esc_html__( ‘Main Text’, ‘elementor’ ),
‘tab’ => \Elementor\Controls_Manager::TAB_STYLE,
]
);

$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
‘name’ => ‘main_typography’,
‘selector’ => ‘{{WRAPPER}} .tm-main’,
]
);

$this->add_control(
‘main_color’,
[
‘label’ => esc_html__( ‘Color’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::COLOR,
‘default’ => ‘#ffffff’,
‘selectors’ => [
‘{{WRAPPER}} .tm-main’ => ‘color: {{VALUE}}’,
],
]
);

$this->add_responsive_control(
‘alignment’,
[
‘label’ => esc_html__( ‘Alignment’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::CHOOSE,
‘options’ => [
‘left’ => [
‘title’ => esc_html__( ‘Left’, ‘elementor’ ),
‘icon’ => ‘eicon-text-align-left’,
],
‘center’ => [
‘title’ => esc_html__( ‘Center’, ‘elementor’ ),
‘icon’ => ‘eicon-text-align-center’,
],
‘right’ => [
‘title’ => esc_html__( ‘Right’, ‘elementor’ ),
‘icon’ => ‘eicon-text-align-right’,
],
],
‘selectors’ => [
‘{{WRAPPER}} .tm-wrapper’ => ‘text-align: {{VALUE}}’,
‘{{WRAPPER}} .tm-line-1’ => ‘justify-content: {{VALUE}}’,
],
]
);

$this->add_responsive_control(
‘line_spacing’,
[
‘label’ => esc_html__( ‘Space between lines’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SLIDER,
‘size_units’ => [ ‘px’ ],
‘range’ => [
‘px’ => [
‘min’ => 0,
‘max’ => 60,
],
],
‘selectors’ => [
‘{{WRAPPER}} .tm-line’ => ‘margin-bottom: {{SIZE}}{{UNIT}}’,
],
]
);

$this->end_controls_section();

// Style Section: Accent Text
$this->start_controls_section(
‘section_style_accent’,
[
‘label’ => esc_html__( ‘Accent Text’, ‘elementor’ ),
‘tab’ => \Elementor\Controls_Manager::TAB_STYLE,
]
);

$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
[
‘name’ => ‘accent_typography’,
‘selector’ => ‘{{WRAPPER}} .tm-accent’,
]
);

$this->add_control(
‘accent_color’,
[
‘label’ => esc_html__( ‘Color’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::COLOR,
‘default’ => ‘#EFAB00’,
‘selectors’ => [
‘{{WRAPPER}} .tm-accent’ => ‘color: {{VALUE}}’,
‘{{WRAPPER}} .tm-accent-line’ => ‘background-color: {{VALUE}}’,
],
]
);

$this->add_responsive_control(
‘horizontal_gap’,
[
‘label’ => esc_html__( ‘Horizontal gap’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SLIDER,
‘size_units’ => [ ‘px’ ],
‘range’ => [
‘px’ => [
‘min’ => 0,
‘max’ => 40,
],
],
‘default’ => [
‘size’ => 8,
],
‘selectors’ => [
‘{{WRAPPER}}.acento-after .tm-accent’ => ‘margin-left: {{SIZE}}{{UNIT}}’,
‘{{WRAPPER}}.acento-before .tm-accent’ => ‘margin-right: {{SIZE}}{{UNIT}}’,
],
]
);

$this->add_responsive_control(
‘line_thickness’,
[
‘label’ => esc_html__( ‘Decorative line thickness’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SLIDER,
‘size_units’ => [ ‘px’ ],
‘range’ => [
‘px’ => [
‘min’ => 1,
‘max’ => 10,
],
],
‘default’ => [
‘size’ => 2,
],
‘selectors’ => [
‘{{WRAPPER}} .tm-accent-line’ => ‘height: {{SIZE}}{{UNIT}}’,
],
‘condition’ => [
‘show_decorative_line’ => ‘yes’,
],
]
);

$this->add_responsive_control(
‘line_spacing_top’,
[
‘label’ => esc_html__( ‘Space above decorative line’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::SLIDER,
‘size_units’ => [ ‘px’ ],
‘range’ => [
‘px’ => [
‘min’ => 0,
‘max’ => 20,
],
],
‘default’ => [
‘size’ => 5,
],
‘selectors’ => [
‘{{WRAPPER}} .tm-accent-line’ => ‘margin-top: {{SIZE}}{{UNIT}}’,
],
‘condition’ => [
‘show_decorative_line’ => ‘yes’,
],
]
);

$this->end_controls_section();

// Style Section: Spacing
$this->start_controls_section(
‘section_style_spacing’,
[
‘label’ => esc_html__( ‘Spacing’, ‘elementor’ ),
‘tab’ => \Elementor\Controls_Manager::TAB_STYLE,
]
);

$this->add_responsive_control(
‘wrapper_padding’,
[
‘label’ => esc_html__( ‘Padding’, ‘elementor’ ),
‘type’ => \Elementor\Controls_Manager::DIMENSIONS,
‘size_units’ => [ ‘px’, ‘%’, ‘em’ ],
‘selectors’ => [
‘{{WRAPPER}} .tm-wrapper’ => ‘padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};’,
],
]
);

$this->end_controls_section();
}

protected function render() {
$settings = $this->get_settings_for_display();

$this->add_render_attribute( ‘wrapper’, ‘class’, ‘tm-wrapper’ );
$this->add_render_attribute( ‘wrapper’, ‘class’, ‘acento-‘ . esc_attr( $settings[‘accent_position’] ) );

$header_tag = \Elementor\Utils::validate_html_tag( $settings[‘header_tag’] );

?>
< print_render_attribute_string( ‘wrapper’ ); ?>>


render_accent_span( $settings ); ?>

render_accent_span( $settings ); ?>

>







register( new \Elementor_Mixed_Title_Widget() );
} );

// Register styles
add_action( ‘wp_enqueue_scripts’, function() {
wp_register_style( ‘mixed-title-style’, false );
wp_enqueue_style( ‘mixed-title-style’ );
wp_add_inline_style( ‘mixed-title-style’, ‘
.tm-wrapper { margin: 0; padding: 0; line-height: 1; }
.tm-line { display: block; }
.tm-line-1 { display: flex; flex-wrap: wrap; align-items: baseline; }
.tm-main { display: inline; }
.tm-accent { display: inline-flex; flex-direction: column; align-items: flex-start; vertical-align: baseline; font-style: italic; }
.tm-accent-line { display: block; width: 100%; }
‘ );
} );