column.php 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985
  1. <?php
  2. namespace Elementor;
  3. if ( ! defined( 'ABSPATH' ) ) {
  4. exit; // Exit if accessed directly.
  5. }
  6. /**
  7. * Elementor column element.
  8. *
  9. * Elementor column handler class is responsible for initializing the column
  10. * element.
  11. *
  12. * @since 1.0.0
  13. */
  14. class Element_Column extends Element_Base {
  15. /**
  16. * Element edit tools.
  17. *
  18. * Holds all the edit tools of the element. For example: delete, duplicate etc.
  19. *
  20. * @access protected
  21. * @static
  22. *
  23. * @var array
  24. */
  25. protected static $_edit_tools;
  26. /**
  27. * Get column name.
  28. *
  29. * Retrieve the column name.
  30. *
  31. * @since 1.0.0
  32. * @access public
  33. *
  34. * @return string Column name.
  35. */
  36. public function get_name() {
  37. return 'column';
  38. }
  39. /**
  40. * Get element type.
  41. *
  42. * Retrieve the element type, in this case `column`.
  43. *
  44. * @since 2.1.0
  45. * @access public
  46. * @static
  47. *
  48. * @return string The type.
  49. */
  50. public static function get_type() {
  51. return 'column';
  52. }
  53. /**
  54. * Get column title.
  55. *
  56. * Retrieve the column title.
  57. *
  58. * @since 1.0.0
  59. * @access public
  60. *
  61. * @return string Column title.
  62. */
  63. public function get_title() {
  64. return __( 'Column', 'elementor' );
  65. }
  66. /**
  67. * Get column icon.
  68. *
  69. * Retrieve the column icon.
  70. *
  71. * @since 1.0.0
  72. * @access public
  73. *
  74. * @return string Column icon.
  75. */
  76. public function get_icon() {
  77. return 'eicon-column';
  78. }
  79. /**
  80. * Get default edit tools.
  81. *
  82. * Retrieve the element default edit tools. Used to set initial tools.
  83. *
  84. * @since 2.1.0
  85. * @access protected
  86. * @static
  87. *
  88. * @return array Default edit tools.
  89. */
  90. protected static function get_default_edit_tools() {
  91. $column_label = __( 'Column', 'elementor' );
  92. $edit_tools = [
  93. 'edit' => [
  94. 'title' => __( 'Edit', 'elementor' ),
  95. 'icon' => 'column',
  96. ],
  97. ];
  98. if ( self::is_edit_buttons_enabled() ) {
  99. $edit_tools += [
  100. 'duplicate' => [
  101. /* translators: %s: Column label */
  102. 'title' => sprintf( __( 'Duplicate %s', 'elementor' ), $column_label ),
  103. 'icon' => 'clone',
  104. ],
  105. 'add' => [
  106. /* translators: %s: Column label */
  107. 'title' => sprintf( __( 'Add %s', 'elementor' ), $column_label ),
  108. 'icon' => 'plus',
  109. ],
  110. 'remove' => [
  111. /* translators: %s: Column label */
  112. 'title' => sprintf( __( 'Remove %s', 'elementor' ), $column_label ),
  113. 'icon' => 'close',
  114. ],
  115. ];
  116. }
  117. return $edit_tools;
  118. }
  119. /**
  120. * Register column controls.
  121. *
  122. * Used to add new controls to the column element.
  123. *
  124. * @since 1.0.0
  125. * @access protected
  126. */
  127. protected function _register_controls() {
  128. // Section Layout.
  129. $this->start_controls_section(
  130. 'layout',
  131. [
  132. 'label' => __( 'Layout', 'elementor' ),
  133. 'tab' => Controls_Manager::TAB_LAYOUT,
  134. ]
  135. );
  136. $this->add_control(
  137. '_title',
  138. [
  139. 'label' => __( 'Title', 'elementor' ),
  140. 'type' => Controls_Manager::HIDDEN,
  141. 'render_type' => 'none',
  142. ]
  143. );
  144. $this->add_responsive_control(
  145. '_inline_size',
  146. [
  147. 'label' => __( 'Column Width', 'elementor' ) . ' (%)',
  148. 'type' => Controls_Manager::NUMBER,
  149. 'min' => 2,
  150. 'max' => 98,
  151. 'required' => true,
  152. 'device_args' => [
  153. Controls_Stack::RESPONSIVE_TABLET => [
  154. 'max' => 100,
  155. 'required' => false,
  156. ],
  157. Controls_Stack::RESPONSIVE_MOBILE => [
  158. 'max' => 100,
  159. 'required' => false,
  160. ],
  161. ],
  162. 'min_affected_device' => [
  163. Controls_Stack::RESPONSIVE_DESKTOP => Controls_Stack::RESPONSIVE_TABLET,
  164. Controls_Stack::RESPONSIVE_TABLET => Controls_Stack::RESPONSIVE_TABLET,
  165. ],
  166. 'selectors' => [
  167. '{{WRAPPER}}' => 'width: {{VALUE}}%',
  168. ],
  169. ]
  170. );
  171. $this->add_control(
  172. 'content_position',
  173. [
  174. 'label' => __( 'Content Position', 'elementor' ),
  175. 'type' => Controls_Manager::SELECT,
  176. 'default' => '',
  177. 'options' => [
  178. '' => __( 'Default', 'elementor' ),
  179. 'top' => __( 'Top', 'elementor' ),
  180. 'center' => __( 'Middle', 'elementor' ),
  181. 'bottom' => __( 'Bottom', 'elementor' ),
  182. ],
  183. 'selectors_dictionary' => [
  184. 'top' => 'flex-start',
  185. 'bottom' => 'flex-end',
  186. ],
  187. 'selectors' => [
  188. '{{WRAPPER}}.elementor-column .elementor-column-wrap' => 'align-items: {{VALUE}}',
  189. ],
  190. ]
  191. );
  192. $this->add_control(
  193. 'space_between_widgets',
  194. [
  195. 'label' => __( 'Widgets Space', 'elementor' ) . ' (px)',
  196. 'type' => Controls_Manager::NUMBER,
  197. 'placeholder' => 20,
  198. 'selectors' => [
  199. '{{WRAPPER}} > .elementor-column-wrap > .elementor-widget-wrap > .elementor-widget:not(:last-child)' => 'margin-bottom: {{VALUE}}px', //Need the full path for exclude the inner section
  200. ],
  201. ]
  202. );
  203. $possible_tags = [
  204. 'div',
  205. 'header',
  206. 'footer',
  207. 'main',
  208. 'article',
  209. 'section',
  210. 'aside',
  211. 'nav',
  212. ];
  213. $options = [
  214. '' => __( 'Default', 'elementor' ),
  215. ] + array_combine( $possible_tags, $possible_tags );
  216. $this->add_control(
  217. 'html_tag',
  218. [
  219. 'label' => __( 'HTML Tag', 'elementor' ),
  220. 'type' => Controls_Manager::SELECT,
  221. 'options' => $options,
  222. ]
  223. );
  224. $this->end_controls_section();
  225. $this->start_controls_section(
  226. 'section_style',
  227. [
  228. 'label' => __( 'Background', 'elementor' ),
  229. 'tab' => Controls_Manager::TAB_STYLE,
  230. ]
  231. );
  232. $this->start_controls_tabs( 'tabs_background' );
  233. $this->start_controls_tab(
  234. 'tab_background_normal',
  235. [
  236. 'label' => __( 'Normal', 'elementor' ),
  237. ]
  238. );
  239. $this->add_group_control(
  240. Group_Control_Background::get_type(),
  241. [
  242. 'name' => 'background',
  243. 'selector' => '{{WRAPPER}} > .elementor-element-populated',
  244. ]
  245. );
  246. $this->end_controls_tab();
  247. $this->start_controls_tab(
  248. 'tab_background_hover',
  249. [
  250. 'label' => __( 'Hover', 'elementor' ),
  251. ]
  252. );
  253. $this->add_group_control(
  254. Group_Control_Background::get_type(),
  255. [
  256. 'name' => 'background_hover',
  257. 'selector' => '{{WRAPPER}}:hover > .elementor-element-populated',
  258. ]
  259. );
  260. $this->add_control(
  261. 'background_hover_transition',
  262. [
  263. 'label' => __( 'Transition Duration', 'elementor' ),
  264. 'type' => Controls_Manager::SLIDER,
  265. 'default' => [
  266. 'size' => 0.3,
  267. ],
  268. 'range' => [
  269. 'px' => [
  270. 'max' => 3,
  271. 'step' => 0.1,
  272. ],
  273. ],
  274. 'render_type' => 'ui',
  275. 'separator' => 'before',
  276. ]
  277. );
  278. $this->end_controls_tab();
  279. $this->end_controls_tabs();
  280. $this->end_controls_section();
  281. // Section Column Background Overlay.
  282. $this->start_controls_section(
  283. 'section_background_overlay',
  284. [
  285. 'label' => __( 'Background Overlay', 'elementor' ),
  286. 'tab' => Controls_Manager::TAB_STYLE,
  287. 'condition' => [
  288. 'background_background' => [ 'classic', 'gradient' ],
  289. ],
  290. ]
  291. );
  292. $this->start_controls_tabs( 'tabs_background_overlay' );
  293. $this->start_controls_tab(
  294. 'tab_background_overlay_normal',
  295. [
  296. 'label' => __( 'Normal', 'elementor' ),
  297. ]
  298. );
  299. $this->add_group_control(
  300. Group_Control_Background::get_type(),
  301. [
  302. 'name' => 'background_overlay',
  303. 'selector' => '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay',
  304. ]
  305. );
  306. $this->add_control(
  307. 'background_overlay_opacity',
  308. [
  309. 'label' => __( 'Opacity', 'elementor' ),
  310. 'type' => Controls_Manager::SLIDER,
  311. 'default' => [
  312. 'size' => .5,
  313. ],
  314. 'range' => [
  315. 'px' => [
  316. 'max' => 1,
  317. 'step' => 0.01,
  318. ],
  319. ],
  320. 'selectors' => [
  321. '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'opacity: {{SIZE}};',
  322. ],
  323. 'condition' => [
  324. 'background_overlay_background' => [ 'classic', 'gradient' ],
  325. ],
  326. ]
  327. );
  328. $this->add_group_control(
  329. Group_Control_Css_Filter::get_type(),
  330. [
  331. 'name' => 'css_filters',
  332. 'selector' => '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay',
  333. ]
  334. );
  335. $this->add_control(
  336. 'overlay_blend_mode',
  337. [
  338. 'label' => __( 'Blend Mode', 'elementor' ),
  339. 'type' => Controls_Manager::SELECT,
  340. 'options' => [
  341. '' => __( 'Normal', 'elementor' ),
  342. 'multiply' => 'Multiply',
  343. 'screen' => 'Screen',
  344. 'overlay' => 'Overlay',
  345. 'darken' => 'Darken',
  346. 'lighten' => 'Lighten',
  347. 'color-dodge' => 'Color Dodge',
  348. 'saturation' => 'Saturation',
  349. 'color' => 'Color',
  350. 'luminosity' => 'Luminosity',
  351. ],
  352. 'selectors' => [
  353. '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'mix-blend-mode: {{VALUE}}',
  354. ],
  355. ]
  356. );
  357. $this->end_controls_tab();
  358. $this->start_controls_tab(
  359. 'tab_background_overlay_hover',
  360. [
  361. 'label' => __( 'Hover', 'elementor' ),
  362. ]
  363. );
  364. $this->add_group_control(
  365. Group_Control_Background::get_type(),
  366. [
  367. 'name' => 'background_overlay_hover',
  368. 'selector' => '{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay',
  369. ]
  370. );
  371. $this->add_control(
  372. 'background_overlay_hover_opacity',
  373. [
  374. 'label' => __( 'Opacity', 'elementor' ),
  375. 'type' => Controls_Manager::SLIDER,
  376. 'default' => [
  377. 'size' => .5,
  378. ],
  379. 'range' => [
  380. 'px' => [
  381. 'max' => 1,
  382. 'step' => 0.01,
  383. ],
  384. ],
  385. 'selectors' => [
  386. '{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'opacity: {{SIZE}};',
  387. ],
  388. 'condition' => [
  389. 'background_overlay_hover_background' => [ 'classic', 'gradient' ],
  390. ],
  391. ]
  392. );
  393. $this->add_group_control(
  394. Group_Control_Css_Filter::get_type(),
  395. [
  396. 'name' => 'css_filters_hover',
  397. 'selector' => '{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay',
  398. ]
  399. );
  400. $this->add_control(
  401. 'background_overlay_hover_transition',
  402. [
  403. 'label' => __( 'Transition Duration', 'elementor' ),
  404. 'type' => Controls_Manager::SLIDER,
  405. 'default' => [
  406. 'size' => 0.3,
  407. ],
  408. 'range' => [
  409. 'px' => [
  410. 'max' => 3,
  411. 'step' => 0.1,
  412. ],
  413. ],
  414. 'render_type' => 'ui',
  415. 'separator' => 'before',
  416. ]
  417. );
  418. $this->end_controls_tab();
  419. $this->end_controls_tabs();
  420. $this->end_controls_section();
  421. $this->start_controls_section(
  422. 'section_border',
  423. [
  424. 'label' => __( 'Border', 'elementor' ),
  425. 'tab' => Controls_Manager::TAB_STYLE,
  426. ]
  427. );
  428. $this->start_controls_tabs( 'tabs_border' );
  429. $this->start_controls_tab(
  430. 'tab_border_normal',
  431. [
  432. 'label' => __( 'Normal', 'elementor' ),
  433. ]
  434. );
  435. $this->add_group_control(
  436. Group_Control_Border::get_type(),
  437. [
  438. 'name' => 'border',
  439. 'selector' => '{{WRAPPER}} > .elementor-element-populated',
  440. ]
  441. );
  442. $this->add_control(
  443. 'border_radius',
  444. [
  445. 'label' => __( 'Border Radius', 'elementor' ),
  446. 'type' => Controls_Manager::DIMENSIONS,
  447. 'size_units' => [ 'px', '%' ],
  448. 'selectors' => [
  449. '{{WRAPPER}} > .elementor-element-populated, {{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  450. ],
  451. ]
  452. );
  453. $this->add_group_control(
  454. Group_Control_Box_Shadow::get_type(),
  455. [
  456. 'name' => 'box_shadow',
  457. 'selector' => '{{WRAPPER}} > .elementor-element-populated',
  458. ]
  459. );
  460. $this->end_controls_tab();
  461. $this->start_controls_tab(
  462. 'tab_border_hover',
  463. [
  464. 'label' => __( 'Hover', 'elementor' ),
  465. ]
  466. );
  467. $this->add_group_control(
  468. Group_Control_Border::get_type(),
  469. [
  470. 'name' => 'border_hover',
  471. 'selector' => '{{WRAPPER}}:hover > .elementor-element-populated',
  472. ]
  473. );
  474. $this->add_control(
  475. 'border_radius_hover',
  476. [
  477. 'label' => __( 'Border Radius', 'elementor' ),
  478. 'type' => Controls_Manager::DIMENSIONS,
  479. 'size_units' => [ 'px', '%' ],
  480. 'selectors' => [
  481. '{{WRAPPER}}:hover > .elementor-element-populated, {{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  482. ],
  483. ]
  484. );
  485. $this->add_group_control(
  486. Group_Control_Box_Shadow::get_type(),
  487. [
  488. 'name' => 'box_shadow_hover',
  489. 'selector' => '{{WRAPPER}}:hover > .elementor-element-populated',
  490. ]
  491. );
  492. $this->add_control(
  493. 'border_hover_transition',
  494. [
  495. 'label' => __( 'Transition Duration', 'elementor' ),
  496. 'type' => Controls_Manager::SLIDER,
  497. 'separator' => 'before',
  498. 'default' => [
  499. 'size' => 0.3,
  500. ],
  501. 'range' => [
  502. 'px' => [
  503. 'max' => 3,
  504. 'step' => 0.1,
  505. ],
  506. ],
  507. 'conditions' => [
  508. 'relation' => 'or',
  509. 'terms' => [
  510. [
  511. 'name' => 'background_background',
  512. 'operator' => '!==',
  513. 'value' => '',
  514. ],
  515. [
  516. 'name' => 'border_border',
  517. 'operator' => '!==',
  518. 'value' => '',
  519. ],
  520. ],
  521. ],
  522. 'selectors' => [
  523. '{{WRAPPER}} > .elementor-element-populated' => 'transition: background {{background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
  524. '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'transition: background {{background_overlay_hover_transition.SIZE}}s, border-radius {{SIZE}}s, opacity {{background_overlay_hover_transition.SIZE}}s',
  525. ],
  526. ]
  527. );
  528. $this->end_controls_tab();
  529. $this->end_controls_tabs();
  530. $this->end_controls_section();
  531. // Section Typography.
  532. $this->start_controls_section(
  533. 'section_typo',
  534. [
  535. 'label' => __( 'Typography', 'elementor' ),
  536. 'type' => Controls_Manager::SECTION,
  537. 'tab' => Controls_Manager::TAB_STYLE,
  538. ]
  539. );
  540. if ( in_array( Scheme_Color::get_type(), Schemes_Manager::get_enabled_schemes(), true ) ) {
  541. $this->add_control(
  542. 'colors_warning',
  543. [
  544. 'type' => Controls_Manager::RAW_HTML,
  545. 'raw' => __( 'Note: The following colors won\'t work if Default Colors are enabled.', 'elementor' ),
  546. 'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
  547. ]
  548. );
  549. }
  550. $this->add_control(
  551. 'heading_color',
  552. [
  553. 'label' => __( 'Heading Color', 'elementor' ),
  554. 'type' => Controls_Manager::COLOR,
  555. 'default' => '',
  556. 'selectors' => [
  557. '{{WRAPPER}} .elementor-element-populated .elementor-heading-title' => 'color: {{VALUE}};',
  558. ],
  559. 'separator' => 'none',
  560. ]
  561. );
  562. $this->add_control(
  563. 'color_text',
  564. [
  565. 'label' => __( 'Text Color', 'elementor' ),
  566. 'type' => Controls_Manager::COLOR,
  567. 'default' => '',
  568. 'selectors' => [
  569. '{{WRAPPER}} > .elementor-element-populated' => 'color: {{VALUE}};',
  570. ],
  571. ]
  572. );
  573. $this->add_control(
  574. 'color_link',
  575. [
  576. 'label' => __( 'Link Color', 'elementor' ),
  577. 'type' => Controls_Manager::COLOR,
  578. 'default' => '',
  579. 'selectors' => [
  580. '{{WRAPPER}} .elementor-element-populated a' => 'color: {{VALUE}};',
  581. ],
  582. ]
  583. );
  584. $this->add_control(
  585. 'color_link_hover',
  586. [
  587. 'label' => __( 'Link Hover Color', 'elementor' ),
  588. 'type' => Controls_Manager::COLOR,
  589. 'default' => '',
  590. 'selectors' => [
  591. '{{WRAPPER}} .elementor-element-populated a:hover' => 'color: {{VALUE}};',
  592. ],
  593. ]
  594. );
  595. $this->add_control(
  596. 'text_align',
  597. [
  598. 'label' => __( 'Text Align', 'elementor' ),
  599. 'type' => Controls_Manager::CHOOSE,
  600. 'options' => [
  601. 'left' => [
  602. 'title' => __( 'Left', 'elementor' ),
  603. 'icon' => 'fa fa-align-left',
  604. ],
  605. 'center' => [
  606. 'title' => __( 'Center', 'elementor' ),
  607. 'icon' => 'fa fa-align-center',
  608. ],
  609. 'right' => [
  610. 'title' => __( 'Right', 'elementor' ),
  611. 'icon' => 'fa fa-align-right',
  612. ],
  613. ],
  614. 'selectors' => [
  615. '{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};',
  616. ],
  617. ]
  618. );
  619. $this->end_controls_section();
  620. // Section Advanced.
  621. $this->start_controls_section(
  622. 'section_advanced',
  623. [
  624. 'label' => __( 'Advanced', 'elementor' ),
  625. 'type' => Controls_Manager::SECTION,
  626. 'tab' => Controls_Manager::TAB_ADVANCED,
  627. ]
  628. );
  629. $this->add_responsive_control(
  630. 'margin',
  631. [
  632. 'label' => __( 'Margin', 'elementor' ),
  633. 'type' => Controls_Manager::DIMENSIONS,
  634. 'size_units' => [ 'px', '%' ],
  635. 'selectors' => [
  636. '{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  637. ],
  638. ]
  639. );
  640. $this->add_responsive_control(
  641. 'padding',
  642. [
  643. 'label' => __( 'Padding', 'elementor' ),
  644. 'type' => Controls_Manager::DIMENSIONS,
  645. 'size_units' => [ 'px', 'em', '%' ],
  646. 'selectors' => [
  647. '{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
  648. ],
  649. ]
  650. );
  651. $this->add_control(
  652. 'z_index',
  653. [
  654. 'label' => __( 'Z-Index', 'elementor' ),
  655. 'type' => Controls_Manager::NUMBER,
  656. 'min' => 0,
  657. 'selectors' => [
  658. '{{WRAPPER}}' => 'z-index: {{VALUE}};',
  659. ],
  660. 'label_block' => false,
  661. ]
  662. );
  663. $this->add_control(
  664. 'animation',
  665. [
  666. 'label' => __( 'Entrance Animation', 'elementor' ),
  667. 'type' => Controls_Manager::ANIMATION,
  668. 'default' => '',
  669. 'prefix_class' => 'animated ',
  670. 'label_block' => false,
  671. 'frontend_available' => true,
  672. ]
  673. );
  674. $this->add_control(
  675. 'animation_duration',
  676. [
  677. 'label' => __( 'Animation Duration', 'elementor' ),
  678. 'type' => Controls_Manager::SELECT,
  679. 'default' => '',
  680. 'options' => [
  681. 'slow' => __( 'Slow', 'elementor' ),
  682. '' => __( 'Normal', 'elementor' ),
  683. 'fast' => __( 'Fast', 'elementor' ),
  684. ],
  685. 'prefix_class' => 'animated-',
  686. 'condition' => [
  687. 'animation!' => '',
  688. ],
  689. ]
  690. );
  691. $this->add_control(
  692. 'animation_delay',
  693. [
  694. 'label' => __( 'Animation Delay', 'elementor' ) . ' (ms)',
  695. 'type' => Controls_Manager::NUMBER,
  696. 'default' => '',
  697. 'min' => 0,
  698. 'step' => 100,
  699. 'condition' => [
  700. 'animation!' => '',
  701. ],
  702. 'render_type' => 'none',
  703. 'frontend_available' => true,
  704. ]
  705. );
  706. $this->add_control(
  707. '_element_id',
  708. [
  709. 'label' => __( 'CSS ID', 'elementor' ),
  710. 'type' => Controls_Manager::TEXT,
  711. 'default' => '',
  712. 'title' => __( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
  713. 'label_block' => false,
  714. 'style_transfer' => false,
  715. ]
  716. );
  717. $this->add_control(
  718. 'css_classes',
  719. [
  720. 'label' => __( 'CSS Classes', 'elementor' ),
  721. 'type' => Controls_Manager::TEXT,
  722. 'default' => '',
  723. 'prefix_class' => '',
  724. 'title' => __( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
  725. 'label_block' => false,
  726. ]
  727. );
  728. // TODO: Backward comparability for deprecated controls
  729. $this->add_control(
  730. 'screen_sm',
  731. [
  732. 'type' => Controls_Manager::HIDDEN,
  733. ]
  734. );
  735. $this->add_control(
  736. 'screen_sm_width',
  737. [
  738. 'type' => Controls_Manager::HIDDEN,
  739. 'condition' => [
  740. 'screen_sm' => [ 'custom' ],
  741. ],
  742. 'prefix_class' => 'elementor-sm-',
  743. ]
  744. );
  745. // END Backward comparability
  746. $this->end_controls_section();
  747. Plugin::$instance->controls_manager->add_custom_css_controls( $this );
  748. }
  749. /**
  750. * Render column edit tools.
  751. *
  752. * Used to generate the edit tools HTML.
  753. *
  754. * @since 1.8.0
  755. * @access protected
  756. */
  757. protected function render_edit_tools() {
  758. ?>
  759. <div class="elementor-element-overlay">
  760. <ul class="elementor-editor-element-settings elementor-editor-column-settings">
  761. <?php foreach ( self::get_edit_tools() as $edit_tool_name => $edit_tool ) : ?>
  762. <li class="elementor-editor-element-setting elementor-editor-element-<?php echo $edit_tool_name; ?>" title="<?php echo $edit_tool['title']; ?>">
  763. <i class="eicon-<?php echo $edit_tool['icon']; ?>" aria-hidden="true"></i>
  764. <span class="elementor-screen-only"><?php echo $edit_tool['title']; ?></span>
  765. </li>
  766. <?php endforeach; ?>
  767. </ul>
  768. <div class="elementor-column-percents-tooltip"></div>
  769. </div>
  770. <?php
  771. }
  772. /**
  773. * Render column output in the editor.
  774. *
  775. * Used to generate the live preview, using a Backbone JavaScript template.
  776. *
  777. * @since 1.0.0
  778. * @access protected
  779. */
  780. protected function _content_template() {
  781. ?>
  782. <div class="elementor-column-wrap">
  783. <div class="elementor-background-overlay"></div>
  784. <div class="elementor-widget-wrap"></div>
  785. </div>
  786. <?php
  787. }
  788. /**
  789. * Before column rendering.
  790. *
  791. * Used to add stuff before the column element.
  792. *
  793. * @since 1.0.0
  794. * @access public
  795. */
  796. public function before_render() {
  797. $settings = $this->get_settings_for_display();
  798. $has_background_overlay = in_array( $settings['background_overlay_background'], [ 'classic', 'gradient' ], true ) ||
  799. in_array( $settings['background_overlay_hover_background'], [ 'classic', 'gradient' ], true );
  800. $column_wrap_class = 'elementor-column-wrap';
  801. if ( $this->get_children() ) {
  802. $column_wrap_class .= ' elementor-element-populated';
  803. }
  804. ?>
  805. <<?php echo $this->get_html_tag() . ' ' . $this->get_render_attribute_string( '_wrapper' ); ?>>
  806. <div class="<?php echo $column_wrap_class; ?>">
  807. <?php if ( $has_background_overlay ) : ?>
  808. <div class="elementor-background-overlay"></div>
  809. <?php endif; ?>
  810. <div class="elementor-widget-wrap">
  811. <?php
  812. }
  813. /**
  814. * After column rendering.
  815. *
  816. * Used to add stuff after the column element.
  817. *
  818. * @since 1.0.0
  819. * @access public
  820. */
  821. public function after_render() {
  822. ?>
  823. </div>
  824. </div>
  825. </<?php echo $this->get_html_tag(); ?>>
  826. <?php
  827. }
  828. /**
  829. * Add column render attributes.
  830. *
  831. * Used to add attributes to the current column wrapper HTML tag.
  832. *
  833. * @since 1.3.0
  834. * @access protected
  835. */
  836. protected function _add_render_attributes() {
  837. parent::_add_render_attributes();
  838. $is_inner = $this->get_data( 'isInner' );
  839. $column_type = ! empty( $is_inner ) ? 'inner' : 'top';
  840. $settings = $this->get_settings();
  841. $this->add_render_attribute(
  842. '_wrapper', 'class', [
  843. 'elementor-column',
  844. 'elementor-col-' . $settings['_column_size'],
  845. 'elementor-' . $column_type . '-column',
  846. ]
  847. );
  848. $this->add_render_attribute( '_wrapper', 'data-element_type', $this->get_name() );
  849. }
  850. /**
  851. * Get default child type.
  852. *
  853. * Retrieve the column child type based on element data.
  854. *
  855. * @since 1.0.0
  856. * @access protected
  857. *
  858. * @param array $element_data Element ID.
  859. *
  860. * @return Element_Base Column default child type.
  861. */
  862. protected function _get_default_child_type( array $element_data ) {
  863. if ( 'section' === $element_data['elType'] ) {
  864. return Plugin::$instance->elements_manager->get_element_types( 'section' );
  865. }
  866. return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
  867. }
  868. /**
  869. * Get HTML tag.
  870. *
  871. * Retrieve the column element HTML tag.
  872. *
  873. * @since 1.5.3
  874. * @access private
  875. *
  876. * @return string Column HTML tag.
  877. */
  878. private function get_html_tag() {
  879. $html_tag = $this->get_settings( 'html_tag' );
  880. if ( empty( $html_tag ) ) {
  881. $html_tag = 'div';
  882. }
  883. return $html_tag;
  884. }
  885. }