Hey hostworks,

Thank you for the inquiry.

You’ll find the main wrapper that contains all the content in the themes/enfold/header.php file, so creating or overriding the template in your child theme is the cleanest approach. Look for this code around line 279:

<div id='main' class='all_colors' data-scroll-offset='<?php echo avia_header_setting( 'header_scroll_offset' ); ?>'>

Let us know if you have more questions.

Best regards,
Ismael

Hey Jake,
While I don’t expect any issues with updating from v3.85 to v7.1.1, I recommend creating a full site backup with your web host backup tool, not a plugin, as good practice.
If they are not using a a Child Theme check the functions.php for any customizations that they may have added, it will be lost in the update. If they are using a child theme, and have any customized php files like header.php or footer.php or any element php files, save these to your computer and remove them from the server before updating. With a version this old they will cause errors, you will need to copy the new version of the files and make the changes to them before adding them to the child theme.
Typically a good practice is to create a staging site first and update it and then compare the two sites for any difference, if this works fine then update the live site.
If you have any further questions please register to our support forum here and create a new thread and we will gladly try to help you.
You have asked your question through the contact form which is not for support requests.
Thank you for your understanding and for using Enfold.

Best regards,
Mike

Hi,

Try to replace the content of the class-responsive-mega-menu.php file with the following code:

— https://pastebin.com/s3N87rGC

Let us know the result.

View post on imgur.com

Best regards,
Ismael

Hi,

Thanks for reaching out.

The theme automatically increases the image quality to 100%, but the WordPress default is only 82%. This can be adjusted by using the following filters in the functions.php file:

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1); 
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1); 
function avf_set_quality_mod($quality) { $quality = 60; return $quality;}

We recommend setting this to 70 or lower, then install an image compression plugin such as ShortPixel or Smush to further reduce file size and optimize the images. You may need to regenerate the thumbnails after the quality adjustment.

— https://wordpress.org/plugins/force-regenerate-thumbnails/

Best regards,
Ismael

Hey syberknight-tb,
Unfortunately, we don’t have an element that will achieve this for you in the theme, while there are many plugins that may work for you, when I check some of them they don’t quite match, but if you spend more time testing each one you may find one.
I was able to create something that may work for you using javascript and HTML in a shortcode, on mobile it shows 1 1/2 team member cards with prev & next arrows and loop when you click to the end:

on tablet it shows 2 1/2 cards:

and on desktop it shows 3 1/2 cards:

As is it holds 8 cards, you can add more or have less, you will need to edit the HTML to add your images and text, hopefully you will be able to do this:

Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor, 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:

and ensure that it is activated, then add the code below and save.

function team_carousel_shortcode() {
    ob_start(); ?>
    
    <div class="carousel-container">
        <button id="prevBtn">←</button>
        <div class="carousel">
            <div class="carousel-track">
                <!-- START: Team Members -->
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 1"><p>Member 1<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 2"><p>Member 2<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 3"><p>Member 3<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 4"><p>Member 4<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 5"><p>Member 5<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 6"><p>Member 6<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 7"><p>Member 7<br>A short bio for the team member</p></div>
        <div class="card"> <img src="/people-2-2-300x300.jpg" alt="Member 8"><p>Member 8<br>A short bio for the team member</p></div>
        <!-- END: Team Members -->
            </div>
        </div>
        <button id="nextBtn">→</button>
    </div>

    <style>
    .carousel-container {
        position: relative;
        width: 80%;
        overflow: visible;
        margin: auto;
    }

    .carousel {
        overflow: hidden;
        width: 100%;
    }

    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out;
    }

    .card {
        box-sizing: border-box;
        padding: 10px;
        background: #e8e8e8;
        margin: 5px;
        border-radius: 8px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }

    @media only screen and (max-width: 767px) { 
        .card { flex: 0 0 62%; }
    }

    @media only screen and (min-width: 768px) and (max-width: 1800px) { 
        .card { flex: 0 0 38%; }
    }

    @media only screen and (min-width: 1801px) { 
        .card { flex: 0 0 28%; }
    }

    .card p {
        color: #000;
     }
	.card img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 100%;
    }

    #nextBtn, #prevBtn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #000;
        border: 2px solid #000;
        padding: 10px;
        cursor: pointer;
        z-index: 10;
    }

    #prevBtn { left: -50px; }
    #nextBtn { right: -50px; }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {
        const track = document.querySelector('.carousel-track');
        const cards = document.querySelectorAll('.card');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');

        let currentIndex = 0;
        let cardWidth = cards[0].offsetWidth + 20;

        function updateCarousel() {
            const shift = currentIndex * cardWidth;
            track.style.transform = translateX(-${shift}px);
        }

        function moveToNext() {
            currentIndex++;
            if (currentIndex >= cards.length) {
                currentIndex = 0;
            }
            updateCarousel();
        }

        function moveToPrev() {
            currentIndex--;
            if (currentIndex < 0) {
                currentIndex = cards.length - 1;
            }
            updateCarousel();
        }

        nextBtn.addEventListener('click', moveToNext);
        prevBtn.addEventListener('click', moveToPrev);

        window.addEventListener('resize', () => {
            cardWidth = cards[0].offsetWidth + 20;
            updateCarousel();
        });
    });
    </script>

    <?php
    return do_shortcode(ob_get_clean());
}
add_shortcode('team_carousel', 'team_carousel_shortcode');

