start_controls_section(
'content_section',
array(
'label' => __( 'Content', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
)
);
// Layout.
$this->add_control(
'layout',
array(
'label' => __( 'Layout', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SELECT,
'default' => 'slider',
'options' => array(
'slider' => __( 'Slider', 'a1-tools' ),
'grid' => __( 'Grid', 'a1-tools' ),
),
)
);
// Columns count (grid only).
$this->add_responsive_control(
'columns',
array(
'label' => __( 'Columns', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::NUMBER,
'min' => 1,
'max' => 4,
'default' => 2,
'condition' => array( 'layout' => 'grid' ),
'selectors' => array(
'{{WRAPPER}} .a1tools-before-after-grid' => 'grid-template-columns: repeat({{VALUE}}, 1fr);',
),
)
);
// Show title.
$this->add_control(
'show_title',
array(
'label' => __( 'Show Title', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'a1-tools' ),
'label_off' => __( 'No', 'a1-tools' ),
'return_value' => 'yes',
'default' => 'yes',
)
);
// Show description.
$this->add_control(
'show_description',
array(
'label' => __( 'Show Description', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SWITCHER,
'label_on' => __( 'Yes', 'a1-tools' ),
'label_off' => __( 'No', 'a1-tools' ),
'return_value' => 'yes',
'default' => 'yes',
)
);
$this->end_controls_section();
// ── Style: Container ───────────────────────────────────────
$this->start_controls_section(
'style_container_section',
array(
'label' => __( 'Container', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
)
);
$this->add_responsive_control(
'container_height',
array(
'label' => __( 'Height', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'range' => array( 'px' => array( 'min' => 200, 'max' => 800 ) ),
'default' => array( 'size' => 400, 'unit' => 'px' ),
'condition' => array( 'layout' => 'slider' ),
'selectors' => array(
'{{WRAPPER}} .a1tools-before-after-slider' => 'height: {{SIZE}}{{UNIT}};',
),
)
);
$this->end_controls_section();
// ── Style: Labels ──────────────────────────────────────────
$this->start_controls_section(
'style_labels_section',
array(
'label' => __( 'Labels', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
)
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
array(
'name' => 'labels_typography',
'selector' => '{{WRAPPER}} .a1tools-ba-label',
)
);
$this->add_control(
'labels_color',
array(
'label' => __( 'Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .a1tools-ba-label' => 'color: {{VALUE}};',
),
)
);
$this->add_control(
'labels_bg_color',
array(
'label' => __( 'Background Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .a1tools-ba-label' => 'background-color: {{VALUE}};',
),
)
);
$this->end_controls_section();
// ── Style: Title ───────────────────────────────────────────
$this->start_controls_section(
'style_title_section',
array(
'label' => __( 'Title', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
)
);
$this->add_group_control(
\Elementor\Group_Control_Typography::get_type(),
array(
'name' => 'title_typography',
'selector' => '{{WRAPPER}} .a1tools-ba-title',
)
);
$this->add_control(
'title_color',
array(
'label' => __( 'Color', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::COLOR,
'selectors' => array(
'{{WRAPPER}} .a1tools-ba-title' => 'color: {{VALUE}};',
),
)
);
$this->end_controls_section();
// ── Style: Column Layout ───────────────────────────────────
$this->start_controls_section(
'style_columns_section',
array(
'label' => __( 'Column Layout', 'a1-tools' ),
'tab' => \Elementor\Controls_Manager::TAB_STYLE,
'condition' => array( 'layout' => 'grid' ),
)
);
$this->add_responsive_control(
'column_gap',
array(
'label' => __( 'Gap', 'a1-tools' ),
'type' => \Elementor\Controls_Manager::SLIDER,
'range' => array( 'px' => array( 'min' => 0, 'max' => 60 ) ),
'default' => array( 'size' => 20, 'unit' => 'px' ),
'selectors' => array(
'{{WRAPPER}} .a1tools-before-after-grid' => 'gap: {{SIZE}}{{UNIT}};',
),
)
);
$this->end_controls_section();
}
/**
* Render widget output on the frontend.
*/
protected function render() {
$settings = $this->get_settings_for_display();
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- escaped inside shortcode function.
echo a1tools_shortcode_before_after(
array(
'layout' => $settings['layout'] ?? 'slider',
'columns' => $settings['columns'] ?? '2',
'show_title' => $settings['show_title'] ?? 'yes',
'show_description' => $settings['show_description'] ?? 'yes',
'_elementor' => 'yes',
)
);
}
/**
* Render widget preview in the Elementor editor.
*/
protected function content_template() {
?>
<#
var isSlider = (settings.layout === 'slider');
var showTitle = (settings.show_title === 'yes');
var showDesc = (settings.show_description === 'yes');
#>
Note: Actual before & after images load on the frontend from the A1 Tools API.
<# if(isSlider){#>
Interactive comparison slider is active on the frontend.<#}#>