Header

Hey Lin84,

You could try setting your background image under Enfold->General Styling->Logo Area. If that is not what you are looking for, then you could try using a Color Section element instead.

Best regards,
Rikard

Hi,

Thank you for the update.

Are you referring to the first section on every page? You can replicate this layout by adding a Color Section element at the very top of the pages and applying a different background image for each page. Please check the documentation below for more info:

// https://kriesi.at/documentation/enfold/color-section/

Best regards,
Ismael

Hi,
Thank you for your patience as I understand what you would like to achieve, a full width changing image with a logo in the center at the top of every, post, page, & archive.
I note a few limitations, first none of our sliders offer a random image on page load, so they would always start with the same image and rotate in order. Second you would like to add this to the top of every, post, page, & archive without editing each post & page, etc.
So try this custom code to create this, if you are not using a child theme you could use the WP Code plugin then add a new snippet, in the top right corner use the PHP snippet as the code type:

then add this code and save:

function random_image_slider_shortcode($atts) {
    // Define default attributes and override with user-defined attributes
    $attributes = shortcode_atts(
        array(
            'mobile_height' => '300px', // default mobile height
            'desktop_height' => '500px', // default desktop height
        ),
        $atts
    );

    // Define your image URLs here
     $images = array(
        'https://example.com/wp-content/uploads/image1.jpg',
        'https://example.com/wp-content/uploads/image2.jpg',
        'https://example.com/wp-content/uploads/image3.jpg',
        'https://example.com/wp-content/uploads/image4.jpg',
        'https://example.com/wp-content/uploads/image5.jpg',
    );
    // Start building the output
    $output = '<div id="random-image-slider" class="avia-section container_wrap fullsize" style="height: ' . $attributes['desktop_height'] . '; background-size: cover; position: relative;">';

    // Add logo overlay
    $output .= '<img src="https://example.com/wp-content/uploads/logo.png" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" alt="Logo">';

    // Add script for changing the background image
   $output .= '<script>
        (function() {
            var images = ' . json_encode($images) . ';
            var currentIndex = Math.floor(Math.random() * images.length); // Start at a random index
            var container = document.getElementById("random-image-slider");

            function changeImage() {
                container.style.backgroundImage = "url(" + images[currentIndex] + ")";
                currentIndex = (currentIndex + 1) % images.length;
            }

            changeImage(); // Initial call to set the first image

            setInterval(changeImage, 3000); // Change image every 3 seconds

            // Responsive height adjustment
            function adjustHeight() {
                var windowHeight = window.innerHeight;
                var isMobile = window.matchMedia("(max-width: 768px)").matches;
                container.style.height = isMobile ? "' . $attributes['mobile_height'] . '" : "' . $attributes['desktop_height'] . '";
            }

            window.addEventListener("resize", adjustHeight);
            adjustHeight(); // Initial call to set height
        })();
    </script>';

    $output .= '</div>';

    return $output;
}

add_shortcode('random_image_slider', 'random_image_slider_shortcode');

In the code above change the 5 images to your image urls, and ensure to use full urls to the images, and also change the image url in the logo overlay.
If you just wanted to use this script and add the element manually to your pages you could use this shortcode in a code block:

[random_image_slider mobile_height="300px" desktop_height="500px"]

Note that you can change the height of the element for mobile and desktop. Also note that if you use large square images the whole image will not show on every device, the image will be cropped to the height that you set, also this will not be full width when used in a code block element, this is an example of the results:

Now since you want this added automatically to the top of every, post, page, & archive create a second PHP snippet in the WP Code plugin and add this code:

add_action('ava_after_main_title', 'ava_after_main_title_mod');
function ava_after_main_title_mod() {
	if(is_single() || is_page() || is_archive() ) {
		echo do_shortcode('[random_image_slider mobile_height="300px" desktop_height="500px"]');
	}
}

You can change the heights to suit, since this is added to the pages while the page is being created the element will be full width:

Give this a try.

Best regards,
Mike