Hi,
Glad to hear that this works. To change the background image in a color section like a slideshow, add a custom class “color-section-slideshow” to your color section in the Advanced ▸ Developer Settings ▸ Custom CSS Class (no dot)
Then add this snippet in your child theme functions.php

function color_section_slideshow() { ?>
  <script>
document.addEventListener("DOMContentLoaded", function () {
  // Target your color section
  const section = document.querySelector(".color-section-slideshow");
  if (!section) {
    console.warn("No element found with selector .color-section-slideshow");
    return;
  }

  // List of background images
  const images = [
    "/wp-content/uploads/path-to-image1.jpg",
    "/wp-content/uploads/path-to-image2.jpg",
    "/wp-content/uploads/path-to-image3.jpg",
  ];

  if (!images || images.length === 0) {
    console.warn("No images provided for slideshow");
    return;
  }

  let current = 0;
  const delay = 3000; // ms between slides
  const transitionDuration = 1000; // ms for transition
  const effect = "fade"; // "fade" or "slide"
  section.style.position = section.style.position || "relative";
  section.style.overflow = "hidden";
  section.style.backgroundImage = url(${images[0]});
  section.style.backgroundSize = "cover";
  section.style.backgroundPosition = "center center";
  images.forEach((src) => {
    const img = new Image();
    img.src = src;
  });
  const overlay = document.createElement("div");
  overlay.style.position = "absolute";
  overlay.style.top = "0";
  overlay.style.left = "0";
  overlay.style.width = "100%";
  overlay.style.height = "100%";
  overlay.style.backgroundSize = "cover";
  overlay.style.backgroundPosition = "center center";
  overlay.style.zIndex = "0";
  overlay.style.pointerEvents = "none";
  overlay.style.opacity = "0";
  overlay.style.transition = opacity ${transitionDuration}ms ease-in-out, transform ${transitionDuration}ms ease-in-out;
  section.appendChild(overlay);

  function showNextImage() {
    current = (current + 1) % images.length;
    overlay.style.backgroundImage = url(${images[current]});

    if (effect === "fade") {
      overlay.style.transform = "none";
      overlay.style.opacity = "1";

      setTimeout(() => {
        section.style.backgroundImage = url(${images[current]});
        overlay.style.opacity = "0";
      }, transitionDuration);
    } else if (effect === "slide") {
      overlay.style.transition = "none";
      overlay.style.transform = "translateX(100%)";
      overlay.style.opacity = "1";
      overlay.offsetHeight;
      overlay.style.transition = transform ${transitionDuration}ms ease-in-out;
      overlay.style.transform = "translateX(0)";

      setTimeout(() => {
        section.style.backgroundImage = url(${images[current]});
        overlay.style.transition = "none";
        overlay.style.opacity = "0";
        overlay.style.transform = "translateX(100%)";
        setTimeout(() => {
          overlay.style.transition = opacity ${transitionDuration}ms ease-in-out, transform ${transitionDuration}ms ease-in-out;
        }, 20);
      }, transitionDuration);
    }
  }
  const intervalId = setInterval(showNextImage, delay);
});
</script>
  <?php
}
add_action( 'wp_footer', 'color_section_slideshow', 99 );

Change the images in the snippet to suit and change const effect = “slide”; to “fade” or “slide” as you wish.

Best regards,
Mike

• This reply was modified 3 weeks, 3 days ago by Mike. Reason: corrected snippet

Hey Erik Scheper,
Thanks for your interest in Enfold, the site that you linked to has been built with the latest Enfold version, and the contact 7 plugin and the mailerlite signup form plugin. So you could build a similar site and change the images & content. But this has not been built with one of our demos, so you may need to do some trial and error to choose the correct elements and settings to copy it exactly.
A easier route would be to install one of our demos and then change the images and content, check them out and see if you like one of them.
All of the demos are included, but note that you can only install one at a time, as each new install overwrites the earlier one.
We have no Pro version, so there is no need to purchase additional elements from us, you may choose to use free or paid plugins to enhance your site, such as, we don’t have a calendar for making appointments, so you may find a free plugin or prefer a paid plugin with more options.
You will also get 6 months of support in our support forum included, but I recommend upgrading to a full year for just a little more, it is the only time you can get such a good value.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Andrei Zborovski,
You can login to your Envato Market (Theme Forest) account and see your purchases and download your theme.
Perhaps you have not received the email yet because Envato has not processed it yet, the message above says it is pending, or perhaps it is in your spam folder.
Try following up with Envato Support
Do to our exclusive license agreement with Envato, we can not create or issue licenses or send files.

Best regards,
Mike