Then add this shortcode in a code block element on your page: [team_carousel]
Feel free to adjust the colors in the css in the code.

Best regards,
Mike

Hey Sonia,

Sorry for the delay. The theme automatically sets the quality of uploaded images to 100%, but this should not be the reason why the generated files are larger than the originals. Did you install any plugins related to images or compression?

If necessary, you can reset the image quality to the WordPress default by adding this code to the functions.php file.

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 70; return $quality;}

You may need to regenerate the thumbnails afterward.

— https://wordpress.org/plugins/force-regenerate-thumbnails/

Make sure to create a site backup or restore point before regenerating the thumbnails.

Best regards,
Ismael

Hey Sven,
Your site is reporting a 404 error (file not found) for your icon fonts:

This affects your social icons and the other icons on your page:

It looks like the only fonts loading are from this location: /wp-content/uploads/themepunch/gfonts/ which may be from a plugin, or perhaps your WP Rocket plugin is causing the fonts to not load.
The first step is to disable all of your plugins and check again. If this doesn’t help leave all of your plugins disabled and include a admin login so we can examine.
I see that you are using a child theme, if you have a old copy of header.php or footer.php in your child theme, please remove these, as this is the top reason for errors after updating.

Best regards,
Mike

Hi,
Thank you for your patience, when I test your snippet above I find that the quotes have been converted to curly quotes which break the code.
If I correct them first, they work correctly in the code block element:


when using a code snippet like this the code block element is the correct element to use because the PayPal snippet is calling a function from the PayPal site which will run in the backend editor where you don’t want it to. The visual mode of the text editor will run the code, but the code block element will not.
If you really want to use the text block element, then use the code tab and do not switch to the visual tab. Here I show that this works, in the code tab you see the code and the preview shows the button:

at this point click “save” and not the visual tab and the button is shown in the editor, which means that WordPress is running the code in the text element in the backend.
Now you can update the page and view the frontend:

