Home / Admin / Expand the Edit Abilities
Duplicate Snippet

Embed Snippet on Your Site

Expand the Edit Abilities

Code Preview
php
<?php
use Elementor\Controls_Manager;
use Elementor\Group_Control_Background;
function add_background_and_overlay_to_layout_tab($element, $args) {
    // === NORMAL BACKGROUND ===
    $element->start_controls_section(
        'custom_background_layout',
        [
            'label' => __('Background (Layout Tab)', 'textdomain'),
            'tab'   => Controls_Manager::TAB_LAYOUT,
        ]
    );
    $element->add_group_control(
        Group_Control_Background::get_type(),
        [
            'name'     => 'custom_background',
            'label'    => __('Background', 'textdomain'),
            'types'    => ['classic', 'gradient'],
            'selector' => '{{WRAPPER}}',
        ]
    );
    $element->end_controls_section();
    // === OVERLAY BACKGROUND ===
    $element->start_controls_section(
        'custom_overlay_background_layout',
        [
            'label' => __('Background Overlay (Layout Tab)', 'textdomain'),
            'tab'   => Controls_Manager::TAB_LAYOUT,
        ]
    );
    $element->add_control(
        'custom_overlay_helper_styles',
        [
            'type' => Controls_Manager::HIDDEN,
            'selectors' => [
                '{{WRAPPER}}' => 'position: relative; overflow: hidden;',
                '{{WRAPPER}}::before' => 'content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; z-index: 0;',
            ],
        ]
    );
    $element->add_group_control(
        Group_Control_Background::get_type(),
        [
            'name'     => 'custom_overlay_background',
            'label'    => __('Overlay Background', 'textdomain'),
            'types'    => ['classic', 'gradient'],
            'selector' => '{{WRAPPER}}::before',
        ]
    );
    $element->add_control(
        'custom_overlay_opacity',
        [
            'label' => __('Overlay Opacity', 'textdomain'),
            'type'  => Controls_Manager::SLIDER,
            'range' => [
                'px' => [
                    'min' => 0,
                    'max' => 1,
                    'step' => 0.01,
                ],
            ],
            'default' => [
                'size' => 0.5,
            ],
            'selectors' => [
                '{{WRAPPER}}::before' => 'opacity: {{SIZE}};',
            ],
        ]
    );
    $element->end_controls_section();
}
add_action('elementor/element/section/section_layout/after_section_end', 'add_background_and_overlay_to_layout_tab', 10, 2);
add_action('elementor/element/container/section_layout/after_section_end', 'add_background_and_overlay_to_layout_tab', 10, 2);
add_action('elementor/element/column/section_style/after_section_end', 'add_background_and_overlay_to_layout_tab', 10, 2);

Comments

Add a Comment