Hey Rocuant,

Thank you for the inquiry.

We added this code in the functions.php file to insert the widget area in the header.

<?php

//--------------------------------
// Header widget area
//--------------------------------

add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area' );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( 'header' );
}

We then created a custom widget area named “header” in the Appearance > Widgets panel and added a Text widget. To adjust the widget’s position within the header, we added the following code in the Quick CSS field:

#top #header #header_main .widget {
    position: absolute;
    right: 50%;
    transform: translateX(-50%);
}

Please check the documentation below for more info: https://kriesi.at/documentation/enfold/header/#adding-a-header-widget-area

Best regards,
Ismael

Hey Blaise,

Thank you for the inquiry.

Have you tried applying a Custom CSS Class to the element so you can target it specifically? Please refer to the documentation below for more info:

// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support

Best regards,
Ismael

Hi,

Thank you for the update.

We ran a test using PageSpeed Insights and compiled a list of possible solutions based on the tool’s recommendations:

1. Minimize main-thread work:
— Solution: Improve code to reduce JavaScript time and avoid long tasks.
— Example: Go to the Enfold > Performance panel and set the JS/CSS File Merging And Compression settings to the third option (Use minified theme files without merging). This should split the code and load necessary CSS/JavaScript for each page, and lazy load non-essential resources.

2. Optimize Largest Contentful Paint:
— Solution: Identify and optimize the largest content for faster loading.
— Example: Resize and format large images, and consider lazy loading to delay loading until they’re visible.

3. Reduce JavaScript time:
— Solution: Minimize and optimize JavaScript code for faster execution.
— Example: Refer to number 1

4. Lazy load third-party resources:
— Solution: Load non-essential third-party resources asynchronously.
— Example: Delay loading social media widgets or analytics scripts until after the main content is displayed using LazyLoad or Intersection Observer API.

5. Improve server response time:
— Solution: Optimize server configurations and utilize caching mechanisms.
— Example: Configure server settings to reduce response time and utilize caching to serve content more efficiently.

6. Defer render-blocking resources:
— Solution: Defer or asynchronously load resources that block rendering.
— Example: Use “defer” attribute for JavaScript or inline critical CSS to prevent render-blocking and improve page load speed.

7. Minimize third-party code impact:
— Solution: Load third-party scripts asynchronously to prevent main thread blocking.
— Example: Load third-party scripts asynchronously or in iframes to minimize their impact on main thread performance.

8. Reduce excessive DOM elements:
— Solution: Simplify HTML structure and dynamically load content as needed.
— Example: Avoid unnecessary nesting and dynamically load content to reduce the number of DOM elements and improve performance.

9. Lazy load offscreen images:
— Solution: Defer loading of images outside viewport.
— Example: Use “loading” attribute set to “lazy” or JavaScript-based lazy loading libraries to defer loading of offscreen images until they are needed. WordPress automatically add these attributes for images, but you can also install a lazy load plugin if necessary.

10. Optimize JavaScript usage:
— Solution: Remove or optimize unused JavaScript code.
— Example: Use code analysis tools to eliminate dead code paths and consider lazy loading or code splitting to optimize JavaScript usage.

12. Optimize image sizes:
— Solution: Resize and compress images to reduce file size.
— Example: Use image optimization tools to compress images without sacrificing quality and specify image dimensions in HTML or CSS.

13. Serve modern JavaScript:
— Solution: Serve optimized JavaScript based on browser compatibility.
— Example: Use feature detection to serve polyfills or fallbacks only to browsers that require them, and utilize modern JavaScript features for better performance.

For more info about site optimization, please check the articles below:

// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.html

Best regards,
Ismael

Hey northorie,

Thank you for the inquiry.

You can replicate the layout by adding a Text Block within a Column element, apply the yellow background to the column, then go to Advanced > Developer Settings. In the Custom CSS Class name field, add “av-custom-header-column”. Then add the following code in the Quick CSS field to adjust the position of the text block within the column.

#top .av-custom-header-column .avia_textblock {
    padding: 40px 20px;
    background: white;
    position: absolute;
    right: -50px;
    top: 50px;
}

Best regards,
Ismael

Hey Yaphoon,

Thank you for the inquiry.

You can add this css code to adjust the alignment of the content in the message box:

.avia_message_box_content p {
    display: inline-block;
}

Best regards,
Ismael

Hi,

Thank you for the update.

Please add this code at the very bottom of the css modifications.

#top #wrap_all #social .social_bookmarks {
    margin: 0;
    display: flex;
    float: none;
    justify-content: center;
    margin-left: -50px;
}

Best regards,
Ismael

Hi,

Thank you for the update.

You can adjust the order property to reverse the location of the button widget and burger menu. Then, set the left margin of the widget to auto to keep it close to the burger menu icon.

.responsive #top #header #header_main .inner-container .widget {
    order: 2;
    flex-basis: auto;
    padding: unset;
    clear: none!important;
    align-self: center;
    align-items: flex-end;
    z-index: 1;
    margin-left: auto;
}

