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

Hey northorie,
Try starting with the theme options to have the cookie bar at the bottom of the page, and then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#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: rgba(0,0,0,0.3);
}
#top .avia-cookie-consent .avia-cookie-consent-button {
	display: block;
    width: 60%;
    margin: 10px auto;
}
#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%;
	}
}

the desktop results:

tablet:

mobile:

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 rqn,
If you want to hide the prev / next post navigation and add a new blog post navigation to the bottom of the posts, above the share buttons, try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

add_filter( 'the_content', 'prev_next_post_nav' );
function prev_next_post_nav( $content ) {
	if ( is_singular('post') ) {
	$content .= '<div style="clear:both;"></div>';
	$content .= '<div class="prev-next-nav-container">';
	$content .= '<div class="prev-nav">';
	$content .= get_previous_post_link();
	$content .= '</div>';
	$content .= '<div class="next-nav">';
	$content .= get_next_post_link();
	$content .= '</div>';
	$content .= '</div>';
	return $content;
	}
	else {
		return $content;
	  }
}

Then add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.prev-next-nav-container {
	width: 100%;
	height: 70px;
    padding-top: 20px;
    padding-bottom: 10px;
}
.prev-next-nav-container .prev-nav {
	display: inline-block;
	float: left;
    border-style: solid;
    border-width: 2px;
    border-radius: 0px;
    text-align: center;
    padding: 5px;
    text-decoration: none;
}
.prev-next-nav-container .next-nav {
	display: inline-block;
	float: right;
    border-style: solid;
    border-width: 2px;
    border-radius: 0px;
    text-align: center;
    padding: 5px;
    text-decoration: none;
}
.prev-next-nav-container .prev-nav:hover,
.prev-next-nav-container .next-nav:hover {
	background-color: rgba(0,0,0,.2);
	color: #fff;
}
.prev-next-nav-container .prev-nav:hover a,
.prev-next-nav-container .next-nav:hover a {
	color: #fff;
}
.prev-next-nav-container .prev-nav a,
.prev-next-nav-container .next-nav a {
	display: inline-block;
}
.prev-next-nav-container .prev-nav:empty,
.prev-next-nav-container .next-nav:empty,
.single-post .avia-post-nav.avia-post-prev,
.single-post .avia-post-nav.avia-post-next {
  display: none;
}

This will make post navigation buttons like this:

The buttons only have a light styling, you can adjust to suit.
On Advanced Layout Builder posts they will show at the bottom of the post page:

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

Best regards,
Mike

Hey Yaphoon,

Thank you for the inquiry.

You can use this css code to adjust the style of the masonry title.

.av-masonry-entry .av-masonry-entry-title {
    line-height: 1.3em;
    margin: 0;
    font-size: 20px;
    font-family: Verdana;
}

To adjust the hover color of the menu button, add this.

#top #wrap_all .header_color #menu-item-174:hover > a .avia-menu-text {
    background-color: #3f75e9;
    color: #ffffff;
    border-color: #3f59e9;
}

And to adjust the size of the images in the archive pages, you have to edit the enfold/taxonomy-portfolio_entries.php and adjust the parameters in the avia_post_grid instance around line 38.

$grid = new avia_post_grid(
										array(
											'linking'			=> '',
											'columns'			=> '3',
											'contents'			=> 'title',
											'sort'				=> 'no',
											'paginate'			=> 'yes',
											'set_breadcrumb'	=> false,
											'preview_mode' => 'custom',
											'image_size' => 'full'
										));

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,
I have checked your homepage on Windows in Chrome, Firefox, & Edge and the slider at the top with the button seems to be the same in each browser. I didn’t see any “zooming” on hover in the slider, but I did on a image lower on the page that looks like a office.
Above you write that the “zooming” only works when you are logged in, typically this would point to an error in the cached files since typically when you are logged in you are not served any cached files. Often when the theme and a plugin minifys the files an error can occur due to the nature of “minifying” which removes spaces & certain characters. It looks like your site is also using a CDN, cloudflare which could be serving the bad files.
Try disabling the Enfold Theme Options ▸ Performance ▸ JS & CSS file merging and compression and enable Enfold Theme Options ▸ Performance ▸ Delete old CSS and JS files, then clear and disable your caching plugin and your server cache and your CDN, it could take a few hours your your site to start serving the same files as when you are logged it, especially for cloudflare which can take up to 24 hours.

Best regards,
Mike

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

.av-magazine-sort .all_sort_button {
	display: none;
}
.av-magazine-sort .all_sort_button ~ span.text-sep:first-of-type {
	display: none;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you Guenni007 for your examples, the private page that clbdcnpafe linked to uses a video element with a vimeo video link, and unfortunately the video mute option is from vimeo inside of an iframe. So as you pointed out, the videos must be self-hosted.
Based on Guenni007’s script I modified it some to create a button to enabled the sound on self-hosted videos, this is my example page, and this is what the button looks like:

This is the css for the Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.custom-mute {
    display: block;
    color: #fff;
    font-size: 40px;
    padding: 20px;
    border: solid 2px #fff;
    position: absolute;
    bottom: 50%;
    right: 36%;
    z-index: 50;
}
.custom-mute.sound-on {
	display: none;
}

This is the code for the end of the child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($) {  
    $('.avia-video').prepend('<div class="custom-mute">Click to unmute</div>');
      $('.avia-video').on('click', '.custom-mute', function() {
        $('video').prop('muted', !$("video").prop('muted'));
      });
    
    $('.avia-video').on('click', '.custom-mute', function() {
      $(this).toggleClass("sound-on");
    });
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

This doesn’t require any theme files to be modified because it is only for the video element and not a background video in a color section or the slider element as Guenni007’s examples, in these cases please follow Guenni007’s post.

Best regards,
Mike

Hey bemodesign,

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

#top .av-custom-form-color .button {
  border-color: green;
}

#top .av-custom-form-color .button:hover {
  border-color: blue;
  background-color: red;
  color: white;
}

Best regards,
Rikard

Hi,

Thank you for the update.

We can’t reproduce the same error on our installation. Did you add any scripts or custom code to the Button Row element? Please set the builder to debug mode to make the shortcodes accessible from the shortcodes field.

// https://kriesi.at/documentation/enfold/intro-to-layout-builder/#debug-mode

After adding the filter, you’ll find another field below the Advanced Layout Builder containing shortcodes. You can remove the shortcode of the Button Row element manually from the field, then update the page. Please create a site backup before proceeding.

Best regards,
Ismael