the one big error is that you do not enter the $(postTitle)
and to avoid to write always the jQuery instead of $ i do surround the code in this way – so you can use inside normal $ sign:

<script>
(function($){	
	…
})(jQuery);
</script>

and if you are not using any index you can remove that too:
( if your selectors are right – try this) :

function metaAfterTitle(){
?>
<script>
(function($){	
	$(".template-blog .post-entry").each(function(){
		var postTitle 	= $(this).find('.blog-categories.minor-meta');
		var metaInfo 	= $(this).find('.post-meta-infos');
		$(metaInfo).insertAfter($(postTitle));
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'metaAfterTitle');

if you add those tags with custom class they will not be removed!
<br class="noclear"/>
same with p-tags

On Enfold 4.7.6.4 the permanent linebreak seems to exists as a button in the tool-bar
and it inserts : <br class="avia-permanent-lb" />

i use for some “extras” this little plugin: https://kriesi.at/support/topic/line-break-not-working-in-front-end/#post-1146117

@ Cliffy
1) the changelog (version.txt) is in the big zip file on Envato (“All files and documentation”) – yes it would be nice to have this file in the “Installable WordPress File only” archive too.

2) i do always update like this ( https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107 ) – so there is always a rollback version.

3) if you update manually ( by uploading that zip file or via ftp) you can decide when you like to update. It is not necessary to do it on the first day of release – wait till the changelog is here: https://kriesi.at/documentation/enfold/changelog/

but your link on top is no enfold theme – it is gaia
So i guess Enfold support is the wrong place to ask?

for the link ( https://www.urasessence.it/ ) above – and only for small screens :

@media screen and (max-width:414px) {
  #mobile-bar {
    max-height: 100px;
    height: 100px;
  }
  .breakpoint .logo a img {
    height: 50px !important;
  }
  .logo-container {
    float: none;
    width: 100% !important;
    display: inline-block;
  }
  .logo {
    display: inline-block;
  }

  .breakpoint .logo a img.logo-img, #mobile-bar #toggle {
    left: 50%;
    position: relative;
    transform: translateX(-50%);
  }
} 

hm i can not reproduce your problems: https://webers-testseite.de/vimeo-embed/

The left one is enfold video alb.
And the right one is iframe ( but i prefered the responsive setting – on share button you can see options button on top right)

( That testpage is on Enfold 4.7.6.4 and WP5.5.1 )

have you set any Content Security Policy (CSP) or f.e. a plugin which has set it?
if you are familiar with developer tools have a look to the Console – if there are blocking rules on vimeo sources.

just to mention: if you got older additional font-icons in your import – the fontello page now generates the woff2 format too.
it could be solved by extracting the svg font file from your former upload zip file and drag and drop it into fontello page
“Drag custom SVG icons or SVG font here.”
activate all your wanted icons and then download it from fontello and upload that new zip file.

OK – i just asked because i can not reproduce the issue.
See the bottom of that page : https://webers-testseite.de/gallery/
This is a gallery with left jpg – right png.
Click to see the lightbox – allthough this is a big png – there is no darker corner. – no tear ( rupture, torn, crack, rip nor break)
Yes, you are right – the png is a bit sharper on the preview image of the gallery, but at what price?
A page with 5-6 png of this dimension would take much longer to load completely. The surfing behaviour of most visitors to a page is such that if a page takes longer than 5 seconds to load, the attention is reduced to zero.

It is described above and again in the second part:
Id and class,

and especially the background had to be set to scroll.

.bg-fixed {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	background-size: 0 !important;
	overflow: hidden;
	position: relative;
}

.bg-fixed:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: inherit !important;
	background-repeat: no-repeat !important;
	background-size: cover;       /** or contain - what you need **/
	background-position: inherit;
/** will-change: transform;    - only if you have less then 3 images like that ***/
}

@media only screen and (max-width: 767px) {
  #myid.bg-fixed:before {
    background-image: url(/wp-content/uploads/alternative-image.jpg) !important;
  }
}

There is nothing more I can do than to give a detailed instruction and also show a working test page. If not read carefully, then unfortunately I cannot do more. I will only make instructional films if there is no other way to create clarity.

well on Victorias link the wrapping container in enfold for the images is: avia-slide-wrap

i would give a custom-class to the slideshow you like to influence – f.e.: kenburns
then it will be nice if only the active slide is doing that – so when i transpose the code from code pen to enfold classes :

.kenburns .active-slide .avia-slide-wrap {
  width: 100%;
  height: 56.25vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

.kenburns .active-slide .avia-slide-wrap img {
  width: 100%;
  animation: move 20s ease infinite alternate;
  -ms-animation: move 20s ease infinite alternate;
  -webkit-animation: move 20s ease infinite alternate;
  -0-animation: move 20s ease infinite alternate;
  -moz-animation: move 20s ease infinite alternate;
  position: absolute;
}

@-webkit-keyframes move {
  0% {
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    -o-transform-origin: center center;
    transform-origin: center center;
    transform: scale(1.0);
    -ms-transform: scale(1.0); 
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }
  100% {
    transform: scale(1.2);
    -ms-transform: scale(1.2);
    -webkit-transform: scale(1.2);   
    -o-transform: scale(1.2);
    -moz-transform: scale(1.2);
  }
}

don’t know if all cross-browser settings are neccessary today – but i let them stay in the quick css code.
Important: see ( height: 56.25vw; ) if the width of the slider is 100vw then a 16:9 height will be approx: 56.25vw
The Code Pen Code only works nice if you have set a hight on that and that should reflect the aspect ratio well.
So it might be nice to have for Slideshows having a film slide with 16:9 format – the images got the same size on that.
I have on that testpage images of that format.:
https://webers-testseite.de/slider-with-kenburns/

No ! – a linebreak is something different.
A Softhyphen is a conditional hyphen. It breaks a word if the surrounding place is not big enough – and sets on that case a hyphen.

You can use &shy and directly after it a semicolon ­ will then have that effect.

But big disadvantage you will not see the place on the backend if and where you have set it. And i guess on editing that f.e. heading again it will be lost.

so use Günters little helpful plugin with some extra characters : Advanced Special Characters

you can open that php and edit it to your needs ( because i do not want to use three # before and after those signs – i changed it only to one )
and added some special characters – so my translation list looks like this:

even in code tag it will change the signs – so only an image of it:

or on pastebin the complete php to put in your plugins directory: Link

so usage is easy – when using #shy# the soft-hyphen is set and can be seen on backend and is permanent set even on editing the alb again:


Resultspage: https://webers-testseite.de/special-characters/

PS: this is very helpfull because if you like to insert signs as greater than or less or equal than etc. The Editor will handle them as a beginning tag – and so sometimes breaks the layout. Try to insert to a table alb element a greater than sign !

Edit: seems to be changed on newest Enfold something that in text-blocks the greater than and similar are no longer miss interpreted now after all

I would not realize it with two color sections.
e.g. if you want to navigate to it using anchor link.

just create one color-section – give a unique ID to it ( f.e: myid ) and a custom-class : bg-fixed
this custom-class is for all those backgrounds the same only the ID should be unique.
and for your smaller screens set a css to your quick css to change the background images.
Set the background-image to scroll !!! to avoid the parallax extra container.

( PS: Google search on : background-attachment:fixed and mobile browsers – especially IOS ( iphone, ipad etc).

My solution to this problem circumvents the background-attachment : fixed by creating a pseudocontainer with a fixed position.:
This goes to quick css:

.bg-fixed {
	-webkit-clip-path: inset(0 0 0 0);
	clip-path: inset(0 0 0 0);
	background-size: 0 !important;
	overflow: hidden;
	position: relative;
}

.bg-fixed:before {
	content: "";
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: inherit !important;
	background-repeat: no-repeat !important;
	background-size: cover;       /** or contain - what you need **/
	background-position: inherit;
/** will-change: transform;    - only if you have less then 3 images like that ***/
}

this also goes to the quick css:
now you only have to set for smaller screens a different background-image by using the unique ID:

@media only screen and (max-width: 767px) {
  #myid.bg-fixed:before {
    background-image: url(/wp-content/uploads/alternative-image.jpg) !important;
  }
}

see result: https://webers-testseite.de/donkey/

INFO: will-change usage

But you like to remove only the link option on single post not on the archive post list?

You can see here that i inserted a ternery operator on setting the link in the avia_default_title_filter function on helper-post-format.php
this code here is different to the standard code:

$output .= is_singular() ? $current_post['title'] : "<a href='".get_permalink()."' rel='bookmark' title='". __('Permanent Link:','avia_framework')." ".$current_post['title']."'>".$current_post['title'];
$output .= "<span class='post-format-icon minor-meta'></span>";
$output .= is_singular() ? '' : '</a>';

so put this to your child-theme functions.php:

function avia_default_title_filter($current_post){
	if(!empty($current_post['title']))
	{
		$default_heading = is_singular() ? 'h1' : 'h2';
		$args = array(
					'heading'		=> $default_heading,
					'extra_class'	=> ''
				);
	
		$args = apply_filters( 'avf_customize_heading_settings', $args, 'avia_default_title_filter', array( $current_post ) );
		
		$heading = ! empty( $args['heading'] ) ? $args['heading'] : $default_heading;
		$css = ! empty( $args['extra_class'] ) ? $args['extra_class'] : '';

		$output  = "";
		//$output .= "<{$heading} class='post-title entry-title ". avia_offset_class('meta', false). "'>";
		$output .= "<{$heading} class='post-title entry-title {$css}' ".avia_markup_helper(array('context' => 'entry_title','echo'=>false)).">";
		$output .= is_singular() ? $current_post['title'] : "<a href='".get_permalink()."' rel='bookmark' title='". __('Permanent Link:','avia_framework')." ".$current_post['title']."'>".$current_post['title'];
		$output .= "<span class='post-format-icon minor-meta'></span>";
		$output .= is_singular() ? '' : '</a>';
		$output .= "</{$heading}>";
		$current_post['title'] = $output;
	}
	return $current_post;
}

and by the way you can change here the tag of the heading on archives and single post on this line above:
$default_heading = is_singular() ? 'h1' : 'h2';
this is ternery operator again – if you have a single post it is h1 – else h2

Maybe this should be the standard on helper-post-format.php – because it does not make sense to link to the post itself

on my end the videos starts quick – yes the selfhosted is faster ( but this is dependent on the traffic of this page ) – but even the vimeo video starts after 1s on my end here.
What i see on the page with the vimeo video is that the fallback-image is a very large jpg ( first i would crop the image to the aspect ratio of the film 16:9 – then i would compress it more ) this jpg is compresse 232kb big and loaded 14MB – you see on gtmetrix ( https://gtmetrix.com/reports/hebmp.nl/k3qZGK8O ) that this alone loads 614ms.
And your page has a total page size of 14.4 MB. Maybe the videos are not the reason for slow loading.

On the first page there is the same issue ( https://gtmetrix.com/reports/hebmp.nl/aYy5cBiw )
Try to make those images smaller – especially because well over 90% of all visitors to your site will never get to see them anyway.
After that we will see what happens

On timings you see that the TTFB ( Time to First Byte ) is over one second – maybe you search for “How to optimize Time To First Byte (TTFB)” and follow some advices there