elementor / includes / elements / column.php

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

1,104 lines 27.5 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-bottom: {{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	'left' => [
735	'title' => esc_html__( 'Left', 'elementor' ),
736	'icon' => 'eicon-text-align-left',
737	],
738	'center' => [
739	'title' => esc_html__( 'Center', 'elementor' ),
740	'icon' => 'eicon-text-align-center',
741	],
742	'right' => [
743	'title' => esc_html__( 'Right', '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	'selectors' => [
752	'{{WRAPPER}} > .elementor-element-populated' => 'text-align: {{VALUE}};',
753	],
754	]
755	);
756
757	$this->end_controls_section();
758
759	// Section Advanced.
760	$this->start_controls_section(
761	'section_advanced',
762	[
763	'label' => esc_html__( 'Advanced', 'elementor' ),
764	'type' => Controls_Manager::SECTION,
765	'tab' => Controls_Manager::TAB_ADVANCED,
766	]
767	);
768
769	$this->add_responsive_control(
770	'margin',
771	[
772	'label' => esc_html__( 'Margin', 'elementor' ),
773	'type' => Controls_Manager::DIMENSIONS,
774	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
775	'selectors' => [
776	'{{WRAPPER}} > .elementor-element-populated' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};
777	--e-column-margin-right: {{RIGHT}}{{UNIT}}; --e-column-margin-left: {{LEFT}}{{UNIT}};',
778	],
779	]
780	);
781
782	$this->add_responsive_control(
783	'padding',
784	[
785	'label' => esc_html__( 'Padding', 'elementor' ),
786	'type' => Controls_Manager::DIMENSIONS,
787	'size_units' => [ 'px', '%', 'em', 'rem', 'vw', 'custom' ],
788	'selectors' => [
789	'{{WRAPPER}} > .elementor-element-populated' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
790	],
791	]
792	);
793
794	$this->add_responsive_control(
795	'z_index',
796	[
797	'label' => esc_html__( 'Z-Index', 'elementor' ),
798	'type' => Controls_Manager::NUMBER,
799	'min' => 0,
800	'selectors' => [
801	'{{WRAPPER}}' => 'z-index: {{VALUE}};',
802	],
803	]
804	);
805
806	$this->add_control(
807	'_element_id',
808	[
809	'label' => esc_html__( 'CSS ID', 'elementor' ),
810	'type' => Controls_Manager::TEXT,
811	'default' => '',
812	'ai' => [
813	'active' => false,
814	],
815	'dynamic' => [
816	'active' => true,
817	],
818	'title' => esc_html__( 'Add your custom id WITHOUT the Pound key. e.g: my-id', 'elementor' ),
819	'style_transfer' => false,
820	'classes' => 'elementor-control-direction-ltr',
821	]
822	);
823
824	$this->add_control(
825	'css_classes',
826	[
827	'label' => esc_html__( 'CSS Classes', 'elementor' ),
828	'type' => Controls_Manager::TEXT,
829	'default' => '',
830	'ai' => [
831	'active' => false,
832	],
833	'dynamic' => [
834	'active' => true,
835	],
836	'prefix_class' => '',
837	'title' => esc_html__( 'Add your custom class WITHOUT the dot. e.g: my-class', 'elementor' ),
838	'classes' => 'elementor-control-direction-ltr',
839	]
840	);
841
842	Plugin::$instance->controls_manager->add_display_conditions_controls( $this );
843
844	// TODO: Backward comparability for deprecated controls.
845	$this->add_control(
846	'screen_sm',
847	[
848	'type' => Controls_Manager::HIDDEN,
849	]
850	);
851
852	$this->add_control(
853	'screen_sm_width',
854	[
855	'type' => Controls_Manager::HIDDEN,
856	'condition' => [
857	'screen_sm' => [ 'custom' ],
858	],
859	'prefix_class' => 'elementor-sm-',
860	]
861	);
862	// END Backward comparability.
863
864	$this->end_controls_section();
865
866	$this->start_controls_section(
867	'section_effects',
868	[
869	'label' => esc_html__( 'Motion Effects', 'elementor' ),
870	'tab' => Controls_Manager::TAB_ADVANCED,
871	]
872	);
873
874	Plugin::$instance->controls_manager->add_motion_effects_promotion_control( $this );
875
876	$this->add_responsive_control(
877	'animation',
878	[
879	'label' => esc_html__( 'Entrance Animation', 'elementor' ),
880	'type' => Controls_Manager::ANIMATION,
881	'frontend_available' => true,
882	]
883	);
884
885	$this->add_control(
886	'animation_duration',
887	[
888	'label' => esc_html__( 'Animation Duration', 'elementor' ),
889	'type' => Controls_Manager::SELECT,
890	'default' => '',
891	'options' => [
892	'slow' => esc_html__( 'Slow', 'elementor' ),
893	'' => esc_html__( 'Normal', 'elementor' ),
894	'fast' => esc_html__( 'Fast', 'elementor' ),
895	],
896	'prefix_class' => 'animated-',
897	'condition' => [
898	'animation!' => '',
899	],
900	]
901	);
902
903	$this->add_control(
904	'animation_delay',
905	[
906	'label' => esc_html__( 'Animation Delay', 'elementor' ) . ' (ms)',
907	'type' => Controls_Manager::NUMBER,
908	'default' => '',
909	'min' => 0,
910	'step' => 100,
911	'condition' => [
912	'animation!' => '',
913	],
914	'render_type' => 'none',
915	'frontend_available' => true,
916	]
917	);
918
919	$this->end_controls_section();
920
921	$this->start_controls_section(
922	'_section_responsive',
923	[
924	'label' => esc_html__( 'Responsive', 'elementor' ),
925	'tab' => Controls_Manager::TAB_ADVANCED,
926	]
927	);
928
929	$this->add_control(
930	'responsive_description',
931	[
932	'raw' => sprintf(
933	/* translators: 1: Link open tag, 2: Link close tag. */
934	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' ),
935	'<a href="javascript: $e.run( \'panel/close\' )">',
936	'</a>'
937	),
938	'type' => Controls_Manager::RAW_HTML,
939	'content_classes' => 'elementor-descriptor',
940	]
941	);
942
943	$this->add_hidden_device_controls();
944
945	$this->end_controls_section();
946
947	Plugin::$instance->controls_manager->add_custom_attributes_controls( $this );
948
949	Plugin::$instance->controls_manager->add_custom_css_controls( $this );
950	}
951
952	/**
953	* Render column output in the editor.
954	*
955	* Used to generate the live preview, using a Backbone JavaScript template.
956	*
957	* @since 2.9.0
958	* @access protected
959	*/
960	protected function content_template() {
961	?>
962	<div class="elementor-widget-wrap">
963	<div class="elementor-background-overlay"></div>
964	</div>
965	<?php
966	}
967
968	/**
969	* Before column rendering.
970	*
971	* Used to add stuff before the column element.
972	*
973	* @since 1.0.0
974	* @access public
975	*/
976	public function before_render() {
977	$settings = $this->get_settings_for_display();
978
979	$overlay_background = $settings['background_overlay_background'] ?? '';
980	$overlay_hover_background = $settings['background_overlay_hover_background'] ?? '';
981
982	$has_background_overlay = in_array( $overlay_background, [ 'classic', 'gradient' ], true ) \|\|
983	in_array( $overlay_hover_background, [ 'classic', 'gradient' ], true );
984
985	$column_wrap_classes = [ 'elementor-widget-wrap' ];
986
987	if ( $this->get_children() ) {
988	$column_wrap_classes[] = 'elementor-element-populated';
989	}
990
991	$this->add_render_attribute( [
992	'_widget_wrapper' => [
993	'class' => $column_wrap_classes,
994	],
995	'_background_overlay' => [
996	'class' => [ 'elementor-background-overlay' ],
997	],
998	] );
999	?>
1000	<<?php
1001	// PHPCS - the method get_html_tag is safe.
1002	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped
1003	?> <?php $this->print_render_attribute_string( '_wrapper' ); ?>>
1004	<div <?php $this->print_render_attribute_string( '_widget_wrapper' ); ?>>
1005	<?php if ( $has_background_overlay ) : ?>
1006	<div <?php $this->print_render_attribute_string( '_background_overlay' ); ?>></div>
1007	<?php endif; ?>
1008	<?php
1009	}
1010
1011	/**
1012	* After column rendering.
1013	*
1014	* Used to add stuff after the column element.
1015	*
1016	* @since 1.0.0
1017	* @access public
1018	*/
1019	public function after_render() {
1020	?>
1021	</div>
1022	</<?php
1023	// PHPCS - the method get_html_tag is safe.
1024	echo $this->get_html_tag(); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
1025	<?php
1026	}
1027
1028	/**
1029	* Add column render attributes.
1030	*
1031	* Used to add attributes to the current column wrapper HTML tag.
1032	*
1033	* @since 1.3.0
1034	* @access protected
1035	*/
1036	protected function add_render_attributes() {
1037
1038	$is_inner = $this->get_data( 'isInner' );
1039
1040	$column_type = ! empty( $is_inner ) ? 'inner' : 'top';
1041
1042	$settings = $this->get_settings();
1043
1044	$this->add_render_attribute(
1045	'_wrapper', 'class', [
1046	'elementor-column',
1047	'elementor-col-' . $settings['_column_size'],
1048	'elementor-' . $column_type . '-column',
1049	]
1050	);
1051
1052	parent::add_render_attributes();
1053	}
1054
1055	/**
1056	* Get default child type.
1057	*
1058	* Retrieve the column child type based on element data.
1059	*
1060	* @since 1.0.0
1061	* @access protected
1062	*
1063	* @param array $element_data Element ID.
1064	*
1065	* @return Element_Base\|false Column default child type.
1066	*/
1067	protected function _get_default_child_type( array $element_data ) {
1068	if ( 'section' === $element_data['elType'] ) {
1069	return Plugin::$instance->elements_manager->get_element_types( 'section' );
1070	}
1071
1072	if ( 'container' === $element_data['elType'] ) {
1073	return Plugin::$instance->elements_manager->get_element_types( 'container' );
1074	}
1075
1076	// If the element doesn't exists (disabled element, experiment, etc.), return false to prevent errors.
1077	if ( empty( $element_data['widgetType'] ) ) {
1078	return false;
1079	}
1080
1081	return Plugin::$instance->widgets_manager->get_widget_types( $element_data['widgetType'] );
1082	}
1083
1084	/**
1085	* Get HTML tag.
1086	*
1087	* Retrieve the column element HTML tag.
1088	*
1089	* @since 1.5.3
1090	* @access private
1091	*
1092	* @return string Column HTML tag.
1093	*/
1094	private function get_html_tag() {
1095	$html_tag = $this->get_settings( 'html_tag' );
1096
1097	if ( empty( $html_tag ) ) {
1098	$html_tag = 'div';
1099	}
1100
1101	return Utils::validate_html_tag( $html_tag );
1102	}
1103	}
1104