Hey BenjaminSpeedtsberg,
Thanks for your question, another member @thinkjarvis has written a couple of tutorial threads as I recall about how he achieved this but I can’t find them right now, he has a lot more experience with SEO and page speed than I, below I linked to his forum profile page, try reaching out to him and he can point you to his tutorials or advise you how to achieve this.

Best regards,
Mike

Hey Alwin,
Thanks for your question, webp images work fine as color section background colors, please see my test page below.
For the same top color section on my test page I added this css which hides the background image and allows the orange background color to show on mobile:

@media only screen and (max-width: 767px) { 
#av_section_1.avia-section {
	background-image: none;
}
}

If you have trouble with this css on your site please link to your test page so we can advise.

Best regards,
Mike

Hi,
Thank you for the login, indeed I was testing with the wrong element, so I update my test page and compared the difference between the button grid and the fullwidth button and found that the buttons_fullwidth.php was missing the link title attribute {$title_attr} on line 645:

I added this to your parent theme and now the title is showing.
But there was one issue on your site, when the button is clicked and the lightbox shows the image the title is not shown, but if you use the arrow to see the next image then the title is shown. I found that this was due to your custom script so I adjusted it to exclude the buttons, please test your buttons and the link on your site that the script should remove the titles from to ensure everything works correctly.
I will submit this to the Dev Team for their review and would expect this to be added to the next update.

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 don_olli,
Thanks for the link to your page, in a previous thread I found that the following script would get the height of the iframe page and set the height on load, you will note the iframe code has a function for the height. Try adding this code in your code block element for the script and the iframe link.
This only works if the iframe is the same domain, otherwise you will get a CORs error.

<script type="text/javascript">
function calcHeight(iframeElement){
    var the_height=  iframeElement.contentWindow.document.body.scrollHeight;
    iframeElement.height=  the_height;
}
</script>
<iframe src="https://www.lsc-berlin.de/anmeldung/working_area/anmelden.php?turnier=2" onLoad="calcHeight(this);" frameborder="0" scrolling="no" width="100%" ></iframe>

Below I have linked to my test page of an iframe on my domain.
If this doesn’t help please include an admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hi,
Thank you for the link to your page and the screenshot, I see that your grid row’s height is set to 100vh, when this is set the cell background image is set to background-size: cover which means the image will cover the cell height and width, and in order to cover the height the image will be too wide for the space, unless you want it stretched and distorted.
I see that the image is too wide between 768px & 1605px so try this css:

@media only screen and (min-width: 768px) and (max-width: 1605px)  { 
#av-layout-grid-1 .flex_cell.avia-full-stretch {
    background-size: contain !important;
}

After applying the css, please clear your browser cache and check.
This sets the background-size: contain so the whole image shows, height & width, the only drawback is there is some space above and below the image because it is centered in the screen.
If you don’t like this you can add a background color to the cell matching the image so there is no space, like this:

@media only screen and (min-width: 768px) and (max-width: 1605px)  { 
#av-layout-grid-1 .flex_cell.avia-full-stretch.avia-builder-el-first {
    background-size: contain !important;
    background-color: #C1E1FF;
}

unfortunately, I didn’t find the exact color of your image background, so adjust the color to suit.
Please see the screenshot in the Private Content area.

Best regards,
Mike

Hi,
Sorry that we were not able to help more with this issue, but glad that you were able to work around this. 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,
Thanks for the mockup and link to your site, please try this css instead:

#av_section_2 .avia-progress-bar .progressbar-title-wrap {
    left: 70%;
    top: 7px;
    position: absolute;
}

expected results:

Best regards,
Mike

Hi,
Glad to hear this helped and thank you for bringing this forward, this should also help other users with this issue on their sites.
I don’t see any way that we could include this in the theme because the root of the issue was the use of the CDN and the css above is specific to your pages. Each site/page will have a different element height based on the inner contents.
This worked well for you because all of your pages had the same layout, but unless other users are using a CDN I don’t expect that they will encounter this issue.
But for anyone that does encounter this issue this thread will help explain and offer the means to a solution that we can adjust to suit their situation, if they need help.

Unless there is anything else we can assist with on this issue, I would like to close this so the thread stays on topic and is easily found in the search results.

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, 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,
Try this instead:

function custom_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
$('#top.single-post .av-post-metadata-category-link a:contains("DE")').each(function(){
	$(this).css({'display':'none'});
    $('#top.single-post .av-post-metadata-category').contents().filter(function() {
    return this.nodeType === 3;
}).eq(1).remove();
});
}(jQuery)); 
});
</script>
  <?php
}
add_action('wp_footer', 'custom_script');

Best regards,
Mike

Hi,
Perhaps there is an issue with your converter, I test with this free online converter and I found no issues on a clean install with no plugins.
Please give this a try.
PNG to WEBP Converter
JPG to WEBP Converter

Best regards,
Mike

Hi,
Glad to hear that you have this sorted out, 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 Tilman,
Thanks for the link to your page, to remove the category link “DE” and the comma after it
try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_script() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
$('#top.postid-6592 .av-post-metadata-category-link a:contains("DE")').each(function(){
	$(this).css({'display':'none'});
    $('#top.postid-6592 .av-post-metadata-category').contents().filter(function() {
    return this.nodeType === 3;
}).eq(1).remove();
});
}(jQuery)); 
});
</script>
  <?php
}
add_action('wp_footer', 'custom_script');

Best regards,
Mike

Hi,
I checked again and the icon is now showing, so I seems you have it sorted out now, shall we close this then?

Best regards,
Mike