Hi,
When I test your ‘Services’ page with the following code it works correctly, try adding the css to your WordPress ▸ Customize ▸ Additional CSS

.page-id-18 #av_section_2 .flex_column .avia-button-wrap {
 position: absolute;
 bottom: 25px !important;
 left: 0;
 right: 0;
 margin-left: auto;
 margin-right: auto;
 width: 300px;
}

.page-id-18 #av_section_2 .flex_column {
 height: 475px;
 min-height: 475px;
}

Best regards,
Mike

Hey Henk,

You can click this button on the Enfold sub forum: https://imgur.com/a/AnoSPNb, or use this link to open a new thread.

Best regards,
Rikard

Hi,
Thanks for the login, I found a few issues, first you had the “Classic Editor” plugin enabled, if you note back to the earlier post we noted that you should not use this plugin but instead use the built-in Classic Editor option in the theme at Enfold Theme Options ▸ Select Your Editor ▸ Use WP Classic Editor so I disabled this plugin and the kitchen sink showed on the test page created two years ago. I then viewed the frontend and back to the backend and checked again, this time it didn’t show, but after I clicked the update button to save the page the kitchen sink showed again, I tested many times and less that half of the time it worked.
The only error I see is from the WordPress core files: Deprecated TinyMCE API call: .onChange.add(..) I don’t see this on my demo site.
Perhaps this is because your site has not been updated, you are using Enfold v5.5 and we are now up to v5.6.10, so please try updating and checking again.

Best regards,
Mike

Hi,
Thanks for your patience, I asked the rest of the team for ideas about this but we didn’t have any and we are not able to reproduce this on our test sites, but I check your site again and noticed that the add to cart buttons on the page linked below work correctly and the item shows in the cart icon without reloading the page.
But when you go to one of the product pages the add to cart button works at first but then quickly the page reloads which clears the cart icon. I believe it is this reloading of the page that causes the error, on our demo site the page doesn’t reload when you add a item to the cart.
Do you have any scripts that have a onclick function that might cause the page to reload?
I was not able to login and check.

Best regards,
Mike

Hey cruetimann,
It sounds like you have selected all of the permissions, which is not correct, the internal token field requires specific permissions, please see the correct ones in our documentation
Please note that the official Envato market plugin uses fewer permissions, if you use the plugin then please follow the plugin settings page details.
Please also note the Envato limits the number of checks per 24 hours, I believe it is 20 for all combined licenses, so if you have been struggling and hitting the check button many times you might be over the limit, so try waiting a day.

Best regards,
Mike

Hi,
Glad that this helps, I’m not sure what you mean by fixing the right cell width, you are using a grid row with two cells at 50%, if you want a different cell size try the grid row Set Cell Size button below the element:

Perhaps you mean that you only have two items showing but the items are each set to 1/3 of the space, to make them each 1/2 try changing the number of columns the blog element:

If this doesn’t help try explaining further.
As for using the built-in blog post navigation, you will not see these prev/next elements in the embed area because we are not embeding the whole page, only the inner “content” area,
but you could add this solution to add new blog post navigation buttons to the content area of your posts, and in my test on my demo page clicking them changes the embed post successfully:

Best regards,
Mike

Hi,
Thanks for the screenshot I believe that you want to embed one page into another and have the links open in the same embed section.
Such as embed the blog in one side of a grid row and then open the clicked posts in the same section, this is quite tricky but I believe that I have achieved it on this test page.

in the backend I have a grid row element and one side has a background image and the other side has a code block element:

the code block element has this code:

<div id="embedded-section"></div>

