Hey wagnerstephan,

Thank you for hte inquiry.

We ran a test on the PageSpeed Insights tool, and according to the result (https://pagespeed.web.dev/analysis/https-autobeschriftung-signature-werbetechnik-de/myl2wzbjm8?form_factor=desktop), the images are not compressed or properly resized. There are also many other recommendations that can be implemented. Have you done any page speed optimization on the site? If you haven’t, the following articles should help.

// 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 koomo,

Thank you for the inquiry.

We’ve found a few script errors generated by the wp-carousel-pro plugin.

Uncaught TypeError: $grid.imagesLoaded is not a function
at HTMLDivElement. (wp-carousel-pro-public.min.js:1:29385)

Have you tried deactivating the plugin temporarily?

Best regards,
Ismael

Hey h-i-m,

Thank you for the inquiry.

The theme automatically sets the quality of uploaded images to maximum, but this can be adjusted using this filter in the functions.php file:

add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

The EWWW Image Optimizer plugin should also improve the compression.

Best regards,
Ismael

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

#top .widget ul.social_bookmarks {
    display: inline-flex;
    gap: 0px 10px;
}

#top .widget ul.social_bookmarks li {
    border: none
}

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

Best regards,
Mike

Hi,
Thank you for your patience, I don’t believe that you can create this complex layout with the diagonal color sections, I recommend adding a background image to the color section with the diagonal white area in the background image

Best regards,
Mike

Hey marketbiz,
To remove the new products section on the empty cart page add this css to your Quick CSS:

.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-product-new,.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title) {
	display:none;
}

Then to add the button add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
(function($){
  var button = $('<div class="avia-button-wrap av-m6cpztd3-7c60bd307536e2939b17d69a432c4593-wrap avia-button-center  avia-builder-el-56  el_after_av_button  avia-builder-el-last "><style type="text/css" data-created_by="avia_inline_auto" id="style-css-av-m6cpztd3-7c60bd307536e2939b17d69a432c4593">#top #wrap_all .avia-button.av-m6cpztd3-7c60bd307536e2939b17d69a432c4593{border-radius:20px 20px 20px 20px;transition:all 0.4s ease-in-out;}#top #wrap_all.avia-button.av-m6cpztd3-7c60bd307536e2939b17d69a432c4593:hover .avia_button_background{border-radius:20px 20px 20px 20px;}</style><a href="#" class="avia-button av-m6cpztd3-7c60bd307536e2939b17d69a432c4593 av-link-btn avia-icon_select-no avia-size-x-large avia-position-center avia-color-dark" title="Dashboard" aria-label="Dashboard"><span class="avia_iconbox_title">Dashboard</span></a></div>');
  if ($("body").hasClass("woocommerce-cart") && $(".wp-block-woocommerce-empty-cart-block .wc-block-grid").hasClass("wp-block-woocommerce-product-new") == true) {
  $(button).appendTo('.wp-block-woocommerce-cart');
  } else {}
})(jQuery);
</script>
  <?php
}
add_action( 'wp_footer', 'custom_script', 99 );

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then adjust the button URL to suit.

Best regards,
Mike

Hi,
Thank you for your patience, your css will only highlight the elements as you tab them, not cause a keyboard focusable.
What element are you not able to keyboard focusable? When I check I can tab to each item on your page.
Your MasterPopups plugin takes the first few focusable, try disabling this plugin, then you have an empty jQuery:

then other scripts, you may need to disable all of your plugins and see if that helps and then enable them one at a time to find the ones taking the focus. But as I test with enough tabs to get past them I can then tab to all of the items on your page.

Best regards,
Mike

Hi,
The advance styling settings in your screenshot is for the “overlay/slide out” (burger menu) please change in the “Main Menu Links” instead:

note that the “Apply only to mouse hover state” is not checked.

Best regards,
Mike

Hi,
I also don’t see any errors on your homepage, please post a screenshot of what you see and the browser / OS that you are using.
To add a screenshot please try using an Screenshot service and pasting the image URL in your post.

Best regards,
Mike

Hey ballindigital,

Thank you for the inquiry.

Looks like the correct product images display once you navigate to the second set of products. We also noticed that the site continuously loads without end. Have you tried deactivating the plugins temporarily? Please clone the site to a staging environment so that we can check the issue properly.

Best regards,
Ismael

Hi,

The issues don’t occur on the live site anymore — the images are visible, and there are no large gaps. Did you figure out the issue?

View post on imgur.com

Best regards,
Ismael

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

#top.page-id-16 .av-horizontal-gallery-slider {
    display: flex;
    justify-content: center;
} 

Best regards,
Mike

Hi,
Please note that adding the code above and regenerating the thumbnails will not remove the old images that you want to remove, you will need to remove them via FTP or your cPanel file manager.

Best regards,
Mike

Hey felix_frank,

They are visible once you hover over the image.

Best regards,
Rikard

Hey designelefant,

Thank you for the inquiry.

After adding the code with the remove_image_size function, did you regenerate the thumbnails? Please note the function will not affect images that are already uploaded to the site. It will only work on newly uploaded images.

You can use any of these plugins to regenerate the thumbnails.

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

Make sure to create a site backup or restore point before proceeding.

Best regards,
Ismael

Hi,

Thank you for the info.

The issue is not reproducible on the staging site, regardless of whether we were logged in or not. The images are displaying correctly on the homepage, and there are no large white spaces below the first section. Please check the screenshot (Chrome) below:

View post on imgur.com

Best regards,
Ismael

Hi,

Great! Glad to know that you found a solution. Please note that the script will affect all images on the entire site. Let us know if you have more questions.

Have a nice day.

Best regards,
Ismael

Hi,

Thank you for the update.

The gallery and slider images are visible when we checked. Did you figure out the issue?

View post on imgur.com

View post on imgur.com

Best regards,
Ismael

Hey daimonart,
Add a custom page title to each contact form “E-Mail Subject”

Best regards,
Mike

Hey snitt,
When I check your page I don’t see that your LayerSlider is cut off, I see that the content slider is cut off due to this error:
(index):875 Uncaught TypeError: Cannot read properties of undefined (reading 'isMobile')
from this custom code in your functions.php:

add_action('wp_footer', 'ava_auto_height');
function ava_auto_height(){
?>
<script>
(function($){
	function c() {
		   if( $.avia_utilities.isMobile ) return;

		   $('#content-slider-height-same .slide-entry').css('height', '');

		   var elementHeights = $('#content-slider-height-same .slide-entry').map(function() {
			 return $(this).outerHeight();
		   }).get();

		   var maxHeight = Math.max.apply(null, elementHeights);

		   $('#content-slider-height-same .slide-entry').height(maxHeight);
	}

	$(window).on('load', function() {
	  	c();
	}).load();
})(jQuery);
</script>
<?php
}

Is this what you are talking about?
Changing to this seems to solve after your WP Rocket plugin is cleared:

add_action('wp_footer', 'ava_auto_height');
function ava_auto_height(){
?>
<script>
(function($){
	function c() {
		   //if( $.avia_utilities.isMobile ) return;

		   $('#content-slider-height-same .slide-entry-excerpt').css('height', '');

		   var elementHeights = $('#content-slider-height-same .slide-entry-excerpt').map(function() {
			 return $(this).outerHeight();
		   }).get();

		   var maxHeight = Math.max.apply(null, elementHeights);

		   $('#content-slider-height-same .slide-entry-excerpt').height(maxHeight);
	}

	$(window).on('load', function() {
	  	c();
	}).load();
})(jQuery);
</script>
<?php
}

I set your code back to the way you had it, please check.

Best regards,
Mike