elementor / includes / elements / column.php

column.php in Elementor Website Builder – more than just a page builder 4.0.0, at includes/elements/column.php

1,109 lines 27.7 KB

Raw Download Zip

1	<?php
2	namespace Elementor;
3
4	use Elementor\Core\Breakpoints\Manager as Breakpoints_Manager;
5	use Elementor\Plugin;
6
7	if ( ! defined( 'ABSPATH' ) ) {
8	exit; // Exit if accessed directly.
9	}
10
11	/**
12	* Elementor column element.
13	*
14	* Elementor column handler class is responsible for initializing the column
15	* element.
16	*
17	* @since 1.0.0
18	*/
19	class Element_Column extends Element_Base {
20
21	/**
22	* Get column name.
23	*
24	* Retrieve the column name.
25	*
26	* @since 1.0.0
27	* @access public
28	*
29	* @return string Column name.
30	*/
31	public function get_name() {
32	return 'column';
33	}
34
35	/**
36	* Get element type.
37	*
38	* Retrieve the element type, in this case `column`.
39	*
40	* @since 2.1.0
41	* @access public
42	* @static
43	*
44	* @return string The type.
45	*/
46	public static function get_type() {
47	return 'column';
48	}
49
50	/**
51	* Get column title.
52	*
53	* Retrieve the column title.
54	*
55	* @since 1.0.0
56	* @access public
57	*
58	* @return string Column title.
59	*/
60	public function get_title() {
61	return esc_html__( 'Column', 'elementor' );
62	}
63
64	/**
65	* Get column icon.
66	*
67	* Retrieve the column icon.
68	*
69	* @since 1.0.0
70	* @access public
71	*
72	* @return string Column icon.
73	*/
74	public function get_icon() {
75	return 'eicon-column';
76	}
77
78	protected function is_dynamic_content(): bool {
79	return false;
80	}
81
82	/**
83	* Get initial config.
84	*
85	* Retrieve the current section initial configuration.
86	*
87	* Adds more configuration on top of the controls list, the tabs assigned to
88	* the control, element name, type, icon and more. This method also adds
89	* section presets.
90	*
91	* @since 2.9.0
92	* @access protected
93	*
94	* @return array The initial config.
95	*/
96	protected function get_initial_config() {
97	$config = parent::get_initial_config();
98
99	$config['controls'] = $this->get_controls();
100	$config['tabs_controls'] = $this->get_tabs_controls();
101
102	return $config;
103	}
104
105	/**
106	* Register column controls.
107	*
108	* Used to add new controls to the column element.
109	*
110	* @since 3.1.0
111	* @access protected
112	*/
113	protected function register_controls() {
114	// Section Layout.
115	$this->start_controls_section(
116	'layout',
117	[
118	'label' => esc_html__( 'Layout', 'elementor' ),
119	'tab' => Controls_Manager::TAB_LAYOUT,
120	]
121	);
122
123	// Element Name for the Navigator.
124	$this->add_control(
125	'_title',
126	[
127	'label' => esc_html__( 'Title', 'elementor' ),
128	'type' => Controls_Manager::HIDDEN,
129	'render_type' => 'none',
130	]
131	);
132
133	$active_breakpoint_keys = array_reverse( array_keys( Plugin::$instance->breakpoints->get_active_breakpoints() ) );
134	$inline_size_device_args = [
135	Breakpoints_Manager::BREAKPOINT_KEY_MOBILE => [ 'placeholder' => 100 ],
136	];
137
138	foreach ( $active_breakpoint_keys as $breakpoint_key ) {
139	if ( ! isset( $inline_size_device_args[ $breakpoint_key ] ) ) {
140	$inline_size_device_args[ $breakpoint_key ] = [];
141	}
142
143	$inline_size_device_args[ $breakpoint_key ] = array_merge_recursive(
144	$inline_size_device_args[ $breakpoint_key ],
145	[
146	'max' => 100,
147	'required' => false,
148	]
149	);
150	}
151
152	if ( in_array( Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA, $active_breakpoint_keys, true ) ) {
153	$min_affected_device_value = Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA;
154	} else {
155	$min_affected_device_value = Breakpoints_Manager::BREAKPOINT_KEY_TABLET;
156	}
157
158	$this->add_responsive_control(
159	'_inline_size',
160	[
161	'label' => esc_html__( 'Column Width', 'elementor' ) . ' (%)',
162	'type' => Controls_Manager::NUMBER,
163	'min' => 2,
164	'max' => 98,
165	'required' => true,
166	'device_args' => $inline_size_device_args,
167	'min_affected_device' => [
168	Breakpoints_Manager::BREAKPOINT_KEY_DESKTOP => $min_affected_device_value,
169	Breakpoints_Manager::BREAKPOINT_KEY_LAPTOP => $min_affected_device_value,
170	Breakpoints_Manager::BREAKPOINT_KEY_TABLET_EXTRA => $min_affected_device_value,
171	Breakpoints_Manager::BREAKPOINT_KEY_TABLET => $min_affected_device_value,
172	Breakpoints_Manager::BREAKPOINT_KEY_MOBILE_EXTRA => $min_affected_device_value,
173	],
174	'selectors' => [
175	'{{WRAPPER}}' => 'width: {{VALUE}}%',
176	],
177	]
178	);
179
180	$this->add_responsive_control(
181	'content_position',
182	[
183	'label' => esc_html__( 'Vertical Alignment', 'elementor' ),
184	'type' => Controls_Manager::SELECT,
185	'default' => '',
186	'options' => [
187	'' => esc_html__( 'Default', 'elementor' ),
188	'top' => esc_html__( 'Top', 'elementor' ),
189	'center' => esc_html__( 'Middle', 'elementor' ),
190	'bottom' => esc_html__( 'Bottom', 'elementor' ),
191	'space-between' => esc_html__( 'Space Between', 'elementor' ),
192	'space-around' => esc_html__( 'Space Around', 'elementor' ),
193	'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
194	],
195	'selectors_dictionary' => [
196	'top' => 'flex-start',
197	'bottom' => 'flex-end',
198	],
199	'selectors' => [
200	// TODO: The following line is for BC since 2.7.0.
201	'.elementor-bc-flex-widget {{WRAPPER}}.elementor-column .elementor-widget-wrap' => 'align-items: {{VALUE}}',
202	// This specificity is intended to make sure column css overwrites section css on vertical alignment (content_position).
203	'{{WRAPPER}}.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated' => 'align-content: {{VALUE}}; align-items: {{VALUE}};',
204	],
205	]
206	);
207
208	$this->add_responsive_control(
209	'align',
210	[
211	'label' => esc_html__( 'Horizontal Alignment', 'elementor' ),
212	'type' => Controls_Manager::SELECT,
213	'default' => '',
214	'options' => [
215	'' => esc_html__( 'Default', 'elementor' ),
216	'flex-start' => esc_html__( 'Start', 'elementor' ),
217	'center' => esc_html__( 'Center', 'elementor' ),
218	'flex-end' => esc_html__( 'End', 'elementor' ),
219	'space-between' => esc_html__( 'Space Between', 'elementor' ),
220	'space-around' => esc_html__( 'Space Around', 'elementor' ),
221	'space-evenly' => esc_html__( 'Space Evenly', 'elementor' ),
222	],
223	'selectors' => [
224	'{{WRAPPER}}.elementor-column > .elementor-widget-wrap' => 'justify-content: {{VALUE}}',
225	],
226	]
227	);
228
229	$optimized_markup = Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
230	$space_between_widgets = $optimized_markup
231	? '--kit-widget-spacing: {{VALUE}}px'
232	: 'margin-block-end: {{VALUE}}px';
233
234	$this->add_responsive_control(
235	'space_between_widgets',
236	[
237	'label' => esc_html__( 'Widgets Space', 'elementor' ) . ' (px)',
238	'type' => Controls_Manager::NUMBER,
239	'placeholder' => 20,
240	'selectors' => [
241	'{{WRAPPER}} > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute)' => $space_between_widgets, // Need the full path for exclude the inner section.
242	],
243	]
244	);
245
246	$possible_tags = [
247	'div',
248	'header',
249	'footer',
250	'main',
251	'article',
252	'section',
253	'aside',
254	'nav',
255	];
256
257	$options = [
258	'' => esc_html__( 'Default', 'elementor' ),
259	] + array_combine( $possible_tags, $possible_tags );
260
261	$this->add_control(
262	'html_tag',
263	[
264	'label' => esc_html__( 'HTML Tag', 'elementor' ),
265	'type' => Controls_Manager::SELECT,
266	'options' => $options,
267	'render_type' => 'none',
268	]
269	);
270
271	$this->end_controls_section();
272
273	$this->start_controls_section(
274	'section_style',
275	[
276	'label' => esc_html__( 'Background', 'elementor' ),
277	'tab' => Controls_Manager::TAB_STYLE,
278	]
279	);
280
281	$this->start_controls_tabs( 'tabs_background' );
282
283	$this->start_controls_tab(
284	'tab_background_normal',
285	[
286	'label' => esc_html__( 'Normal', 'elementor' ),
287	]
288	);
289
290	$this->add_group_control(
291	Group_Control_Background::get_type(),
292	[
293	'name' => 'background',
294	'types' => [ 'classic', 'gradient', 'slideshow' ],
295	'selector' => '{{WRAPPER}}:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, {{WRAPPER}} > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer',
296	'fields_options' => [
297	'background' => [
298	'frontend_available' => true,
299	],
300	],
301	]
302	);
303
304	$this->add_control(
305	'handle_slideshow_asset_loading',
306	[
307	'type' => Controls_Manager::HIDDEN,
308	'assets' => [
309	'styles' => [
310	[
311	'name' => 'e-swiper',
312	'conditions' => [
313	'terms' => [
314	[
315	'name' => 'background_background',
316	'operator' => '===',
317	'value' => 'slideshow',
318	],
319	],
320	],
321	],
322	],
323	'scripts' => [
324	[
325	'name' => 'swiper',
326	'conditions' => [
327	'terms' => [
328	[
329	'name' => 'background_background',
330	'operator' => '===',
331	'value' => 'slideshow',
332	],
333	],
334	],
335	],
336	],
337	],
338	]
339	);
340
341	$this->end_controls_tab();
342
343	$this->start_controls_tab(
344	'tab_background_hover',
345	[
346	'label' => esc_html__( 'Hover', 'elementor' ),
347	]
348	);
349
350	$this->add_group_control(
351	Group_Control_Background::get_type(),
352	[
353	'name' => 'background_hover',
354	'selector' => '{{WRAPPER}}:hover > .elementor-element-populated',
355	]
356	);
357
358	$this->add_control(
359	'background_hover_transition',
360	[
361	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
362	'type' => Controls_Manager::SLIDER,
363	'default' => [
364	'size' => 0.3,
365	],
366	'range' => [
367	'px' => [
368	'min' => 0,
369	'max' => 3,
370	'step' => 0.1,
371	],
372	],
373	'render_type' => 'ui',
374	'separator' => 'before',
375	]
376	);
377
378	$this->end_controls_tab();
379
380	$this->end_controls_tabs();
381
382	$this->end_controls_section();
383
384	// Section Column Background Overlay.
385	$this->start_controls_section(
386	'section_background_overlay',
387	[
388	'label' => esc_html__( 'Background Overlay', 'elementor' ),
389	'tab' => Controls_Manager::TAB_STYLE,
390	'condition' => [
391	'background_background' => [ 'classic', 'gradient' ],
392	],
393	]
394	);
395
396	$this->start_controls_tabs( 'tabs_background_overlay' );
397
398	$this->start_controls_tab(
399	'tab_background_overlay_normal',
400	[
401	'label' => esc_html__( 'Normal', 'elementor' ),
402	]
403	);
404
405	$this->add_group_control(
406	Group_Control_Background::get_type(),
407	[
408	'name' => 'background_overlay',
409	'selector' => '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay',
410	]
411	);
412
413	$this->add_responsive_control(
414	'background_overlay_opacity',
415	[
416	'label' => esc_html__( 'Opacity', 'elementor' ),
417	'type' => Controls_Manager::SLIDER,
418	'default' => [
419	'size' => .5,
420	],
421	'range' => [
422	'px' => [
423	'max' => 1,
424	'step' => 0.01,
425	],
426	],
427	'selectors' => [
428	'{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'opacity: {{SIZE}};',
429	],
430	'condition' => [
431	'background_overlay_background' => [ 'classic', 'gradient' ],
432	],
433	]
434	);
435
436	$this->add_group_control(
437	Group_Control_Css_Filter::get_type(),
438	[
439	'name' => 'css_filters',
440	'selector' => '{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay',
441	]
442	);
443
444	$this->add_control(
445	'overlay_blend_mode',
446	[
447	'label' => esc_html__( 'Blend Mode', 'elementor' ),
448	'type' => Controls_Manager::SELECT,
449	'options' => [
450	'' => esc_html__( 'Normal', 'elementor' ),
451	'multiply' => esc_html__( 'Multiply', 'elementor' ),
452	'screen' => esc_html__( 'Screen', 'elementor' ),
453	'overlay' => esc_html__( 'Overlay', 'elementor' ),
454	'darken' => esc_html__( 'Darken', 'elementor' ),
455	'lighten' => esc_html__( 'Lighten', 'elementor' ),
456	'color-dodge' => esc_html__( 'Color Dodge', 'elementor' ),
457	'saturation' => esc_html__( 'Saturation', 'elementor' ),
458	'color' => esc_html__( 'Color', 'elementor' ),
459	'difference' => esc_html__( 'Difference', 'elementor' ),
460	'exclusion' => esc_html__( 'Exclusion', 'elementor' ),
461	'hue' => esc_html__( 'Hue', 'elementor' ),
462	'luminosity' => esc_html__( 'Luminosity', 'elementor' ),
463	],
464	'selectors' => [
465	'{{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay' => 'mix-blend-mode: {{VALUE}}',
466	],
467	]
468	);
469
470	$this->end_controls_tab();
471
472	$this->start_controls_tab(
473	'tab_background_overlay_hover',
474	[
475	'label' => esc_html__( 'Hover', 'elementor' ),
476	]
477	);
478
479	$this->add_group_control(
480	Group_Control_Background::get_type(),
481	[
482	'name' => 'background_overlay_hover',
483	'selector' => '{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay',
484	]
485	);
486
487	$this->add_responsive_control(
488	'background_overlay_hover_opacity',
489	[
490	'label' => esc_html__( 'Opacity', 'elementor' ),
491	'type' => Controls_Manager::SLIDER,
492	'default' => [
493	'size' => .5,
494	],
495	'range' => [
496	'px' => [
497	'max' => 1,
498	'step' => 0.01,
499	],
500	],
501	'selectors' => [
502	'{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'opacity: {{SIZE}};',
503	],
504	'condition' => [
505	'background_overlay_hover_background' => [ 'classic', 'gradient' ],
506	],
507	]
508	);
509
510	$this->add_group_control(
511	Group_Control_Css_Filter::get_type(),
512	[
513	'name' => 'css_filters_hover',
514	'selector' => '{{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay',
515	]
516	);
517
518	$this->add_control(
519	'background_overlay_hover_transition',
520	[
521	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
522	'type' => Controls_Manager::SLIDER,
523	'default' => [
524	'size' => 0.3,
525	],
526	'range' => [
527	'px' => [
528	'min' => 0,
529	'max' => 3,
530	'step' => 0.1,
531	],
532	],
533	'render_type' => 'ui',
534	'separator' => 'before',
535	]
536	);
537
538	$this->end_controls_tab();
539
540	$this->end_controls_tabs();
541
542	$this->end_controls_section();
543
544	$this->start_controls_section(
545	'section_border',
546	[
547	'label' => esc_html__( 'Border', 'elementor' ),
548	'tab' => Controls_Manager::TAB_STYLE,
549	]
550	);
551
552	$this->start_controls_tabs( 'tabs_border' );
553
554	$this->start_controls_tab(
555	'tab_border_normal',
556	[
557	'label' => esc_html__( 'Normal', 'elementor' ),
558	]
559	);
560
561	$this->add_group_control(
562	Group_Control_Border::get_type(),
563	[
564	'name' => 'border',
565	'selector' => '{{WRAPPER}} > .elementor-element-populated',
566	]
567	);
568
569	$this->add_responsive_control(
570	'border_radius',
571	[
572	'label' => esc_html__( 'Border Radius', 'elementor' ),
573	'type' => Controls_Manager::DIMENSIONS,
574	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
575	'selectors' => [
576	'{{WRAPPER}} > .elementor-element-populated, {{WRAPPER}} > .elementor-element-populated > .elementor-background-overlay, {{WRAPPER}} > .elementor-background-slideshow' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
577	],
578	]
579	);
580
581	$this->add_group_control(
582	Group_Control_Box_Shadow::get_type(),
583	[
584	'name' => 'box_shadow',
585	'selector' => '{{WRAPPER}} > .elementor-element-populated',
586	]
587	);
588
589	$this->end_controls_tab();
590
591	$this->start_controls_tab(
592	'tab_border_hover',
593	[
594	'label' => esc_html__( 'Hover', 'elementor' ),
595	]
596	);
597
598	$this->add_group_control(
599	Group_Control_Border::get_type(),
600	[
601	'name' => 'border_hover',
602	'selector' => '{{WRAPPER}}:hover > .elementor-element-populated',
603	]
604	);
605
606	$this->add_responsive_control(
607	'border_radius_hover',
608	[
609	'label' => esc_html__( 'Border Radius', 'elementor' ),
610	'type' => Controls_Manager::DIMENSIONS,
611	'size_units' => [ 'px', '%', 'em', 'rem', 'custom' ],
612	'selectors' => [
613	'{{WRAPPER}}:hover > .elementor-element-populated, {{WRAPPER}}:hover > .elementor-element-populated > .elementor-background-overlay' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
614	],
615	]
616	);
617
618	$this->add_group_control(
619	Group_Control_Box_Shadow::get_type(),
620	[
621	'name' => 'box_shadow_hover',
622	'selector' => '{{WRAPPER}}:hover > .elementor-element-populated',
623	]
624	);
625
626	$this->add_control(
627	'border_hover_transition',
628	[
629	'label' => esc_html__( 'Transition Duration', 'elementor' ) . ' (s)',
630	'type' => Controls_Manager::SLIDER,
631	'separator' => 'before',
632	'default' => [
633	'size' => 0.3,
634	],
635	'range' => [
636	'px' => [
637	'min' => 0,
638	'max' => 3,
639	'step' => 0.1,
640	],
641	],
642	'conditions' => [
643	'relation' => 'or',
644	'terms' => [
645	[
646	'name' => 'background_background',
647	'operator' => '!==',
648	'value' => '',
649	],
650	[
651	'name' => 'border_hover_border',
652	'operator' => '!==',
653	'value' => '',
654	],
655	],
656	],
657	'selectors' => [
658	'{{WRAPPER}} > .elementor-element-populated' => 'transition: background {{background_hover_transition.SIZE}}s, border {{SIZE}}s, border-radius {{SIZE}}s, box-shadow {{SIZE}}s',
659	'{{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',
660	],
661	]
662	);
663
664	$this->end_controls_tab();
665
666	$this->end_controls_tabs();
667
668	$this->end_controls_section();
669
670	// Section Typography.
671	$this->start_controls_section(
672	'section_typo',
673	[
674	'label' => esc_html__( 'Typography', 'elementor' ),
675	'type' => Controls_Manager::SECTION,
676	'tab' => Controls_Manager::TAB_STYLE,
677	]
678	);
679
680	$this->add_control(
681	'heading_color',
682	[
683	'label' => esc_html__( 'Heading Color', 'elementor' ),
684	'type' => Controls_Manager::COLOR,
685	'default' => '',
686	'selectors' => [
687	'{{WRAPPER}} .elementor-element-populated .elementor-heading-title' => 'color: {{VALUE}};',
688	],
689	]
690	);
691
692	$this->add_control(
693	'color_text',
694	[
695	'label' => esc_html__( 'Text Color', 'elementor' ),
696	'type' => Controls_Manager::COLOR,
697	'default' => '',
698	'selectors' => [
699	'{{WRAPPER}} > .elementor-element-populated' => 'color: {{VALUE}};',
700	],
701	]
702	);
703
704	$this->add_control(
705	'color_link',
706	[
707	'label' => esc_html__( 'Link Color', 'elementor' ),
708	'type' => Controls_Manager::COLOR,
709	'default' => '',
710	'selectors' => [
711	'{{WRAPPER}} .elementor-element-populated a' => 'color: {{VALUE}};',
712	],
713	]
714	);
715
716	$this->add_control(
717	'color_link_hover',
718	[
719	'label' => esc_html__( 'Link Hover Color', 'elementor' ),
720	'type' => Controls_Manager::COLOR,
721	'default' => '',
722	'selectors' => [
723	'{{WRAPPER}} .elementor-element-populated a:hover' => 'color: {{VALUE}};',
724	],
725	]
726	);
727
728	$this->add_responsive_control(
729	'text_align',
730	[
731	'label' => esc_html__( 'Text Align', 'elementor' ),
732	'type' => Controls_Manager::CHOOSE,
733	'options' => [
734	'start' => [
735	'title' => esc_html__( 'Start', 'elementor' ),
736	'icon' => 'eicon-text-align-left',
737	],
738	'center' => [
739	'title' => esc_html__( 'Center', 'elementor' ),
740	'icon' => 'eicon-text-align-center',
741	],
742	'end' => [
743	'title' => esc_html__( 'End', 'elementor' ),
744	'icon' => 'eicon-text-align-right',
745	],
746	'justify' => [
747	'title' => esc_html__( 'Justified', 'elementor' ),
748	'icon' => 'eicon-text-align-justify',
749	],
750	],
751	'classes' => 'elementor-control-start-end',
752	'selectors_dictionary' => [
753	'left' => is_rtl() ? 'end' : 'start',
754	'right' => is_rtl() ? 'start' : 'end',
755	],
756	'selectors' => [
757	'{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};',
758	],
759	]
760	);
761
762	$this->end_controls_section();
763
764	// Section Advanced.
765	$this->start_controls_section(
766	'section_advanced',
767	[
768	'label' => esc_html__( 'Advanced', 'elementor' ),
769	'type' => Controls_Manager::SECTION,
770	'tab' => Controls_Manager::TAB_ADVANCED,
771	]
772	);
773
774	$this->add_responsive_control(
775	'margin',
776	[
777	'label' => esc_html__( 'Margin', 'elementor' ),
778	'type' => Controls_Manager::DIMENSIONS,
779	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
780	'selectors' => [
781	'{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};
782	--e-column-margin-right: {{RIGHT}}{{UNIT}}; --e-column-margin-left: {{LEFT}}{{UNIT}};',
783	],
784	]
785	);
786
787	$this->add_responsive_control(
788	'padding',
789	[
790	'label' => esc_html__( 'Padding', 'elementor' ),
791	'type' => Controls_Manager::DIMENSIONS,
792	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
793	'selectors' => [
794	'{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
795	],
796	]
797	);
798
799	$this->add_responsive_control(
800	'z_index',
801	[
802	'label' => esc_html__( 'Z-Index', 'elementor' ),
803	'type' => Controls_Manager::NUMBER,
804	'min' => 0,
805	'selectors' => [
806	'{{WRAPPER}}' => 'z-index: {{VALUE}};',
807	],
808	]
809	);
810
811	$this->add_control(
812	'_element_id',
813	[
814	'label' => esc_html__( 'CSS ID', 'elementor' ),
815	'type' => Controls_Manager::TEXT,
816	'default' => '',
817	'ai' => [
818	'active' => false,
819	],
820	'dynamic' => [
821	'active' => true,
822	],
823	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
824	'style_transfer' => false,
825	'classes' => 'elementor-control-direction-ltr',
826	]
827	);
828
829	$this->add_control(
830	'css_classes',
831	[
832	'label' => esc_html__( 'CSS Classes', 'elementor' ),
833	'type' => Controls_Manager::TEXT,
834	'default' => '',
835	'ai' => [
836	'active' => false,
837	],
838	'dynamic' => [
839	'active' => true,
840	],
841	'prefix_class' => '',
842	'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
843	'classes' => 'elementor-control-direction-ltr',
844	]
845	);
846
847	Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
848
849	// TODO: Backward comparability for deprecated controls.
850	$this->add_control(
851	'screen_sm',
852	[
853	'type' => Controls_Manager::HIDDEN,
854	]
855	);
856
857	$this->add_control(
858	'screen_sm_width',
859	[
860	'type' => Controls_Manager::HIDDEN,
861	'condition' => [
862	'screen_sm' => [ 'custom' ],
863	],
864	'prefix_class' => 'elementor-sm-',
865	]
866	);
867	// END Backward comparability.
868
869	$this->end_controls_section();
870
871	$this->start_controls_section(
872	'section_effects',
873	[
874	'label' => esc_html__( 'Motion Effects', 'elementor' ),
875	'tab' => Controls_Manager::TAB_ADVANCED,
876	]
877	);
878
879	Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
880
881	$this->add_responsive_control(
882	'animation',
883	[
884	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
885	'type' => Controls_Manager::ANIMATION,
886	'frontend_available' => true,
887	]
888	);
889
890	$this->add_control(
891	'animation_duration',
892	[
893	'label' => esc_html__( 'Animation Duration', 'elementor' ),
894	'type' => Controls_Manager::SELECT,
895	'default' => '',
896	'options' => [
897	'slow' => esc_html__( 'Slow', 'elementor' ),
898	'' => esc_html__( 'Normal', 'elementor' ),
899	'fast' => esc_html__( 'Fast', 'elementor' ),
900	],
901	'prefix_class' => 'animated-',
902	'condition' => [
903	'animation!' => '',
904	],
905	]
906	);
907
908	$this->add_control(
909	'animation_delay',
910	[
911	'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
912	'type' => Controls_Manager::NUMBER,
913	'default' => '',
914	'min' => 0,
915	'step' => 100,
916	'condition' => [
917	'animation!' => '',
918	],
919	'render_type' => 'none',
920	'frontend_available' => true,
921	]
922	);
923
924	$this->end_controls_section();
925
926	$this->start_controls_section(
927	'_section_responsive',
928	[
929	'label' => esc_html__( 'Responsive', 'elementor' ),
930	'tab' => Controls_Manager::TAB_ADVANCED,
931	]
932	);
933
934	$this->add_control(
935	'responsive_description',
936	[
937	'raw' => sprintf(
938	/* translators: 1: Link open tag, 2: Link close tag. */
939	esc_html__( 'Responsive visibility will take effect only on %1$s preview mode %2$s or live page, and not while editing in Elementor.', 'elementor' ),
940	'<a href="javascript: $e.run( \'panel/close\' )">',
941	'</a>'
942	),
943	'type' => Controls_Manager::RAW_HTML,
944	'content_classes' => 'elementor-descriptor',
945	]
946	);
947
948	$this->add_hidden_device_controls();
949
950	$this->end_controls_section();
951
952	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
953
954	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
955	}
956
957	/**
958	* Render column output in the editor.
959	*
960	* Used to generate the live preview, using a Backbone JavaScript template.
961	*
962	* @since 2.9.0
963	* @access protected
964	*/
965	protected function content_template() {
966	?>
967	<div class="elementor-widget-wrap">
968	<div class="elementor-background-overlay"></div>
969	</div>
970	<?php
971	}
972
973	/**
974	* Before column rendering.
975	*
976	* Used to add stuff before the column element.
977	*
978	* @since 1.0.0
979	* @access public
980	*/
981	public function before_render() {
982	$settings = $this->get_settings_for_display();
983
984	$overlay_background = $settings['background_overlay_background'] ?? '';
985	$overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
986
987	$has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) \|\|
988	in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
989
990	$column_wrap_classes = [ 'elementor-widget-wrap' ];
991
992	if ( $this->get_children() ) {
993	$column_wrap_classes[] = 'elementor-element-populated';
994	}
995
996	$this->add_render_attribute( [
997	'_widget_wrapper' => [
998	'class' => $column_wrap_classes,
999	],
1000	'_background_overlay' => [
1001	'class' => [ 'elementor-background-overlay' ],
1002	],
1003	] );
1004	?>
1005	<<?php
1006	// PHPCS - the method get_html_tag is safe.
1007	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1008	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1009	<div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
1010	<?php if ( $has_background_overlay ) : ?>
1011	<div <?php $this->print_render_attribute_string( '_background_overlay' ); ?>></div>
1012	<?php endif; ?>
1013	<?php
1014	}
1015
1016	/**
1017	* After column rendering.
1018	*
1019	* Used to add stuff after the column element.
1020	*
1021	* @since 1.0.0
1022	* @access public
1023	*/
1024	public function after_render() {
1025	?>
1026	</div>
1027	</<?php
1028	// PHPCS - the method get_html_tag is safe.
1029	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
1030	<?php
1031	}
1032
1033	/**
1034	* Add column render attributes.
1035	*
1036	* Used to add attributes to the current column wrapper HTML tag.
1037	*
1038	* @since 1.3.0
1039	* @access protected
1040	*/
1041	protected function add_render_attributes() {
1042
1043	$is_inner = $this->get_data( 'isInner' );
1044
1045	$column_type = ! empty( $is_inner ) ? 'inner' : 'top';
1046
1047	$settings = $this->get_settings();
1048
1049	$this->add_render_attribute(
1050	'_wrapper', 'class', [
1051	'elementor-column',
1052	'elementor-col-' . $settings['_column_size'],
1053	'elementor-' . $column_type . '-column',
1054	]
1055	);
1056
1057	parent::add_render_attributes();
1058	}
1059
1060	/**
1061	* Get default child type.
1062	*
1063	* Retrieve the column child type based on element data.
1064	*
1065	* @since 1.0.0
1066	* @access protected
1067	*
1068	* @param array $element_data Element ID.
1069	*
1070	* @return Element_Base\|false Column default child type.
1071	*/
1072	protected function _get_default_child_type( array $element_data ) {
1073	if ( 'section' === $element_data['elType'] ) {
1074	return Plugin::$instance->elements_manager->get_element_types( 'section' );
1075	}
1076
1077	if ( 'container' === $element_data['elType'] ) {
1078	return Plugin::$instance->elements_manager->get_element_types( 'container' );
1079	}
1080
1081	// If the element doesn't exists (disabled element, experiment, etc.), return false to prevent errors.
1082	if ( empty( $element_data['widgetType'] ) ) {
1083	return false;
1084	}
1085
1086	return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
1087	}
1088
1089	/**
1090	* Get HTML tag.
1091	*
1092	* Retrieve the column element HTML tag.
1093	*
1094	* @since 1.5.3
1095	* @access private
1096	*
1097	* @return string Column HTML tag.
1098	*/
1099	private function get_html_tag() {
1100	$html_tag = $this->get_settings( 'html_tag' );
1101
1102	if ( empty( $html_tag ) ) {
1103	$html_tag = 'div';
1104	}
1105
1106	return Utils::validate_html_tag( $html_tag );
1107	}
1108	}
1109