<script>
window.addEventListener('DOMContentLoaded', function() {
    (function($) {
        var initialContent = null; // Variable to store the initial content

        // Function to load content via AJAX
        function loadContent(url, initialLoad = false) {
            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'html', // Explicitly expect HTML
                success: function(data) {
                    var content;
                    // Determine the selector based on whether it's the initial load
                    if (initialLoad) {
                        content = $(data).find('#av_section_1').html();
                    } else {
                        // Try the first selector
                        content = $(data).find('.av-main-single').html();
                        // If not found, try the second selector
                        if (!content) {
                            content = $(data).find('.post-entry').html();
                        }
                    }

                    // Check if content was found
                    if (content) {
                        if (!initialLoad) {
                            content = '<a href="#" class="back-link">Back</a>' + content; // Prepend back link to content
                        } else {
                            initialContent = content; // Save initial content if it's the initial load
                        }
                        $('#embedded-section').html(content);
                        bindLinkClicks(); // Re-bind click events to new links within the content
                    } else {
                        console.error('Requested content not found using the provided selectors.');
                        $('#embedded-section').html('Requested content not found.');
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error loading content:', error);
                    $('#embedded-section').html('Error loading content.');
                }
            });
        }

        // Bind click events to links within the embedded section
        function bindLinkClicks() {
            $('#embedded-section a').off('click').on('click', function(event) {
                event.preventDefault(); // Prevent default link behavior
                var linkUrl = $(this).attr('href'); // Get the URL of the clicked link
                
                if ($(this).hasClass('back-link')) {
                    // If the back link is clicked, load the initial content
                    $('#embedded-section').html(initialContent);
                    bindLinkClicks(); // Re-bind click events
                } else {
                    console.log('Attempting to load:', linkUrl);
                    loadContent(linkUrl); // Load content via AJAX, not initial load
                }
            });
        }

        // Initial loading of content with specific section
        loadContent('https://enfold.savvyify.com/embed-2', true);

        // Initial binding of click events on page load
        bindLinkClicks();
    })(jQuery);
});

</script>

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Please change the url in the code to your page with the blog element, look for this part of the code:

// Initial loading of content with specific section
        loadContent('https://enfold.savvyify.com/embed-2', true);

Now the page that is embeded is a ALB page with a color section set to 100% height and a blog element inside:

by default the first color section of a ALB page has the ID av_section_1, this is important because it is what the script calls and will only show this section, not the header, footer, or sidebar, but set this page to no sidebar as the content width is affected.
Now to show the posts with no header, footer or sidebar we will use the class av-main-single for Classic Editor pages and if that is not found because it is a ALB post we will try post-entry, so when a post link is clicked the post will load in the same section:

Now since the back button on the browser won’t work we added a small “back” link at the top of the embed section:

Please give this a try.
Please note that this will only work for pages and links on your site.
Please note Page Preloading will interfere, so please disable.

Best regards,
Mike

Hey dowlassmoss,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 480px) { 
	#top.home .avia-slideshow-button {
		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.
this will hide the buttons below 480px and then the caption will show.

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 Josh,
Your button should be a menu item that you can find in your menu and remove it, if you only want to hide it on mobile you can add this class the class field:
av-small-hide av-mini-hide

notice that there are no dots and there is a space.

If you have further questions please log in to the support forum and open a new thread. Please note that using the contact form is not appropriate for support questions.
If you are unable to login to the support forum because you don’t have a activate support contract, please try going to your Theme Forest account and renew your support and then log in to the support forum and open a new thread.

Best regards,
Mike

Hey netztaucher,

Thank you for the inquiry.

You may need to edit the enfold/config-woocommerce/woocommerce-mod.js file and remove this code around line 131 to disable the custom quantity buttons:

avia_apply_quant_btn();

	//if the cart gets updated via ajax (woocommerce 2.6 and higher) we need to re apply the +/- buttons
	$( document ).on( 'updated_cart_totals', avia_apply_quant_btn );

Make sure to temporarily disable the Enfold > Performance > File Compression settings after doing the modification.

Best regards,
Ismael

Hi,
Your image looks like a subscribe popup form, I assume you are referring to the slightly transparent background overlay and that the box is white, with a dashed border, the following adjustments will produce this:

#top .avia-cookie-consent-wrap[aria-hidden="false"] {
    background-color: rgba(0, 0, 0, 0.3);
    height: 100vh;
    width: 100vw;
    top: 0;
    position: absolute;
    z-index: 999;
}

