PluginProbe
Easy Elements for Elementor – Addons & Website Templates / 1.2.1
Easy Elements for Elementor – Addons & Website Templates v1.2.1
1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.6 1.4.7 1.4.8 1.4.5 1.4.4 1.4.3 1.2.7 1.2.8 1.2.9 1.3.0 1.3.1 1.3.2 1.3.3 1.3.4 1.3.5 1.3.6 1.3.7 1.3.8 1.3.9 1.4.0 All 47 releases
← All changes | widgets/heading/heading.php +1289 -1734 1.4.71.2.1 View file →
@@ -1,1734 +1,1289 @@
1 -<?php
2 -namespace Easyel\EasyElements\Widgets;
3 -use Elementor\Controls_Manager;
4 -use Elementor\Group_Control_Typography;
5 -use Elementor\Widget_Base;
6 -use Elementor\Group_Control_Background;
7 -
8 -if ( ! defined( 'ABSPATH' ) ) {
9 - exit;
10 -}
11 -
12 -class Easyel_Heading_Widget extends \Elementor\Widget_Base {
13 -
14 - public function get_name() {
15 - return 'eel-heading';
16 - }
17 -
18 - public function get_title() {
19 - return __( 'Heading', 'easy-elements' );
20 - }
21 -
22 - public function get_icon() {
23 - return 'easyicon easyelIcon-heading';
24 - }
25 -
26 - public function get_categories() {
27 - return [ 'easyelements_category' ];
28 - }
29 - public function get_keywords() {
30 - return [ 'heading', 'title', 'link', 'click', 'text' ];
31 - }
32 -
33 - public function get_style_depends() {
34 - return [
35 - 'eel-heading',
36 - ];
37 - }
38 -
39 -
40 - protected function register_controls() {
41 - $this->start_controls_section(
42 - 'content_section',
43 - [
44 - 'label' => esc_html__('Heading Settings', 'easy-elements'),
45 - 'tab' => Controls_Manager::TAB_CONTENT,
46 - ]
47 - );
48 -
49 - $this->add_control(
50 - 'title',
51 - [
52 - 'label' => esc_html__('Heading Text', 'easy-elements'),
53 - 'type' => Controls_Manager::TEXTAREA,
54 - 'default' => esc_html__('Heading Here', 'easy-elements'),
55 - 'label_block' => true,
56 - 'description' => esc_html__('You can highlight part of the text using double curly brackets. Example: Heading {{Here}} will highlight "Here".', 'easy-elements'),
57 - ]
58 - );
59 -
60 - $this->add_control(
61 - 'show_border_title',
62 - [
63 - 'label' => esc_html__( 'Show Title Side Border', 'easy-elements' ),
64 - 'type' => \Elementor\Controls_Manager::SWITCHER,
65 - 'label_on' => esc_html__( 'On', 'easy-elements' ),
66 - 'label_off' => esc_html__( 'Off', 'easy-elements' ),
67 - 'return_value' => 'yes',
68 - 'default' => '',
69 - 'description' => esc_html__( 'Adds a colored vertical bar on the left or right side of the title.', 'easy-elements' ),
70 - ]
71 - );
72 -
73 - $this->add_control(
74 - 'show_gradient_title',
75 - [
76 - 'label' => esc_html__( 'Enable Gradient Text', 'easy-elements' ),
77 - 'type' => \Elementor\Controls_Manager::SWITCHER,
78 - 'label_on' => esc_html__( 'On', 'easy-elements' ),
79 - 'label_off' => esc_html__( 'Off', 'easy-elements' ),
80 - 'return_value' => 'yes',
81 - 'default' => '',
82 - 'description' => esc_html__( 'Fill the title text with a gradient. Configure colors in Style > Heading.', 'easy-elements' ),
83 - ]
84 - );
85 -
86 - $this->add_control(
87 - 'border_position',
88 - [
89 - 'label' => esc_html__( 'Border Position', 'easy-elements' ),
90 - 'type' => \Elementor\Controls_Manager::SELECT,
91 - 'default' => 'eel_title_start',
92 - 'options' => [
93 - 'eel_title_start' => esc_html__( 'Left of Title (text width)', 'easy-elements' ),
94 - 'eel_title_end' => esc_html__( 'Right of Title (text width)', 'easy-elements' ),
95 - 'eel_full_title_start' => esc_html__( 'Left of Title (full width)', 'easy-elements' ),
96 - 'eel_full_title_end' => esc_html__( 'Right of Title (full width)', 'easy-elements' ),
97 - ],
98 - 'description' => esc_html__( 'Choose which side the side border sits, and whether it spans only the text or the full container width.', 'easy-elements' ),
99 - 'condition' => [
100 - 'show_border_title' => 'yes',
101 - ],
102 - ]
103 - );
104 -
105 -
106 - $this->add_control(
107 - 'border_color',
108 - [
109 - 'label' => esc_html__('Border Color', 'easy-elements'),
110 - 'type' => Controls_Manager::COLOR,
111 - 'selectors' => [
112 - '{{WRAPPER}} .eel_full_title_end, {{WRAPPER}} .eel_title_end .e-e-title, {{WRAPPER}} .eel_full_title_start, {{WRAPPER}} .eel_title_start .e-e-title' => 'border-color: {{VALUE}};',
113 - ],
114 - 'condition' => [
115 - 'show_border_title' => 'yes',
116 - ],
117 - ]
118 - );
119 -
120 - $this->add_responsive_control(
121 - 'title_border_padding',
122 - [
123 - 'label' => esc_html__( 'Padding', 'easy-elements' ),
124 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
125 - 'size_units' => [ 'px', '%', 'em' ],
126 - 'selectors' => [
127 - '{{WRAPPER}} .eel_full_title_end, {{WRAPPER}} .eel_title_end .e-e-title, {{WRAPPER}} .eel_full_title_start, {{WRAPPER}} .eel_title_start .e-e-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
128 - ],
129 - 'condition' => [
130 - 'show_border_title' => 'yes',
131 - ],
132 - ]
133 - );
134 -
135 -
136 - $this->add_control(
137 - 'link',
138 - [
139 - 'label' => __( 'Link', 'easy-elements' ),
140 - 'type' => \Elementor\Controls_Manager::URL,
141 - 'placeholder' => 'https://your-link.com',
142 - 'default' => [
143 - 'url' => '',
144 - 'is_external' => false,
145 - 'nofollow' => false,
146 - ],
147 - 'show_external' => true,
148 - 'description' => esc_html__( 'Set a URL to make the heading clickable. Supports opening in a new tab and nofollow attribute.', 'easy-elements' ),
149 - ]
150 - );
151 -
152 - $this->add_control(
153 - 'title_tag',
154 - [
155 - 'label' => esc_html__('HTML Tag', 'easy-elements'),
156 - 'type' => Controls_Manager::SELECT,
157 - 'default' => 'h2',
158 - 'description' => esc_html__('Choose the HTML tag for SEO. Use H1 once per page only.', 'easy-elements'),
159 - 'options' => [
160 - 'h1' => 'H1',
161 - 'h2' => 'H2',
162 - 'h3' => 'H3',
163 - 'h4' => 'H4',
164 - 'h5' => 'H5',
165 - 'h6' => 'H6',
166 - 'div' => 'div',
167 - ],
168 - ]
169 - );
170 -
171 - $this->add_control(
172 - 'description',
173 - [
174 - 'label' => esc_html__('Description', 'easy-elements'),
175 - 'type' => Controls_Manager::TEXTAREA,
176 - 'label_block' => true,
177 - 'description' => esc_html__( 'Optional. A short paragraph displayed below the heading.', 'easy-elements' ),
178 - ]
179 - );
180 -
181 -
182 - $this->add_responsive_control(
183 - 'align',
184 - [
185 - 'label' => esc_html__('Alignment', 'easy-elements'),
186 - 'type' => Controls_Manager::CHOOSE,
187 - 'options' => [
188 - 'left' => [
189 - 'title' => esc_html__('Left', 'easy-elements'),
190 - 'icon' => 'eicon-text-align-left',
191 - ],
192 - 'center' => [
193 - 'title' => esc_html__('Center', 'easy-elements'),
194 - 'icon' => 'eicon-text-align-center',
195 - ],
196 - 'right' => [
197 - 'title' => esc_html__('Right', 'easy-elements'),
198 - 'icon' => 'eicon-text-align-right',
199 - ],
200 - 'justify' => [
201 - 'title' => esc_html__('Justify', 'easy-elements'),
202 - 'icon' => 'eicon-text-align-justify',
203 - ],
204 - ],
205 - 'toggle' => true,
206 - 'selectors' => [
207 - '{{WRAPPER}} .e-e-heading' => 'text-align: {{VALUE}}',
208 - '{{WRAPPER}} .image-heading' => 'justify-content: {{VALUE}}',
209 - ],
210 - ]
211 - );
212 -
213 - $this->end_controls_section();
214 -
215 - $this->start_controls_section(
216 - 'sub_heading_section',
217 - [
218 - 'label' => esc_html__('Sub Heading Settings', 'easy-elements'),
219 - 'tab' => Controls_Manager::TAB_CONTENT,
220 - ]
221 - );
222 -
223 - $this->add_control(
224 - 'sub_title',
225 - [
226 - 'label' => esc_html__( 'Sub Heading', 'easy-elements' ),
227 - 'type' => \Elementor\Controls_Manager::TEXTAREA,
228 - 'label_block' => true,
229 - 'description' => esc_html__( 'A small line of text above the main heading. Often used for category, tag, or eyebrow text.', 'easy-elements' ),
230 - ]
231 - );
232 -
233 - $this->add_control(
234 - 'show_gradient_border',
235 - [
236 - 'label' => esc_html__( 'Show Gradient Border', 'easy-elements' ),
237 - 'type' => \Elementor\Controls_Manager::SWITCHER,
238 - 'label_on' => esc_html__( 'Show', 'easy-elements' ),
239 - 'label_off' => esc_html__( 'Hide', 'easy-elements' ),
240 - 'return_value' => 'yes',
241 - 'default' => '',
242 - ]
243 - );
244 -
245 - $this->add_control(
246 - 'gradient_color_1',
247 - [
248 - 'label' => esc_html__( 'Gradient Color 1', 'easy-elements' ),
249 - 'type' => \Elementor\Controls_Manager::COLOR,
250 - 'default' => 'rgba(0, 0, 0, 0.15)',
251 - 'selectors' => [
252 - '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-color-1: {{VALUE}};',
253 - ],
254 - 'condition' => [
255 - 'show_gradient_border' => 'yes',
256 - ],
257 - ]
258 - );
259 -
260 - $this->add_control(
261 - 'gradient_color_2',
262 - [
263 - 'label' => esc_html__( 'Gradient Color 2', 'easy-elements' ),
264 - 'type' => \Elementor\Controls_Manager::COLOR,
265 - 'default' => 'rgba(0, 0, 0, 0.30)',
266 - 'selectors' => [
267 - '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-color-2: {{VALUE}};',
268 - ],
269 - 'condition' => [
270 - 'show_gradient_border' => 'yes',
271 - ],
272 - ]
273 - );
274 -
275 - $this->add_control(
276 - 'gradient_color_3',
277 - [
278 - 'label' => esc_html__( 'Gradient Color 3', 'easy-elements' ),
279 - 'type' => \Elementor\Controls_Manager::COLOR,
280 - 'default' => 'rgba(0, 0, 0, 0.50)',
281 - 'selectors' => [
282 - '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-color-3: {{VALUE}};',
283 - ],
284 - 'condition' => [
285 - 'show_gradient_border' => 'yes',
286 - ],
287 - ]
288 - );
289 -
290 -
291 - $this->add_responsive_control(
292 - 'sub_gradient_border_padding',
293 - [
294 - 'label' => __('Gradient Border Padding', 'easy-elements'),
295 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
296 - 'size_units' => ['px', '%', 'em'],
297 - 'selectors' => [
298 - '{{WRAPPER}} .easy_gradiant_border' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
299 - ],
300 - 'condition' => [
301 - 'show_gradient_border' => 'yes',
302 - ],
303 - ]
304 - );
305 -
306 - $this->add_responsive_control(
307 - 'gradient_border_radius',
308 - [
309 - 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
310 - 'type' => \Elementor\Controls_Manager::SLIDER,
311 - 'size_units' => [ 'px', '%' ],
312 - 'range' => [
313 - 'px' => [
314 - 'min' => 0,
315 - 'max' => 200,
316 - ],
317 - '%' => [
318 - 'min' => 0,
319 - 'max' => 100,
320 - ],
321 - ],
322 - 'default' => [
323 - 'unit' => 'px',
324 - 'size' => 40,
325 - ],
326 - 'selectors' => [
327 - '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-border-radius: {{SIZE}}{{UNIT}};',
328 - ],
329 - 'condition' => [
330 - 'show_gradient_border' => 'yes',
331 - ],
332 - ]
333 - );
334 -
335 -
336 - $this->add_control(
337 - 'sub_heading_type',
338 - [
339 - 'label' => esc_html__( 'Sub Heading Type', 'easy-elements' ),
340 - 'type' => \Elementor\Controls_Manager::CHOOSE,
341 - 'options' => [
342 - 'none' => [
343 - 'title' => esc_html__( 'None', 'easy-elements' ),
344 - 'icon' => 'eicon-ban',
345 - ],
346 - 'icon' => [
347 - 'title' => esc_html__( 'Icon', 'easy-elements' ),
348 - 'icon' => 'eicon-star',
349 - ],
350 - 'image' => [
351 - 'title' => esc_html__( 'Image', 'easy-elements' ),
352 - 'icon' => 'eicon-image-bold',
353 - ],
354 - ],
355 - 'default' => 'none',
356 - 'toggle' => false,
357 - ]
358 - );
359 -
360 - $this->add_control(
361 - 'sub_heading_icon',
362 - [
363 - 'label' => esc_html__( 'Select Icon', 'easy-elements' ),
364 - 'type' => \Elementor\Controls_Manager::ICONS,
365 - 'default' => [
366 - 'value' => 'fas fa-heart',
367 - 'library' => 'fa-solid',
368 - ],
369 - 'condition' => [
370 - 'sub_heading_type' => 'icon',
371 - ],
372 - ]
373 - );
374 -
375 - $this->add_control(
376 - 'sub_heading_image',
377 - [
378 - 'label' => esc_html__( 'Upload Image', 'easy-elements' ),
379 - 'type' => \Elementor\Controls_Manager::MEDIA,
380 - 'default' => [
381 - 'url' => \Elementor\Utils::get_placeholder_image_src(),
382 - ],
383 - 'condition' => [
384 - 'sub_heading_type' => 'image',
385 - ],
386 - ]
387 - );
388 -
389 - $this->add_control(
390 - 'icon_color',
391 - [
392 - 'label' => esc_html__('Icon Color', 'easy-elements'),
393 - 'type' => Controls_Manager::COLOR,
394 - 'selectors' => [
395 - '{{WRAPPER}} .eel-sub-heading i, {{WRAPPER}} .eel-sub-heading svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
396 - ],
397 - 'condition' => [
398 - 'sub_heading_type' => ['icon'],
399 - ],
400 - ]
401 - );
402 -
403 - $this->add_responsive_control(
404 - 'sub_heading_icon_margin',
405 - [
406 - 'label' => esc_html__( 'Icon Spacing', 'easy-elements' ),
407 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
408 - 'size_units' => [ 'px', '%', 'em' ],
409 - 'selectors' => [
410 - '{{WRAPPER}} .eel-sub-heading span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
411 - ],
412 - 'condition' => [
413 - 'sub_heading_type' => ['image', 'icon'],
414 - ],
415 - ]
416 - );
417 -
418 - $this->add_control(
419 - 'icon_direction',
420 - [
421 - 'label' => esc_html__( 'Icon / Image Position', 'easy-elements' ),
422 - 'type' => \Elementor\Controls_Manager::CHOOSE,
423 - 'default' => 'top',
424 - 'options' => [
425 - 'left' => [
426 - 'title' => esc_html__( 'Left of Text', 'easy-elements' ),
427 - 'icon' => 'eicon-h-align-left',
428 - ],
429 - 'top' => [
430 - 'title' => esc_html__( 'Above Text', 'easy-elements' ),
431 - 'icon' => 'eicon-v-align-top',
432 - ],
433 - 'right' => [
434 - 'title' => esc_html__( 'Right of Text', 'easy-elements' ),
435 - 'icon' => 'eicon-h-align-right',
436 - ],
437 - ],
438 - 'description' => esc_html__( 'Place the icon/image relative to the sub heading text. Also controls how the sub heading wraps.', 'easy-elements' ),
439 - 'toggle' => false,
440 - ]
441 - );
442 - $this->end_controls_section();
443 -
444 - $this->start_controls_section(
445 - 'separator_section',
446 - [
447 - 'label' => esc_html__('Separator Settings', 'easy-elements'),
448 - 'tab' => Controls_Manager::TAB_CONTENT,
449 - ]
450 - );
451 -
452 - $this->add_control(
453 - 'separator_',
454 - [
455 - 'label' => __( 'Separator Type', 'easy-elements' ),
456 - 'type' => \Elementor\Controls_Manager::SELECT,
457 - 'options' => [
458 - 'none' => __( 'None', 'easy-elements' ),
459 - 'dotted' => __( 'Dotted', 'easy-elements' ),
460 - 'solid' => __( 'Solid', 'easy-elements' ),
461 - 'icon' => __( 'Icon', 'easy-elements' ),
462 - 'image' => __( 'Image', 'easy-elements' ),
463 - ],
464 - 'default' => 'none',
465 - 'description' => esc_html__( 'Pick a separator style: solid bar, dotted dots, a font icon, or your own image.', 'easy-elements' ),
466 - ]
467 - );
468 -
469 - // Solid / Dotted: color + size
470 - $this->add_control(
471 - 'solid_color',
472 - [
473 - 'label' => esc_html__('Separator Color', 'easy-elements'),
474 - 'type' => \Elementor\Controls_Manager::COLOR,
475 - 'selectors' => [
476 - '{{WRAPPER}} .eel--separator-icon.dotted::before, {{WRAPPER}} .eel--separator-icon' => 'color: {{VALUE}}; background-color: {{VALUE}};',
477 - ],
478 - 'condition' => [
479 - 'separator_' => ['solid', 'dotted'],
480 - ],
481 - ]
482 - );
483 -
484 - $this->add_responsive_control(
485 - 'separator_bar_width',
486 - [
487 - 'label' => esc_html__( 'Width', 'easy-elements' ),
488 - 'type' => \Elementor\Controls_Manager::SLIDER,
489 - 'size_units' => [ 'px', '%', 'em' ],
490 - 'range' => [
491 - 'px' => [ 'min' => 5, 'max' => 500 ],
492 - '%' => [ 'min' => 1, 'max' => 100 ],
493 - ],
494 - 'selectors' => [
495 - '{{WRAPPER}} .eel--separator-icon' => 'width: {{SIZE}}{{UNIT}};',
496 - ],
497 - 'condition' => [
498 - 'separator_' => ['solid', 'dotted'],
499 - ],
500 - ]
501 - );
502 -
503 - $this->add_responsive_control(
504 - 'separator_bar_height',
505 - [
506 - 'label' => esc_html__( 'Height (Solid)', 'easy-elements' ),
507 - 'type' => \Elementor\Controls_Manager::SLIDER,
508 - 'size_units' => [ 'px', 'em' ],
509 - 'range' => [
510 - 'px' => [ 'min' => 1, 'max' => 50 ],
511 - ],
512 - 'selectors' => [
513 - '{{WRAPPER}} .eel--separator-icon' => 'height: {{SIZE}}{{UNIT}};',
514 - ],
515 - 'description' => esc_html__( 'Bar thickness. Applies to the Solid type.', 'easy-elements' ),
516 - 'condition' => [
517 - 'separator_' => ['solid'],
518 - ],
519 - ]
520 - );
521 -
522 - // Icon: picker + color + size
523 - $this->add_control(
524 - 'select_icon_',
525 - [
526 - 'label' => esc_html__( 'Select/Upload Icon', 'easy-elements' ),
527 - 'type' => \Elementor\Controls_Manager::ICONS,
528 - 'default' => [
529 - 'value' => 'fas fa-heart',
530 - 'library' => 'fa-solid',
531 - ],
532 - 'description' => esc_html__( 'You can upload an SVG image or choose a font icon.', 'easy-elements' ),
533 - 'condition' => [
534 - 'separator_' => ['icon'],
535 - ],
536 - ]
537 - );
538 -
539 - $this->add_control(
540 - 'separator_icon_color',
541 - [
542 - 'label' => esc_html__( 'Icon Color', 'easy-elements' ),
543 - 'type' => \Elementor\Controls_Manager::COLOR,
544 - 'selectors' => [
545 - '{{WRAPPER}} .eel--separator-icon-wrap i, {{WRAPPER}} .eel--separator-icon-wrap svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
546 - ],
547 - 'condition' => [
548 - 'separator_' => ['icon'],
549 - ],
550 - ]
551 - );
552 -
553 - $this->add_responsive_control(
554 - 'separator_icon_size',
555 - [
556 - 'label' => esc_html__( 'Icon Size', 'easy-elements' ),
557 - 'type' => \Elementor\Controls_Manager::SLIDER,
558 - 'size_units' => [ 'px', 'em' ],
559 - 'range' => [
560 - 'px' => [ 'min' => 6, 'max' => 200 ],
561 - 'em' => [ 'min' => 0.5, 'max' => 10 ],
562 - ],
563 - 'selectors' => [
564 - '{{WRAPPER}} .eel--separator-icon-wrap i' => 'font-size: {{SIZE}}{{UNIT}};',
565 - '{{WRAPPER}} .eel--separator-icon-wrap svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
566 - ],
567 - 'condition' => [
568 - 'separator_' => ['icon'],
569 - ],
570 - ]
571 - );
572 -
573 - // Image: upload + size
574 - $this->add_control(
575 - 'sep_image',
576 - [
577 - 'label' => esc_html__( 'Upload Image', 'easy-elements' ),
578 - 'type' => \Elementor\Controls_Manager::MEDIA,
579 - 'default' => [
580 - 'url' => \Elementor\Utils::get_placeholder_image_src(),
581 - ],
582 - 'condition' => [
583 - 'separator_' => 'image',
584 - ],
585 - ]
586 - );
587 -
588 - $this->add_responsive_control(
589 - 'separator_image_width',
590 - [
591 - 'label' => esc_html__( 'Image Width', 'easy-elements' ),
592 - 'type' => \Elementor\Controls_Manager::SLIDER,
593 - 'size_units' => [ 'px', '%', 'em' ],
594 - 'range' => [
595 - 'px' => [ 'min' => 10, 'max' => 500 ],
596 - '%' => [ 'min' => 1, 'max' => 100 ],
597 - ],
598 - 'selectors' => [
599 - '{{WRAPPER}} .eel-separator-img' => 'width: {{SIZE}}{{UNIT}}; height: auto;',
600 - ],
601 - 'description' => esc_html__( 'Height stays auto to keep aspect ratio.', 'easy-elements' ),
602 - 'condition' => [
603 - 'separator_' => 'image',
604 - ],
605 - ]
606 - );
607 -
608 - // Position + Margin (apply to all types)
609 - $this->add_control(
610 - 'separator_position',
611 - [
612 - 'label' => esc_html__( 'Position', 'easy-elements' ),
613 - 'type' => \Elementor\Controls_Manager::SELECT,
614 - 'default' => 'below',
615 - 'options' => [
616 - 'top' => esc_html__( 'Top of Widget', 'easy-elements' ),
617 - 'above' => esc_html__( 'Above Heading Title', 'easy-elements' ),
618 - 'below' => esc_html__( 'Below Heading Title', 'easy-elements' ),
619 - 'bottom' => esc_html__( 'Bottom of Widget', 'easy-elements' ),
620 - ],
621 - 'description' => esc_html__( 'Where the separator sits inside the widget.', 'easy-elements' ),
622 - 'condition' => [
623 - 'separator_!' => 'none',
624 - ],
625 - ]
626 - );
627 -
628 - $this->add_control(
629 - 'separator_margin',
630 - [
631 - 'label' => esc_html__( 'Margin', 'easy-elements' ),
632 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
633 - 'size_units' => [ 'px', '%', 'em' ],
634 - 'selectors' => [
635 - '{{WRAPPER}} .eel--separator-icon, {{WRAPPER}} .eel--separator-icon-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
636 - ],
637 - 'condition' => [
638 - 'separator_!' => 'none',
639 - ],
640 - ]
641 - );
642 -
643 - $this->end_controls_section();
644 -
645 -
646 - $this->start_controls_section(
647 - 'water_mark_section',
648 - [
649 - 'label' => esc_html__('WaterMark Settings', 'easy-elements'),
650 - 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
651 - ]
652 - );
653 -
654 - $this->add_control(
655 - 'water_mark',
656 - [
657 - 'label' => esc_html__('WaterMark Text', 'easy-elements'),
658 - 'type' => \Elementor\Controls_Manager::TEXTAREA,
659 - 'label_block' => true,
660 - ]
661 - );
662 -
663 - $this->end_controls_section();
664 -
665 -
666 - // Heading
667 - $this->start_controls_section(
668 - 'section_heading_style',
669 - [
670 - 'label' => esc_html__('Heading', 'easy-elements'),
671 - 'tab' => Controls_Manager::TAB_STYLE,
672 - ]
673 - );
674 -
675 - $this->add_control(
676 - 'title_color',
677 - [
678 - 'label' => esc_html__('Color', 'easy-elements'),
679 - 'type' => Controls_Manager::COLOR,
680 - 'selectors' => [
681 - '{{WRAPPER}} .e-e-heading .e-e-title' => 'color: {{VALUE}};',
682 - ],
683 - 'condition' => [
684 - 'show_gradient_title' => '',
685 - ],
686 - ]
687 - );
688 -
689 - $this->add_control(
690 - 'title_color_gradient_heading',
691 - [
692 - 'label' => esc_html__('Text Gradient Color', 'easy-elements'),
693 - 'type' => Controls_Manager::HEADING,
694 - 'separator' => 'before',
695 - 'condition' => [
696 - 'show_gradient_title' => 'yes',
697 - ]
698 - ]
699 - );
700 -
701 - $this->add_group_control(
702 - Group_Control_Background::get_type(),
703 - [
704 - 'name' => 'title_gradient_color',
705 - 'label' => __( 'Title Color', 'easy-elements' ),
706 - 'types' => [ 'classic', 'gradient' ],
707 - 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title.e-e-gradient-title',
708 - 'condition' => [
709 - 'show_gradient_title' => 'yes',
710 - ],
711 - ]
712 - );
713 -
714 -
715 - $this->add_group_control(
716 - Group_Control_Typography::get_type(),
717 - [
718 - 'name' => 'title_typography',
719 - 'label' => esc_html__('Typography', 'easy-elements'),
720 - 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title',
721 - ]
722 - );
723 - $this->add_control(
724 - 'title_opacity',
725 - [
726 - 'label' => esc_html__('Opacity', 'easy-elements'),
727 - 'type' => Controls_Manager::SLIDER,
728 - 'size_units' => ['%'],
729 - 'range' => [
730 - '%' => [ 'min' => 0, 'max' => 1, 'step' => 0.01 ],
731 - ],
732 - 'default' => [
733 - 'size' => 1,
734 - 'unit' => '%',
735 - ],
736 - 'selectors' => [
737 - '{{WRAPPER}} .e-e-heading .e-e-title' => 'opacity: {{SIZE}};',
738 - ],
739 - ]
740 - );
741 -
742 - $this->add_control(
743 - 'title_stroke_heading',
744 - [
745 - 'label' => esc_html__( 'Stroke', 'easy-elements' ),
746 - 'type' => Controls_Manager::HEADING,
747 - 'separator' => 'before',
748 - ]
749 - );
750 -
751 - $this->add_control(
752 - 'title_text_stroke',
753 - [
754 - 'label' => esc_html__('Stroke Width', 'easy-elements'),
755 - 'type' => Controls_Manager::SLIDER,
756 - 'size_units' => ['px', 'em'],
757 - 'range' => [
758 - 'px' => [ 'min' => 0, 'max' => 10, 'step' => 0.1 ],
759 - 'em' => [ 'min' => 0, 'max' => 1, 'step' => 0.01 ],
760 - ],
761 - 'default' => [
762 - 'size' => 0,
763 - 'unit' => 'px',
764 - ],
765 - 'selectors' => [
766 - '{{WRAPPER}} .e-e-heading .e-e-title' => '-webkit-text-stroke-width: {{SIZE}}{{UNIT}};',
767 - ],
768 - ]
769 - );
770 - $this->add_control(
771 - 'title_text_stroke_color',
772 - [
773 - 'label' => esc_html__('Stroke Color', 'easy-elements'),
774 - 'type' => Controls_Manager::COLOR,
775 - 'selectors' => [
776 - '{{WRAPPER}} .e-e-heading .e-e-title' => '-webkit-text-stroke-color: {{VALUE}};',
777 - ],
778 - 'condition' => [
779 - 'title_text_stroke[size]!' => '',
780 - ],
781 - ]
782 - );
783 - $this->add_control(
784 - 'title_effects_heading',
785 - [
786 - 'label' => esc_html__( 'Effects', 'easy-elements' ),
787 - 'type' => Controls_Manager::HEADING,
788 - 'separator' => 'before',
789 - ]
790 - );
791 -
792 - // Text Shadow
793 - $this->add_group_control(
794 - \Elementor\Group_Control_Text_Shadow::get_type(),
795 - [
796 - 'name' => 'title_text_shadow',
797 - 'label' => esc_html__('Text Shadow', 'easy-elements'),
798 - 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title',
799 - ]
800 - );
801 - // Mix Blend Mode
802 - $this->add_control(
803 - 'title_blend_mode',
804 - [
805 - 'label' => esc_html__('Blend Mode', 'easy-elements'),
806 - 'type' => Controls_Manager::SELECT,
807 - 'options' => [
808 - '' => esc_html__('Default', 'easy-elements'),
809 - 'normal' => 'Normal',
810 - 'multiply' => 'Multiply',
811 - 'screen' => 'Screen',
812 - 'overlay' => 'Overlay',
813 - 'darken' => 'Darken',
814 - 'lighten' => 'Lighten',
815 - 'color-dodge' => 'Color Dodge',
816 - 'color-burn' => 'Color Burn',
817 - 'hard-light' => 'Hard Light',
818 - 'soft-light' => 'Soft Light',
819 - 'difference' => 'Difference',
820 - 'exclusion' => 'Exclusion',
821 - 'hue' => 'Hue',
822 - 'saturation' => 'Saturation',
823 - 'color' => 'Color',
824 - 'luminosity' => 'Luminosity',
825 - ],
826 - 'selectors' => [
827 - '{{WRAPPER}} .e-e-heading .e-e-title' => 'mix-blend-mode: {{VALUE}};',
828 - ],
829 - ]
830 - );
831 - $this->add_control(
832 - 'title_spacing_heading',
833 - [
834 - 'label' => esc_html__( 'Spacing', 'easy-elements' ),
835 - 'type' => Controls_Manager::HEADING,
836 - 'separator' => 'before',
837 - ]
838 - );
839 -
840 - $this->add_responsive_control(
841 - 'title_margin',
842 - [
843 - 'label' => esc_html__('Margin', 'easy-elements'),
844 - 'type' => Controls_Manager::DIMENSIONS,
845 - 'size_units' => ['px', 'em', '%'],
846 - 'selectors' => [
847 - '{{WRAPPER}} .e-e-heading .e-e-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
848 - ],
849 - ]
850 - );
851 -
852 - $this->add_responsive_control(
853 - 'title_padding',
854 - [
855 - 'label' => esc_html__('Padding', 'easy-elements'),
856 - 'type' => Controls_Manager::DIMENSIONS,
857 - 'size_units' => ['px', 'em', '%'],
858 - 'selectors' => [
859 - '{{WRAPPER}} .e-e-heading .e-e-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
860 - ],
861 - ]
862 - );
863 -
864 -
865 - $this->add_control(
866 - 'title_image_fill_heading',
867 - [
868 - 'label' => esc_html__('Image Fill (Text Mask)', 'easy-elements'),
869 - 'type' => Controls_Manager::HEADING,
870 - 'separator' => 'before',
871 - ]
872 - );
873 -
874 - $this->add_control(
875 - 'enable_title_image_fill',
876 - [
877 - 'label' => esc_html__('Enable Image Fill', 'easy-elements'),
878 - 'type' => \Elementor\Controls_Manager::SWITCHER,
879 - 'label_on' => esc_html__('Yes', 'easy-elements'),
880 - 'label_off' => esc_html__('No', 'easy-elements'),
881 - 'return_value' => 'yes',
882 - 'default' => '',
883 - ]
884 - );
885 -
886 - $this->add_group_control(
887 - Group_Control_Background::get_type(),
888 - [
889 - 'name' => 'title_image_fill_bg',
890 - 'label' => esc_html__('Image Fill', 'easy-elements'),
891 - 'types' => [ 'classic' ],
892 - 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title.e-e-image-fill, {{WRAPPER}} .e-e-heading .e-e-title.e-e-image-fill div',
893 - 'fields_options' => [
894 - 'background' => [
895 - 'default' => 'classic',
896 - ],
897 - 'classic' => [
898 - 'types' => [ 'image' ],
899 - ],
900 - ],
901 - 'condition' => [
902 - 'enable_title_image_fill' => 'yes',
903 - ],
904 - ]
905 - );
906 -
907 - $this->add_control(
908 - 'title_image_fill_note',
909 - [
910 - 'type' => Controls_Manager::RAW_HTML,
911 - 'raw' => __('Tip: Apply this only when you want the text to be filled with an image (the image will appear inside the text).', 'easy-elements'),
912 - 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
913 - ]
914 - );
915 -
916 - $this->end_controls_section();
917 -
918 - //Sub Heading
919 - $this->start_controls_section(
920 - 'section_sub_heading_style',
921 - [
922 - 'label' => esc_html__('Sub Heading', 'easy-elements'),
923 - 'tab' => Controls_Manager::TAB_STYLE,
924 - ]
925 - );
926 -
927 - $this->add_control(
928 - 'sub_heading_color',
929 - [
930 - 'label' => esc_html__('Color', 'easy-elements'),
931 - 'type' => Controls_Manager::COLOR,
932 - 'selectors' => [
933 - '{{WRAPPER}} .e-e-heading .eel-sub-heading span' => 'color: {{VALUE}};',
934 - ],
935 - ]
936 - );
937 -
938 - $this->add_group_control(
939 - \Elementor\Group_Control_Background::get_type(),
940 - [
941 - 'name' => 'background_subtext',
942 - 'label' => esc_html__( 'Background', 'easy-elements' ),
943 - 'types' => [ 'classic', 'gradient' ],
944 - 'selector' => '{{WRAPPER}} .eel-sub-heading.top',
945 - 'condition' => [
946 - 'icon_direction' => 'top',
947 - ],
948 - ]
949 - );
950 -
951 - $this->add_group_control(
952 - \Elementor\Group_Control_Background::get_type(),
953 - [
954 - 'name' => 'background_subtext_top',
955 - 'label' => esc_html__( 'Background', 'easy-elements' ),
956 - 'types' => [ 'classic', 'gradient' ],
957 - 'selector' => '{{WRAPPER}} .eel-sub-heading',
958 - 'condition' => [
959 - 'icon_direction' => ['left', 'right'],
960 - ],
961 - ]
962 - );
963 -
964 - $this->add_group_control(
965 - Group_Control_Typography::get_type(),
966 - [
967 - 'name' => 'sub_heading_typography',
968 - 'label' => esc_html__('Typography', 'easy-elements'),
969 - 'selector' => '{{WRAPPER}} .e-e-heading .eel-sub-heading span',
970 - ]
971 - );
972 -
973 - $this->add_control(
974 - 'sub_heading_icon_image_heading',
975 - [
976 - 'label' => esc_html__( 'Icon / Image', 'easy-elements' ),
977 - 'type' => Controls_Manager::HEADING,
978 - 'separator' => 'before',
979 - 'condition' => [
980 - 'sub_heading_type' => [ 'icon', 'image' ],
981 - ],
982 - ]
983 - );
984 -
985 - $this->add_responsive_control(
986 - 'sub_heading_icon_text_gap',
987 - [
988 - 'label' => esc_html__( 'Icon/Image to Text Gap', 'easy-elements' ),
989 - 'type' => \Elementor\Controls_Manager::SLIDER,
990 - 'size_units' => [ 'px', 'em', 'rem' ],
991 - 'range' => [
992 - 'px' => [ 'min' => 0, 'max' => 100 ],
993 - 'em' => [ 'min' => 0, 'max' => 10 ],
994 - ],
995 - 'selectors' => [
996 - '{{WRAPPER}} .eel-sub-heading.left, {{WRAPPER}} .eel-sub-heading.right' => 'gap: {{SIZE}}{{UNIT}};',
997 - '{{WRAPPER}} .eel-sub-heading.top i, {{WRAPPER}} .eel-sub-heading.top svg, {{WRAPPER}} .eel-sub-heading.top img' => 'margin-bottom: {{SIZE}}{{UNIT}};',
998 - ],
999 - 'condition' => [
1000 - 'sub_heading_type' => [ 'icon', 'image' ],
1001 - ],
1002 - ]
1003 - );
1004 -
1005 - $this->add_control(
1006 - 'subtext_icon_size',
1007 - [
1008 - 'label' => esc_html__( 'Icon Size', 'easy-elements' ),
1009 - 'type' => \Elementor\Controls_Manager::SLIDER,
1010 - 'range' => [
1011 - 'px' => [
1012 - 'min' => 6,
1013 - 'max' => 100,
1014 - ],
1015 - ],
1016 - 'selectors' => [
1017 - '{{WRAPPER}} .eel-sub-heading i, {{WRAPPER}} .eel-sub-heading svg' => 'font-size: {{SIZE}}{{UNIT}};',
1018 - ],
1019 - 'description' => esc_html__( 'Adjust the icon size in pixels for the subheading icon.', 'easy-elements' ),
1020 - 'condition' => [
1021 - 'sub_heading_type' => 'icon',
1022 - ],
1023 - ]
1024 - );
1025 -
1026 - $this->add_responsive_control(
1027 - 'subtext_image_size',
1028 - [
1029 - 'label' => esc_html__( 'Image Width', 'easy-elements' ),
1030 - 'type' => \Elementor\Controls_Manager::SLIDER,
1031 - 'size_units' => [ 'px', 'em', '%' ],
1032 - 'range' => [
1033 - 'px' => [
1034 - 'min' => 10,
1035 - 'max' => 300,
1036 - ],
1037 - '%' => [
1038 - 'min' => 1,
1039 - 'max' => 100,
1040 - ],
1041 - ],
1042 - 'selectors' => [
1043 - '{{WRAPPER}} .eel-sub-heading img' => 'width: {{SIZE}}{{UNIT}}; height: auto;',
1044 - ],
1045 - 'description' => esc_html__( 'Adjust the image width. Height stays auto to keep aspect ratio (override below).', 'easy-elements' ),
1046 - 'condition' => [
1047 - 'sub_heading_type' => 'image',
1048 - ],
1049 - ]
1050 - );
1051 -
1052 - $this->add_responsive_control(
1053 - 'subtext_image_height',
1054 - [
1055 - 'label' => esc_html__( 'Image Height', 'easy-elements' ),
1056 - 'type' => \Elementor\Controls_Manager::SLIDER,
1057 - 'size_units' => [ 'px', 'em', '%' ],
1058 - 'range' => [
1059 - 'px' => [
1060 - 'min' => 10,
1061 - 'max' => 300,
1062 - ],
1063 - ],
1064 - 'selectors' => [
1065 - '{{WRAPPER}} .eel-sub-heading img' => 'height: {{SIZE}}{{UNIT}};',
1066 - ],
1067 - 'description' => esc_html__( 'Optional. Set a fixed height. Leave empty to keep auto height.', 'easy-elements' ),
1068 - 'condition' => [
1069 - 'sub_heading_type' => 'image',
1070 - ],
1071 - ]
1072 - );
1073 -
1074 - $this->add_responsive_control(
1075 - 'subtext_image_radius',
1076 - [
1077 - 'label' => esc_html__( 'Image Border Radius', 'easy-elements' ),
1078 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1079 - 'size_units' => [ 'px', '%' ],
1080 - 'selectors' => [
1081 - '{{WRAPPER}} .eel-sub-heading img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1082 - ],
1083 - 'condition' => [
1084 - 'sub_heading_type' => 'image',
1085 - ],
1086 - ]
1087 - );
1088 -
1089 - $this->add_control(
1090 - 'sub_heading_box_heading',
1091 - [
1092 - 'label' => esc_html__( 'Box', 'easy-elements' ),
1093 - 'type' => Controls_Manager::HEADING,
1094 - 'separator' => 'before',
1095 - ]
1096 - );
1097 -
1098 - $this->add_group_control(
1099 - \Elementor\Group_Control_Border::get_type(),
1100 - [
1101 - 'name' => 'subtext_border',
1102 - 'label' => esc_html__( 'Border', 'easy-elements' ),
1103 - 'selector' => '{{WRAPPER}} .eel-sub-heading',
1104 - ]
1105 - );
1106 -
1107 - $this->add_responsive_control(
1108 - 'subtext_border_radius',
1109 - [
1110 - 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1111 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1112 - 'size_units' => [ 'px', '%', 'em' ],
1113 - 'selectors' => [
1114 - '{{WRAPPER}} .eel-sub-heading' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1115 - ],
1116 - ]
1117 - );
1118 -
1119 - $this->add_responsive_control(
1120 - 'subtext_padding',
1121 - [
1122 - 'label' => esc_html__( 'Padding', 'easy-elements' ),
1123 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1124 - 'size_units' => [ 'px', '%', 'em' ],
1125 - 'selectors' => [
1126 - '{{WRAPPER}} .eel-sub-heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1127 - ],
1128 - ]
1129 - );
1130 -
1131 - $this->add_control(
1132 - 'sub_heading_margin',
1133 - [
1134 - 'label' => esc_html__( 'Margin', 'easy-elements' ),
1135 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1136 - 'size_units' => [ 'px', '%', 'em' ],
1137 - 'selectors' => [
1138 - '{{WRAPPER}} .eel-sub-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1139 - ],
1140 - ]
1141 - );
1142 -
1143 - $this->end_controls_section();
1144 -
1145 -
1146 - // Highlight
1147 - $this->start_controls_section(
1148 - 'section_highlight_style',
1149 - [
1150 - 'label' => esc_html__('Highlight', 'easy-elements'),
1151 - 'tab' => Controls_Manager::TAB_STYLE,
1152 - ]
1153 - );
1154 -
1155 - $this->add_control(
1156 - 'highlight_help',
1157 - [
1158 - 'type' => Controls_Manager::RAW_HTML,
1159 - 'raw' => sprintf(
1160 - /* translators: %s is the curly-brace syntax example rendered with HTML entities so Elementor's template engine does not evaluate it. */
1161 - esc_html__( 'Wrap part of the heading text in double curly braces to highlight it. Example: %s highlights "Here".', 'easy-elements' ),
1162 - '<code>Heading &#123;&#123;Here&#125;&#125;</code>'
1163 - ),
1164 - 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
1165 - ]
1166 - );
1167 -
1168 - $this->add_control(
1169 - 'highlight_color',
1170 - [
1171 - 'label' => esc_html__('Color', 'easy-elements'),
1172 - 'type' => Controls_Manager::COLOR,
1173 - 'selectors' => [
1174 - '{{WRAPPER}} .e-e-heading .e-e-title span' => 'color: {{VALUE}};',
1175 - ],
1176 - ]
1177 - );
1178 -
1179 - $this->add_group_control(
1180 - \Elementor\Group_Control_Background::get_type(),
1181 - [
1182 - 'name' => 'background_highlight',
1183 - 'label' => esc_html__( 'Background', 'easy-elements' ),
1184 - 'types' => [ 'classic', 'gradient' ],
1185 - 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title span',
1186 - ]
1187 - );
1188 -
1189 - $this->add_group_control(
1190 - Group_Control_Typography::get_type(),
1191 - [
1192 - 'name' => 'highlight_typography',
1193 - 'label' => esc_html__('Highlight Typography', 'easy-elements'),
1194 - 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title span',
1195 - ]
1196 - );
1197 -
1198 - $this->add_responsive_control(
1199 - 'highlight_padding',
1200 - [
1201 - 'label' => esc_html__( 'Padding', 'easy-elements' ),
1202 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1203 - 'size_units' => [ 'px', '%', 'em' ],
1204 - 'selectors' => [
1205 - '{{WRAPPER}} .e-e-heading .e-e-title span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1206 - ],
1207 - ]
1208 - );
1209 -
1210 - $this->add_control(
1211 - 'highlight_margin',
1212 - [
1213 - 'label' => esc_html__( 'Margin', 'easy-elements' ),
1214 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1215 - 'size_units' => [ 'px', '%', 'em' ],
1216 - 'selectors' => [
1217 - '{{WRAPPER}} .e-e-heading .e-e-title span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1218 - ],
1219 - ]
1220 - );
1221 -
1222 - $this->add_responsive_control(
1223 - 'hithlight_border_radius',
1224 - [
1225 - 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1226 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1227 - 'size_units' => [ 'px', '%', 'em' ],
1228 - 'selectors' => [
1229 - '{{WRAPPER}} .e-e-heading .e-e-title span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1230 - ],
1231 - ]
1232 - );
1233 -
1234 - $this->end_controls_section();
1235 -
1236 - // Description
1237 - $this->start_controls_section(
1238 - 'section_description_style',
1239 - [
1240 - 'label' => esc_html__('Description', 'easy-elements'),
1241 - 'tab' => Controls_Manager::TAB_STYLE,
1242 - ]
1243 - );
1244 - $this->add_control(
1245 - 'description_color',
1246 - [
1247 - 'label' => esc_html__('Color', 'easy-elements'),
1248 - 'type' => Controls_Manager::COLOR,
1249 - 'selectors' => [
1250 - '{{WRAPPER}} .e-e-heading .e-e-description' => 'color: {{VALUE}};',
1251 - ],
1252 - ]
1253 - );
1254 - $this->add_group_control(
1255 - Group_Control_Typography::get_type(),
1256 - [
1257 - 'name' => 'description_typography',
1258 - 'label' => esc_html__('Typography', 'easy-elements'),
1259 - 'selector' => '{{WRAPPER}} .e-e-heading .e-e-description',
1260 - ]
1261 - );
1262 - $this->add_responsive_control(
1263 - 'description_margin',
1264 - [
1265 - 'label' => esc_html__('Margin', 'easy-elements'),
1266 - 'type' => Controls_Manager::DIMENSIONS,
1267 - 'size_units' => ['px', 'em', '%'],
1268 - 'selectors' => [
1269 - '{{WRAPPER}} .e-e-heading .e-e-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1270 - ],
1271 - ]
1272 - );
1273 - $this->add_responsive_control(
1274 - 'description_padding',
1275 - [
1276 - 'label' => esc_html__('Padding', 'easy-elements'),
1277 - 'type' => Controls_Manager::DIMENSIONS,
1278 - 'size_units' => ['px', 'em', '%'],
1279 - 'selectors' => [
1280 - '{{WRAPPER}} .e-e-heading .e-e-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1281 - ],
1282 - ]
1283 - );
1284 - $this->end_controls_section();
1285 -
1286 -
1287 - // =====================================================================
1288 - // WaterMark Style
1289 - // =====================================================================
1290 - $this->start_controls_section(
1291 - 'water_mark_style_section',
1292 - [
1293 - 'label' => esc_html__('WaterMark', 'easy-elements'),
1294 - 'tab' => \Elementor\Controls_Manager::TAB_STYLE,
1295 - 'condition' => [
1296 - 'water_mark!' => '',
1297 - ],
1298 - ]
1299 - );
1300 -
1301 - $this->add_group_control(
1302 - Group_Control_Typography::get_type(),
1303 - [
1304 - 'name' => 'water_mark_typography',
1305 - 'label' => esc_html__('Typography', 'easy-elements'),
1306 - 'selector' => '{{WRAPPER}} .eel-watermark',
1307 - // phpcs:ignore WordPressVIPMinimum.Performance.WPQueryParams.PostNotIn_exclude
1308 - 'exclude' => ['font_size'],
1309 - ]
1310 - );
1311 -
1312 - // Kept for back-compat with widgets saved before Typography group was added.
1313 - $this->add_responsive_control(
1314 - 'water_mark_font_size',
1315 - [
1316 - 'label' => esc_html__('Font Size', 'easy-elements'),
1317 - 'type' => \Elementor\Controls_Manager::SLIDER,
1318 - 'size_units' => ['px', 'em', 'rem', '%'],
1319 - 'range' => [
1320 - 'px' => ['min' => 10, 'max' => 300],
1321 - 'em' => ['min' => 0.5, 'max' => 20],
1322 - 'rem' => ['min' => 0.5, 'max' => 20],
1323 - '%' => ['min' => 10, 'max' => 500],
1324 - ],
1325 - 'default' => [
1326 - 'size' => '',
1327 - 'unit' => 'px',
1328 - ],
1329 - 'selectors' => [
1330 - '{{WRAPPER}} .eel-watermark' => 'font-size: {{SIZE}}{{UNIT}};',
1331 - ],
1332 - ]
1333 - );
1334 -
1335 - $this->add_control(
1336 - '_mark_color',
1337 - [
1338 - 'label' => esc_html__('Text Color', 'easy-elements'),
1339 - 'type' => \Elementor\Controls_Manager::COLOR,
1340 - 'default' => '',
1341 - 'selectors' => [
1342 - '{{WRAPPER}} .eel-watermark' => 'color: {{VALUE}};',
1343 - ],
1344 - ]
1345 - );
1346 -
1347 - $this->add_control(
1348 - 'water_mark_color',
1349 - [
1350 - 'label' => esc_html__('Stroke Color', 'easy-elements'),
1351 - 'type' => \Elementor\Controls_Manager::COLOR,
1352 - 'default' => 'rgba(0, 0, 0, 0.3)',
1353 - 'selectors' => [
1354 - '{{WRAPPER}} .eel-watermark' => '-webkit-text-stroke-color: {{VALUE}}; text-stroke-color: {{VALUE}};',
1355 - ],
1356 - ]
1357 - );
1358 -
1359 - $this->add_control(
1360 - 'water_mark_stroke_width',
1361 - [
1362 - 'label' => esc_html__('Stroke Width', 'easy-elements'),
1363 - 'type' => \Elementor\Controls_Manager::SLIDER,
1364 - 'size_units' => ['px', 'em'],
1365 - 'default' => [
1366 - 'size' => 1,
1367 - 'unit' => 'px',
1368 - ],
1369 - 'range' => [
1370 - 'px' => ['min' => 0, 'max' => 10, 'step' => 0.1],
1371 - 'em' => ['min' => 0, 'max' => 1, 'step' => 0.01],
1372 - ],
1373 - 'selectors' => [
1374 - '{{WRAPPER}} .eel-watermark' => '-webkit-text-stroke-width: {{SIZE}}{{UNIT}}; text-stroke-width: {{SIZE}}{{UNIT}};',
1375 - ],
1376 - ]
1377 - );
1378 -
1379 - $this->add_group_control(
1380 - \Elementor\Group_Control_Text_Shadow::get_type(),
1381 - [
1382 - 'name' => 'water_mark_text_shadow',
1383 - 'label' => esc_html__('Text Shadow', 'easy-elements'),
1384 - 'selector' => '{{WRAPPER}} .eel-watermark',
1385 - ]
1386 - );
1387 -
1388 - // Background & Box
1389 - $this->add_control(
1390 - 'water_mark_box_heading',
1391 - [
1392 - 'label' => esc_html__('Box', 'easy-elements'),
1393 - 'type' => \Elementor\Controls_Manager::HEADING,
1394 - 'separator' => 'before',
1395 - ]
1396 - );
1397 -
1398 - $this->add_group_control(
1399 - Group_Control_Background::get_type(),
1400 - [
1401 - 'name' => 'water_mark_background',
1402 - 'label' => esc_html__('Background', 'easy-elements'),
1403 - 'types' => ['classic', 'gradient'],
1404 - 'selector' => '{{WRAPPER}} .eel-watermark',
1405 - ]
1406 - );
1407 -
1408 - $this->add_group_control(
1409 - \Elementor\Group_Control_Border::get_type(),
1410 - [
1411 - 'name' => 'water_mark_border',
1412 - 'label' => esc_html__('Border', 'easy-elements'),
1413 - 'selector' => '{{WRAPPER}} .eel-watermark',
1414 - ]
1415 - );
1416 -
1417 - $this->add_responsive_control(
1418 - 'water_mark_border_radius',
1419 - [
1420 - 'label' => esc_html__('Border Radius', 'easy-elements'),
1421 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1422 - 'size_units' => ['px', '%', 'em'],
1423 - 'selectors' => [
1424 - '{{WRAPPER}} .eel-watermark' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1425 - ],
1426 - ]
1427 - );
1428 -
1429 - $this->add_responsive_control(
1430 - 'water_mark_padding',
1431 - [
1432 - 'label' => esc_html__('Padding', 'easy-elements'),
1433 - 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1434 - 'size_units' => ['px', '%', 'em'],
1435 - 'selectors' => [
1436 - '{{WRAPPER}} .eel-watermark' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1437 - ],
1438 - ]
1439 - );
1440 -
1441 - $this->add_group_control(
1442 - \Elementor\Group_Control_Box_Shadow::get_type(),
1443 - [
1444 - 'name' => 'water_mark_box_shadow',
1445 - 'label' => esc_html__('Box Shadow', 'easy-elements'),
1446 - 'selector' => '{{WRAPPER}} .eel-watermark',
1447 - ]
1448 - );
1449 -
1450 - // Position & Effects
1451 - $this->add_control(
1452 - 'water_mark_position_heading',
1453 - [
1454 - 'label' => esc_html__('Position & Effects', 'easy-elements'),
1455 - 'type' => \Elementor\Controls_Manager::HEADING,
1456 - 'separator' => 'before',
1457 - ]
1458 - );
1459 -
1460 - $this->add_responsive_control(
1461 - 'water_mark_top',
1462 - [
1463 - 'label' => esc_html__('Top / Bottom', 'easy-elements'),
1464 - 'type' => \Elementor\Controls_Manager::SLIDER,
1465 - 'size_units' => ['px', '%', 'em'],
1466 - 'range' => [
1467 - 'px' => ['min' => -500, 'max' => 500],
1468 - '%' => ['min' => -100, 'max' => 100],
1469 - 'em' => ['min' => -50, 'max' => 50],
1470 - ],
1471 - 'selectors' => [
1472 - '{{WRAPPER}} .eel-watermark' => 'top: {{SIZE}}{{UNIT}}; bottom: auto;',
1473 - ],
1474 - ]
1475 - );
1476 -
1477 - $this->add_responsive_control(
1478 - 'water_mark_left',
1479 - [
1480 - 'label' => esc_html__('Left / Right', 'easy-elements'),
1481 - 'type' => \Elementor\Controls_Manager::SLIDER,
1482 - 'size_units' => ['px', '%', 'em'],
1483 - 'range' => [
1484 - 'px' => ['min' => -500, 'max' => 500],
1485 - '%' => ['min' => 0, 'max' => 100],
1486 - 'em' => ['min' => 0, 'max' => 50],
1487 - ],
1488 - 'selectors' => [
1489 - '{{WRAPPER}} .eel-watermark' => 'left: {{SIZE}}{{UNIT}}; right: auto;',
1490 - ],
1491 - ]
1492 - );
1493 -
1494 - $this->add_responsive_control(
1495 - 'water_mark_z_index',
1496 - [
1497 - 'label' => esc_html__('Z-Index', 'easy-elements'),
1498 - 'type' => \Elementor\Controls_Manager::SLIDER,
1499 - 'default' => [
1500 - 'size' => -1,
1501 - ],
1502 - 'range' => [
1503 - 'px' => [
1504 - 'min' => -10,
1505 - 'max' => 9999,
1506 - ],
1507 - ],
1508 - 'description' => esc_html__('Use a negative value (e.g. -1) to keep the watermark behind the heading.', 'easy-elements'),
1509 - 'selectors' => [
1510 - '{{WRAPPER}} .eel-watermark' => 'z-index: {{SIZE}};',
1511 - ],
1512 - ]
1513 - );
1514 -
1515 - $this->add_responsive_control(
1516 - 'water_mark_rotation',
1517 - [
1518 - 'label' => esc_html__('Rotation', 'easy-elements'),
1519 - 'type' => \Elementor\Controls_Manager::SLIDER,
1520 - 'size_units' => ['deg'],
1521 - 'range' => [
1522 - 'deg' => ['min' => -360, 'max' => 360, 'step' => 1],
1523 - ],
1524 - 'default' => [
1525 - 'size' => '',
1526 - 'unit' => 'deg',
1527 - ],
1528 - 'selectors' => [
1529 - '{{WRAPPER}} .eel-watermark' => 'transform: translateY(-50%) rotate({{SIZE}}deg);',
1530 - ],
1531 - ]
1532 - );
1533 -
1534 - $this->add_control(
1535 - 'water_mark_opacity',
1536 - [
1537 - 'label' => esc_html__('Opacity', 'easy-elements'),
1538 - 'type' => \Elementor\Controls_Manager::SLIDER,
1539 - 'size_units' => ['%'],
1540 - 'range' => [
1541 - '%' => ['min' => 0, 'max' => 1, 'step' => 0.01],
1542 - ],
1543 - 'default' => [
1544 - 'size' => '',
1545 - 'unit' => '%',
1546 - ],
1547 - 'selectors' => [
1548 - '{{WRAPPER}} .eel-watermark' => 'opacity: {{SIZE}};',
1549 - ],
1550 - ]
1551 - );
1552 -
1553 - $this->add_control(
1554 - 'water_mark_blend_mode',
1555 - [
1556 - 'label' => esc_html__('Blend Mode', 'easy-elements'),
1557 - 'type' => \Elementor\Controls_Manager::SELECT,
1558 - 'options' => [
1559 - '' => esc_html__('Default', 'easy-elements'),
1560 - 'normal' => 'Normal',
1561 - 'multiply' => 'Multiply',
1562 - 'screen' => 'Screen',
1563 - 'overlay' => 'Overlay',
1564 - 'darken' => 'Darken',
1565 - 'lighten' => 'Lighten',
1566 - 'color-dodge' => 'Color Dodge',
1567 - 'color-burn' => 'Color Burn',
1568 - 'hard-light' => 'Hard Light',
1569 - 'soft-light' => 'Soft Light',
1570 - 'difference' => 'Difference',
1571 - 'exclusion' => 'Exclusion',
1572 - 'hue' => 'Hue',
1573 - 'saturation' => 'Saturation',
1574 - 'color' => 'Color',
1575 - 'luminosity' => 'Luminosity',
1576 - ],
1577 - 'selectors' => [
1578 - '{{WRAPPER}} .eel-watermark' => 'mix-blend-mode: {{VALUE}};',
1579 - ],
1580 - ]
1581 - );
1582 -
1583 - $this->end_controls_section();
1584 - }
1585 -
1586 - protected function render_separator( $settings ) {
1587 - if ( ! empty( $settings['separator_'] ) && in_array( $settings['separator_'], ['dotted', 'solid'], true ) ) {
1588 - echo '<div class="eel--separator-icon ' . esc_attr( $settings['separator_'] ) . '"></div>';
1589 - }
1590 -
1591 - if ( 'icon' === $settings['separator_'] && ! empty( $settings['select_icon_']['value'] ) ) {
1592 - echo '<div class="eel--separator-icon-wrap">';
1593 - \Elementor\Icons_Manager::render_icon( $settings['select_icon_'], [ 'aria-hidden' => 'true' ] );
1594 - echo '</div>';
1595 - }
1596 - if ( isset( $settings['separator_'] ) && 'image' === $settings['separator_'] && ! empty( $settings['sep_image']['url'] ) ) {
1597 - echo '<div class="eel--separator-icon-wrap">';
1598 - printf(
1599 - '<img src="%s" alt="%s" title="%s" class="eel-separator-img" loading="lazy" decoding="async" />',
1600 - esc_url( $settings['sep_image']['url'] ),
1601 - esc_attr__( 'Separator Image', 'easy-elements' ),
1602 - esc_attr__( 'Separator Image', 'easy-elements' )
1603 - );
1604 -
1605 - echo '</div>';
1606 - }
1607 - }
1608 -
1609 - protected function render() {
1610 - $settings = $this->get_settings_for_display();
1611 -
1612 - $tag = isset($settings['title_tag']) ? $settings['title_tag'] : 'h2';
1613 - $title = preg_replace_callback( '/\{\{(.*?)\}\}/', function( $matches ) {
1614 - return '<span>' . esc_html( trim( $matches[1] ) ) . '</span>';
1615 - }, $settings['title'] );
1616 -
1617 - if ( ! empty( $settings['link']['url'] ) ) {
1618 - $this->add_link_attributes( 'title_link', $settings['link'] );
1619 - $title = sprintf(
1620 - '<a %s>%s</a>',
1621 - $this->get_render_attribute_string( 'title_link' ),
1622 - $title
1623 - );
1624 - }
1625 -
1626 - $border_position = $settings['border_position'] ?? '';
1627 - $unique_id = 'eel-heading-' . $this->get_id();
1628 - $animation = isset( $settings['animation_type'] ) && ! empty($settings['animation_type']) ? $settings['animation_type'] : '';
1629 - $watermark_class = ! empty( $settings['water_mark'] ) ? 'has-watermark' : '';
1630 - ?>
1631 - <div class="e-e-heading <?php echo esc_attr( trim( $border_position . ' ' . $watermark_class ) ); ?>" <?php if(!empty($animation)) : ?>
1632 - data-eel-animation="<?php echo esc_attr($animation); ?>"
1633 - <?php endif; ?>>
1634 - <?php
1635 - $icon_direction = $settings['icon_direction'] ?? '' ;
1636 - $separator_position = ! empty( $settings['separator_position'] ) ? $settings['separator_position'] : 'default';
1637 -
1638 - if ( in_array( $separator_position, ['top'], true ) ) {
1639 - if ( ! empty( $settings['separator_'] ) ) {
1640 - $this->render_separator( $settings );
1641 - }
1642 - }
1643 -
1644 - if ( ! empty( $settings['sub_title'] ) ) : ?>
1645 - <div class="eel-sub-heading <?php echo esc_attr($icon_direction); ?> <?php echo esc_attr($settings['show_gradient_border'] == 'yes' ? 'easy_gradiant_border' : ''); ?>">
1646 - <?php
1647 - $this->add_inline_editing_attributes( 'sub_title' );
1648 - if ( 'icon' === $settings['sub_heading_type'] && ! empty( $settings['sub_heading_icon']['value'] ) ) {
1649 - \Elementor\Icons_Manager::render_icon( $settings['sub_heading_icon'], [ 'aria-hidden' => 'true' ] );
1650 - } elseif ( 'image' === $settings['sub_heading_type'] && ! empty( $settings['sub_heading_image']['url'] ) ) {
1651 - if ( ! empty( $settings['sub_heading_image']['id'] ) ) {
1652 - echo wp_get_attachment_image(
1653 - $settings['sub_heading_image']['id'],
1654 - 'full',
1655 - false,
1656 - ['alt' => $settings['sub_heading_image']['alt'] ?? '']
1657 - );
1658 - } elseif ( ! empty( $settings['sub_heading_image']['url'] ) ) {
1659 - echo '<img src="' . esc_url( $settings['sub_heading_image']['url'] ) . '" alt="">';
1660 - }
1661 - }
1662 -
1663 - ?>
1664 - <span class="elementor-inline-editing" <?php
1665 - // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1666 - echo $this->get_render_attribute_string( 'sub_title' ); ?>>
1667 - <?php
1668 - echo wp_kses_post( $settings['sub_title'] );
1669 - ?>
1670 - </span>
1671 - </div>
1672 - <?php endif;
1673 -
1674 - if ( in_array( $separator_position, ['above'], true ) ) {
1675 - if ( ! empty( $settings['separator_'] ) ) {
1676 - $this->render_separator( $settings );
1677 - }
1678 - }
1679 -
1680 - $allowed_tags = ['h1','h2','h3','h4','h5','h6','div','span'];
1681 - $tag = in_array(strtolower($tag), $allowed_tags, true) ? strtolower($tag) : 'div';
1682 -
1683 -
1684 - if ( ! empty( $title ) ) {
1685 - $gradient_class = ! empty( $settings['show_gradient_title'] ) ? ' e-e-gradient-title' : '';
1686 - $image_fill_class = ( ! empty( $settings['enable_title_image_fill'] ) ) ? ' e-e-image-fill' : '';
1687 - $tag_class = 'e-e-title elementor-inline-editing' . $gradient_class . $image_fill_class;
1688 -
1689 - // Inline editing attribute add
1690 - $this->add_inline_editing_attributes( 'title' );
1691 -
1692 - printf(
1693 - '<%1$s class="%2$s" %3$s>%4$s</%1$s>',
1694 - esc_html( $tag ),
1695 - esc_attr( $tag_class ),
1696 - // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1697 - $this->get_render_attribute_string( 'title' ),
1698 - wp_kses_post( $title )
1699 - );
1700 - }
1701 -
1702 -
1703 -
1704 - if ( in_array( $separator_position, ['below'], true ) ) {
1705 - if ( ! empty( $settings['separator_'] ) ) {
1706 - $this->render_separator( $settings );
1707 - }
1708 - }
1709 -
1710 - if ( ! empty( $settings['description'] ) ) {
1711 - $this->add_inline_editing_attributes( 'description' );
1712 - ?>
1713 - <div class="e-e-description elementor-inline-editing" <?php
1714 - // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1715 - echo $this->get_render_attribute_string( 'description' ); ?>>
1716 - <?php echo wp_kses_post( $settings['description'] ); ?>
1717 - </div>
1718 - <?php }
1719 - if ( in_array( $separator_position, ['bottom'], true ) ) {
1720 - if ( ! empty( $settings['separator_'] ) ) {
1721 - $this->render_separator( $settings );
1722 - }
1723 - }
1724 -
1725 - if ( ! empty( $settings['water_mark'] ) ) {
1726 - echo '<div class="eel-watermark">';
1727 - echo esc_html( $settings['water_mark'] );
1728 - echo '</div>';
1729 - }
1730 -
1731 - ?>
1732 - </div>
1733 - <?php }
1734 -}
1 +<?php
2 +use Elementor\Controls_Manager;
3 +use Elementor\Group_Control_Typography;
4 +use Elementor\Widget_Base;
5 +use Elementor\Group_Control_Background;
6 +
7 +if ( ! defined( 'ABSPATH' ) ) {
8 + exit;
9 +}
10 +
11 +class Easyel_Heading_Widget extends \Elementor\Widget_Base {
12 +
13 + public function get_style_depends() {
14 + $handle = 'eel-heading-style';
15 + $css_path = plugin_dir_path( __FILE__ ) . 'css/heading.min.css';
16 +
17 + if ( ! wp_style_is( $handle, 'registered' ) && file_exists( $css_path ) ) {
18 + wp_register_style( $handle, plugins_url( 'css/heading.min.css', __FILE__ ), [], defined( 'WP_DEBUG' ) && WP_DEBUG ? filemtime( $css_path ) : '1.0.0' );
19 + }
20 + return [ $handle ];
21 + }
22 +
23 + public function get_name() {
24 + return 'eel-heading';
25 + }
26 +
27 + public function get_title() {
28 + return __( 'Heading', 'easy-elements' );
29 + }
30 +
31 + public function get_icon() {
32 + return 'easyicon easyelIcon-heading';
33 + }
34 +
35 + public function get_categories() {
36 + return [ 'easyelements_category' ];
37 + }
38 + public function get_keywords() {
39 + return [ 'heading', 'title', 'link', 'click', 'text' ];
40 + }
41 +
42 + protected function register_controls() {
43 + $this->start_controls_section(
44 + 'content_section',
45 + [
46 + 'label' => esc_html__('Heading Settings', 'easy-elements'),
47 + 'tab' => Controls_Manager::TAB_CONTENT,
48 + ]
49 + );
50 +
51 + $this->add_control(
52 + 'title',
53 + [
54 + 'label' => esc_html__('Heading Text', 'easy-elements'),
55 + 'type' => Controls_Manager::TEXTAREA,
56 + 'default' => esc_html__('Heading Here', 'easy-elements'),
57 + 'label_block' => true,
58 + 'description' => esc_html__('You can highlight part of the text using double curly brackets. Example: Heading {{Here}} will highlight "Here".', 'easy-elements'),
59 + ]
60 + );
61 +
62 + $this->add_control(
63 + 'show_border_title',
64 + [
65 + 'label' => esc_html__( 'Show Border', 'easy-elements' ),
66 + 'type' => \Elementor\Controls_Manager::SWITCHER,
67 + 'label_on' => esc_html__( 'Show', 'easy-elements' ),
68 + 'label_off' => esc_html__( 'Hide', 'easy-elements' ),
69 + 'return_value' => 'yes',
70 + 'default' => '',
71 + ]
72 + );
73 +
74 + $this->add_control(
75 + 'show_gradient_title',
76 + [
77 + 'label' => esc_html__( 'Gradient Text', 'easy-elements' ),
78 + 'type' => \Elementor\Controls_Manager::SWITCHER,
79 + 'label_on' => esc_html__( 'Show', 'easy-elements' ),
80 + 'label_off' => esc_html__( 'Hide', 'easy-elements' ),
81 + 'return_value' => 'yes',
82 + 'default' => '',
83 + ]
84 + );
85 +
86 + $this->add_control(
87 + 'border_position',
88 + [
89 + 'label' => esc_html__( 'Border Position', 'easy-elements' ),
90 + 'type' => \Elementor\Controls_Manager::SELECT,
91 + 'default' => 'eel_title_start',
92 + 'options' => [
93 + 'eel_title_start' => esc_html__( 'Only Start Title', 'easy-elements' ),
94 + 'eel_title_end' => esc_html__( 'Only Title End', 'easy-elements' ),
95 + 'eel_full_title_start' => esc_html__( 'Full Title Part Start', 'easy-elements' ),
96 + 'eel_full_title_end' => esc_html__( 'Full Title Part End', 'easy-elements' ),
97 + ],
98 + 'condition' => [
99 + 'show_border_title' => 'yes',
100 + ],
101 + ]
102 + );
103 +
104 +
105 + $this->add_control(
106 + 'border_color',
107 + [
108 + 'label' => esc_html__('Border Color', 'easy-elements'),
109 + 'type' => Controls_Manager::COLOR,
110 + 'selectors' => [
111 + '{{WRAPPER}} .eel_full_title_end, {{WRAPPER}} .eel_title_end .e-e-title, {{WRAPPER}} .eel_full_title_start, {{WRAPPER}} .eel_title_start .e-e-title' => 'border-color: {{VALUE}};',
112 + ],
113 + 'condition' => [
114 + 'show_border_title' => 'yes',
115 + ],
116 + ]
117 + );
118 +
119 + $this->add_responsive_control(
120 + 'title_border_padding',
121 + [
122 + 'label' => esc_html__( 'Padding', 'easy-elements' ),
123 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
124 + 'size_units' => [ 'px', '%', 'em' ],
125 + 'selectors' => [
126 + '{{WRAPPER}} .eel_full_title_end, {{WRAPPER}} .eel_title_end .e-e-title, {{WRAPPER}} .eel_full_title_start, {{WRAPPER}} .eel_title_start .e-e-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
127 + ],
128 + 'condition' => [
129 + 'show_border_title' => 'yes',
130 + ],
131 + ]
132 + );
133 +
134 +
135 + $this->add_control(
136 + 'link',
137 + [
138 + 'label' => __( 'Link', 'easy-elements' ),
139 + 'type' => \Elementor\Controls_Manager::URL,
140 + 'placeholder' => 'https://your-link.com',
141 + 'default' => [
142 + 'url' => '',
143 + 'is_external' => false,
144 + 'nofollow' => false,
145 + ],
146 + 'show_external' => true,
147 + 'description' => esc_html__( 'Set a URL to make the heading clickable. Supports opening in a new tab and nofollow attribute.', 'easy-elements' ),
148 + ]
149 + );
150 +
151 + $this->add_control(
152 + 'title_tag',
153 + [
154 + 'label' => esc_html__('Select Tag', 'easy-elements'),
155 + 'type' => Controls_Manager::SELECT,
156 + 'default' => 'h2',
157 + 'options' => [
158 + 'h1' => 'H1',
159 + 'h2' => 'H2',
160 + 'h3' => 'H3',
161 + 'h4' => 'H4',
162 + 'h5' => 'H5',
163 + 'h6' => 'H6',
164 + 'div' => 'div',
165 + ],
166 + ]
167 + );
168 +
169 + $this->add_control(
170 + 'description',
171 + [
172 + 'label' => esc_html__('Description', 'easy-elements'),
173 + 'type' => Controls_Manager::TEXTAREA,
174 + 'label_block' => true,
175 + ]
176 + );
177 +
178 +
179 + $this->add_responsive_control(
180 + 'align',
181 + [
182 + 'label' => esc_html__('Alignment', 'easy-elements'),
183 + 'type' => Controls_Manager::CHOOSE,
184 + 'options' => [
185 + 'left' => [
186 + 'title' => esc_html__('Left', 'easy-elements'),
187 + 'icon' => 'eicon-text-align-left',
188 + ],
189 + 'center' => [
190 + 'title' => esc_html__('Center', 'easy-elements'),
191 + 'icon' => 'eicon-text-align-center',
192 + ],
193 + 'right' => [
194 + 'title' => esc_html__('Right', 'easy-elements'),
195 + 'icon' => 'eicon-text-align-right',
196 + ],
197 + 'justify' => [
198 + 'title' => esc_html__('Justify', 'easy-elements'),
199 + 'icon' => 'eicon-text-align-justify',
200 + ],
201 + ],
202 + 'toggle' => true,
203 + 'selectors' => [
204 + '{{WRAPPER}} .e-e-heading' => 'text-align: {{VALUE}}',
205 + '{{WRAPPER}} .image-heading' => 'justify-content: {{VALUE}}',
206 + ],
207 + ]
208 + );
209 +
210 + $this->end_controls_section();
211 +
212 + $this->start_controls_section(
213 + 'sub_heading_section',
214 + [
215 + 'label' => esc_html__('Sub Heading Settings', 'easy-elements'),
216 + 'tab' => Controls_Manager::TAB_CONTENT,
217 + ]
218 + );
219 +
220 + $this->add_control(
221 + 'sub_title',
222 + [
223 + 'label' => esc_html__( 'Sub Heading', 'easy-elements' ),
224 + 'type' => \Elementor\Controls_Manager::TEXTAREA,
225 + 'label_block' => true,
226 + ]
227 + );
228 +
229 + $this->add_control(
230 + 'show_gradient_border',
231 + [
232 + 'label' => esc_html__( 'Show Gradient Border', 'easy-elements' ),
233 + 'type' => \Elementor\Controls_Manager::SWITCHER,
234 + 'label_on' => esc_html__( 'Show', 'easy-elements' ),
235 + 'label_off' => esc_html__( 'Hide', 'easy-elements' ),
236 + 'return_value' => 'yes',
237 + 'default' => '',
238 + ]
239 + );
240 +
241 + $this->add_control(
242 + 'gradient_color_1',
243 + [
244 + 'label' => esc_html__( 'Gradient Color 1', 'easy-elements' ),
245 + 'type' => \Elementor\Controls_Manager::COLOR,
246 + 'default' => 'rgba(0, 0, 0, 0.15)',
247 + 'selectors' => [
248 + '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-color-1: {{VALUE}};',
249 + ],
250 + 'condition' => [
251 + 'show_gradient_border' => 'yes',
252 + ],
253 + ]
254 + );
255 +
256 + $this->add_control(
257 + 'gradient_color_2',
258 + [
259 + 'label' => esc_html__( 'Gradient Color 2', 'easy-elements' ),
260 + 'type' => \Elementor\Controls_Manager::COLOR,
261 + 'default' => 'rgba(0, 0, 0, 0.30)',
262 + 'selectors' => [
263 + '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-color-2: {{VALUE}};',
264 + ],
265 + 'condition' => [
266 + 'show_gradient_border' => 'yes',
267 + ],
268 + ]
269 + );
270 +
271 + $this->add_control(
272 + 'gradient_color_3',
273 + [
274 + 'label' => esc_html__( 'Gradient Color 3', 'easy-elements' ),
275 + 'type' => \Elementor\Controls_Manager::COLOR,
276 + 'default' => 'rgba(0, 0, 0, 0.50)',
277 + 'selectors' => [
278 + '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-color-3: {{VALUE}};',
279 + ],
280 + 'condition' => [
281 + 'show_gradient_border' => 'yes',
282 + ],
283 + ]
284 + );
285 +
286 +
287 + $this->add_responsive_control(
288 + 'sub_gradient_border_padding',
289 + [
290 + 'label' => __('Gradient Border Padding', 'easy-elements'),
291 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
292 + 'size_units' => ['px', '%', 'em'],
293 + 'selectors' => [
294 + '{{WRAPPER}} .easy_gradiant_border' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
295 + ],
296 + 'condition' => [
297 + 'show_gradient_border' => 'yes',
298 + ],
299 + ]
300 + );
301 +
302 + $this->add_responsive_control(
303 + 'gradient_border_radius',
304 + [
305 + 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
306 + 'type' => \Elementor\Controls_Manager::SLIDER,
307 + 'size_units' => [ 'px', '%' ],
308 + 'range' => [
309 + 'px' => [
310 + 'min' => 0,
311 + 'max' => 200,
312 + ],
313 + '%' => [
314 + 'min' => 0,
315 + 'max' => 100,
316 + ],
317 + ],
318 + 'default' => [
319 + 'unit' => 'px',
320 + 'size' => 40,
321 + ],
322 + 'selectors' => [
323 + '{{WRAPPER}} .easy_gradiant_border::before' => '--grad-border-radius: {{SIZE}}{{UNIT}};',
324 + ],
325 + ]
326 + );
327 +
328 +
329 + $this->add_control(
330 + 'sub_heading_type',
331 + [
332 + 'label' => esc_html__( 'Sub Heading Type', 'easy-elements' ),
333 + 'type' => \Elementor\Controls_Manager::CHOOSE,
334 + 'options' => [
335 + 'none' => [
336 + 'title' => esc_html__( 'None', 'easy-elements' ),
337 + 'icon' => 'eicon-ban',
338 + ],
339 + 'icon' => [
340 + 'title' => esc_html__( 'Icon', 'easy-elements' ),
341 + 'icon' => 'eicon-star',
342 + ],
343 + 'image' => [
344 + 'title' => esc_html__( 'Image', 'easy-elements' ),
345 + 'icon' => 'eicon-image-bold',
346 + ],
347 + ],
348 + 'default' => 'none',
349 + 'toggle' => false,
350 + ]
351 + );
352 +
353 + $this->add_control(
354 + 'sub_heading_icon',
355 + [
356 + 'label' => esc_html__( 'Select Icon', 'easy-elements' ),
357 + 'type' => \Elementor\Controls_Manager::ICONS,
358 + 'default' => [
359 + 'value' => 'fas fa-heart',
360 + 'library' => 'fa-solid',
361 + ],
362 + 'condition' => [
363 + 'sub_heading_type' => 'icon',
364 + ],
365 + ]
366 + );
367 +
368 + $this->add_control(
369 + 'sub_heading_image',
370 + [
371 + 'label' => esc_html__( 'Upload Image', 'easy-elements' ),
372 + 'type' => \Elementor\Controls_Manager::MEDIA,
373 + 'default' => [
374 + 'url' => \Elementor\Utils::get_placeholder_image_src(),
375 + ],
376 + 'condition' => [
377 + 'sub_heading_type' => 'image',
378 + ],
379 + ]
380 + );
381 +
382 + $this->add_control(
383 + 'icon_color',
384 + [
385 + 'label' => esc_html__('Color', 'easy-elements'),
386 + 'type' => Controls_Manager::COLOR,
387 + 'selectors' => [
388 + '{{WRAPPER}} .eel-sub-heading i, {{WRAPPER}} .eel-sub-heading svg' => 'color: {{VALUE}}; fill: {{VALUE}};',
389 + ],
390 + 'condition' => [
391 + 'sub_heading_type' => ['icon'],
392 + ],
393 + ]
394 + );
395 +
396 + $this->add_responsive_control(
397 + 'sub_heading_icon_margin',
398 + [
399 + 'label' => esc_html__( 'Icon Spacing', 'easy-elements' ),
400 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
401 + 'size_units' => [ 'px', '%', 'em' ],
402 + 'selectors' => [
403 + '{{WRAPPER}} .eel-sub-heading span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
404 + ],
405 + 'condition' => [
406 + 'sub_heading_type' => ['image', 'icon'],
407 + ],
408 + ]
409 + );
410 +
411 + $this->add_control(
412 + 'icon_direction',
413 + [
414 + 'label' => esc_html__( 'Direction', 'easy-elements' ),
415 + 'type' => \Elementor\Controls_Manager::CHOOSE,
416 + 'default' => 'top',
417 + 'options' => [
418 + 'left' => [
419 + 'title' => esc_html__( 'Left', 'easy-elements' ),
420 + 'icon' => 'eicon-h-align-left',
421 + ],
422 + 'top' => [
423 + 'title' => esc_html__( 'Top', 'easy-elements' ),
424 + 'icon' => 'eicon-v-align-top',
425 + ],
426 + 'right' => [
427 + 'title' => esc_html__( 'Right', 'easy-elements' ),
428 + 'icon' => 'eicon-h-align-right',
429 + ],
430 + ],
431 + 'toggle' => false,
432 + ]
433 + );
434 + $this->end_controls_section();
435 +
436 + $this->start_controls_section(
437 + 'separator_section',
438 + [
439 + 'label' => esc_html__('Separator Settings', 'easy-elements'),
440 + 'tab' => Controls_Manager::TAB_CONTENT,
441 + ]
442 + );
443 +
444 + $this->add_control(
445 + 'separator_',
446 + [
447 + 'label' => __( 'Choose Option', 'easy-elements' ),
448 + 'type' => \Elementor\Controls_Manager::SELECT,
449 + 'options' => [
450 + 'none' => __( 'None', 'easy-elements' ),
451 + 'dotted' => __( 'Dotted', 'easy-elements' ),
452 + 'solid' => __( 'Solid', 'easy-elements' ),
453 + 'icon' => __( 'Icon', 'easy-elements' ),
454 + 'image' => __( 'Image', 'easy-elements' ),
455 + ],
456 + 'default' => 'none',
457 + ]
458 + );
459 +
460 + $this->add_control(
461 + 'solid_color',
462 + [
463 + 'label' => esc_html__('Separator Color', 'easy-elements'),
464 + 'type' => \Elementor\Controls_Manager::COLOR,
465 + 'selectors' => [
466 + '{{WRAPPER}} .eel--separator-icon.dotted::before, {{WRAPPER}} .eel--separator-icon' => 'color: {{VALUE}}; background-color: {{VALUE}};',
467 + ],
468 + 'condition' => [
469 + 'separator_' => ['solid', 'dotted'],
470 + ],
471 + ]
472 + );
473 +
474 + $this->add_control(
475 + 'select_icon_',
476 + [
477 + 'label' => esc_html__( 'Select/Upload Icon', 'easy-elements' ),
478 + 'type' => \Elementor\Controls_Manager::ICONS,
479 + 'default' => [
480 + 'value' => 'fas fa-heart',
481 + 'library' => 'fa-solid',
482 + ],
483 + 'description' => esc_html__( 'You can upload an SVG image or choose a font icon.', 'easy-elements' ),
484 + 'condition' => [
485 + 'separator_' => ['icon'],
486 + ],
487 + ]
488 + );
489 +
490 + $this->add_control(
491 + 'sep_image',
492 + [
493 + 'label' => esc_html__( 'Upload Image', 'easy-elements' ),
494 + 'type' => \Elementor\Controls_Manager::MEDIA,
495 + 'default' => [
496 + 'url' => \Elementor\Utils::get_placeholder_image_src(),
497 + ],
498 + 'condition' => [
499 + 'separator_' => 'image',
500 + ],
501 + ]
502 + );
503 +
504 + $this->add_control(
505 + 'separator_position',
506 + [
507 + 'label' => esc_html__( 'Position', 'easy-elements' ),
508 + 'type' => \Elementor\Controls_Manager::SELECT,
509 + 'default' => 'below',
510 + 'options' => [
511 + 'top' => esc_html__( 'Top', 'easy-elements' ),
512 + 'above' => esc_html__( 'Above Title', 'easy-elements' ),
513 + 'below' => esc_html__( 'Title Below', 'easy-elements' ),
514 + 'bottom' => esc_html__( 'Bottom', 'easy-elements' ),
515 + ],
516 + ]
517 + );
518 +
519 + $this->add_control(
520 + 'separator_margin',
521 + [
522 + 'label' => esc_html__( 'Margin', 'easy-elements' ),
523 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
524 + 'size_units' => [ 'px', '%', 'em' ],
525 + 'selectors' => [
526 + '{{WRAPPER}} .eel--separator-icon, {{WRAPPER}} .eel--separator-icon-wrap' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
527 + ],
528 + ]
529 + );
530 +
531 + $this->end_controls_section();
532 +
533 +
534 + $this->start_controls_section(
535 + 'water_mark_section',
536 + [
537 + 'label' => esc_html__('WaterMark Settings', 'easy-elements'),
538 + 'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
539 + ]
540 + );
541 +
542 + $this->add_control(
543 + 'water_mark',
544 + [
545 + 'label' => esc_html__('WaterMark Text', 'easy-elements'),
546 + 'type' => \Elementor\Controls_Manager::TEXTAREA,
547 + 'label_block' => 'true',
548 + ]
549 + );
550 +
551 + $this->add_control(
552 + 'water_mark_font_size',
553 + [
554 + 'label' => esc_html__('Font Size', 'easy-elements'),
555 + 'type' => \Elementor\Controls_Manager::SLIDER,
556 + 'size_units' => ['px', 'em', 'rem', '%'],
557 + 'range' => [
558 + 'px' => ['min' => 10, 'max' => 300],
559 + 'em' => ['min' => 0.5, 'max' => 20],
560 + 'rem' => ['min' => 0.5, 'max' => 20],
561 + '%' => ['min' => 10, 'max' => 500],
562 + ],
563 + 'default' => [
564 + 'size' => '',
565 + 'unit' => 'px',
566 + ],
567 + 'selectors' => [
568 + '{{WRAPPER}} .eel-watermark' => 'font-size: {{SIZE}}{{UNIT}};',
569 + ],
570 + ]
571 + );
572 +
573 + $this->add_control(
574 + '_mark_color',
575 + [
576 + 'label' => esc_html__('Color', 'easy-elements'),
577 + 'type' => \Elementor\Controls_Manager::COLOR,
578 + 'default' => '',
579 + 'selectors' => [
580 + '{{WRAPPER}} .eel-watermark' => 'color: {{VALUE}};',
581 + ],
582 + ]
583 + );
584 +
585 + $this->add_control(
586 + 'water_mark_color',
587 + [
588 + 'label' => esc_html__('Stroke Color', 'easy-elements'),
589 + 'type' => \Elementor\Controls_Manager::COLOR,
590 + 'default' => 'rgba(0, 0, 0, 0.3)',
591 + 'selectors' => [
592 + '{{WRAPPER}} .eel-watermark' => '-webkit-text-stroke-color: {{VALUE}}; text-stroke-color: {{VALUE}};',
593 + ],
594 + ]
595 + );
596 +
597 + $this->add_control(
598 + 'water_mark_stroke_width',
599 + [
600 + 'label' => esc_html__('Stroke Width (px)', 'easy-elements'),
601 + 'type' => \Elementor\Controls_Manager::SLIDER,
602 + 'default' => [
603 + 'size' => 1,
604 + 'unit' => 'px',
605 + ],
606 + 'range' => [
607 + 'px' => [
608 + 'min' => 0,
609 + 'max' => 10,
610 + ],
611 + ],
612 + 'selectors' => [
613 + '{{WRAPPER}} .eel-watermark' => '-webkit-text-stroke-width: {{SIZE}}{{UNIT}}; text-stroke-width: {{SIZE}}{{UNIT}};',
614 + ],
615 + ]
616 + );
617 +
618 + $this->add_responsive_control(
619 + 'water_mark_top',
620 + [
621 + 'label' => esc_html__('Top / Bottom', 'easy-elements'),
622 + 'type' => \Elementor\Controls_Manager::SLIDER,
623 + 'size_units' => ['px', '%', 'em'],
624 + 'range' => [
625 + 'px' => ['min' => -500, 'max' => 500],
626 + '%' => ['min' => -100, 'max' => 100],
627 + 'em' => ['min' => -50, 'max' => 50],
628 + ],
629 + 'selectors' => [
630 + '{{WRAPPER}} .eel-watermark' => 'top: {{SIZE}}{{UNIT}};',
631 + ],
632 + ]
633 + );
634 +
635 + $this->add_responsive_control(
636 + 'water_mark_left',
637 + [
638 + 'label' => esc_html__('Left / Right', 'easy-elements'),
639 + 'type' => \Elementor\Controls_Manager::SLIDER,
640 + 'size_units' => ['px', '%', 'em'],
641 + 'range' => [
642 + 'px' => ['min' => -500, 'max' => 500],
643 + '%' => ['min' => 0, 'max' => 100],
644 + 'em' => ['min' => 0, 'max' => 50],
645 + ],
646 + 'selectors' => [
647 + '{{WRAPPER}} .eel-watermark' => 'left: {{SIZE}}{{UNIT}};',
648 + ],
649 + ]
650 + );
651 +
652 + $this->add_responsive_control(
653 + 'water_mark_z_index',
654 + [
655 + 'label' => esc_html__('Z-Index', 'easy-elements'),
656 + 'type' => \Elementor\Controls_Manager::SLIDER,
657 + 'default' => [
658 + 'size' => -1,
659 + ],
660 + 'range' => [
661 + 'px' => [
662 + 'min' => 0,
663 + 'max' => 9999,
664 + ],
665 + ],
666 + 'selectors' => [
667 + '{{WRAPPER}} .eel-watermark' => 'z-index: {{SIZE}};',
668 + ],
669 + ]
670 + );
671 +
672 +
673 + $this->end_controls_section();
674 +
675 +
676 +
677 + // Heading
678 + $this->start_controls_section(
679 + 'section_heading_style',
680 + [
681 + 'label' => esc_html__('Heading', 'easy-elements'),
682 + 'tab' => Controls_Manager::TAB_STYLE,
683 + ]
684 + );
685 +
686 + $this->add_control(
687 + 'title_color',
688 + [
689 + 'label' => esc_html__('Color', 'easy-elements'),
690 + 'type' => Controls_Manager::COLOR,
691 + 'selectors' => [
692 + '{{WRAPPER}} .e-e-heading .e-e-title' => 'color: {{VALUE}};',
693 + ],
694 + 'condition' => [
695 + 'show_gradient_title' => '',
696 + ],
697 + ]
698 + );
699 +
700 + $this->add_control(
701 + 'title_color_gradient_heading',
702 + [
703 + 'label' => esc_html__('Text Gradient Color', 'easy-elements'),
704 + 'type' => Controls_Manager::HEADING,
705 + 'separator' => 'before',
706 + 'condition' => [
707 + 'show_gradient_title' => 'yes',
708 + ]
709 + ]
710 + );
711 +
712 + $this->add_group_control(
713 + Group_Control_Background::get_type(),
714 + [
715 + 'name' => 'title_gradient_color',
716 + 'label' => __( 'Title Color', 'easy-elements' ),
717 + 'types' => [ 'classic', 'gradient' ],
718 + 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title.e-e-gradient-title',
719 + 'condition' => [
720 + 'show_gradient_title' => 'yes',
721 + ],
722 + ]
723 + );
724 +
725 +
726 + $this->add_group_control(
727 + Group_Control_Typography::get_type(),
728 + [
729 + 'name' => 'title_typography',
730 + 'label' => esc_html__('Typography', 'easy-elements'),
731 + 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title',
732 + ]
733 + );
734 + $this->add_control(
735 + 'title_opacity',
736 + [
737 + 'label' => esc_html__('Opacity', 'easy-elements'),
738 + 'type' => Controls_Manager::SLIDER,
739 + 'selectors' => [
740 + '{{WRAPPER}} .e-e-heading .e-e-title' => 'opacity: {{SIZE}};',
741 + ],
742 + 'default' => [
743 + 'size' => 1,
744 + 'unit' => 'px',
745 + ],
746 + ]
747 + );
748 +
749 + $this->add_control(
750 + 'title_text_stroke',
751 + [
752 + 'label' => esc_html__('Stroke Width', 'easy-elements'),
753 + 'type' => Controls_Manager::SLIDER,
754 + 'selectors' => [
755 + '{{WRAPPER}} .e-e-heading .e-e-title' => '-webkit-text-stroke-width: {{SIZE}}{{UNIT}};',
756 + ],
757 + 'default' => [
758 + 'size' => 0,
759 + 'unit' => 'px',
760 + ],
761 + ]
762 + );
763 + $this->add_control(
764 + 'title_text_stroke_color',
765 + [
766 + 'label' => esc_html__('Stroke Color', 'easy-elements'),
767 + 'type' => Controls_Manager::COLOR,
768 + 'selectors' => [
769 + '{{WRAPPER}} .e-e-heading .e-e-title' => '-webkit-text-stroke-color: {{VALUE}};',
770 + ],
771 + 'condition' => [
772 + 'title_text_stroke[size]!' => '',
773 + ],
774 + ]
775 + );
776 + // Text Shadow
777 + $this->add_group_control(
778 + \Elementor\Group_Control_Text_Shadow::get_type(),
779 + [
780 + 'name' => 'title_text_shadow',
781 + 'label' => esc_html__('Text Shadow', 'easy-elements'),
782 + 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title',
783 + ]
784 + );
785 + // Mix Blend Mode
786 + $this->add_control(
787 + 'title_blend_mode',
788 + [
789 + 'label' => esc_html__('Blend Mode', 'easy-elements'),
790 + 'type' => Controls_Manager::SELECT,
791 + 'options' => [
792 + '' => esc_html__('Default', 'easy-elements'),
793 + 'normal' => 'Normal',
794 + 'multiply' => 'Multiply',
795 + 'screen' => 'Screen',
796 + 'overlay' => 'Overlay',
797 + 'darken' => 'Darken',
798 + 'lighten' => 'Lighten',
799 + 'color-dodge' => 'Color Dodge',
800 + 'color-burn' => 'Color Burn',
801 + 'hard-light' => 'Hard Light',
802 + 'soft-light' => 'Soft Light',
803 + 'difference' => 'Difference',
804 + 'exclusion' => 'Exclusion',
805 + 'hue' => 'Hue',
806 + 'saturation' => 'Saturation',
807 + 'color' => 'Color',
808 + 'luminosity' => 'Luminosity',
809 + ],
810 + 'selectors' => [
811 + '{{WRAPPER}} .e-e-heading .e-e-title' => 'mix-blend-mode: {{VALUE}};',
812 + ],
813 + ]
814 + );
815 + $this->add_responsive_control(
816 + 'title_margin',
817 + [
818 + 'label' => esc_html__('Margin', 'easy-elements'),
819 + 'type' => Controls_Manager::DIMENSIONS,
820 + 'size_units' => ['px', 'em', '%'],
821 + 'selectors' => [
822 + '{{WRAPPER}} .e-e-heading .e-e-title' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
823 + ],
824 + ]
825 + );
826 +
827 + $this->add_responsive_control(
828 + 'title_padding',
829 + [
830 + 'label' => esc_html__('Padding', 'easy-elements'),
831 + 'type' => Controls_Manager::DIMENSIONS,
832 + 'size_units' => ['px', 'em', '%'],
833 + 'selectors' => [
834 + '{{WRAPPER}} .e-e-heading .e-e-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
835 + ],
836 + ]
837 + );
838 +
839 +
840 + $this->add_control(
841 + 'title_image_fill_heading',
842 + [
843 + 'label' => esc_html__('Image Fill (Text Mask)', 'easy-elements'),
844 + 'type' => Controls_Manager::HEADING,
845 + 'separator' => 'before',
846 + ]
847 + );
848 +
849 + $this->add_control(
850 + 'enable_title_image_fill',
851 + [
852 + 'label' => esc_html__('Enable Image Fill', 'easy-elements'),
853 + 'type' => \Elementor\Controls_Manager::SWITCHER,
854 + 'label_on' => esc_html__('Yes', 'easy-elements'),
855 + 'label_off' => esc_html__('No', 'easy-elements'),
856 + 'return_value' => 'yes',
857 + 'default' => '',
858 + ]
859 + );
860 +
861 + $this->add_group_control(
862 + Group_Control_Background::get_type(),
863 + [
864 + 'name' => 'title_image_fill_bg',
865 + 'label' => esc_html__('Image Fill', 'easy-elements'),
866 + 'types' => [ 'classic' ],
867 + 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title.e-e-image-fill, {{WRAPPER}} .e-e-heading .e-e-title.e-e-image-fill div',
868 + 'fields_options' => [
869 + 'background' => [
870 + 'default' => 'classic',
871 + ],
872 + 'classic' => [
873 + 'types' => [ 'image' ],
874 + ],
875 + ],
876 + 'condition' => [
877 + 'enable_title_image_fill' => 'yes',
878 + ],
879 + ]
880 + );
881 +
882 + $this->add_control(
883 + 'title_image_fill_note',
884 + [
885 + 'type' => Controls_Manager::RAW_HTML,
886 + 'raw' => __('Tip: Apply this only when you want the text to be filled with an image (the image will appear inside the text).', 'easy-elements'),
887 + 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info',
888 + ]
889 + );
890 +
891 + $this->end_controls_section();
892 +
893 + //Sub Heading
894 + $this->start_controls_section(
895 + 'section_sub_heading_style',
896 + [
897 + 'label' => esc_html__('Sub Heading', 'easy-elements'),
898 + 'tab' => Controls_Manager::TAB_STYLE,
899 + ]
900 + );
901 +
902 + $this->add_control(
903 + 'sub_heading_color',
904 + [
905 + 'label' => esc_html__('Color', 'easy-elements'),
906 + 'type' => Controls_Manager::COLOR,
907 + 'selectors' => [
908 + '{{WRAPPER}} .e-e-heading .eel-sub-heading span' => 'color: {{VALUE}};',
909 + ],
910 + ]
911 + );
912 +
913 + $this->add_group_control(
914 + \Elementor\Group_Control_Background::get_type(),
915 + [
916 + 'name' => 'background_subtext',
917 + 'types' => [ 'classic', 'gradient' ],
918 + 'selector' => '{{WRAPPER}} .eel-sub-heading.top',
919 + 'condition' => [
920 + 'icon_direction' => 'top',
921 + ],
922 + ]
923 + );
924 +
925 + $this->add_group_control(
926 + \Elementor\Group_Control_Background::get_type(),
927 + [
928 + 'name' => 'background_subtext_top',
929 + 'types' => [ 'classic', 'gradient' ],
930 + 'selector' => '{{WRAPPER}} .eel-sub-heading',
931 + 'condition' => [
932 + 'icon_direction' => ['left', 'right'],
933 + ],
934 + ]
935 + );
936 +
937 + $this->add_group_control(
938 + Group_Control_Typography::get_type(),
939 + [
940 + 'name' => 'sub_heading_typography',
941 + 'label' => esc_html__('Typography', 'easy-elements'),
942 + 'selector' => '{{WRAPPER}} .e-e-heading .eel-sub-heading span',
943 + ]
944 + );
945 +
946 + $this->add_group_control(
947 + \Elementor\Group_Control_Border::get_type(),
948 + [
949 + 'name' => 'subtext_border',
950 + 'label' => esc_html__( 'Border', 'easy-elements' ),
951 + 'selector' => '{{WRAPPER}} .eel-sub-heading',
952 + ]
953 + );
954 +
955 + $this->add_control(
956 + 'subtext_icon_size',
957 + [
958 + 'label' => esc_html__( 'Icon Size', 'easy-elements' ),
959 + 'type' => \Elementor\Controls_Manager::SLIDER,
960 + 'range' => [
961 + 'px' => [
962 + 'min' => 6,
963 + 'max' => 100,
964 + ],
965 + ],
966 + 'selectors' => [
967 + '{{WRAPPER}} .eel-sub-heading i, {{WRAPPER}} .eel-sub-heading svg' => 'font-size: {{SIZE}}{{UNIT}};',
968 + ],
969 + 'description' => esc_html__( 'Adjust the icon size in pixels for the subheading icon.', 'easy-elements' ),
970 + 'condition' => [
971 + 'sub_heading_type' => 'icon',
972 + ],
973 + ]
974 + );
975 +
976 + $this->add_responsive_control(
977 + 'subtext_border_radius',
978 + [
979 + 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
980 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
981 + 'size_units' => [ 'px', '%', 'em' ],
982 + 'selectors' => [
983 + '{{WRAPPER}} .eel-sub-heading' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
984 + ],
985 + ]
986 + );
987 +
988 + $this->add_responsive_control(
989 + 'subtext_padding',
990 + [
991 + 'label' => esc_html__( 'Padding', 'easy-elements' ),
992 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
993 + 'size_units' => [ 'px', '%', 'em' ],
994 + 'selectors' => [
995 + '{{WRAPPER}} .eel-sub-heading' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
996 + ],
997 + ]
998 + );
999 +
1000 + $this->add_control(
1001 + 'sub_heading_margin',
1002 + [
1003 + 'label' => esc_html__( 'Margin', 'easy-elements' ),
1004 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1005 + 'size_units' => [ 'px', '%', 'em' ],
1006 + 'selectors' => [
1007 + '{{WRAPPER}} .eel-sub-heading' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1008 + ],
1009 + ]
1010 + );
1011 +
1012 + $this->end_controls_section();
1013 +
1014 +
1015 + // Highlight
1016 + $this->start_controls_section(
1017 + 'section_highlight_style',
1018 + [
1019 + 'label' => esc_html__('Highlight', 'easy-elements'),
1020 + 'tab' => Controls_Manager::TAB_STYLE,
1021 + ]
1022 + );
1023 + $this->add_control(
1024 + 'highlight_color',
1025 + [
1026 + 'label' => esc_html__('Color', 'easy-elements'),
1027 + 'type' => Controls_Manager::COLOR,
1028 + 'selectors' => [
1029 + '{{WRAPPER}} .e-e-heading .e-e-title span' => 'color: {{VALUE}};',
1030 + ],
1031 + ]
1032 + );
1033 +
1034 + $this->add_group_control(
1035 + \Elementor\Group_Control_Background::get_type(),
1036 + [
1037 + 'name' => 'background_highlight',
1038 + 'types' => [ 'classic', 'gradient' ],
1039 + 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title span',
1040 + ]
1041 + );
1042 +
1043 + $this->add_group_control(
1044 + Group_Control_Typography::get_type(),
1045 + [
1046 + 'name' => 'highlight_typography',
1047 + 'label' => esc_html__('Highlight Typography', 'easy-elements'),
1048 + 'selector' => '{{WRAPPER}} .e-e-heading .e-e-title span',
1049 + ]
1050 + );
1051 +
1052 + $this->add_responsive_control(
1053 + 'highlight_padding',
1054 + [
1055 + 'label' => esc_html__( 'Padding', 'easy-elements' ),
1056 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1057 + 'size_units' => [ 'px', '%', 'em' ],
1058 + 'selectors' => [
1059 + '{{WRAPPER}} .e-e-heading .e-e-title span' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1060 + ],
1061 + ]
1062 + );
1063 +
1064 + $this->add_control(
1065 + 'highlight_margin',
1066 + [
1067 + 'label' => esc_html__( 'Margin', 'easy-elements' ),
1068 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1069 + 'size_units' => [ 'px', '%', 'em' ],
1070 + 'selectors' => [
1071 + '{{WRAPPER}} .e-e-heading .e-e-title span' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1072 + ],
1073 + ]
1074 + );
1075 +
1076 + $this->add_responsive_control(
1077 + 'hithlight_border_radius',
1078 + [
1079 + 'label' => esc_html__( 'Border Radius', 'easy-elements' ),
1080 + 'type' => \Elementor\Controls_Manager::DIMENSIONS,
1081 + 'size_units' => [ 'px', '%', 'em' ],
1082 + 'selectors' => [
1083 + '{{WRAPPER}} .e-e-heading .e-e-title span' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1084 + ],
1085 + ]
1086 + );
1087 +
1088 + $this->end_controls_section();
1089 +
1090 + // Description
1091 + $this->start_controls_section(
1092 + 'section_description_style',
1093 + [
1094 + 'label' => esc_html__('Description', 'easy-elements'),
1095 + 'tab' => Controls_Manager::TAB_STYLE,
1096 + ]
1097 + );
1098 + $this->add_control(
1099 + 'description_color',
1100 + [
1101 + 'label' => esc_html__('Color', 'easy-elements'),
1102 + 'type' => Controls_Manager::COLOR,
1103 + 'selectors' => [
1104 + '{{WRAPPER}} .e-e-heading .e-e-description' => 'color: {{VALUE}};',
1105 + ],
1106 + ]
1107 + );
1108 + $this->add_group_control(
1109 + Group_Control_Typography::get_type(),
1110 + [
1111 + 'name' => 'description_typography',
1112 + 'label' => esc_html__('Title Typography', 'easy-elements'),
1113 + 'selector' => '{{WRAPPER}} .e-e-heading .e-e-description',
1114 + ]
1115 + );
1116 + $this->add_responsive_control(
1117 + 'description_margin',
1118 + [
1119 + 'label' => esc_html__('Margin', 'easy-elements'),
1120 + 'type' => Controls_Manager::DIMENSIONS,
1121 + 'size_units' => ['px', 'em', '%'],
1122 + 'selectors' => [
1123 + '{{WRAPPER}} .e-e-heading .e-e-description' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1124 + ],
1125 + ]
1126 + );
1127 + $this->add_responsive_control(
1128 + 'description_padding',
1129 + [
1130 + 'label' => esc_html__('Padding', 'easy-elements'),
1131 + 'type' => Controls_Manager::DIMENSIONS,
1132 + 'size_units' => ['px', 'em', '%'],
1133 + 'selectors' => [
1134 + '{{WRAPPER}} .e-e-heading .e-e-description' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
1135 + ],
1136 + ]
1137 + );
1138 + $this->end_controls_section();
1139 + }
1140 +
1141 + protected function render_separator( $settings ) {
1142 + if ( ! empty( $settings['separator_'] ) && in_array( $settings['separator_'], ['dotted', 'solid'], true ) ) {
1143 + echo '<div class="eel--separator-icon ' . esc_attr( $settings['separator_'] ) . '"></div>';
1144 + }
1145 +
1146 + if ( 'icon' === $settings['separator_'] && ! empty( $settings['select_icon_']['value'] ) ) {
1147 + echo '<div class="eel--separator-icon-wrap">';
1148 + \Elementor\Icons_Manager::render_icon( $settings['select_icon_'], [ 'aria-hidden' => 'true' ] );
1149 + echo '</div>';
1150 + }
1151 + if ( isset( $settings['separator_'] ) && 'image' === $settings['separator_'] && ! empty( $settings['sep_image']['url'] ) ) {
1152 + echo '<div class="eel--separator-icon-wrap">';
1153 + printf(
1154 + '<img src="%s" alt="%s" title="%s" class="eel-separator-img" loading="lazy" decoding="async" />',
1155 + esc_url( $settings['sep_image']['url'] ),
1156 + esc_attr__( 'Separator Image', 'easy-elements' ),
1157 + esc_attr__( 'Separator Image', 'easy-elements' )
1158 + );
1159 +
1160 + echo '</div>';
1161 + }
1162 + }
1163 +
1164 + protected function render() {
1165 + $settings = $this->get_settings_for_display();
1166 +
1167 + $tag = isset($settings['title_tag']) ? $settings['title_tag'] : 'h2';
1168 + $title = preg_replace_callback( '/\{\{(.*?)\}\}/', function( $matches ) {
1169 + return '<span>' . esc_html( trim( $matches[1] ) ) . '</span>';
1170 + }, $settings['title'] );
1171 +
1172 + if ( ! empty( $settings['link']['url'] ) ) {
1173 + $this->add_link_attributes( 'title_link', $settings['link'] );
1174 + $title = sprintf(
1175 + '<a %s>%s</a>',
1176 + $this->get_render_attribute_string( 'title_link' ),
1177 + $title
1178 + );
1179 + }
1180 +
1181 + $border_position = $settings['border_position'] ?? '';
1182 + $unique_id = 'eel-heading-' . $this->get_id();
1183 + $animation = isset( $settings['animation_type'] ) && ! empty($settings['animation_type']) ? $settings['animation_type'] : '';
1184 + ?>
1185 + <div class="e-e-heading <?php echo esc_attr($border_position); ?>" <?php if(!empty($animation)) : ?>
1186 + data-eel-animation="<?php echo esc_attr($animation); ?>"
1187 + <?php endif; ?>>
1188 + <?php
1189 + $icon_direction = $settings['icon_direction'] ?? '' ;
1190 + $separator_position = ! empty( $settings['separator_position'] ) ? $settings['separator_position'] : 'default';
1191 +
1192 + if ( in_array( $separator_position, ['top'], true ) ) {
1193 + if ( ! empty( $settings['separator_'] ) ) {
1194 + $this->render_separator( $settings );
1195 + }
1196 + }
1197 +
1198 + if ( ! empty( $settings['sub_title'] ) ) : ?>
1199 + <div class="eel-sub-heading <?php echo esc_attr($icon_direction); ?> <?php echo esc_attr($settings['show_gradient_border'] == 'yes' ? 'easy_gradiant_border' : ''); ?>">
1200 + <?php
1201 + $this->add_inline_editing_attributes( 'sub_title' );
1202 + if ( 'icon' === $settings['sub_heading_type'] && ! empty( $settings['sub_heading_icon']['value'] ) ) {
1203 + \Elementor\Icons_Manager::render_icon( $settings['sub_heading_icon'], [ 'aria-hidden' => 'true' ] );
1204 + } elseif ( 'image' === $settings['sub_heading_type'] && ! empty( $settings['sub_heading_image']['url'] ) ) {
1205 + if ( ! empty( $settings['sub_heading_image']['id'] ) ) {
1206 + echo wp_get_attachment_image(
1207 + $settings['sub_heading_image']['id'],
1208 + 'full',
1209 + false,
1210 + ['alt' => $settings['sub_heading_image']['alt'] ?? '']
1211 + );
1212 + } elseif ( ! empty( $settings['sub_heading_image']['url'] ) ) {
1213 + echo '<img src="' . esc_url( $settings['sub_heading_image']['url'] ) . '" alt="">';
1214 + }
1215 + }
1216 +
1217 + ?>
1218 + <span class="elementor-inline-editing" <?php
1219 + // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1220 + echo $this->get_render_attribute_string( 'sub_title' ); ?>>
1221 + <?php
1222 + echo wp_kses_post( $settings['sub_title'] );
1223 + ?>
1224 + </span>
1225 + </div>
1226 + <?php endif;
1227 +
1228 + if ( in_array( $separator_position, ['above'], true ) ) {
1229 + if ( ! empty( $settings['separator_'] ) ) {
1230 + $this->render_separator( $settings );
1231 + }
1232 + }
1233 +
1234 + $allowed_tags = ['h1','h2','h3','h4','h5','h6','div','span'];
1235 + $tag = in_array(strtolower($tag), $allowed_tags, true) ? strtolower($tag) : 'div';
1236 +
1237 +
1238 + if ( ! empty( $title ) ) {
1239 + $gradient_class = ! empty( $settings['show_gradient_title'] ) ? ' e-e-gradient-title' : '';
1240 + $image_fill_class = ( ! empty( $settings['enable_title_image_fill'] ) ) ? ' e-e-image-fill' : '';
1241 + $tag_class = 'e-e-title elementor-inline-editing' . $gradient_class . $image_fill_class;
1242 +
1243 + // Inline editing attribute add
1244 + $this->add_inline_editing_attributes( 'title' );
1245 +
1246 + printf(
1247 + '<%1$s class="%2$s" %3$s>%4$s</%1$s>',
1248 + esc_html( $tag ),
1249 + esc_attr( $tag_class ),
1250 + // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1251 + $this->get_render_attribute_string( 'title' ),
1252 + wp_kses_post( $title )
1253 + );
1254 + }
1255 +
1256 +
1257 +
1258 + if ( in_array( $separator_position, ['below'], true ) ) {
1259 + if ( ! empty( $settings['separator_'] ) ) {
1260 + $this->render_separator( $settings );
1261 + }
1262 + }
1263 +
1264 + if ( ! empty( $settings['description'] ) ) {
1265 + $this->add_inline_editing_attributes( 'description' );
1266 + ?>
1267 + <div class="e-e-description elementor-inline-editing" <?php
1268 + // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1269 + echo $this->get_render_attribute_string( 'description' ); ?>>
1270 + <?php echo wp_kses_post( $settings['description'] ); ?>
1271 + </div>
1272 + <?php }
1273 + if ( in_array( $separator_position, ['bottom'], true ) ) {
1274 + if ( ! empty( $settings['separator_'] ) ) {
1275 + $this->render_separator( $settings );
1276 + }
1277 + }
1278 +
1279 + if ( ! empty( $settings['water_mark'] ) ) {
1280 + echo '<div class="eel-watermark">';
1281 + echo esc_html( $settings['water_mark'] );
1282 + echo '</div>';
1283 + }
1284 +
1285 + ?>
1286 + </div>
1287 + <?php }
1288 +}
1289 +?>