startControlsSection( 'section_alert', [ 'label' => __('Alert'), ] ); $this->addControl( 'alert_type', [ 'label' => __('Type'), 'type' => ControlsManager::SELECT, 'default' => 'info', 'options' => [ 'info' => __('Info'), 'success' => __('Success'), 'warning' => __('Warning'), 'danger' => __('Danger'), ], 'style_transfer' => true, ] ); $this->addControl( 'alert_title', [ 'label' => __('Title & Description'), 'type' => ControlsManager::TEXT, 'placeholder' => __('Enter your title'), 'default' => __('This is an Alert'), 'label_block' => true, 'dynamic' => [ 'active' => true, ], ] ); $this->addControl( 'alert_description', [ 'label' => __('Content'), 'type' => ControlsManager::TEXTAREA, 'placeholder' => __('Enter your description'), 'default' => __('I am a description. Click the edit button to change this text.'), 'separator' => 'none', 'show_label' => false, 'dynamic' => [ 'active' => true, ], ] ); $this->addControl( 'show_dismiss', [ 'label' => __('Dismiss Button'), 'type' => ControlsManager::SELECT, 'default' => 'show', 'options' => [ 'show' => __('Show'), 'hide' => __('Hide'), ], ] ); $this->addControl( 'view', [ 'label' => __('View'), 'type' => ControlsManager::HIDDEN, 'default' => 'traditional', ] ); $this->endControlsSection(); $this->startControlsSection( 'section_type', [ 'label' => __('Alert'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'background', [ 'label' => __('Background Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-alert' => 'background-color: {{VALUE}};', ], ] ); $this->addControl( 'border_color', [ 'label' => __('Border Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-alert' => 'border-color: {{VALUE}};', ], ] ); $this->addControl( 'border_left-width', [ 'label' => __('Left Border Width'), 'type' => ControlsManager::SLIDER, 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'selectors' => [ '{{WRAPPER}} .elementor-alert' => 'border-left-width: {{SIZE}}{{UNIT}};', ], ] ); $this->endControlsSection(); $this->startControlsSection( 'section_title', [ 'label' => __('Title'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'title_color', [ 'label' => __('Text Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-alert-title' => 'color: {{VALUE}};', ], ] ); $this->addGroupControl( GroupControlTypography::getType(), [ 'name' => 'alert_title', 'selector' => '{{WRAPPER}} .elementor-alert-title', 'scheme' => SchemeTypography::TYPOGRAPHY_1, ] ); $this->addGroupControl( GroupControlTextShadow::getType(), [ 'name' => 'title_shadow', 'selector' => '{{WRAPPER}} .elementor-alert-title', ] ); $this->endControlsSection(); $this->startControlsSection( 'section_description', [ 'label' => __('Description'), 'tab' => ControlsManager::TAB_STYLE, ] ); $this->addControl( 'description_color', [ 'label' => __('Text Color'), 'type' => ControlsManager::COLOR, 'selectors' => [ '{{WRAPPER}} .elementor-alert-description' => 'color: {{VALUE}};', ], ] ); $this->addGroupControl( GroupControlTypography::getType(), [ 'name' => 'alert_description', 'selector' => '{{WRAPPER}} .elementor-alert-description', 'scheme' => SchemeTypography::TYPOGRAPHY_3, ] ); $this->addGroupControl( GroupControlTextShadow::getType(), [ 'name' => 'description_shadow', 'selector' => '{{WRAPPER}} .elementor-alert-description', ] ); $this->endControlsSection(); } /** * Render alert widget output on the frontend. * * Written in PHP and used to generate the final HTML. * * @since 1.0.0 */ protected function render() { $settings = $this->getSettingsForDisplay(); if (Utils::isEmpty($settings['alert_title'])) { return; } if (!empty($settings['alert_type'])) { $this->addRenderAttribute('wrapper', 'class', 'elementor-alert elementor-alert-' . $settings['alert_type']); } $this->addRenderAttribute('wrapper', 'role', 'alert'); $this->addRenderAttribute('alert_title', 'class', 'elementor-alert-title'); $this->addInlineEditingAttributes('alert_title', 'none'); ?>