.responsive #top #header #header_main .inner-container .main_menu {
    order: 3;
    flex-basis: auto;
    align-items: center;
    align-self: center;
}

This should also fix the layout of the header on smaller screens.

Best regards,
Ismael

Hey mvi,

Thank you for the inquiry.

Did you add this script?

jQuery(document).ready(function($) {
    // Replace the accordion selectors with your own accordion toggler selectors
    var accordions = $('#skillspring-process .toggler');

    function forceSlideChange(slideshow, targetIndex) {
        var slides = slideshow.find('.avia-slideshow-inner li');
        var activeSlide = slides.filter('.active-slide');
        var targetSlide = slides.eq(targetIndex);

        // Stop any ongoing animations
        slides.stop(true, true);

        // Hide the current active slide
        activeSlide.removeClass('active-slide').css({ 'opacity': 0, 'visibility': 'hidden' });

        // Show the target slide
        targetSlide.addClass('active-slide').css({ 'opacity': 1, 'visibility': 'visible' });

        // Update the active control dot
        slideshow.find('.avia-slideshow-dots .goto-slide').removeClass('active').eq(targetIndex).addClass('active');
    }

    accordions.on('click', function() {
        // Get the index of the clicked accordion toggler
        var index = accordions.index(this);

        // Replace the slideshow selector with your own slideshow selector
        var slideshow = $('#skillspring-process-slideshow');

        // Check if the slideshow exists on the page
        if (slideshow.length) {
            forceSlideChange(slideshow, index);
        }
    });
});

You should also apply the ID “skillspring-process” to the Accordion element and the ID “skillspring-process-slideshow” to the Easy Slider element.

Best regards,
Ismael

Hey Lin84,

Thank you for the inquiry.

This css code overrides the custom styling of the timeline element on the FR version:

.main_color .avia-timeline .milestone_inner {
    background-color: #eeeeee;
}

Did you add this css somewhere? To fix the issue temporarily, you can add this css code:

.avia-timeline-container.av-kjwyagyt-68e2c76bd38b38fac872646993948af8 .av-milestone-icon-inner {
    background-color: #e85c2e !important;
}

Best regards,
Ismael

Hey Martin,

Thank you for the inquiry.

You may need to adjust the maximum dimension of the entry_with_sidebar thumbnail. Add this code in the functions.php file:

function avf_customization_modify_thumb_size( $size ) {
      $size['entry_without_sidebar'] = array( 'width' => 9999, 'height' => 9999 );
      $size['entry_with_sidebar'] = array( 'width' => 9999, 'height' => 9999 );
      return $size;
}

add_filter( 'avf_modify_thumb_size', 'avf_customization_modify_thumb_size', 10, 1 );

Then use the this plugin to regenerate the thumbnails.

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

Best regards,
Ismael

Hi,

Thank you for the update.

We may need your RankMath account in order to use the AI feature. Did you subscribe as Business or Agency? Please provide the RankMath account and make sure that there are available credits so that we can test the AI option.

Best regards,
Ismael

Hi,

Thank you for the update.

We get an error in the console when the WP Rocket plugin is activated. The error is generated from the themes/SI-SUITES/js/custom.js file:

jQuery(document).ready(function() {
    var sections = jQuery('.avia-section')
      , menu = jQuery('.av-submenu-container')
      , nav_height = menu.outerHeight();
    jQuery(window).on('scroll', function() {
        var cur_pos = jQuery(this).scrollTop();
        var activeMenuItem = menu.find('.active-menu-item');
        sections.each(function() {
            var section = jQuery(this);
            var top = section.offset().top - 300;
            var bottom = top + section.outerHeight();
            if (cur_pos >= top && cur_pos <= bottom) {
                var activeLink = menu.find('a[href="#' + section.attr('id') + '"]');
                activeMenuItem.removeClass('active-menu-item');
                activeLink.addClass('active-menu-item');
                if (activeLink) {
                    var activeItemOffset = activeLink.offset().left - menu.offset().left;
                    menu.scrollLeft(activeItemOffset)
                }
            }
        })
    })
})

Did you add this script? Please remove the script temporarily, then check the page again.

Best regards,
Ismael

Hi,

Thank you for the update.

The error should not occur when the Performance > File Compression settings are disabled because the theme will not generate, update, or retrieve the avia-head-scripts entry in the database. Please temporarily disable the compression options and the cache plugin, remove the snippets from the functions.php file, wait for a bit, make sure to purge the client and server cache, before testing it again.

Best regards,
Ismael

Hi,

Where did you add this css code? We can’t find it in the Quick CSS field. This rule overrides the code that we previously suggested.

#section-container-width .container {
    width: 70% !important;
    min-width: 70% !important;
}

Best regards,
Ismael

Hey joschro,

Thank you for the inquiry.

Have you tried to directly adjust the image title in the Media > Library panel?

Please provide a screenshot using Savvyify, Imgur or Dropbox. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, Imgur 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