just not sure why you are making it so hard for yourself.
Why grid-row and why create that with background images.
6 1/3 columns and then images in there that get a caption. The caption is then styled.
Maybe also set the 6 columns as flex-box:

__________________

ich bin mir nur nicht sicher, warum Du es dir so schwer machst.
Warum Grid-row und warum das mit Hintergrundbildern erstellen.
6 1/3 columns und dann Bilder hinein, die ein Caption bekommen. Das Caption wird dann gestyled.
Eventuell auch noch die 6 Columns als flex-box setzen:
https://enfold.webers-webdesign.de/images/

PS: wenn du das gesehen hast, werde ich deine Bilder durch Platzhalter-Bilder ersetzen.
PPS: das Flexen geht allerdings nur wenn die flex-items nicht von anderen Elementen gestört werden. Heißt: es dürfen nur diese 6 Columns da drin sein in der Color-Section. Überschriften etc. müssen in einem anderen Container untergebracht werden.

ok – now i understand BUT
even if you could load the script and styles only for home page:

function front_page_preloader_script() {
    if( is_front_page() || is_home() ){
        wp_enqueue_script( 'avia-siteloader-js', get_template_directory_uri().'/js/avia-snippet-site-preloader.js', array('avia-default'), $vn, true, false);
        wp_enqueue_style( 'avia-siteloader', get_template_directory_uri().'/css/avia-snippet-site-preloader.css', array('avia-layout'), $vn, 'screen', false);
    }
}
add_action( 'wp_enqueue_scripts', 'front_page_preloader_script' );

in functions-enfold.php there is still that line 20:

$class = avia_get_option( 'preloader_transitions' ) != 'disabled' ? 'av-transition-enabled' : '';

because it is in a Pluggable Function ( avia_preload_screen ) we could change that in child-theme functions.php.
and we had to change some entries in header.php
but even if we could do that – the preloader will also be shown if you leave the home page …

_________________________

So my quick and dirty way is:
Set in Enfold Options the Preloader and do this to quick css:

#top:not(.home) .av-siteloader-wrap {
    display: none !important
}

yes – that is fast done with photoshop or affinity photo or if you do not use those tools often – try online on : https://www.photopea.com/
this is my layout : https://enfold.webers-webdesign.de/special-backgrounds/
color-section with custom-class: imageblend; Section divider – but you see on the image alb that even multiple backgrounds could be set; and a bit of css.

but i would set this gradient overlay only for larger screen widths.

Now i try to do this with enfold images … see example page

see: https://caniuse.com/?search=mix-blend-mode

so why don’t you use a pseudocontainer to do the job?

#top .avia-section.imageblend {
  position: relative !important;
  overflow: hidden !important;
}

#top .avia-section.imageblend:after {
  position: absolute;
  content: " ";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(90deg, rgba(130,208,221,1) 40%, rgba(130,208,221,0) 60%);
  background-size: cover;
  background-repeat: no-repeat !important;
  background-position: top left;
  pointer-events: none;
}

on a parallax section – selector is a bit different:

#top .avia-section.av-parallax-section.imageblend .av-section-color-overlay-wrap:after

See: https://enfold.webers-webdesign.de/special-backgrounds/
you can use the section divider here and bring it to front

Agreed, the product page layout is now outdated, and I would love to see a few templates to choose from with different layouts. Reviews really need to be highlighted these days, not hidden away in a tab.

Look forward to seeing your example when its ready, and I hope they can implement your header builder ideas too.

All that being said, it’s very encouraging seeing all the work being done at the moment on Enfold – thanks to Gunter, Ismael, Rikard, Mike and the rest of the team! Please keep up the good work :)