1add_action( 'wp_head', function () { ?>
2<style>
3@media only screen and (min-width: 1025px) {
4 :root, .e-con {
5 /* WIDESCREEN GUTTER SIZE*/
6 --con-gutters: 60px;
7 }
8}
9
10@media only screen and (max-width: 1024px) and (min-width: 960px) {
11 :root, .e-con {
12 /* DESKTOP GUTTER SIZE*/
13 --con-gutters: 60px;
14 }
15}
16
17@media only screen and (max-width: 959px) and (min-width: 768px) {
18 :root, .e-con {
19 /* LAPTOP GUTTER SIZE*/
20 --con-gutters: 60px;
21 }
22}
23
24@media only screen and (max-width: 767px) and (min-width: 601px) {
25 :root, .e-con {
26 /* TABLET EXTRA GUTTER SIZE*/
27 --con-gutters: 40px;
28 }
29}
30
31@media only screen and (max-width: 600px) and (min-width: 481px) {
32 :root, .e-con {
33 /* TABLET GUTTER SIZE*/
34 --con-gutters: 40px;
35 }
36}
37
38@media only screen and (max-width: 480px) and (min-width: 361px) {
39 :root, .e-con {
40 /* MOBILE EXTRA GUTTER SIZE*/
41 --con-gutters: 20px;
42 }
43}
44
45@media only screen and (max-width: 360px) {
46 :root, .e-con {
47 /* MOBILE GUTTER SIZE*/
48 --con-gutters: 20px;
49 }
50}
51
52.con-gutters {
53 padding-left: var(--con-gutters) !important;
54 padding-right: var(--con-gutters) !important;
55}
56 </style>
57<?php } );
58
59// INJECT CONTROLS
60add_action('elementor/element/before_section_end', function ($element, $section_id, $args) {
61 if ('container' === $element->get_name() && 'section_layout' === $section_id) {
62 $element->start_injection([
63 'at' => 'after',
64 'of' => 'min_height',
65 ]);
66
67 $element->add_control(
68 'custom_gutters',
69 [
70 'label' => esc_html__('Gutters', 'rw-essentials'),
71 'type' => \Elementor\Controls_Manager::SWITCHER,
72 'label_on' => esc_html__('On', 'rw-essentials'),
73 'label_off' => esc_html__('Off', 'rw-essentials'),
74 'return_value' => 'yes',
75 'default' => 'no',
76 'description' => __('Add globally controlled inline(horizontal) padding.', 'rw-essentials'),
77 'separator' => 'before',
78 ]
79 );
80
81 $element->add_responsive_control(
82 'gutter_sides',
83 [
84 'label' => __('Gutter Sides', 'rw-essentials'),
85 'type' => \Elementor\Controls_Manager::CHOOSE,
86 'options' => [
87 'padding-inline-start: var(--padding-inline-start); padding-inline-end: var(--padding-inline-end);' => [
88 'title' => esc_html__('None', 'rw-essentials'),
89 'icon' => 'eicon-ban',
90 ],
91 '--padding-inline-start: var(--con-gutters) !important; --padding-inline-end: var(--con-gutters) !important;' => [
92 'title' => esc_html__('Both', 'rw-essentials'),
93 'icon' => 'eicon-grow',
94 ],
95 '--padding-inline-start: var(--con-gutters) !important; padding-inline-end: var(--padding-inline-end);' => [
96 'title' => esc_html__('Left', 'rw-essentials'),
97 'icon' => 'eicon-order-start',
98 ],
99 'padding-inline-start: var(--padding-inline-start); --padding-inline-end: var(--con-gutters) !important;' => [
100 'title' => esc_html__('Right', 'rw-essentials'),
101 'icon' => 'eicon-order-end',
102 ],
103 ],
104 'default' => '--padding-inline-start: var(--con-gutters) !important; --padding-inline-end: var(--con-gutters) !important;',
105 'toggle' => true,
106 'selectors' => [
107 '{{WRAPPER}}.e-con.e-grid, {{WRAPPER}} .e-grid-outline, {{WRAPPER}}.e-con.e-flex' => '{{VALUE}}',
108 ],
109 'description' => __('Gutters override padding settings on active sides.', 'rw-essentials'),
110 'condition' => [
111 'custom_gutters' => 'yes',
112 ],
113 ]
114 );
115
116 $element->add_control(
117 'custom_gutter_size_toggle',
118 [
119 'label' => esc_html__('Custom Gutter Size', 'rw-essentials'),
120 'type' => \Elementor\Controls_Manager::SWITCHER,
121 'label_on' => esc_html__('On', 'rw-essentials'),
122 'label_off' => esc_html__('Off', 'rw-essentials'),
123 'return_value' => 'yes',
124 'default' => 'no',
125 'description' => 'Override the global gutter for THIS CONTAINER ONLY.',
126 'condition' => [
127 'custom_gutters' => 'yes',
128 ],
129 ]
130 );
131
132 $element->add_responsive_control(
133 'custom_gutter_size',
134 [
135 'label' => esc_html__('Size', 'rw-essentials'),
136 'type' => \Elementor\Controls_Manager::SLIDER,
137 'size_units' => ['px', '%', 'vw', 'em', 'rem', 'custom'],
138 'range' => [
139 'px' => [
140 'min' => 0,
141 'max' => 500,
142 'step' => 1,
143 ],
144 '%' => [
145 'min' => 0,
146 'max' => 100,
147 'step' => 1,
148 ],
149 'vw' => [
150 'min' => 0,
151 'max' => 100,
152 'step' => 1,
153 ],
154 'em' => [
155 'min' => 0,
156 'max' => 50,
157 'step' => 0.1,
158 ],
159 'rem' => [
160 'min' => 0,
161 'max' => 50,
162 'step' => 0.1,
163 ],
164 ],
165 'default' => [
166 'size' => '',
167 'unit' => 'px',
168 ],
169 'frontend_available' => true,
170 'label_block' => true,
171 'description' => '',
172 'selectors' => [
173 '{{WRAPPER}}.e-con' => '--con-gutters: {{SIZE}}{{UNIT}} !important;',
174 ],
175 'condition' => [
176 'custom_gutters' => 'yes',
177 'custom_gutter_size_toggle' => 'yes',
178 ],
179 ]
180 );
181
182 $element->end_injection();
183 }
184}, 10, 3);