So if you go and set for the direct child of the background-image container : the mix-blend-mode – it will work in firefox.
But then the whole container is influenced. And a min-height hampers the blend-mode too – because of display :table
…
i would like to set the min height of the container not by the alb – but with css – to get rid of display: table
see my testpage on the bottom: https://enfold.webers-webdesign.de/special-backgrounds/#av_section_3

and css for that:

#top #main #av_section_3.mix-blend-mode  {
  background-size: cover;
  background-position: right center;
}

#top #main #av_section_3.mix-blend-mode .container {
  mix-blend-mode: multiply;
  display: block !important;
  min-height: 45vw;
}

#top #main #av_section_3.mix-blend-mode .container .content {
  float: left !important;
}

my comment on that: this is not a practical way to do it. It is unfortunately the whole container that would have to be set to this blend mode – so we should find another way.

ha _ :lol: i have a Déjà-vu :
https://kriesi.at/support/topic/image-flip-box/#post-1342764 and https://webers-testseite.de/icongrid-with-frontimage/

can not see if all is o.k. because when not using code tag here on board – a lot of signs are transfered to something else – but if you copy&paste it from here: Link – all will be o.k.

by the way : fontawesome is now on 6.11 and hosted on
https://www.jsdelivr.com/

is there a way to see the page it belongs to?
I’m participant as you are – but sometimes we do also have good ideas ;)

try this in your child-theme functions.php:

function ava_exclude_current_post($query) {
  if (is_singular('post') || is_singular('portfolio') ) {  
    $exclude = avia_get_the_ID();
    $query->set( 'post__not_in', array($exclude) );
  }
}
add_action('pre_get_posts', 'ava_exclude_current_post');

or maybe shorter to use as condition above:

  if(is_single()){ 

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.

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

oh – is hard to inspect your site, one would probably have to know a translation service ;)

it depends on the exact page what you had to customize. Is it an archive category page or a archive tag page?
then: it is tag.php – but i guess that it is only here on board a typo ?

Can you please describe in more detail how you want the header to look on small screens (or mobile devices)?
Do you want the header to stay fixed at the top? Do you want the header to shrink after scrolling, etc.? Maybe you can show a sketch.
you can see here a testpage where the header is still fixed on top – and i think it will be no problem to give to the header_bg a background-image after scroll: https://webers-testseite.de/

if you mean that rotating preloader you can try this in your quick css:

.home .av-siteloader {
    border: none !important;
    content: url(/wp-content/uploads/alternative-image.png);   /***  might be a svg file too ***/
    width: 150px;
    height: 150px;
}

if you are referring to the logo above the rotating image:

.home .av-preloading-logo {
    content: url(/wp-content/uploads/alternative-image.png); 
    width: 450px;
}

dimensions you had to test yourself.

well to include a custom-post-type to search results this is the snippet:

function include_custom_search( $query ) {
    if ( $query->is_search ) {
    $query->set( 'post_type', array( 'post', 'page', 'custom_post_type' ) );
    }  
    return $query;
}
add_filter( 'pre_get_posts', 'include_custom_search' ); 

maybe it works the other way too :

function exclude_from_search($query) {
  if ( !$query->is_admin && $query->is_search) {
    $query->set('post_type', array('page','post') );
  }
  return $query;
}
add_filter( 'pre_get_posts', 'exclude_from_search' );

The icon import option of Enfold is only intended for icon fonts.
These have a predefined structure. To take full advantage of these font icons, they must still be monochrome black. It is therefore not possible to add coloured icons.
The idea behind this is to be able to colour them using css: color (font color).
However, coloured icons can be uploaded to the media library as svg or png. These could then replace existing icon fonts via css.

______

L’option d’importation d’icônes d’Enfold est uniquement destinée aux fontes d’icônes.
Elles disposent d’une structure prédéfinie. Pour tirer pleinement parti de ces fontes d’icônes, celles-ci doivent toujours être noires monochromes. Il n’est donc pas possible d’ajouter des icônes de couleur.
L’idée derrière cela est de pouvoir les css: color en utilisant la couleur (couleur de la police).
Toutefois, les icônes colorées peuvent être téléchargées dans la médiathèque sous forme de svg ou de png. Elles pourraient alors remplacer les fontes d’icônes existantes via css.

the question is – how did you update via ftp manually?
Did you really erased the old enfold folder and upload a new one? or do you try to write over all existing files etc. pp.

My way to update in a save way ( because you will have a rollback version ) is:
https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107
You don’t need now the rollback – because the existing version is now corrupted or buggy. When overwriting an exiting folder it depends with the ftp programs on which parameters one sets. Is it always overwritten? What happens to files that are no longer in the new folder – or have been renamed? etc.

Next – i see on your screenshot that your child is renamed to Fysio ( not Enfold ) – do you have that too for the parent theme? ( This would not be necessary – but some users even want to obfuscate even that ) – But there are a few things to keep in mind.

see: https://enfold.webers-webdesign.de/#portfolio

main part is – i think for you to slow down the transition between – maybe you try first only:

.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0; /*** here you can influence the transition opacity - test with 1 to see the difference ***/
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}

___________________________________
– on my page i had :

.mfp-ready .mfp-figure {
  opacity: 0;
}

.mfp-zoom-in .mfp-figure, .mfp-zoom-in .mfp-iframe-holder .mfp-iframe-scaler {
    opacity: 0; /*** here you can influence the transition opacity - test with 1 to see the difference ***/
    -webkit-transition: all 2s ease-out;
    transition: all 2s ease-out;
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
}
.mfp-zoom-in.mfp-bg,
.mfp-zoom-in .mfp-preloader {
  opacity: 0;
  -webkit-transition: all 2s ease-out;
  transition: all 2s ease-out;
}
.mfp-zoom-in.mfp-image-loaded .mfp-figure, .mfp-zoom-in.mfp-ready .mfp-iframe-holder .mfp-iframe-scaler{
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}
.mfp-zoom-in.mfp-ready.mfp-bg,
.mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: 0.85;
}
.mfp-zoom-in.mfp-removing .mfp-figure, .mfp-zoom-in.mfp-removing .mfp-iframe-holder .mfp-iframe-scaler {
    -webkit-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    opacity: 0;
}
.mfp-zoom-in.mfp-removing.mfp-bg,
.mfp-zoom-in.mfp-removing .mfp-preloader {
    opacity: 0;
}
.mfp-iframe-scaler{ overflow: visible; /*so the close button is shown*/}
.mfp-zoom-out-cur { cursor: auto; }
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer; }

the scale-factor is up to you – maybe a scale-factor nearby the 1 looks better