Hi,

Thank you for the update.

What happens when you add the class name “post-entry” to the image elements? Please provide the login details in the private field so we can investigate the issue further. Also, make sure that Appearance > Theme File Editor is accessible.

Best regards,
Ismael

Hey Keith,

Thank you for the inquiry.

Would you mind providing a screenshot of the issue, or a link to the page? You can use platforms like Savvyify, ImgBB, PostImages or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, ImgBB, PostImages or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hey Jason,

Thank you for the inquiry.

Would you mind providing a screenshot of the order email or a test page so we can check the issue further? You can use platforms like Savvyify, ImgBB, PostImages, or Dropbox to upload and share the screenshot.

Have you tried editing or overriding the /plugins/woocommerce/templates/emails/email-customer-details.php file?

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Try to update theme to version 7.1.2, then toggle or temporarily disable the Enfold > Performance > File Compression settings. If the issue persists, you may need to add the “lightbox” class name (under Advanced > Developer Settings > Custom CSS Class) to the images using webp format.

Best regards,
Ismael

Hey woogie07,

We haven’t tested the theme with any plugins like that, so we don’t have anything to recommend unfortunately. Please note that your can compress your images locally before uploading them instead of using a plugin.

Best regards,
Rikard

Hey lsmsoft,

Enfold doesn’t have functionality for setting the image which is to be used when posting on social networks, you need to use a plugin for that. Most SEO have that built in if I’m not mistaken.

Best regards,
Rikard

Hi,
I could not login, seems the password is not correct please check. It looks like you have a comma after the last image URL:

please remove, the last image URL should not end with a comma, like the example code above:

If this doesn’t help, please update the password so we can check.

Best regards,
Mike

Hey rixi,

Thank you for the inquiry.

The button seems to be displaying correctly when we checked. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, ImgBB, PostImages, or Dropbox to upload and share the screenshot.

Best regards,
Ismael

Hey Julien,

Thank you for the inquiry.

The lightbox will only be applied to images that are wrapped in an anchor tag linking to their own file. To enable this for gallery images, make sure that each image item in the gallery is set to “Link to image file”, as shown in the screenshot below.

Best regards,
Ismael

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 6 months, 2 weeks ago by Mike. Reason: corrected snippet

Hi,

Thank you for the update.

Have you tried adding titles to the images in Media > Library? Looks like you’re using a third-party slider plugin to display the images. For additional info, please reach out to the plugin developers.

Best regards,
Ismael

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

Hey koomo,

Thank you for the inquiry.

Please add this css code to adjust the position of the overlay inside the carousel.

.swiper-slide span.image-overlay.overlay-type-image {
    left: 0 !important;
    top: 0 !important;
}

Best regards,
Ismael

Hi,

Thanks for that. I’m not sure why the import is not working unfortunately, there are no error messages and the server settings seems to be as they should. I have imported the demo content for you manually though. Please note that images are not included, and most settings are not either. All settings can be changed either in the theme options, or in the Layout menu for each page though. Please let us know if you should need any further help with this.

Best regards,
Rikard