Hi,
Typically updating from v4.x to v7.x should cause no major issues as the theme is backward compatible, but if your child theme has any customized elements, or a header.php or footer.php, these will cause issues, and should be removed first.
Updating via FTP by overwriting the theme files will also cause issues as older files will be left behind, updating by uploading the theme as “new” in the WP backend is safer as WordPress removes the old directory and then adds the new directory.
I have not seen an issue where an update lead to the shortcodes showing (e.g. [av_textblock]), do you see the shortcodes on the frontend or in the backend in the Block Editor? Pages & Posts created with the ALB (Advanced Layout Builder) should not be opened, edited, or saved with the Block Editor, always edit ALB pages with the ALB editor. Also don’t use any other builders like elementor, beaver builder, visual composer, etc.
Incremental updates is not needed as I have seen v3.x updated without issues. I recommend exporting your child theme settings for backup, and exporting the layerslider sildes. Then create a staging site to test the update on, this way your live site is unchanged while your issue can be examined. Ensure that your stagging site is not using a cache plugin or object-oriented cache from your server, or a CDN, as these may not show the updated site correctly.
The only issues that I find for Ninja Forms are old:
2015: https://kriesi.at/support/topic/customize-ninja-form-styling/
2016: https://kriesi.at/support/topic/enfold-ninja-forms-conditional-logic-problems/
2019: https://kriesi.at/support/topic/ninja-forms-not-working-after-latest-wordpress-update/
2021: https://kriesi.at/support/topic/ninja-forms-breaking-with-enfold/
Note that the layerslider has had many changes and you may need to edit your slides and resave the transforms and minor settings, there is nothing we can do about that, the layerslider doesn’t seem to be fully backward compatible.

Best regards,
Mike

Hi,
Sorry, I was looking at the wrong site, now I see that your testimonials are in a content slider and not the testimonial element like on your other site.
I adjusted the script:

document.addEventListener("DOMContentLoaded", function () {
  var rows = document.querySelectorAll(".avia-content-slider-inner");

  rows.forEach(function (row) {
    var testimonials = Array.from(row.querySelectorAll(".slide-entry-wrap"));
    if (testimonials.length <= 1) return;

    for (let i = testimonials.length - 1; i > 0; i--) {
      let j = Math.floor(Math.random() * (i + 1));
      [testimonials[i], testimonials[j]] = [testimonials[j], testimonials[i]];
    }

    testimonials.forEach(function (t) {
      row.appendChild(t);
    });
  });
});

Best regards,
Mike

Hey Swarez,
I see that you have a modified slideshow.php in your child theme, when I activate the parent Enfold v7.1.1 the test page loads correctly with the slider and all other elements. Try removing your custom slideshow.php from your child theme.

Best regards,
Mike

Hey Alejo Rotemberg,
We expect no issues with updating, but recommend creating a full backup using your webhost backup tool, not a plugin unless you have specific knowledge with it and it has worked for you in the past. Often backup plugins fail when restoring.
Also note that if you are not using a child theme and the core files such as functions.php were modified those customizations will be lost, so backup any customizations.
Also note that if you are using a child theme and you have a copy of the header.php or footer.php in the child theme, please remove these as these files have changed and will cause an error.
To update your version of Enfold you will need to download the latest installable WP version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.

Best regards,
Mike

Hey condonp,
Thanks for the mockup image:

it looks like you are close to achieving this, but I only see one widget in the header:

to change the color of your widget and move the menu try adding this css:

.responsive #top #header #header_main .inner-container .widget>div {
    background: rgb(77, 172, 56);
}
.topconatiner {
    align-items: center;
}
.responsive #top #header #header_main .inner-container .main_menu {
    justify-content: right;
}
.responsive #top #header #header_main .inner-container .main_menu {
	margin-right: 6%;
}

for this:

The snippet from the documentation that you are trying to follow looks nothing like your mockup.

Best regards,
Mike

Hey cynkindred,
Thanks for your patience, sometimes popup plugins have a conflict with the theme’s popup code. You can try disabling the theme popup at Enfold Theme Options ▸ Lightbox Modal Window and see if that helps.
Otherwise please link to your page so we can examine.

Best regards,
Mike

Hey oburlin,
For the image caption, you will note in the element that it’s placement is in the overlay:

To move to the lower part of the image, I see that you have added this custom css:

.av-image-caption-overlay {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    bottom: 0px !important;
    color: black !important;
    height: auto !important;
    left: 50% !important;
    transform: translate(-50%) !important;
    width: auto !important;
}

Resulting in this:

To make it one line try removing width: auto !important; from your css.
Then you would see:

If you want the caption below the image, try this css instead:

#top .av-image-caption-overlay {
    height: auto;
    width: 100%;
    left: 0px;
    bottom: 0px;
    transform: translateY(100%);
}
#top .av-overlay-hover-deactivate .avia-image-overlay-wrap:hover .av-caption-image-overlay-bg {
    opacity: 0.4 !important;
}
#top .avia-image-container .av-caption-image-overlay-bg {
    opacity: 0.4;
    background-color: transparent;
}
#top .avia-image-container .av-image-caption-overlay-center {
    color: #000;
}

resulting in this:

Best regards,
Mike

Hi,
Glad Ismael & Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey mshane,
Envato (Theme Forest) stopped using the API a few years ago, now they use a Token, but you can not use the Token with your version so you will need to manually update, then set up the Token and next time you can update in the theme panel. We expect no issues with updating, but recommend creating a full backup using your webhost backup tool, not a plugin unless you have specific knowledge with it and it has worked for you in the past. Often backup plugins fail when restoring.
Also note that if you are not using a child theme and the core files such as functions.php were modified those customizations will be lost, so backup any customizations.
Also note that if you are using a child theme and you have a copy of the header.php or footer.php in the child theme, please remove these as these files have changed and will cause an error.
To update your version of Enfold you will need to download the latest installable WP version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike