Hi,

Thank you for the update.

The theme includes a plugin called LayerSlider and what you’re looking for should be possible with it. However, as mentioned above, this will require some modifications and custom scripts. If you want to proceed, you can check out the documentation.

— https://layerslider.com/documentation/#layerslider-api

Best regards,
Ismael

Hi,

Thank you for the update.

The images in the masonry seem to be displaying in their original sizes now. Have you tried adjusting the width of the container so the images display the same as on the previous site?

.page-id-1562 #section-width .container {
    max-width: 1350px;
}

Adjust the max-width value as necessary.

Screenshot:

Best regards,
Ismael

Hey collinsfgc2025,

Thank you for the inquiry.

You have to look for the View icon in the top right corner of the editor. Please check the screenshot below:

Let us know if you have more questions.

Best regards,
Ismael

Hi,

Thank you for the update.

We can set a custom cookie to persist the info-box status across the entire site. Please locate the existing script block and replace it with the following code:

<script>
(function() {

    function setCookie(name, value, days) {
        var expires = "";
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toUTCString();
        }
        document.cookie = name + "=" + (value || "") + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    var infoBox = document.getElementById('stickyInfoBox');
    var closeBtn = document.getElementById('closeInfoBox');
    var toggleBtn = document.getElementById('infoToggle');

    if (getCookie('av-infobox-closed') === '1') {
        infoBox.classList.add('hidden');
        toggleBtn.classList.add('visible');
    }

    // Close the info box
    closeBtn.addEventListener('click', function() {
        infoBox.classList.add('hidden');
        toggleBtn.classList.add('visible');
        setCookie('av-infobox-closed', '1', 30);
    });

    // Show the info box again
    toggleBtn.addEventListener('click', function() {
        infoBox.classList.remove('hidden');
        toggleBtn.classList.remove('visible');
        setCookie('av-infobox-closed', '0', 30);
    });

})();
</script>

To add a DE version, replace the code with the version below and make sure to include both the existing style block and the updated script block.

function add_sticky_info_box() {
    $locale = get_locale();

    if ( $locale === 'en_US' ) {
        $title      = "Important Information";
        $message    = "This is your information box! You can customize this message to display any content you'd like to share with your visitors.";
        $buttonText = "Learn More";
        $buttonLink = "/your-page-url";
    }

    elseif ( $locale === 'de_DE' ) {
        $title      = "DE Important Information";
        $message    = "DE This is your information box! You can customize this message to display any content you'd like to share with your visitors.";
        $buttonText = "DE Learn More";
        $buttonLink = "/your-page-url";
    }

    else {
        $title      = "Information";
        $message    = "Here is an information box.";
        $buttonText = "More";
        $buttonLink = "/";
    }
    ?>

    // style block here
<div class="sticky-info-box" id="stickyInfoBox">
<div class="sticky-info-box-header">
<h3 class="sticky-info-box-title"><?php echo esc_html($title); ?></h3>
<button class="sticky-info-box-close" id="closeInfoBox" aria-label="Close">×</button></div>
<div class="sticky-info-box-message">

<?php echo esc_html($message); ?>

</div>
<a href="<?php echo esc_url($buttonLink); ?>" class="sticky-info-box-button">
            <?php echo esc_html($buttonText); ?>
        </a></div>
<button class="sticky-info-toggle" id="infoToggle" aria-label="Show information">ℹ</button>

    // script block here
<?php
}

Best regards,
Ismael

Hey SpiderLabz,

Thank you for the inquiry.

Did you also update the theme to version 7.1.3? Please make sure the theme is updated to the latest version, create a test page and then provide the site details in the private field. We’ll take a look.

Best regards,
Ismael

Hi,

Thank you for the update.

In the Masonry edit panel, go to Styling > Masonry Settings, then locate the Image Size settings. Set this to the first option No Scaling to display the image at its original size. Please let us know the result.

Best regards,
Ismael

Hey colince742,

Thank you for the inquiry.

Looks like there are many PHP errors, which may be related to the currently installed version. Please make sure that PHP is upgraded to version 8.0 or later. You can also hide the warnings by adding the following code to your wp-config.php file.

define('WP_DEBUG', false);
define('WP_DEBUG_DISPLAY', false);
define('WP_DEBUG_LOG', false);

If you need help upgrading PHP, you can contact your hosting provider for assistance. Please let us know the result.

Best regards,
Ismael

Hey condonp,

Thank you for the inquiry.

You can use this css code to apply borders to the masonry images:

.av-fixed-size .av-masonry-image-container, .av-fixed-size .av-masonry-outerimage-container {
    border: 1px solid #000000;
}

.av-fixed-size .av-masonry-image-container .av-masonry-image-container, .av-fixed-size .av-masonry-outerimage-container .av-masonry-image-container {
    border: 10px solid #ffffff;
}

Result:

Best regards,
Ismael

Hi,

You’re welcome! Please don’t hesitate to open another thread if you have more questions.

Have a nice day.

Best regards,
Ismael

Hey ti2media,

Thank you for the inquiry.

The color of the email field is different due to this css code:

#top .kontaktformular input[type='text'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

To correct it, please replace it with the following css:

#top .kontaktformular input[type='text'], #top .kontaktformular input[type='email'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

Then add this css code to adjust the width of the form fields:

#top fieldset {
    margin-bottom: 20px;
    overflow: hidden;
}

Best regards,
Ismael

Hey John,

Thank you for the inquiry.

The theme has its own Contact Form element, but if you need more options, we recommend Contact Form 7 for simplicity or WPForms for more advanced features. Please check the links below:

— https://wordpress.org/plugins/contact-form-7/
— https://wordpress.org/plugins/wpforms-lite/

If you find any styling issues, you can always correct them with custom css. Let us know if you need any additional assistance.

Best regards,
Ismael

Hey dnewkirk,

Thank you for the inquiry.

You may need to temporarily disable the cache plugin, as well as the Enfold > Performance > File Compression settings, while editing the site. You can enable them again once you’re done. Let us know if the issue persists.

Best regards,
Ismael

Hey tariqyacoub82,

Thank you for the inquiry.

Unfortunately, it’s not possible to set a different font for each language from the theme options. You will need to modify this with custom css. If you can create a test page and share the site URL, we’ll check it out.

Best regards,
Ismael

Hey jimmiemoreland,

Thank you for the inquiry.

You can add this css code to make the header sticky on mobile. Make sure to adjust the top padding based on the header’s height.

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

  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }

  .responsive.html_header_top #top #main {
    padding-top: 120px !important;
    margin: 0;
  }
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

If you want to create it manually using html, try to add this code in a text or code block element:

<div class="av-logo-row">
<div class="av-logo-item">
    <img src="logo1.png" alt="Logo 1">
    <span>Text 1</span></div>
<div class="av-logo-item">
    <img src="logo2.png" alt="Logo 2">
    <span>Text 2</span></div>
<div class="av-logo-item">
    <img src="logo3.png" alt="Logo 3">
    <span>Text 3</span></div>
<div class="av-logo-item">
    <img src="logo4.png" alt="Logo 4">
    <span>Text 4</span></div>
<div class="av-logo-item">
    <img src="logo5.png" alt="Logo 5">
    <span>Text 5</span></div>
<div class="av-logo-item">
    <img src="logo6.png" alt="Logo 6">
    <span>Text 6</span></div>
<div class="av-logo-item">
    <img src="logo7.png" alt="Logo 7">
    <span>Text 7</span></div>
<div class="av-logo-item">
    <img src="logo8.png" alt="Logo 8">
    <span>Text 8</span></div>
<div class="av-logo-item">
    <img src="logo9.png" alt="Logo 9">
    <span>Text 9</span></div>
</div>

Then use this css:

.av-logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.av-logo-item {
  flex: 1 1 calc(100% / 9 - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 20px;
}

.av-logo-item img {
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
}

.av-logo-item span {
  font-size: 14px;
  color: #333;
}

@media (max-width: 1024px) {
  .av-logo-item {
    flex: 1 1 calc(33.333% - 20px);
  }
}

@media (max-width: 600px) {
  .av-logo-item {
    flex: 1 1 100%;
  }
}

Best regards,
Ismael