This is the corrected code snippet that I used:

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="H87UB2HDHP3GS" />
<table>
<tr>
<td>
<input type="hidden" name="on0" value="Options for Brondanw & Nantclwyd only"/>
Options for Brondanw & Nantclwyd only
</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="Member">
Member £17.00 GBP
</option>
<option value="Guest">
Guest £19.00 GBP
</option>
<option value="2 Members">
2 Members £34.00 GBP
</option>
<option value="1 Member + 1 Guest">
1 Member + 1 Guest £36.00 GBP
</option>
<option value="Child under 16">
Child under 16 £10.00 GBP
</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="GBP" />
<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" title="PayPal – The safer, easier way to pay online!" alt="Add to Cart" />
</form>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
To prevent your code snippet from changing if you want to edit the text block element in the future, such as adding text around the button, we will create a shortcode for your button, by adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function paypal_button_shortcode() {
    ob_start(); ?>
    
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
        <input type="hidden" name="cmd" value="_s-xclick" />
        <input type="hidden" name="hosted_button_id" value="H87UB2HDHP3GS" />
        <table>
            <tr>
                <td>
                    <input type="hidden" name="on0" value="Options for Brondanw & Nantclwyd only" />
                    Options for Brondanw & Nantclwyd only
                </td>
            </tr>
            <tr>
                <td>
                    <select name="os0">
                        <option value="Member">Member £17.00 GBP</option>
                        <option value="Guest">Guest £19.00 GBP</option>
                        <option value="2 Members">2 Members £34.00 GBP</option>
                        <option value="1 Member + 1 Guest">1 Member + 1 Guest £36.00 GBP</option>
                        <option value="Child under 16">Child under 16 £10.00 GBP</option>
                    </select>
                </td>
            </tr>
        </table>
        <input type="hidden" name="currency_code" value="GBP" />
        <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" title="PayPal – The safer, easier way to pay online!" alt="Add to Cart" />
    </form>

    <?php
    return ob_get_clean();
}
add_shortcode('paypal_button', 'paypal_button_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then in your text block element use this shortcode [paypal_button]

in the backend you will only see the shorcode:

and on the frontend the button shows:

Best regards,
Mike

Hi,

Will that happen wherever Masonry appears?

Yes, for some reason, it executes a function intended for Woocommerce. Try editing the file at enfold/config-templatebuilder/avia-shortcode-legacy/av-helper-masonry.php and look for the following code around line 1273:

if ( function_exists( 'WC' ) ) {
	avia_wc_clear_catalog_ordering_args_filters();
	$avia_config['woocommerce']['disable_sorting_options'] = false;
}

Replace it with:

if ( function_exists( 'WC' ) && ! class_exists( 'BigCommerce' ) ) {
	avia_wc_clear_catalog_ordering_args_filters();
	$avia_config['woocommerce']['disable_sorting_options'] = false;
}

Let us know if the issue persists.

Best regards,
Ismael

Hey envis,
You should upload only the webp images and add them to the galleries and other elements. I tested this on the different galleries, masonry, featured images, color section background image, blog post element, ect. There is no need to upload two versions of each image, just use the webp format directly.
Assuming that you are only uploading jpg images and then using a plugin to convert them to webp copies, you could add this code to the end of your child theme functions.php file in Appearance ▸ Editor to show the webp version if the file name and location is exactly the same, the draw back to this approach is that you have twice as many images on your server with only half being used. This also won’t rewrite CSS background images in external CSS files — only inline styles and HTML output, so if you are using CSS File Compression And Merging, or another caching plugin and have background images such as a background image in a color section or a masonry element it may not work. In my tests once I cleared the css and cache it worked for me except the gallery short code like [gallery link="file" columns="5" ids="4350,870,868,864,862"] the gallery and other elements did work.

add_filter('wp_get_attachment_image_src', function($image, $attachment_id, $size) {
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', get_attached_file($attachment_id));
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image[0]);

    if (file_exists($webp_path)) {
        $image[0] = $webp_url;
    }

    return $image;
}, 10, 3);
//for background images
// Replace image URLs with .webp if the .webp version exists
function enfold_replace_with_webp($buffer) {
    // Replace src="...jpg|png" and url('...jpg|png') with .webp if available
    return preg_replace_callback(
        '/(?:src|url)\s*=\s*["\']([^"\']+\.(?:jpe?g|png))["\']|url\(\s*["\']?([^"\')]+\.(?:jpe?g|png))["\']?\s*\)/i',
        function($matches) {
            $original_url = $matches[1] ?: $matches[2];
            if (!$original_url) return $matches[0];

            $parsed_url = wp_parse_url($original_url);
            if (empty($parsed_url['path'])) return $matches[0];

            $img_path = $_SERVER['DOCUMENT_ROOT'] . $parsed_url['path'];
            $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $img_path);
            $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $original_url);

            if (file_exists($webp_path)) {
                // Return updated string (preserving whether it was src= or url())
                if ($matches[1]) {
                    return str_replace($original_url, $webp_url, $matches[0]);
                } else {
                    return 'url("' . $webp_url . '")';
                }
            }

            return $matches[0];
        },
        $buffer
    );
}

// Start output buffering early
function enfold_start_webp_buffering() {
    ob_start('enfold_replace_with_webp');
}
add_action('template_redirect', 'enfold_start_webp_buffering');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Also note that your server media handling editor needs to also support webp files, mine is WP_Image_Editor_GD, which is default for WordPress:

If you are not able to directly use the webp images in your elements, this could be the cause.

Best regards,
Mike

Hi,

Deprecated: Function avia_font_manager::frontend_icon is deprecated since version 7.0! Use Use

Did you modify any shortcodes in the child theme? It’s possible they are still using a deprecated function. You should also check the child theme’s functions.php file. We can’t access the file anymore because the Appearance > Theme File Editor is no longer available.

We also recommend testing this on a different host, as it’s possible the issue is server-related. Try cloning the site to a server hosted by another company or platform.

Best regards,
Ismael

Hi,
When I check my single post using the Default (Business) blog style, the Tags show at the bottom of the page without the filter above:

To move them in line with the categories and other meta try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function move_tag_meta_inline_with_other_meta_on_single_posts() { ?>
  <script>
document.addEventListener('DOMContentLoaded', function() {
    if (document.querySelector('.single-post')) {
        const blogTags = document.querySelector('.blog-tags');
        const blogCategories = document.querySelector('.blog-categories');
        
        if (blogTags && blogCategories) {
            const strongTag = blogTags.querySelector('strong');
            if (strongTag && strongTag.textContent === 'Tags:') {
                strongTag.replaceWith(strongTag.textContent);
            }
            
            const separator = document.createElement('span');
            separator.className = 'text-sep';
            separator.textContent = '/';
            
            blogCategories.insertAdjacentElement('afterend', separator);
            separator.insertAdjacentElement('afterend', blogTags);
        }
    }
});
</script>
  <?php
}
add_action( 'wp_footer', 'move_tag_meta_inline_with_other_meta_on_single_posts', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike