icon-box.php 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor icon box widget.
  8. *
  9. * Elementor widget that displays an icon, a headline and a text.
  10. *
  11. * @since 1.0.0
  12. */
  13. class Widget_Icon_Box extends Widget_Base {
  14. /**
  15. * Get widget name.
  16. *
  17. * Retrieve icon box widget name.
  18. *
  19. * @since 1.0.0
  20. * @access public
  21. *
  22. * @return string Widget name.
  23. */
  24. public function get_name() {
  25. return 'icon-box';
  26. }
  27. /**
  28. * Get widget title.
  29. *
  30. * Retrieve icon box widget title.
  31. *
  32. * @since 1.0.0
  33. * @access public
  34. *
  35. * @return string Widget title.
  36. */
  37. public function get_title() {
  38. return __( 'Icon Box', 'elementor' );
  39. }
  40. /**
  41. * Get widget icon.
  42. *
  43. * Retrieve icon box widget icon.
  44. *
  45. * @since 1.0.0
  46. * @access public
  47. *
  48. * @return string Widget icon.
  49. */
  50. public function get_icon() {
  51. return 'eicon-icon-box';
  52. }
  53. /**
  54. * Get widget keywords.
  55. *
  56. * Retrieve the list of keywords the widget belongs to.
  57. *
  58. * @since 2.1.0
  59. * @access public
  60. *
  61. * @return array Widget keywords.
  62. */
  63. public function get_keywords() {
  64. return [ 'icon box', 'icon' ];
  65. }
  66. /**
  67. * Register icon box widget controls.
  68. *
  69. * Adds different input fields to allow the user to change and customize the widget settings.
  70. *
  71. * @since 1.0.0
  72. * @access protected
  73. */
  74. protected function _register_controls() {
  75. $this->start_controls_section(
  76. 'section_icon',
  77. [
  78. 'label' => __( 'Icon Box', 'elementor' ),
  79. ]
  80. );
  81. $this->add_control(
  82. 'icon',
  83. [
  84. 'label' => __( 'Icon', 'elementor' ),
  85. 'type' => Controls_Manager::ICON,
  86. 'default' => 'fa fa-star',
  87. ]
  88. );
  89. $this->add_control(
  90. 'view',
  91. [
  92. 'label' => __( 'View', 'elementor' ),
  93. 'type' => Controls_Manager::SELECT,
  94. 'options' => [
  95. 'default' => __( 'Default', 'elementor' ),
  96. 'stacked' => __( 'Stacked', 'elementor' ),
  97. 'framed' => __( 'Framed', 'elementor' ),
  98. ],
  99. 'default' => 'default',
  100. 'prefix_class' => 'elementor-view-',
  101. 'condition' => [
  102. 'icon!' => '',
  103. ],
  104. ]
  105. );
  106. $this->add_control(
  107. 'shape',
  108. [
  109. 'label' => __( 'Shape', 'elementor' ),
  110. 'type' => Controls_Manager::SELECT,
  111. 'options' => [
  112. 'circle' => __( 'Circle', 'elementor' ),
  113. 'square' => __( 'Square', 'elementor' ),
  114. ],
  115. 'default' => 'circle',
  116. 'condition' => [
  117. 'view!' => 'default',
  118. 'icon!' => '',
  119. ],
  120. 'prefix_class' => 'elementor-shape-',
  121. ]
  122. );
  123. $this->add_control(
  124. 'title_text',
  125. [
  126. 'label' => __( 'Title & Description', 'elementor' ),
  127. 'type' => Controls_Manager::TEXT,
  128. 'dynamic' => [
  129. 'active' => true,
  130. ],
  131. 'default' => __( 'This is the heading', 'elementor' ),
  132. 'placeholder' => __( 'Enter your title', 'elementor' ),
  133. 'label_block' => true,
  134. ]
  135. );
  136. $this->add_control(
  137. 'description_text',
  138. [
  139. 'label' => '',
  140. 'type' => Controls_Manager::TEXTAREA,
  141. 'dynamic' => [
  142. 'active' => true,
  143. ],
  144. 'default' => __( 'Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.', 'elementor' ),
  145. 'placeholder' => __( 'Enter your description', 'elementor' ),
  146. 'rows' => 10,
  147. 'separator' => 'none',
  148. 'show_label' => false,
  149. ]
  150. );
  151. $this->add_control(
  152. 'link',
  153. [
  154. 'label' => __( 'Link to', 'elementor' ),
  155. 'type' => Controls_Manager::URL,
  156. 'dynamic' => [
  157. 'active' => true,
  158. ],
  159. 'placeholder' => __( 'https://your-link.com', 'elementor' ),
  160. 'separator' => 'before',
  161. ]
  162. );
  163. $this->add_control(
  164. 'position',
  165. [
  166. 'label' => __( 'Icon Position', 'elementor' ),
  167. 'type' => Controls_Manager::CHOOSE,
  168. 'default' => 'top',
  169. 'options' => [
  170. 'left' => [
  171. 'title' => __( 'Left', 'elementor' ),
  172. 'icon' => 'fa fa-align-left',
  173. ],
  174. 'top' => [
  175. 'title' => __( 'Top', 'elementor' ),
  176. 'icon' => 'fa fa-align-center',
  177. ],
  178. 'right' => [
  179. 'title' => __( 'Right', 'elementor' ),
  180. 'icon' => 'fa fa-align-right',
  181. ],
  182. ],
  183. 'prefix_class' => 'elementor-position-',
  184. 'toggle' => false,
  185. 'condition' => [
  186. 'icon!' => '',
  187. ],
  188. ]
  189. );
  190. $this->add_control(
  191. 'title_size',
  192. [
  193. 'label' => __( 'Title HTML Tag', 'elementor' ),
  194. 'type' => Controls_Manager::SELECT,
  195. 'options' => [
  196. 'h1' => 'H1',
  197. 'h2' => 'H2',
  198. 'h3' => 'H3',
  199. 'h4' => 'H4',
  200. 'h5' => 'H5',
  201. 'h6' => 'H6',
  202. 'div' => 'div',
  203. 'span' => 'span',
  204. 'p' => 'p',
  205. ],
  206. 'default' => 'h3',
  207. ]
  208. );
  209. $this->end_controls_section();
  210. $this->start_controls_section(
  211. 'section_style_icon',
  212. [
  213. 'label' => __( 'Icon', 'elementor' ),
  214. 'tab' => Controls_Manager::TAB_STYLE,
  215. 'condition' => [
  216. 'icon!' => '',
  217. ],
  218. ]
  219. );
  220. $this->start_controls_tabs( 'icon_colors' );
  221. $this->start_controls_tab(
  222. 'icon_colors_normal',
  223. [
  224. 'label' => __( 'Normal', 'elementor' ),
  225. ]
  226. );
  227. $this->add_control(
  228. 'primary_color',
  229. [
  230. 'label' => __( 'Primary Color', 'elementor' ),
  231. 'type' => Controls_Manager::COLOR,
  232. 'scheme' => [
  233. 'type' => Scheme_Color::get_type(),
  234. 'value' => Scheme_Color::COLOR_1,
  235. ],
  236. 'default' => '',
  237. 'selectors' => [
  238. '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'background-color: {{VALUE}};',
  239. '{{WRAPPER}}.elementor-view-framed .elementor-icon, {{WRAPPER}}.elementor-view-default .elementor-icon' => 'color: {{VALUE}}; border-color: {{VALUE}};',
  240. ],
  241. ]
  242. );
  243. $this->add_control(
  244. 'secondary_color',
  245. [
  246. 'label' => __( 'Secondary Color', 'elementor' ),
  247. 'type' => Controls_Manager::COLOR,
  248. 'default' => '',
  249. 'condition' => [
  250. 'view!' => 'default',
  251. ],
  252. 'selectors' => [
  253. '{{WRAPPER}}.elementor-view-framed .elementor-icon' => 'background-color: {{VALUE}};',
  254. '{{WRAPPER}}.elementor-view-stacked .elementor-icon' => 'color: {{VALUE}};',
  255. ],
  256. ]
  257. );
  258. $this->end_controls_tab();
  259. $this->start_controls_tab(
  260. 'icon_colors_hover',
  261. [
  262. 'label' => __( 'Hover', 'elementor' ),
  263. ]
  264. );
  265. $this->add_control(
  266. 'hover_primary_color',
  267. [
  268. 'label' => __( 'Primary Color', 'elementor' ),
  269. 'type' => Controls_Manager::COLOR,
  270. 'default' => '',
  271. 'selectors' => [
  272. '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'background-color: {{VALUE}};',
  273. '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover, {{WRAPPER}}.elementor-view-default .elementor-icon:hover' => 'color: {{VALUE}}; border-color: {{VALUE}};',
  274. ],
  275. ]
  276. );
  277. $this->add_control(
  278. 'hover_secondary_color',
  279. [
  280. 'label' => __( 'Secondary Color', 'elementor' ),
  281. 'type' => Controls_Manager::COLOR,
  282. 'default' => '',
  283. 'condition' => [
  284. 'view!' => 'default',
  285. ],
  286. 'selectors' => [
  287. '{{WRAPPER}}.elementor-view-framed .elementor-icon:hover' => 'background-color: {{VALUE}};',
  288. '{{WRAPPER}}.elementor-view-stacked .elementor-icon:hover' => 'color: {{VALUE}};',
  289. ],
  290. ]
  291. );
  292. $this->add_control(
  293. 'hover_animation',
  294. [
  295. 'label' => __( 'Hover Animation', 'elementor' ),
  296. 'type' => Controls_Manager::HOVER_ANIMATION,
  297. ]
  298. );
  299. $this->end_controls_tab();
  300. $this->end_controls_tabs();
  301. $this->add_responsive_control(
  302. 'icon_space',
  303. [
  304. 'label' => __( 'Spacing', 'elementor' ),
  305. 'type' => Controls_Manager::SLIDER,
  306. 'default' => [
  307. 'size' => 15,
  308. ],
  309. 'range' => [
  310. 'px' => [
  311. 'min' => 0,
  312. 'max' => 100,
  313. ],
  314. ],
  315. 'selectors' => [
  316. '{{WRAPPER}}.elementor-position-right .elementor-icon-box-icon' => 'margin-left: {{SIZE}}{{UNIT}};',
  317. '{{WRAPPER}}.elementor-position-left .elementor-icon-box-icon' => 'margin-right: {{SIZE}}{{UNIT}};',
  318. '{{WRAPPER}}.elementor-position-top .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
  319. '(mobile){{WRAPPER}} .elementor-icon-box-icon' => 'margin-bottom: {{SIZE}}{{UNIT}};',
  320. ],
  321. ]
  322. );
  323. $this->add_responsive_control(
  324. 'icon_size',
  325. [
  326. 'label' => __( 'Size', 'elementor' ),
  327. 'type' => Controls_Manager::SLIDER,
  328. 'range' => [
  329. 'px' => [
  330. 'min' => 6,
  331. 'max' => 300,
  332. ],
  333. ],
  334. 'selectors' => [
  335. '{{WRAPPER}} .elementor-icon' => 'font-size: {{SIZE}}{{UNIT}};',
  336. ],
  337. ]
  338. );
  339. $this->add_control(
  340. 'icon_padding',
  341. [
  342. 'label' => __( 'Padding', 'elementor' ),
  343. 'type' => Controls_Manager::SLIDER,
  344. 'selectors' => [
  345. '{{WRAPPER}} .elementor-icon' => 'padding: {{SIZE}}{{UNIT}};',
  346. ],
  347. 'range' => [
  348. 'em' => [
  349. 'min' => 0,
  350. 'max' => 5,
  351. ],
  352. ],
  353. 'condition' => [
  354. 'view!' => 'default',
  355. ],
  356. ]
  357. );
  358. $this->add_control(
  359. 'rotate',
  360. [
  361. 'label' => __( 'Rotate', 'elementor' ),
  362. 'type' => Controls_Manager::SLIDER,
  363. 'default' => [
  364. 'size' => 0,
  365. 'unit' => 'deg',
  366. ],
  367. 'selectors' => [
  368. '{{WRAPPER}} .elementor-icon i' => 'transform: rotate({{SIZE}}{{UNIT}});',
  369. ],
  370. ]
  371. );
  372. $this->add_control(
  373. 'border_width',
  374. [
  375. 'label' => __( 'Border Width', 'elementor' ),
  376. 'type' => Controls_Manager::DIMENSIONS,
  377. 'selectors' => [
  378. '{{WRAPPER}} .elementor-icon' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  379. ],
  380. 'condition' => [
  381. 'view' => 'framed',
  382. ],
  383. ]
  384. );
  385. $this->add_control(
  386. 'border_radius',
  387. [
  388. 'label' => __( 'Border Radius', 'elementor' ),
  389. 'type' => Controls_Manager::DIMENSIONS,
  390. 'size_units' => [ 'px', '%' ],
  391. 'selectors' => [
  392. '{{WRAPPER}} .elementor-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  393. ],
  394. 'condition' => [
  395. 'view!' => 'default',
  396. ],
  397. ]
  398. );
  399. $this->end_controls_section();
  400. $this->start_controls_section(
  401. 'section_style_content',
  402. [
  403. 'label' => __( 'Content', 'elementor' ),
  404. 'tab' => Controls_Manager::TAB_STYLE,
  405. ]
  406. );
  407. $this->add_responsive_control(
  408. 'text_align',
  409. [
  410. 'label' => __( 'Alignment', 'elementor' ),
  411. 'type' => Controls_Manager::CHOOSE,
  412. 'options' => [
  413. 'left' => [
  414. 'title' => __( 'Left', 'elementor' ),
  415. 'icon' => 'fa fa-align-left',
  416. ],
  417. 'center' => [
  418. 'title' => __( 'Center', 'elementor' ),
  419. 'icon' => 'fa fa-align-center',
  420. ],
  421. 'right' => [
  422. 'title' => __( 'Right', 'elementor' ),
  423. 'icon' => 'fa fa-align-right',
  424. ],
  425. 'justify' => [
  426. 'title' => __( 'Justified', 'elementor' ),
  427. 'icon' => 'fa fa-align-justify',
  428. ],
  429. ],
  430. 'selectors' => [
  431. '{{WRAPPER}} .elementor-icon-box-wrapper' => 'text-align: {{VALUE}};',
  432. ],
  433. ]
  434. );
  435. $this->add_control(
  436. 'content_vertical_alignment',
  437. [
  438. 'label' => __( 'Vertical Alignment', 'elementor' ),
  439. 'type' => Controls_Manager::SELECT,
  440. 'options' => [
  441. 'top' => __( 'Top', 'elementor' ),
  442. 'middle' => __( 'Middle', 'elementor' ),
  443. 'bottom' => __( 'Bottom', 'elementor' ),
  444. ],
  445. 'default' => 'top',
  446. 'prefix_class' => 'elementor-vertical-align-',
  447. ]
  448. );
  449. $this->add_control(
  450. 'heading_title',
  451. [
  452. 'label' => __( 'Title', 'elementor' ),
  453. 'type' => Controls_Manager::HEADING,
  454. 'separator' => 'before',
  455. ]
  456. );
  457. $this->add_responsive_control(
  458. 'title_bottom_space',
  459. [
  460. 'label' => __( 'Spacing', 'elementor' ),
  461. 'type' => Controls_Manager::SLIDER,
  462. 'range' => [
  463. 'px' => [
  464. 'min' => 0,
  465. 'max' => 100,
  466. ],
  467. ],
  468. 'selectors' => [
  469. '{{WRAPPER}} .elementor-icon-box-title' => 'margin-bottom: {{SIZE}}{{UNIT}};',
  470. ],
  471. ]
  472. );
  473. $this->add_control(
  474. 'title_color',
  475. [
  476. 'label' => __( 'Color', 'elementor' ),
  477. 'type' => Controls_Manager::COLOR,
  478. 'default' => '',
  479. 'selectors' => [
  480. '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-title' => 'color: {{VALUE}};',
  481. ],
  482. 'scheme' => [
  483. 'type' => Scheme_Color::get_type(),
  484. 'value' => Scheme_Color::COLOR_1,
  485. ],
  486. ]
  487. );
  488. $this->add_group_control(
  489. Group_Control_Typography::get_type(),
  490. [
  491. 'name' => 'title_typography',
  492. 'selector' => '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-title',
  493. 'scheme' => Scheme_Typography::TYPOGRAPHY_1,
  494. ]
  495. );
  496. $this->add_control(
  497. 'heading_description',
  498. [
  499. 'label' => __( 'Description', 'elementor' ),
  500. 'type' => Controls_Manager::HEADING,
  501. 'separator' => 'before',
  502. ]
  503. );
  504. $this->add_control(
  505. 'description_color',
  506. [
  507. 'label' => __( 'Color', 'elementor' ),
  508. 'type' => Controls_Manager::COLOR,
  509. 'default' => '',
  510. 'selectors' => [
  511. '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-description' => 'color: {{VALUE}};',
  512. ],
  513. 'scheme' => [
  514. 'type' => Scheme_Color::get_type(),
  515. 'value' => Scheme_Color::COLOR_3,
  516. ],
  517. ]
  518. );
  519. $this->add_group_control(
  520. Group_Control_Typography::get_type(),
  521. [
  522. 'name' => 'description_typography',
  523. 'selector' => '{{WRAPPER}} .elementor-icon-box-content .elementor-icon-box-description',
  524. 'scheme' => Scheme_Typography::TYPOGRAPHY_3,
  525. ]
  526. );
  527. $this->end_controls_section();
  528. }
  529. /**
  530. * Render icon box widget output on the frontend.
  531. *
  532. * Written in PHP and used to generate the final HTML.
  533. *
  534. * @since 1.0.0
  535. * @access protected
  536. */
  537. protected function render() {
  538. $settings = $this->get_settings_for_display();
  539. $this->add_render_attribute( 'icon', 'class', [ 'elementor-icon', 'elementor-animation-' . $settings['hover_animation'] ] );
  540. $icon_tag = 'span';
  541. $has_icon = ! empty( $settings['icon'] );
  542. if ( ! empty( $settings['link']['url'] ) ) {
  543. $this->add_render_attribute( 'link', 'href', $settings['link']['url'] );
  544. $icon_tag = 'a';
  545. if ( $settings['link']['is_external'] ) {
  546. $this->add_render_attribute( 'link', 'target', '_blank' );
  547. }
  548. if ( $settings['link']['nofollow'] ) {
  549. $this->add_render_attribute( 'link', 'rel', 'nofollow' );
  550. }
  551. }
  552. if ( $has_icon ) {
  553. $this->add_render_attribute( 'i', 'class', $settings['icon'] );
  554. $this->add_render_attribute( 'i', 'aria-hidden', 'true' );
  555. }
  556. $icon_attributes = $this->get_render_attribute_string( 'icon' );
  557. $link_attributes = $this->get_render_attribute_string( 'link' );
  558. $this->add_render_attribute( 'description_text', 'class', 'elementor-icon-box-description' );
  559. $this->add_inline_editing_attributes( 'title_text', 'none' );
  560. $this->add_inline_editing_attributes( 'description_text' );
  561. ?>
  562. <div class="elementor-icon-box-wrapper">
  563. <?php if ( $has_icon ) : ?>
  564. <div class="elementor-icon-box-icon">
  565. <<?php echo implode( ' ', [ $icon_tag, $icon_attributes, $link_attributes ] ); ?>>
  566. <i <?php echo $this->get_render_attribute_string( 'i' ); ?>></i>
  567. </<?php echo $icon_tag; ?>>
  568. </div>
  569. <?php endif; ?>
  570. <div class="elementor-icon-box-content">
  571. <<?php echo $settings['title_size']; ?> class="elementor-icon-box-title">
  572. <<?php echo implode( ' ', [ $icon_tag, $link_attributes ] ); ?><?php echo $this->get_render_attribute_string( 'title_text' ); ?>><?php echo $settings['title_text']; ?></<?php echo $icon_tag; ?>>
  573. </<?php echo $settings['title_size']; ?>>
  574. <p <?php echo $this->get_render_attribute_string( 'description_text' ); ?>><?php echo $settings['description_text']; ?></p>
  575. </div>
  576. </div>
  577. <?php
  578. }
  579. /**
  580. * Render icon box widget output in the editor.
  581. *
  582. * Written as a Backbone JavaScript template and used to generate the live preview.
  583. *
  584. * @since 1.0.0
  585. * @access protected
  586. */
  587. protected function _content_template() {
  588. ?>
  589. <#
  590. var link = settings.link.url ? 'href="' + settings.link.url + '"' : '',
  591. iconTag = link ? 'a' : 'span';
  592. view.addRenderAttribute( 'description_text', 'class', 'elementor-icon-box-description' );
  593. view.addInlineEditingAttributes( 'title_text', 'none' );
  594. view.addInlineEditingAttributes( 'description_text' );
  595. #>
  596. <div class="elementor-icon-box-wrapper">
  597. <# if ( settings.icon ) { #>
  598. <div class="elementor-icon-box-icon">
  599. <{{{ iconTag + ' ' + link }}} class="elementor-icon elementor-animation-{{ settings.hover_animation }}">
  600. <i class="{{ settings.icon }}" aria-hidden="true"></i>
  601. </{{{ iconTag }}}>
  602. </div>
  603. <# } #>
  604. <div class="elementor-icon-box-content">
  605. <{{{ settings.title_size }}} class="elementor-icon-box-title">
  606. <{{{ iconTag + ' ' + link }}} {{{ view.getRenderAttributeString( 'title_text' ) }}}>{{{ settings.title_text }}}</{{{ iconTag }}}>
  607. </{{{ settings.title_size }}}>
  608. <p {{{ view.getRenderAttributeString( 'description_text' ) }}}>{{{ settings.description_text }}}</p>
  609. </div>
  610. </div>
  611. <?php
  612. }
  613. }