PluginProbe
Borderless – Addons and Templates for Elementor / trunk
Borderless – Addons and Templates for Elementor vtrunk
trunk 1.0.0 1.0.1 1.0.2 1.0.3 1.0.4 1.0.5 1.0.6 1.0.7 1.0.8 1.0.9 1.1.0 1.1.1 1.1.2 1.1.3 1.1.4 1.1.5 1.1.6 1.1.7 1.1.8 1.1.9 1.2.0 1.2.1 1.2.2 1.2.3 All 78 releases
borderless / modules / elementor / widgets / info-box.php

info-box.php in Borderless – Addons and Templates for Elementor trunk, at modules/elementor/widgets/info-box.php

1,020 lines 31.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 namespace Borderless\Widgets;
3
4 if ( ! defined( 'ABSPATH' ) ) {
5 exit; // Exit if accessed directly.
6 }
7
8 use Elementor\Widget_Base;
9 use Elementor\Controls_Manager;
10 use Elementor\Group_Control_Border;
11 use Elementor\Group_Control_Box_Shadow;
12 use Elementor\Group_Control_Image_Size;
13 use Elementor\Group_Control_Typography;
14 use Elementor\Core\Kits\Documents\Tabs\Global_Typography;
15 use Elementor\Group_Control_Background;
16 use Elementor\Repeater;
17 use Elementor\Utils;
18 use Elementor\Icons_Manager;
19
20 class Info_Box extends Widget_Base {
21
22 /**
23 * Return the widget name.
24 */
25 public function get_name() {
26 return 'borderless-elementor-info-box';
27 }
28
29 public function get_custom_help_url() {
30 return 'https://borderless.visualmodo.com/widget/info-box/';
31 }
32
33 /**
34 * Return the widget title.
35 */
36 public function get_title() {
37 return __( 'Info Box', 'borderless' );
38 }
39
40 /**
41 * Return the widget icon.
42 */
43 public function get_icon() {
44 return 'eicon-info-box';
45 }
46
47 /**
48 * Return the widget categories.
49 */
50 public function get_categories() {
51 return [ 'borderless' ];
52 }
53
54 /**
55 * Enqueue widget style dependency.
56 */
57 public function get_style_depends() {
58 return [ 'elementor-widget-info-box' ];
59 }
60
61 /**
62 * Register all widget controls.
63 */
64 protected function _register_controls() {
65
66 // ---------------------------------
67 // Content Tab: Media
68 // ---------------------------------
69 $this->start_controls_section(
70 'borderless_elementor_info_box_section_media',
71 [
72 'label' => __( 'Media', 'borderless' ),
73 'tab' => Controls_Manager::TAB_CONTENT,
74 ]
75 );
76 $this->add_control(
77 'borderless_elementor_info_box_type',
78 [
79 'label' => __( 'Media Type', 'borderless' ),
80 'type' => Controls_Manager::CHOOSE,
81 'label_block' => false,
82 'options' => [
83 'icon' => [
84 'title' => __( 'Icon', 'borderless' ),
85 'icon' => 'eicon-star',
86 ],
87 'image' => [
88 'title' => __( 'Image', 'borderless' ),
89 'icon' => 'eicon-image',
90 ],
91 ],
92 'default' => 'icon',
93 'toggle' => false,
94 ]
95 );
96 // Image control (for Media Type = image)
97 $this->add_control(
98 'borderless_elementor_info_box_image',
99 [
100 'label' => __( 'Image', 'borderless' ),
101 'type' => Controls_Manager::MEDIA,
102 'default' => [
103 'url' => Utils::get_placeholder_image_src(),
104 ],
105 'condition' => [
106 'borderless_elementor_info_box_type' => 'image',
107 ],
108 'dynamic' => [
109 'active' => true,
110 ],
111 ]
112 );
113 $this->add_group_control(
114 Group_Control_Image_Size::get_type(),
115 [
116 'name' => 'borderless_elementor_info_box_thumbnail',
117 'default' => 'medium_large',
118 'separator' => 'none',
119 'exclude' => [
120 'full', 'custom', 'large', 'shop_catalog', 'shop_single', 'shop_thumbnail',
121 ],
122 'condition' => [
123 'borderless_elementor_info_box_type' => 'image',
124 ],
125 ]
126 );
127 // Icon control (for Media Type = icon)
128 $this->add_control(
129 'borderless_elementor_info_box_selected_icon',
130 [
131 'type' => Controls_Manager::ICONS,
132 'fa4compatibility'=> 'icon',
133 'label_block' => true,
134 'default' => [
135 'value' => 'fas fa-asterisk',
136 'library' => 'fa-solid',
137 ],
138 'condition' => [
139 'borderless_elementor_info_box_type' => 'icon',
140 ],
141 ]
142 );
143 $this->end_controls_section();
144
145 // ---------------------------------
146 // Content Tab: Title & Description
147 // ---------------------------------
148 $this->start_controls_section(
149 'borderless_elementor_info_box_section_title',
150 [
151 'label' => __( 'Title & Description', 'borderless' ),
152 'tab' => Controls_Manager::TAB_CONTENT,
153 ]
154 );
155 $this->add_control(
156 'borderless_elementor_info_box_title',
157 [
158 'label' => __( 'Title', 'borderless' ),
159 'label_block' => true,
160 'type' => Controls_Manager::TEXT,
161 'default' => __( 'Info Box Title', 'borderless' ),
162 'placeholder' => __( 'Type Info Box Title', 'borderless' ),
163 'dynamic' => [
164 'active' => true,
165 ],
166 ]
167 );
168 $this->add_control(
169 'borderless_elementor_info_box_description',
170 [
171 'label' => __( 'Description', 'borderless' ),
172 'description' => 'Allowed HTML: a, b, strong, em, i, u, p, br, span',
173 'type' => Controls_Manager::TEXTAREA,
174 'default' => __( 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', 'borderless' ),
175 'placeholder' => __( 'Type Info Box Description', 'borderless' ),
176 'rows' => 5,
177 'dynamic' => [
178 'active' => true,
179 ],
180 ]
181 );
182 $this->add_control(
183 'borderless_elementor_info_box_title_tag',
184 [
185 'label' => __( 'Title HTML Tag', 'borderless' ),
186 'type' => Controls_Manager::CHOOSE,
187 'options' => [
188 'h1' => [
189 'title' => __( 'H1', 'borderless' ),
190 'icon' => 'eicon-editor-h1',
191 ],
192 'h2' => [
193 'title' => __( 'H2', 'borderless' ),
194 'icon' => 'eicon-editor-h2',
195 ],
196 'h3' => [
197 'title' => __( 'H3', 'borderless' ),
198 'icon' => 'eicon-editor-h3',
199 ],
200 'h4' => [
201 'title' => __( 'H4', 'borderless' ),
202 'icon' => 'eicon-editor-h4',
203 ],
204 'h5' => [
205 'title' => __( 'H5', 'borderless' ),
206 'icon' => 'eicon-editor-h5',
207 ],
208 'h6' => [
209 'title' => __( 'H6', 'borderless' ),
210 'icon' => 'eicon-editor-h6',
211 ],
212 ],
213 'default' => 'h2',
214 'toggle' => false,
215 ]
216 );
217 $this->end_controls_section();
218
219 // ---------------------------------
220 // Content Tab: Button
221 // ---------------------------------
222 $this->start_controls_section(
223 'borderless_elementor_info_box_section_button',
224 [
225 'label' => esc_html__( 'Button', 'borderless' ),
226 'tab' => Controls_Manager::TAB_CONTENT,
227 ]
228 );
229 $this->add_control(
230 'borderless_elementor_info_box_button_text',
231 [
232 'label' => esc_html__( 'Button Text', 'borderless' ),
233 'type' => Controls_Manager::TEXT,
234 'default' => esc_html__( 'See More', 'borderless' ),
235 'dynamic' => [ 'active' => true ],
236 ]
237 );
238 $this->add_control(
239 'borderless_elementor_info_box_button_link',
240 [
241 'label' => esc_html__( 'Button Link', 'borderless' ),
242 'type' => Controls_Manager::URL,
243 'default' => [
244 'url' => '#',
245 ],
246 ]
247 );
248 $this->add_control(
249 'borderless_elementor_info_box_button_icon',
250 [
251 'label' => esc_html__( 'Button Icon', 'borderless' ),
252 'type' => Controls_Manager::ICONS,
253 'default' => [
254 'value' => 'fas fa-arrow-right',
255 'library' => 'fa-solid',
256 ],
257 ]
258 );
259 $this->add_control(
260 'borderless_elementor_info_box_button_icon_position',
261 [
262 'label' => __( 'Icon Position', 'borderless' ),
263 'type' => Controls_Manager::CHOOSE,
264 'options' => [
265 'before' => [
266 'title' => __( 'Before', 'borderless' ),
267 'icon' => 'eicon-h-align-left',
268 ],
269 'after' => [
270 'title' => __( 'After', 'borderless' ),
271 'icon' => 'eicon-h-align-right',
272 ],
273 ],
274 'default' => 'after',
275 'toggle' => false,
276 ]
277 );
278 $this->end_controls_section();
279
280 // ---------------------------------
281 // Style Tab: General
282 // ---------------------------------
283 $this->start_controls_section(
284 'borderless_elementor_info_box_style_general',
285 [
286 'label' => __( 'General', 'borderless' ),
287 'tab' => Controls_Manager::TAB_STYLE,
288 ]
289 );
290 $this->add_responsive_control(
291 'borderless_elementor_info_box_direction',
292 [
293 'label' => __( 'Direction', 'borderless' ),
294 'type' => Controls_Manager::CHOOSE,
295 'options' => [
296 'left' => [
297 'title' => __( 'Left', 'borderless' ),
298 'icon' => 'eicon-h-align-left',
299 ],
300 'top' => [
301 'title' => __( 'Top', 'borderless' ),
302 'icon' => 'eicon-v-align-top',
303 ],
304 'right' => [
305 'title' => __( 'Right', 'borderless' ),
306 'icon' => 'eicon-h-align-right',
307 ],
308 ],
309 'default' => 'top',
310 'toggle' => false,
311 ]
312 );
313 $this->add_responsive_control(
314 'borderless_elementor_info_box_horizontal_align',
315 [
316 'label' => __( 'Horizontal Alignment', 'borderless' ),
317 'type' => Controls_Manager::CHOOSE,
318 'options' => [
319 'left' => [
320 'title' => __( 'Left', 'borderless' ),
321 'icon' => 'eicon-h-align-left',
322 ],
323 'center' => [
324 'title' => __( 'Center', 'borderless' ),
325 'icon' => 'eicon-h-align-center',
326 ],
327 'right' => [
328 'title' => __( 'Right', 'borderless' ),
329 'icon' => 'eicon-h-align-right',
330 ],
331 ],
332 'default' => 'center',
333 'toggle' => false,
334 'condition' => [
335 'borderless_elementor_info_box_direction' => 'top',
336 ],
337 'selectors' => [
338 '{{WRAPPER}} .borderless-info-box-wrapper.media-top, {{WRAPPER}} .borderless-info-box-footer' => 'text-align: {{VALUE}};',
339 ],
340 ]
341 );
342 $this->add_responsive_control(
343 'borderless_elementor_info_box_vertical_align',
344 [
345 'label' => __( 'Vertical Alignment', 'borderless' ),
346 'type' => Controls_Manager::CHOOSE,
347 'options' => [
348 'top' => [
349 'title' => __( 'Top', 'borderless' ),
350 'icon' => 'eicon-v-align-top',
351 ],
352 'center' => [
353 'title' => __( 'Center', 'borderless' ),
354 'icon' => 'eicon-v-align-middle',
355 ],
356 'bottom' => [
357 'title' => __( 'Bottom', 'borderless' ),
358 'icon' => 'eicon-v-align-bottom',
359 ],
360 ],
361 'default' => 'top',
362 'toggle' => false,
363 'condition' => [
364 'borderless_elementor_info_box_direction' => [ 'left', 'right' ],
365 'borderless_elementor_info_box_type' => 'icon',
366 ],
367 'selectors_dictionary' => [
368 'top' => 'align-self: flex-start;',
369 'center' => 'align-self: center;',
370 'bottom' => 'align-self: flex-end;',
371 ],
372 'selectors' => [
373 '{{WRAPPER}} .borderless-info-box-media' => '{{VALUE}}',
374 ],
375 ]
376 );
377 $this->add_group_control(
378 Group_Control_Background::get_type(),
379 [
380 'name' => 'borderless_elementor_info_box_background',
381 'label' => esc_html__( 'Background', 'borderless' ),
382 'types' => [ 'classic', 'gradient' ],
383 'selector' => '{{WRAPPER}} .borderless-info-box-wrapper',
384 ]
385 );
386 $this->add_group_control(
387 Group_Control_Border::get_type(),
388 [
389 'name' => 'borderless_elementor_info_box_border',
390 'selector' => '{{WRAPPER}} .borderless-info-box-wrapper',
391 ]
392 );
393 $this->add_responsive_control(
394 'borderless_elementor_info_box_border_radius',
395 [
396 'label' => __( 'Border Radius', 'borderless' ),
397 'type' => Controls_Manager::DIMENSIONS,
398 'size_units' => [ 'px', '%', 'em', 'rem' ],
399 'selectors' => [
400 '{{WRAPPER}} .borderless-info-box-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
401 ],
402 ]
403 );
404 $this->add_group_control(
405 Group_Control_Box_Shadow::get_type(),
406 [
407 'name' => 'borderless_elementor_info_box_box_shadow',
408 'exclude' => [ 'box_shadow_position' ],
409 'selector' => '{{WRAPPER}} .borderless-info-box-wrapper',
410 ]
411 );
412 $this->add_responsive_control(
413 'borderless_elementor_info_box_padding',
414 [
415 'label' => __( 'Padding', 'borderless' ),
416 'type' => Controls_Manager::DIMENSIONS,
417 'size_units' => [ 'px', '%', 'em', 'rem', 'vw' ],
418 'selectors' => [
419 '{{WRAPPER}} .borderless-info-box-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
420 ],
421 ]
422 );
423 $this->end_controls_section();
424
425 // ---------------------------------
426 // Style Tab: Media Style
427 // ---------------------------------
428 $this->start_controls_section(
429 'borderless_elementor_info_box_style_media',
430 [
431 'label' => __( 'Media', 'borderless' ),
432 'tab' => Controls_Manager::TAB_STYLE,
433 ]
434 );
435 $this->add_responsive_control(
436 'borderless_elementor_info_box_icon_size',
437 [
438 'label' => __( 'Icon Size', 'borderless' ),
439 'type' => Controls_Manager::SLIDER,
440 'size_units' => [ 'px' ],
441 'range' => [
442 'px' => [
443 'min' => 8,
444 'max' => 320,
445 ],
446 ],
447 'default' => [
448 'size' => 64,
449 'unit' => 'px',
450 ],
451 'selectors' => [
452 '{{WRAPPER}} .borderless-info-box-figure--icon' => 'font-size: {{SIZE}}{{UNIT}} !important;',
453 ],
454 'condition' => [
455 'borderless_elementor_info_box_type' => 'icon',
456 ],
457 ]
458 );
459 $this->add_responsive_control(
460 'borderless_elementor_info_box_image_width',
461 [
462 'label' => __( 'Image Width', 'borderless' ),
463 'type' => Controls_Manager::SLIDER,
464 'size_units' => [ 'px', '%', 'em', 'rem' ],
465 'range' => [
466 'px' => [
467 'min' => 1,
468 'max' => 400,
469 ],
470 '%' => [
471 'min' => 1,
472 'max' => 100,
473 ],
474 ],
475 'selectors' => [
476 '{{WRAPPER}} .borderless-info-box-figure--image' => 'width: {{SIZE}}{{UNIT}};',
477 ],
478 'condition' => [
479 'borderless_elementor_info_box_type' => 'image',
480 ],
481 ]
482 );
483 $this->add_responsive_control(
484 'borderless_elementor_info_box_image_height',
485 [
486 'label' => __( 'Image Height', 'borderless' ),
487 'type' => Controls_Manager::SLIDER,
488 'size_units' => [ 'px' ],
489 'range' => [
490 'px' => [
491 'min' => 1,
492 'max' => 400,
493 ],
494 ],
495 'selectors' => [
496 '{{WRAPPER}} .borderless-info-box-figure--image' => 'height: {{SIZE}}{{UNIT}};',
497 ],
498 'condition' => [
499 'borderless_elementor_info_box_type' => 'image',
500 ],
501 ]
502 );
503 $this->add_responsive_control(
504 'borderless_elementor_info_box_media_offset_x',
505 [
506 'label' => __( 'Offset Left', 'borderless' ),
507 'type' => Controls_Manager::SLIDER,
508 'size_units' => ['px'],
509 'range' => [
510 'px' => [
511 'min' => -1000,
512 'max' => 1000,
513 ],
514 ],
515 'selectors' => [
516 '{{WRAPPER}} .borderless-info-box-wrapper' => '--borderless-info-box-media-offset-x: {{SIZE}}{{UNIT}} !important;',
517 ],
518 ]
519 );
520 $this->add_responsive_control(
521 'borderless_elementor_info_box_media_offset_y',
522 [
523 'label' => __( 'Offset Top', 'borderless' ),
524 'type' => Controls_Manager::SLIDER,
525 'size_units' => ['px'],
526 'range' => [
527 'px' => [
528 'min' => -1000,
529 'max' => 1000,
530 ],
531 ],
532 'selectors' => [
533 '{{WRAPPER}} .borderless-info-box-wrapper' => '--borderless-info-box-media-offset-y: {{SIZE}}{{UNIT}} !important;',
534 ],
535 ]
536 );
537 $this->add_responsive_control(
538 'borderless_elementor_info_box_media_spacing',
539 [
540 'label' => __( 'Spacing', 'borderless' ),
541 'type' => Controls_Manager::SLIDER,
542 'size_units' => ['px'],
543 'selectors' => [
544 '{{WRAPPER}} .borderless-info-box-figure' => 'margin-bottom: {{SIZE}}{{UNIT}} !important;',
545 ],
546 ]
547 );
548 $this->add_responsive_control(
549 'borderless_elementor_info_box_media_padding',
550 [
551 'label' => __( 'Padding', 'borderless' ),
552 'type' => Controls_Manager::DIMENSIONS,
553 'size_units' => [ 'px', '%', 'em', 'rem', 'vw' ],
554 'selectors' => [
555 '{{WRAPPER}} .borderless-info-box-figure img, {{WRAPPER}} .borderless-info-box-figure--icon' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
556 ],
557 ]
558 );
559 $this->add_responsive_control(
560 'borderless_elementor_info_box_icon_margin',
561 [
562 'label' => __( 'Margin', 'borderless' ),
563 'type' => Controls_Manager::DIMENSIONS,
564 'size_units' => [ 'px', '%', 'em', 'rem', 'vw' ],
565 'selectors' => [
566 '{{WRAPPER}} .borderless-info-box-figure' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}} !important;',
567 ],
568 ]
569 );
570 $this->add_group_control(
571 Group_Control_Border::get_type(),
572 [
573 'name' => 'borderless_elementor_info_box_media_border',
574 'selector' => '{{WRAPPER}} .borderless-info-box-figure img, {{WRAPPER}} .borderless-info-box-figure--icon',
575 ]
576 );
577 $this->add_responsive_control(
578 'borderless_elementor_info_box_media_border_radius',
579 [
580 'label' => __( 'Border Radius', 'borderless' ),
581 'type' => Controls_Manager::DIMENSIONS,
582 'size_units' => [ 'px', '%', 'em', 'rem' ],
583 'selectors' => [
584 '{{WRAPPER}} .borderless-info-box-figure img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
585 '{{WRAPPER}} .borderless-info-box-figure--icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
586 ],
587 ]
588 );
589 $this->add_group_control(
590 Group_Control_Box_Shadow::get_type(),
591 [
592 'name' => 'borderless_elementor_info_box_media_box_shadow',
593 'exclude' => [ 'box_shadow_position' ],
594 'selector' => '{{WRAPPER}} .borderless-info-box-figure img, {{WRAPPER}} .borderless-info-box-figure--icon',
595 ]
596 );
597 $this->add_control(
598 'borderless_elementor_info_box_icon_color',
599 [
600 'label' => __( 'Icon Color', 'borderless' ),
601 'type' => Controls_Manager::COLOR,
602 'selectors' => [
603 '{{WRAPPER}} .borderless-info-box-figure--icon' => 'color: {{VALUE}}',
604 ],
605 'condition' => [
606 'borderless_elementor_info_box_type' => 'icon',
607 ],
608 ]
609 );
610 $this->add_control(
611 'borderless_elementor_info_box_icon_bg_color',
612 [
613 'label' => __( 'Background Color', 'borderless' ),
614 'type' => Controls_Manager::COLOR,
615 'selectors' => [
616 '{{WRAPPER}} .borderless-info-box-figure--icon' => 'background-color: {{VALUE}};',
617 ],
618 'condition' => [
619 'borderless_elementor_info_box_type' => 'icon',
620 ],
621 ]
622 );
623 $this->add_control(
624 'borderless_elementor_info_box_icon_bg_rotate',
625 [
626 'label' => __( 'Background Rotate', 'borderless' ),
627 'type' => Controls_Manager::SLIDER,
628 'size_units' => [ 'deg' ],
629 'default' => [
630 'unit' => 'deg',
631 ],
632 'range' => [
633 'deg' => [
634 'min' => 0,
635 'max' => 360,
636 ],
637 ],
638 'selectors' => [
639 '{{WRAPPER}} .borderless-info-box-wrapper' => '--borderless-info-box-media-rotate: {{SIZE}}{{UNIT}} !important;',
640 ],
641 'condition' => [
642 'borderless_elementor_info_box_type' => 'icon',
643 ],
644 ]
645 );
646 $this->end_controls_section();
647
648 // ---------------------------------
649 // Style Tab: Title & Description
650 // ---------------------------------
651 $this->start_controls_section(
652 'borderless_elementor_info_box_style_title',
653 [
654 'label' => __( 'Title & Description', 'borderless' ),
655 'tab' => Controls_Manager::TAB_STYLE,
656 ]
657 );
658 $this->add_responsive_control(
659 'borderless_elementor_info_box_content_padding',
660 [
661 'label' => __( 'Content Box Padding', 'borderless' ),
662 'type' => Controls_Manager::DIMENSIONS,
663 'size_units' => [ 'px', '%', 'em', 'rem', 'vw' ],
664 'selectors' => [
665 '{{WRAPPER}} .borderless-info-box-body' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
666 ],
667 ]
668 );
669 $this->add_control(
670 'borderless_elementor_info_box_title_heading',
671 [
672 'type' => Controls_Manager::HEADING,
673 'label' => __( 'Title', 'borderless' ),
674 'separator' => 'before',
675 ]
676 );
677 $this->add_responsive_control(
678 'borderless_elementor_info_box_title_spacing',
679 [
680 'label' => __( 'Bottom Spacing', 'borderless' ),
681 'type' => Controls_Manager::SLIDER,
682 'size_units' => [ 'px' ],
683 'selectors' => [
684 '{{WRAPPER}} .borderless-info-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
685 ],
686 ]
687 );
688 $this->add_control(
689 'borderless_elementor_info_box_title_color',
690 [
691 'label' => __( 'Title Color', 'borderless' ),
692 'type' => Controls_Manager::COLOR,
693 'selectors' => [
694 '{{WRAPPER}} .borderless-info-box-title' => 'color: {{VALUE}};',
695 ],
696 ]
697 );
698 $this->add_group_control(
699 Group_Control_Typography::get_type(),
700 [
701 'name' => 'borderless_elementor_info_box_title_typography',
702 'label' => __( 'Title Typography', 'borderless' ),
703 'selector' => '{{WRAPPER}} .borderless-info-box-title',
704 ]
705 );
706 $this->add_control(
707 'borderless_elementor_info_box_description_heading',
708 [
709 'type' => Controls_Manager::HEADING,
710 'label' => __( 'Description', 'borderless' ),
711 'separator' => 'before',
712 ]
713 );
714 $this->add_responsive_control(
715 'borderless_elementor_info_box_description_spacing',
716 [
717 'label' => __( 'Bottom Spacing', 'borderless' ),
718 'type' => Controls_Manager::SLIDER,
719 'size_units' => [ 'px' ],
720 'selectors' => [
721 '{{WRAPPER}} .borderless-info-box-text' => 'margin-bottom: {{SIZE}}{{UNIT}};',
722 ],
723 ]
724 );
725 $this->add_control(
726 'borderless_elementor_info_box_description_color',
727 [
728 'label' => __( 'Description Color', 'borderless' ),
729 'type' => Controls_Manager::COLOR,
730 'selectors' => [
731 '{{WRAPPER}} .borderless-info-box-text' => 'color: {{VALUE}};',
732 ],
733 ]
734 );
735 $this->add_group_control(
736 Group_Control_Typography::get_type(),
737 [
738 'name' => 'borderless_elementor_info_box_description_typography',
739 'label' => __( 'Description Typography', 'borderless' ),
740 'selector' => '{{WRAPPER}} .borderless-info-box-text',
741 ]
742 );
743 $this->end_controls_section();
744
745 // ---------------------------------
746 // Style Tab: Button
747 // ---------------------------------
748 $this->start_controls_section(
749 'borderless_elementor_info_box_button_style',
750 [
751 'label' => esc_html__( 'Button', 'borderless' ),
752 'tab' => Controls_Manager::TAB_STYLE,
753 ]
754 );
755 $this->add_group_control(
756 Group_Control_Typography::get_type(),
757 [
758 'name' => 'borderless_elementor_info_box_button_typography',
759 'label' => esc_html__( 'Typography', 'borderless' ),
760 'selector' => '{{WRAPPER}} .borderless-info-box-button',
761 ]
762 );
763 $this->add_group_control(
764 \Elementor\Group_Control_Text_Shadow::get_type(),
765 [
766 'name' => 'borderless_elementor_info_box_button_text_shadow',
767 'label' => __( 'Text Shadow', 'borderless' ),
768 'selector' => '{{WRAPPER}} .borderless-info-box-button',
769 ]
770 );
771 $this->start_controls_tabs( 'borderless_elementor_info_box_button_color_tabs' );
772 // Tab Normal
773 $this->start_controls_tab(
774 'borderless_elementor_info_box_button_normal',
775 [
776 'label' => esc_html__( 'Normal', 'borderless' ),
777 ]
778 );
779 $this->add_control(
780 'borderless_elementor_info_box_button_text_color',
781 [
782 'label' => esc_html__( 'Text Color', 'borderless' ),
783 'type' => Controls_Manager::COLOR,
784 'default' => '#ffffff',
785 'selectors' => [
786 '{{WRAPPER}} .borderless-info-box-button' => 'color: {{VALUE}} !important;',
787 '{{WRAPPER}} .button-icon' => 'fill: {{VALUE}} !important;',
788 ],
789 ]
790 );
791 $this->add_control(
792 'borderless_elementor_info_box_button_background_color',
793 [
794 'label' => esc_html__( 'Background Color', 'borderless' ),
795 'type' => Controls_Manager::COLOR,
796 'default' => '#000000',
797 'selectors' => [
798 '{{WRAPPER}} .borderless-info-box-button' => 'background-color: {{VALUE}};',
799 ],
800 ]
801 );
802 $this->end_controls_tab();
803 // Tab Hover
804 $this->start_controls_tab(
805 'borderless_elementor_info_box_button_hover',
806 [
807 'label' => esc_html__( 'Hover', 'borderless' ),
808 ]
809 );
810 $this->add_control(
811 'borderless_elementor_info_box_button_text_color_hover',
812 [
813 'label' => esc_html__( 'Text Color', 'borderless' ),
814 'type' => Controls_Manager::COLOR,
815 'default' => '#ffffff',
816 'selectors' => [
817 '{{WRAPPER}} .borderless-info-box-button:hover' => 'color: {{VALUE}} !important;',
818 '{{WRAPPER}} .borderless-info-box-button:hover .button-icon' => 'fill: {{VALUE}} !important;',
819 ],
820 ]
821 );
822 $this->add_control(
823 'borderless_elementor_info_box_button_background_color_hover',
824 [
825 'label' => esc_html__( 'Background Color', 'borderless' ),
826 'type' => Controls_Manager::COLOR,
827 'default' => '#000000',
828 'selectors' => [
829 '{{WRAPPER}} .borderless-info-box-button:hover' => 'background-color: {{VALUE}};',
830 ],
831 ]
832 );
833 $this->add_control(
834 'borderless_elementor_info_box_button_border_color_hover',
835 [
836 'label' => esc_html__( 'Border Color', 'borderless' ),
837 'type' => Controls_Manager::COLOR,
838 'default' => '#cccccc',
839 'selectors' => [
840 '{{WRAPPER}} .borderless-info-box-button:hover' => 'border-color: {{VALUE}};',
841 ],
842 ]
843 );
844 $this->end_controls_tab();
845 $this->end_controls_tabs();
846 $this->add_group_control(
847 Group_Control_Border::get_type(),
848 [
849 'name' => 'borderless_elementor_info_box_button_border',
850 'label' => esc_html__( 'Border', 'borderless' ),
851 'selector' => '{{WRAPPER}} .borderless-info-box-button',
852 ]
853 );
854 $this->add_responsive_control(
855 'borderless_elementor_info_box_button_border_radius',
856 [
857 'label' => __( 'Border Radius', 'borderless' ),
858 'type' => Controls_Manager::DIMENSIONS,
859 'size_units' => [ 'px', '%', 'em', 'rem' ],
860 'selectors' => [
861 '{{WRAPPER}} .borderless-info-box-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
862 ],
863 ]
864 );
865 $this->add_responsive_control(
866 'borderless_elementor_info_box_button_padding',
867 [
868 'label' => esc_html__( 'Padding', 'borderless' ),
869 'type' => Controls_Manager::DIMENSIONS,
870 'size_units' => [ 'px', '%', 'em', 'rem', 'vw' ],
871 'default' => [
872 'top' => 10,
873 'right' => 24,
874 'bottom' => 10,
875 'left' => 24,
876 'isLinked' => false,
877 ],
878 'selectors' => [
879 '{{WRAPPER}} .borderless-info-box-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
880 ],
881 ]
882 );
883 $this->add_responsive_control(
884 'borderless_elementor_info_box_button_margin',
885 [
886 'label' => esc_html__( 'Margin', 'borderless' ),
887 'type' => Controls_Manager::DIMENSIONS,
888 'size_units' => [ 'px', '%', 'em', 'rem', 'vw' ],
889 'selectors' => [
890 '{{WRAPPER}} .borderless-info-box-footer' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
891 ],
892 ]
893 );
894 $this->add_responsive_control(
895 'borderless_elementor_info_box_button_icon_size',
896 [
897 'label' => esc_html__( 'Icon Size', 'borderless' ),
898 'type' => Controls_Manager::SLIDER,
899 'range' => [
900 'px' => [
901 'min' => 10,
902 'max' => 100,
903 ],
904 ],
905 'default' => [
906 'size' => 16,
907 'unit' => 'px',
908 ],
909 'selectors' => [
910 '{{WRAPPER}} .button-icon' => 'width: {{SIZE}}{{UNIT}}; height: auto;',
911 ],
912 ]
913 );
914 $this->add_control(
915 'borderless_elementor_info_box_button_full_width',
916 [
917 'label' => esc_html__( 'Stretch Button', 'borderless' ),
918 'type' => Controls_Manager::SWITCHER,
919 'label_on' => esc_html__( 'Yes', 'borderless' ),
920 'label_off' => esc_html__( 'No', 'borderless' ),
921 'return_value' => 'yes',
922 'default' => 'yes',
923 ]
924 );
925 $this->end_controls_section();
926
927 }
928
929 /**
930 * Render the widget output on the frontend.
931 */
932 protected function render() {
933 $settings = $this->get_settings_for_display();
934 $type = $settings['borderless_elementor_info_box_type'];
935
936 // Prepare Media HTML
937 $media_html = '';
938 if ( 'image' === $type && ! empty( $settings['borderless_elementor_info_box_image']['url'] ) ) {
939 $media_html = '<figure class="borderless-info-box-figure borderless-info-box-figure--image">';
940 $media_html .= Group_Control_Image_Size::get_attachment_image_html( $settings, 'borderless_elementor_info_box_thumbnail', 'borderless_elementor_info_box_image' );
941 $media_html .= '</figure>';
942 } elseif ( 'icon' === $type ) {
943 $media_html = '<figure class="borderless-info-box-figure borderless-info-box-figure--icon">';
944 ob_start();
945 Icons_Manager::render_icon( $settings['borderless_elementor_info_box_selected_icon'], [ 'aria-hidden' => 'true' ] );
946 $media_html .= ob_get_clean();
947 $media_html .= '</figure>';
948 }
949
950 // Prepare Body HTML (Title & Description)
951 $body_html = '<div class="borderless-info-box-body">';
952 if ( ! empty( $settings['borderless_elementor_info_box_title'] ) ) {
953 $body_html .= sprintf( '<%1$s class="borderless-info-box-title">%2$s</%1$s>',
954 esc_html( $settings['borderless_elementor_info_box_title_tag'] ),
955 esc_html( $settings['borderless_elementor_info_box_title'] )
956 );
957 }
958 if ( ! empty( $settings['borderless_elementor_info_box_description'] ) ) {
959 $body_html .= '<div class="borderless-info-box-text"><p>' . wp_kses_post( $settings['borderless_elementor_info_box_description'] ) . '</p></div>';
960 }
961 $body_html .= '</div>';
962
963 // Prepare Button HTML (if set)
964 $button_html = '';
965 if ( ! empty( $settings['borderless_elementor_info_box_button_text'] ) ) {
966 $link = $settings['borderless_elementor_info_box_button_link'];
967 $target = ! empty( $link['is_external'] ) ? ' target="_blank"' : '';
968 $nofollow = ! empty( $link['nofollow'] ) ? ' rel="nofollow"' : '';
969 $button_class = 'borderless-info-box-button';
970 if ( 'yes' === $settings['borderless_elementor_info_box_button_full_width'] ) {
971 $button_class .= ' full-width-button';
972 }
973 $button_html = '<div class="borderless-info-box-footer">';
974 $button_html .= '<a href="' . esc_url( $link['url'] ) . '" class="' . esc_attr( $button_class ) . '"' . $target . $nofollow . '>';
975 $button_html .= '<span class="button-content" style="display: inline-flex; align-items: center;">';
976 if ( 'before' === $settings['borderless_elementor_info_box_button_icon_position'] ) {
977 $button_html .= '<span class="button-icon" style="margin-right: 8px;">';
978 ob_start();
979 Icons_Manager::render_icon( $settings['borderless_elementor_info_box_button_icon'], [ 'aria-hidden' => 'true' ] );
980 $button_html .= ob_get_clean();
981 $button_html .= '</span>';
982 }
983 $button_html .= '<span class="button-text">' . esc_html( $settings['borderless_elementor_info_box_button_text'] ) . '</span>';
984 if ( 'after' === $settings['borderless_elementor_info_box_button_icon_position'] ) {
985 $button_html .= '<span class="button-icon" style="margin-left: 8px;">';
986 ob_start();
987 Icons_Manager::render_icon( $settings['borderless_elementor_info_box_button_icon'], [ 'aria-hidden' => 'true' ] );
988 $button_html .= ob_get_clean();
989 $button_html .= '</span>';
990 }
991 $button_html .= '</span></a></div>';
992 }
993
994 // Append Button HTML to the body HTML (inside content container)
995 $content_html = $body_html . $button_html;
996
997 // Build a wrapper based on the direction.
998 $media_direction = $settings['borderless_elementor_info_box_direction'];
999 $wrapper_html = '';
1000 if ( 'left' === $media_direction ) {
1001 $wrapper_html = '<div class="borderless-info-box-wrapper media-left" style="display: flex; align-items: center;">'
1002 . '<div class="borderless-info-box-media">' . $media_html . '</div>'
1003 . '<div class="borderless-info-box-content">' . $content_html . '</div>'
1004 . '</div>';
1005 } elseif ( 'right' === $media_direction ) {
1006 $wrapper_html = '<div class="borderless-info-box-wrapper media-right" style="display: flex; align-items: center; flex-wrap: nowrap;">'
1007 . '<div class="borderless-info-box-content">' . $content_html . '</div>'
1008 . '<div class="borderless-info-box-media">' . $media_html . '</div>'
1009 . '</div>';
1010 } else { // "top" or default
1011 $wrapper_html = '<div class="borderless-info-box-wrapper media-top">'
1012 . $media_html
1013 . $content_html
1014 . '</div>';
1015 }
1016
1017 echo $wrapper_html;
1018 }
1019 }
1020