#top .avia-cookie-consent.avia-cookiemessage-bottom {
	bottom: unset;
	left: unset;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	color: #000;
	border: 3px dashed #000;
}
#top .avia-cookie-consent .avia-cookie-consent-button {
	display: block;
    width: 60%;
    margin: 10px auto;
    background-color: #e1e1e1;
    color:#000;
}
#top .avia-cookie-consent p {
	 display: block;
	 padding-bottom: 20px;
}
#top .avia-cookie-consent-button {
	 border-radius: 50px;
}
@media only screen and (max-width: 767px) { 
	#top .avia-cookie-consent.avia-cookiemessage-bottom {
	width: 80%;
	}
}
@media only screen and (min-width: 768px) { 
	#top .avia-cookie-consent.avia-cookiemessage-bottom {
	width: 25%;
	}
}

Best regards,
Mike

Hi,

You can use this link to open a new thread, or click the big blue button on the Enfold sub forum: https://imgur.com/a/AnoSPNb

Best regards,
Rikard

Hi,
Glad to hear, please register your Purchase Code here for support.
Then log into the support forum and open a new thread.
Or click the full-width blue button at the top of the forum.

Best regards,
Mike

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

@media only screen and (max-width: 767px) {
#top #wrap_all .avia-button {
  padding: 30px 30px 30px 30px !important;
  font-size: 20px;
}
}

I’m looking at this button on your homepage as an example:

these are the correct buttons, right?
If you have a missing bracket in your css somewhere it could cause issues for new css, so try adding the css to WordPress ▸ Customize ▸ Additional CSS and see if that makes a difference.

Best regards,
Mike

Hey Dave,
Thank you for your patience, when you say the next and previous buttons cycle through all post categories do you mean the pagination of the masonry element of the post next and previous buttons on the side of the page?

the masonry element doesn’t control the post next and previous buttons, these are not limited to a specific category they cycle through all posts.

Best regards,
Mike

Hi,

Please try the following in Quick CSS under Enfold->General Styling in order to only target mobile devices:

@media only screen and (max-width: 767px) {
.avia-button {
  padding: 30px 30px 30px 30px !important;
}
}

Best regards,
Rikard

Hi,
Thanks for your patience, it looks like you have some custom css changing the background color of the video controls from gray to transparent and disabling the video play & volume buttons which is an svg images, so if you want these to be red you will need to create new ones and upload them to your site, I added the link below of your current ones.
The player is a core WordPress element and not a Enfold element, and I don’t expect that editing the svg to be easy because the one image contain many elements:

you probably can find someone on fiverr to edit it and make the elements red for you and then upload it to your site.
Or you could remove your custom css and use this css to make the background color red and leave the player items white as they are now, so it would look like this:

div .mejs-container, div .mejs-embed, div .mejs-embed body, div .mejs-container div .mejs-controls {
    background: #bd1229;
}
.mejs-button>button {
    background-color: #bd1229;
}

It is kind of hard to test with your custom css in place, but I believe this is the correct css, if it doesn’t work correctly like the image above, please remove it and you other custom css so we can check again.

Best regards,
Mike

Hey Munford,
Thanks for the link to your test page, when I check the background video on Windows desktop and Android mobile the video plays correctly, IOS typically blocks videos from auto playing on mobile, they have become more aggressive and the best option is to use a fallback image for mobile or a small gif.
Background videos don’t have sound, the thread you linked to is from 2016 and the browsers have changed a lot since then. Perhaps you can try the LayerSlider instead, but with each update the browsers limit these actions more, so you may be better to design to what is allowed now so you don’t need to redesign later.
The WordPress media player, when it used by Enfold, doesn’t have volume controls on mobile by design, WordPress points out that mobile devices have manual volume buttons so they removed the controls. The only way around this is to use a different media player plugin.

Best regards,
Mike

Hey designmek,

Thank you for the inquiry.

Please add this css code to adjust the space between the radio buttons and the input label.

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */
  .wp-block-woocommerce-cart-order-summary-shipping-block .wc-block-components-radio-control .wc-block-components-radio-control__input {
    margin-left: -10px;
  }
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings to make sure that the changes take effect.

Best regards,
Ismael