Hey Diana,
Thanks for the screenshots, I believe that the reason there is so much space between the boxes on mobile is that this page is using negative margins and parallax position, for mobile you should be able to change these settings, but typically the element before uses negative margin to pull the next one up, etc.
I recommend duplicating the page, this feature was added in v5.6.9, as a test homepage and try disabling the Parallax Rules for mobile:

and also the negative margin. If this doesn’t help then we can try again on your test page.
Please see below.

Best regards,
Mike

Hi,
I don’t know what you mean by: Enfold main map within the theme map
This kind of customization is beyond the intended scope of our support and my best recommendation is the use the theme as intended and see if you continue to have issues.
I don’t know how to circumvent the theme & LayerSlider security, and I have not seen the LayerSlider behave like this, so it stands to reason that if the cause is not a plugin or custom script, then it must be another customization. I recall another site with a re-named theme and it would not automatically update, so I imagine you will also be facing this.

Best regards,
Mike

Hi,

Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

Best regards,
Rikard

Hey WorldinColor,
To remove the lines try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap:before, body .av-special-heading.elegant-centered .av-special-heading-tag .heading-wrap:after {
	display: none;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
The line is on all of them, you couldn’t see the line on one of them because the text was so long that the line was over the white background

Best regards,
Mike

Hey leilitacc,
The tabs section has many options to add color:

but your screenshot look more like a toggle/accordion element, but it also has many color options:

Try creating a test page and use the options to change the colors and if you find something you can’t change link to it so we can help with some css.

Best regards,
Mike

Hey Diana,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #wrap_all #header .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
    color: #000;
    font-size: 16px;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey northorie,
To edit the language files you will first need to install Poedit, it is a free software, the look for your language version in enfold/lang/ for German there are two versions de_DE.po & de_DE_formal, choose the one you are using, then search for the text for example “When refusing all cookies this site” it should find it like this:

then when you add your translation and save, you also must “Compile to MO”

so you will have two new files de_DE.po & de_DE.mo then both must be uploaded to your site and replace the current ones.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hey Steve,
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter('avia_layout_filter', 'avia_change_post_layout', 10, 2);
function avia_change_post_layout($layout, $post_id) {
	if( is_shop() || is_product_tag() || is_product_category() || is_cart() || is_checkout()) {
        $layout['current'] = $layout['fullsize'];
        $layout['current']['main'] = 'fullsize';
    }
	if( is_product() ) {
	$layout['current'] = $layout['fullsize'];
        $layout['current']['main'] = 'fullsize';
    }
    return $layout;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
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:

then add the above code and save.

Best regards,
Mike

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

.newsbox .news-headline .news-time {
  display: none; 
}

Best regards,
Rikard

Hi,
I think you mean box-shadow, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#header:not(.av_header_transparency) #header_main {
	-moz-box-shadow:0 5px 5px rgba(182, 182, 182, 0.75);
	-webkit-box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
	box-shadow: 0 5px 5px rgba(182, 182, 182, 0.75);
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
Feel free to adjust to suit.

Best regards,
Mike

Hi,
Please give this a try, add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function group_lightbox_images(){
?>
<script>
(function($){
    $(window).on('load', function() {
        $('.lightbox-added').each(function() {
            var parentClass = $(this).closest('[class*="group-"]').attr('class');
            if (parentClass) {
                var match = parentClass.match(/group-(\d+)/);
                if (match && match[1]) {
                    $(this).attr('data-group', match[1]);
                }
            }
        });

        var groups = {};
        $('.lightbox-added').each(function() {
            var id = parseInt($(this).attr('data-group'), 10);
            if (!groups[id]) {
                groups[id] = [];
            }
            groups[id].push(this);
        });

        $.each(groups, function() {
            $(this).magnificPopup({
                type: 'image',
                mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
                closeOnContentClick: false,
                closeBtnInside: false,
                gallery: { enabled: true }
            });
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'group_lightbox_images');

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:

then add the above code and save.
Then add the custom class group-1 to each accordion slider, changing the number for each one, ie: group-2, group-3, etc.

Then when the image in any group is opened only the other images in the same group will show.

Best regards,
Mike

Hey Groeier!,
This sounds like strange behavior, it looks like you have renamed the theme, is this correct? When I try to check some of your theme files I get a server 500 error and your LayerSlider elements are empty. The LayerSlider that is built into the theme could be protected by the LayerSlider team to only work with Enfold, so perhaps when you rename the theme it causes this error.
Try to use the original Enfold files and do not rename it and see if this occurs again, it is does then include a admin login so we can look, but please do not rename the theme.

Best regards,
Mike

Hey liuxuewu,
To globally set your title & breadcrumbs on pages created with the Advanced Layout Builder, go to Enfold Theme Options ▸ Header ▸ Header Layout ▸ Header Title and Breadcrumbs and set it to Display title and breadcrumbs:

But note that if any of your pages have this disabled on the page, you will need to change the option on the page. You can check by going to your page and look in the Layout ▸ Title Bar Settings and ensure that it is set to Default Layout – set in Enfold Child > Header:

Best regards,
Mike

Hey valev0,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia_desktop #top .av-masonry-entry:hover .av-masonry-image-container {
    transform: scale(1, 1);
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Eleina,
I didn’t find a way to do this so I created a shortcode to create a button that will play a audio file and show a progress bar for the audio track while it is playing

The shortcode to use on your page:
[audio_player src="URL_TO_YOUR_AUDIO_FILE.mp3" text="Custom Button Text"]
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

// use this shortcode: [audio_player src="URL_TO_YOUR_AUDIO_FILE.mp3" text="Custom Button Text"]
function custom_audio_player_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'src' => '',
            'text' => 'Play Audio',
        ),
        $atts,
        'audio_player'
    );

    // Generate a unique ID for this instance
    $uid = uniqid('audio_player_');

    ob_start();
    ?>
    <style>
        .custom-audio-player {
            position: relative;
            max-width:200px;
            margin-bottom:10px;
        }

        .audio-control {
            position: relative;
            overflow: hidden;
            padding: 10px;
            border: none;
            background-color: #007bff;
            color: #ffffff;
            cursor: pointer;
            width:200px;
            transition: background-color 0.3s ease;
        }

        .audio-progress {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 5px;
            background-color: #ff0000;
            width: 0;
            max-width: 100%;
            transition: width 0.1s linear;
        }
    </style>
    <div class="custom-audio-player" id="<?php echo $uid; ?>">
        <button class="audio-control"><?php echo esc_html($atts['text']); ?></button>
        <div class="audio-progress"></div>
    </div>
    <audio class="custom-audio" src="<?php echo esc_url($atts['src']); ?>"></audio>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var player = document.getElementById('<?php echo $uid; ?>');
            var audio = player.nextElementSibling;
            var button = player.querySelector('.audio-control');
            var progress = player.querySelector('.audio-progress');
            var originalButtonText = "<?php echo esc_js($atts['text']); ?>";

            button.addEventListener('click', function() {
                if (audio.paused) {
                    audio.play();
                    button.textContent = 'Pause Audio';
                } else {
                    audio.pause();
                    button.textContent = originalButtonText; // Use originalButtonText instead of hardcoding
                }
            });

            audio.addEventListener('timeupdate', function() {
                var duration = audio.duration;
                var currentTime = audio.currentTime;
                var progressWidth = (currentTime / duration) * 100 + '%';
                progress.style.width = progressWidth;
            });

            audio.addEventListener('ended', function() {
                button.textContent = originalButtonText;
            });
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('audio_player', 'custom_audio_player_shortcode');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
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:

then add the above code and save.
You can adjust the css in the code above to suit your site.

Best regards,
Mike

Hey fogelfish,

Please try enabling debug mode under Enfold->Layout Builder->Show Advanced options, then copy all the shortcodes from the page in question to a new page to see if that helps.

Best regards,
Rikard

Hey Nihru,

Please try the following in Quick CSS under Enfold->General Styling:

@media only screen and (max-width: 1024px) {
  nav.main_menu {
    display: block !important;
  }
  #avia-menu .menu-item {
    display: none;
  }
  .av-burger-menu-main.menu-item-avia-special {
    display: block;
  }
}

You can change the 1024 value to the pixel value of your choice.

Best regards,
Rikard

Hey valev0,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content * {
	color: red;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hey Martin,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia-video, .avia-iframe-wrap {
    margin-bottom: 0;
}

if this doesn’t help then please link to your page so we can examine.

Best regards,
Mike

Hey amyncuih,
Please check your Events ▸ Settings ▸ Display ▸ Events template option, and use the Default Events Template

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi jr-music,

I would recommend that you try to update the theme first of all, then activate the option to delete old CSS and JS files under Enfold->Performance. If that doesn’t help, then please open a new thread and include admin WordPress and FTP login details in private, so that we can have a closer look at your site.

Best regards,
Rikard

Hey arash,

Thanks for reaching out to us. Elementor can work with Enfold, but you could also run into problems. We have to official support for Elementor. I would recommend that you use the built in theme Layout Builder to create your layouts instead.

Best regards,
Rikard