Hey atx_m,

Thank you for the inquiry.

The TOC widget doesn’t have an active state by default, but you can use this script in the functions.php file to add an active class on click and while scrolling.

add_action('wp_footer', function () {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const tocLinks = document.querySelectorAll('.avia-toc-link');
      const headingSelectors = document.querySelector('.avia-toc-container').dataset.level.split(',');
      const headings = Array.from(document.querySelectorAll(headingSelectors.join(',')));

      tocLinks.forEach(link => {
        link.addEventListener('click', function () {
          tocLinks.forEach(l => l.classList.remove('active'));
          this.classList.add('active');
        });
      });

      function onScroll() {
        let scrollPosition = window.scrollY + 100;
        let currentId = null;

        for (let i = headings.length - 1; i >= 0; i--) {
          const heading = headings[i];
          if (heading.offsetTop <= scrollPosition) {
            currentId = heading.id;
            break;
          }
        }

        if (currentId) {
          tocLinks.forEach(link => {
            link.classList.toggle('active', link.getAttribute('href') === #${currentId});
          });
        }
      }

      window.addEventListener('scroll', onScroll);
      onScroll();
    });
    </script>
    <?php
}, 9999);

You can then include this css to adjust the color of the active TOC links:

.avia-toc-link.active {
  color: #fe9000;
  font-weight: bold;
}

To change the heading tags, edit the widget and look for the “Select headlines to include” option.

Let us know the result.

Best regards,
Ismael

Hey Verena Pichler,

Thank you for the inquiry.

Looks like there’s a builder shortcode inside a Text Block element. Could you clarify why the Text Block shortcode was placed within another Text Block? We may need to inspect the site to better understand the issue. Please create a test page and share the URL in the private field.

Hope your friend gets well soon.

Best regards,
Ismael

Hi,

The configuration looks typical for WordPress installations — almost the same as our local installation. What configuration did you add to your .htaccess file?

Another thing you can try is to switch the default image editor from WP_Image_Editor_Imagick to WP_Image_Editor_GD to see if that helps.

— https://developer.wordpress.org/reference/hooks/wp_image_editors/

We tried uploading six files to the media library, around 6MB, and it took about 10 seconds or less. It’s not particularly fast, but not terribly slow either. We also noticed that you’re using a custom media library plugin (WP Media Folder), which could be contributing to the slowdown. Have you tried disabling this plugin to see if it makes a difference?

Best regards,
Ismael

Hi,

Great! Glad to know this has been resolved. Please feel free to open another thread if you have more questions.

Have a nice day.

Best regards,
Ismael

Hi,

Thank you for the update.

You can add this css code to adjust the width of the featured images in mobile view, make sure they don’t overflow outside the screen.

@media only screen and (max-width: 989px) {

  /* Add your Mobile Styles here */
  #top.single-post .fullsize .template-blog .big-preview img {
    width: 100%;
    min-height: auto;
    object-fit: contain;
  }
}

Result:

Best regards,
Ismael

Hi,

We are not encountering this issue on our end, and there have been no similar reports from other users, so this is probably related to your server configuration or specifications. Where is the site hosted, and what are the server specs?

If you have access to your PHP configuration or php.ini, try to add the following options:

max_execution_time = 300
memory_limit = 512M
upload_max_filesize = 20M

You can also add it in the .htaccess file in the root directory of your WordPress installation.

php_value max_execution_time 300
php_value memory_limit 512M
php_value upload_max_filesize 20M

Another thing you could try is disabling the thumbnails generated by the theme using this filter in the functions.php file:

add_action('init', 'ava_remove_enfold_image_thumbnails');
function ava_remove_enfold_image_thumbnails() {
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}
add_filter( 'intermediate_image_sizes_advanced', 'ava_intermediate_image_sizes_advanced_mod' );
function ava_intermediate_image_sizes_advanced_mod( $sizes ) {
 unset( $sizes['large']);
 unset( $sizes['medium_large']);
 return $sizes;
}

We recommend reaching out to your hosting provider for additional assistance.

Best regards,
Ismael

Hey Alan,

Thank you for the inquiry.

Have you tried adding a “Custom HTML: Add a description” element or field type? Please check the screenshot below.

Best regards,
Ismael

Hey Valerie,

Thank you for the inquiry.

Where can check the issue? Please provide a screenshot using platforms like Savvyify, ImgBB, PostImages or Dropbox, then create a test page so we can inspect the elements.

Best regards,
Ismael

Hey furtivo,

Thank you for the inquiry.

We may need to log in to the site to properly investigate the issue. Please provide the login details in the private field and make sure that the Appearance > Theme File Editor is activated in case we need to check the theme files.

Best regards,
Ismael

Hi,

The column animations can be disabled under the Advanced > Animation tab. We created a copy of the home page, disabled all animations and added the following filter using the Code Snippets plugin (named “Enfold Header Scroll Offset”). This resolved the scroll issue.

Please make sure to purge the cache before checking the page (see private field).

function avf_header_setting_filter_mod($header) {
    $header['header_scroll_offset'] = $header['header_scroll_offset'] + 200;
    return $header;
}
add_filter('avf_header_setting_filter', 'avf_header_setting_filter_mod', 9999, 1);

Best regards,
Ismael

Hi,

Thank you for the update.

The page speed reports clearly point to the Revolution Slider as the cause of the LCP issue, so it’s definitely the reason for the decreased score. On the second site, you’ll notice there is no LCP issue because the Revolution Slider only contains static images, without moving parts or animations, unlike the first site, which uses complex slides and effects.

This is the LCP report — note the element sr7-module#SR7_31_1.

LCP request discovery
Optimize LCP by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loadingLCP
lazy load not applied
fetchpriority=high should be applied
Request is discoverable in initial document
sr7-module#SR7_31_1 > sr7-content > sr7-slide#SR7_31_1-130 > sr7-img#SR7_31_1-130-23

Fixing this LCP issue should significantly increase the overall score. We recommend reaching out to the plugin developers for additional information about the issue.

Best regards,
Ismael

Hi,

Thank you for following up.

The class name bluebox was added to the column inside the cell. Please correct this by moving the bluebox class to the cell element.

Best regards,
Ismael

Hey PhatJ,

Thank you for the inquiry.

Try to add a Custom CSS Class name (e.g., av-video-section-control) to the Color Section element by going to Advanced > Developer Settings, then add the following code to the functions.php file to pause the video on the last frame and prevent it from restarting.

function av_custom_script() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function () {
      const videos = document.querySelectorAll(".av-video-section-control video");

      videos.forEach(function(video) {
        video.removeAttribute("loop");

        video.addEventListener("ended", function () {
          video.currentTime = video.duration;
          video.pause();
        });
      });
    });
    </script>
    <?php
}
add_action('wp_footer', 'av_custom_script');

This should help: https://kriesi.at/documentation/enfold/add-custom-css/

Best regards,
Ismael

Hey sky19er,

Thank you for the inquiry.

Try to set a minimum height for the dropdown container using this css:

.tribe-common--breakpoint-medium.tribe-events .tribe-events-c-subscribe-dropdown {
    min-height: 300px;
}

Best regards,
Ismael

Hey Diana,

Thank you for the inquiry.

The Color Section element includes a z-index option, which can be adjusted to make sure the section containing the boxes displays above the first video. Please refer to the screenshot below.

Best regards,
Ismael