Ubuntu
start_controls_section(
'eael_section_promo_content',
[
'label' => esc_html__('Promo Content', 'essential-addons-elementor'),
]
);
$this->add_control(
'promo_image',
[
'label' => __('Promo Image', 'essential-addons-elementor'),
'type' => Controls_Manager::MEDIA,
'default' => [
'url' => Utils::get_placeholder_image_src(),
],
'dynamic' => [
'active' => true,
],
]
);
$this->add_control(
'promo_image_alt',
[
'label' => __('Image ALT Tag', 'essential-addons-elementor'),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'default' => '',
'placeholder' => __('Enter alter tag for the image', 'essential-addons-elementor'),
'title' => __('Input image alter tag here', 'essential-addons-elementor'),
'dynamic' => ['action' => true],
]
);
$this->add_control(
'promo_heading',
[
'label' => __('Promo Heading', 'essential-addons-elementor'),
'type' => Controls_Manager::TEXT,
'label_block' => true,
'default' => 'I am Interactive',
'placeholder' => __('Enter heading for the promo', 'essential-addons-elementor'),
'title' => __('Enter heading for the promo', 'essential-addons-elementor'),
'dynamic' => ['active' => true],
]
);
$this->add_control(
'promo_content',
[
'label' => __('Promo Content', 'essential-addons-elementor'),
'type' => Controls_Manager::WYSIWYG,
'default' => __('Click to inspect, then edit as needed.', 'essential-addons-elementor'),
]
);
$this->add_control(
'promo_link_url',
[
'label' => __('Link URL', 'essential-addons-elementor'),
'type' => Controls_Manager::TEXT,
'dynamic' => ['active' => true],
'label_block' => true,
'default' => '#',
'placeholder' => __('Enter link URL for the promo', 'essential-addons-elementor'),
'title' => __('Enter URL for the promo', 'essential-addons-elementor'),
]
);
$this->add_control(
'promo_link_target',
[
'label' => esc_html__('Open in new window?', 'essential-addons-elementor'),
'type' => Controls_Manager::SWITCHER,
'label_on' => __('_blank', 'essential-addons-elementor'),
'label_off' => __('_self', 'essential-addons-elementor'),
'default' => '_self',
]
);
$this->end_controls_section();
// Style Controls
$this->start_controls_section(
'eael_section_promo_settings',
[
'label' => esc_html__('Promo Effects & Settings', 'essential-addons-elementor'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'promo_effect',
[
'label' => esc_html__('Set Promo Effect', 'essential-addons-elementor'),
'type' => Controls_Manager::SELECT,
'default' => 'effect-lily',
'options' => [
'effect-lily' => esc_html__('Lily', 'essential-addons-elementor'),
'effect-sadie' => esc_html__('Sadie', 'essential-addons-elementor'),
'effect-layla' => esc_html__('Layla', 'essential-addons-elementor'),
'effect-oscar' => esc_html__('Oscar', 'essential-addons-elementor'),
'effect-marley' => esc_html__('Marley', 'essential-addons-elementor'),
'effect-ruby' => esc_html__('Ruby', 'essential-addons-elementor'),
'effect-roxy' => esc_html__('Roxy', 'essential-addons-elementor'),
'effect-bubba' => esc_html__('Bubba', 'essential-addons-elementor'),
'effect-romeo' => esc_html__('Romeo', 'essential-addons-elementor'),
'effect-sarah' => esc_html__('Sarah', 'essential-addons-elementor'),
'effect-chico' => esc_html__('Chico', 'essential-addons-elementor'),
'effect-milo' => esc_html__('Milo', 'essential-addons-elementor'),
'effect-apollo' => esc_html__('Apolo', 'essential-addons-elementor'),
'effect-jazz' => esc_html__('Jazz', 'essential-addons-elementor'),
'effect-ming' => esc_html__('Ming', 'essential-addons-elementor'),
],
]
);
$this->add_control(
'promo_container_width',
[
'label' => esc_html__('Set max width for the container?', 'essential-addons-elementor'),
'type' => Controls_Manager::SWITCHER,
'label_on' => __('yes', 'essential-addons-elementor'),
'label_off' => __('no', 'essential-addons-elementor'),
'default' => 'yes',
]
);
$this->add_responsive_control(
'promo_container_width_value',
[
'label' => __('Container Max Width (% or px)', 'essential-addons-elementor'),
'type' => Controls_Manager::SLIDER,
'default' => [
'size' => 480,
'unit' => 'px',
],
'size_units' => ['px', '%'],
'range' => [
'px' => [
'min' => 0,
'max' => 1000,
'step' => 5,
],
'%' => [
'min' => 1,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .eael-interactive-promo' => 'max-width: {{SIZE}}{{UNIT}};',
],
'condition' => [
'promo_container_width' => 'yes',
],
]
);
$this->add_group_control(
Group_Control_Border::get_type(),
[
'name' => 'promo_border',
'selector' => '{{WRAPPER}} .eael-interactive-promo figure',
]
);
$this->add_control(
'promo_border_radius',
[
'label' => esc_html__('Border Radius', 'essential-addons-elementor'),
'type' => Controls_Manager::SLIDER,
'range' => [
'px' => [
'min' => 0,
'max' => 100,
],
],
'selectors' => [
'{{WRAPPER}} .eael-interactive-promo figure' => 'border-radius: {{SIZE}}{{UNIT}};',
],
]
);
$this->end_controls_section();
$this->start_controls_section(
'eael_section_promo_styles',
[
'label' => esc_html__('Colors & Typography', 'essential-addons-elementor'),
'tab' => Controls_Manager::TAB_STYLE,
]
);
$this->add_control(
'promo_heading_color',
[
'label' => esc_html__('Promo Heading Color', 'essential-addons-elementor'),
'type' => Controls_Manager::COLOR,
'default' => '#ffffff',
'selectors' => [
'{{WRAPPER}} .eael-interactive-promo figure figcaption h2' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'eael_promo_title_typography',
'scheme' => Typography::TYPOGRAPHY_1,
'selector' => '{{WRAPPER}} .eael-interactive-promo figure figcaption h2',
]
);
$this->add_control(
'promo_content_color',
[
'label' => esc_html__('Promo Content Color', 'essential-addons-elementor'),
'type' => Controls_Manager::COLOR,
'default' => '#ffffff',
'selectors' => [
'{{WRAPPER}} .eael-interactive-promo figure p' => 'color: {{VALUE}};',
],
]
);
$this->add_group_control(
Group_Control_Typography::get_type(),
[
'name' => 'eael_promo_content_typography',
'scheme' => Typography::TYPOGRAPHY_1,
'selector' => '{{WRAPPER}} .eael-interactive-promo figure p',
]
);
$this->add_group_control(
Group_Control_Background::get_type(),
[
'name' => 'promo_overlay_color',
'label' => __('Background', 'essential-addons-elementor'),
'types' => ['classic', 'gradient'],
'default' => '#3085a3',
'selector' => '{{WRAPPER}} .eael-interactive-promo figure',
]
);
$this->end_controls_section();
}
protected function render()
{
$settings = $this->get_settings_for_display();
$promo_image = $this->get_settings_for_display('promo_image');
?>