this is my Advance Layout for it:

• give a custom class to the color section f.e. : four-in-a-row
• you can put as many 1/4 Containers in it you like.
• BUT: ever first 1/4 column in it – you had to set the no-margin ( no space between the columns) option again
• The Containers 1/4 : no distance but indivual height
• put in each 1/4 container an image , a heading , a textblock
• the images are pure images – you can animate them if you like
• the images should have the same dimensions!

put this to your quick css:

.four-in-a-row .entry-content-wrapper {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.four-in-a-row .entry-content-wrapper:before,
.four-in-a-row .entry-content-wrapper:after,
.four-in-a-row .entry-content-wrapper .flex_column:before,
.four-in-a-row .entry-content-wrapper .flex_column:after {
  display: none
}

.four-in-a-row .entry-content-wrapper .flex_column {
  float: none;
  width: unset !important;
  padding: 0;
  margin: 0;
  flex: 0 1 25%;
  display: inline-flex;  /***  the flex-item itself is a flex-container too ***/
  flex-flow: column wrap;
  justify-content: stretch;
}

.four-in-a-row .entry-content-wrapper .flex_column .av-special-heading {
  padding: 0 !important;
  margin: 0; 
}

.four-in-a-row .entry-content-wrapper .flex_column .av-special-heading,
.four-in-a-row .entry-content-wrapper .flex_column .av_textblock_section  {
  padding: 5px 20px !important;
}

@media only screen and (max-width: 989px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 0 1 33.33%;
  }
}

@media only screen and (max-width: 767px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 0 1 50%;
  }
}

@media only screen and (max-width: 480px) {
  .four-in-a-row .entry-content-wrapper .flex_column {
    flex: 1 1 100%;
  }
}

if you like to start with 6 images in a row – no problem :
start with
flex: 0 1 16.66%;

see result: https://webers-testseite.de/4inarow/

yes on avia.js line 32 :
you can enter postion:’bottom’ and the rest will be css – but maybe a mod knows a child-theme solution without having a whole avia.js on child-theme folder.

new $.AviaTooltip({"class": 'avia-related-tooltip', data: 'avia-related-tooltip', position:'bottom', scope: ".related_posts, .av-share-box", attach:'element', delay:0});

on line 1609 maybe that is enough to replace top with bottom – sadly this is not a pluggable function ( if function exists …) then it would be ease to have a child theme solution)

Sorry – hope ismael or günter knows how to.

this is hard stuff – because it seems to be calculated values in the infinite vastness of the source code.
Maybe some of the Devs knows where to find.

li.av-share-link:hover .avia-related-tooltip  {
  transform: translateY(15px) !important;
  top: unset !important;
  margin-top: unset !important;
}

li.av-share-link:hover .avia-related-tooltip .avia-arrow-wrap {
  top: 0 !important;
  bottom: auto !important;
  transform: scaleY(-1) !important;
}

This quick css solution is an insufficient solution of the whole, because the original container initially appears for fractions of a moment at the top position.

maybe Günter could insert an extra class to that page ( similar to privacy-policy page ) which is set to be the footer-page

where then in fact the question would be how to rewrite the code so that it works with a class to body.
i tested of course !is_page(106) but even with the ID it does not work. so !is_page(‘kontact-section’) won’t work too.

Thank you GrandmasterA for your addition to the if-clause.
Preventing something from emerging is definitely better here than just hiding it later.

This should work on both post with classic editor and posts with alb editor ( don’t know if it will work for Gutenberg):

add_filter('the_content', function($content) {
     if (is_singular('post')) {
      $content .= '[av_sidebar widget_area="my-sidebar-name"]';
     }
     return $content;
   }
);

And if you got more than one widget in that widget area – you can play with flex layout to have those widgets besides each other :

#main .avia-builder-widget-area {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#main .avia-builder-widget-area::before, 
#main .avia-builder-widget-area::after {
  display: none;
}

#main .avia-builder-widget-area .widget {
    padding: 0;
    margin-bottom: 30px;
}

thats the reason why i erased it. ( All code goes to child-theme functions.php )

i thought that we can use another filter of enfold:
but this

add_filter('avf_template_builder_content', 'avf_template_builder_content_comment_mod' , 10 , 1);
function avf_template_builder_content_comment_mod($content = "")
{
  if(is_singular('post') || is_singular('portfolio')){
    $sidebar_content = dynamic_sidebar( 'my-sidebar-name' );
    $content = $content . $sidebar_content ;
  }
  return $content;
}

inserts the widget area before ( allthough it is $content = $content . $sidebar_content ) content. ?
Sorry – you had to wait for a mod

The hook determines only the place where it is inserted.
Did you create that widget-area at Widgets : “my-sidebar-name” ?

Are these single posts created with classic editor or with advanced Layout Builder ?

Try one post with classic editor!

On your testpage this is an animated svg logo.
You can do that with stroke-dasharray – read f.e. :
https://css-tricks.com/svg-line-animation-works/
https://www.cassie.codes/posts/creating-my-logo-animation/

All animation is inside the svg itself ;)
https://webers-webdesign.de/Logo-animiert.svg
or see https://webers-testseite.de/pureinstall/signieren/
on my Signature the stroke-dasharray is used as a mask over the given letters.
But ! you have to read and study intensively how to obtain those svgs. F.e. you had to know the stroke-dashoffset etc. pp.

if you replace the second part by:

add_action('wp_footer', 'avf_add_search_script');
function avf_add_search_script(){
?>
<script type="text/javascript">
(function($) {
	$('.av-burger-menu-main').on('click', function() {
		var page   = window.location.href;
		var mobile = $('.menu-item-search-mobile');
		var search = '<form action="'+page+'" method="get" class=""><div><input type="submit" value="" id="searchsubmit" class="button avia-font-entypo-fontello"><input type="text" id="s" name="s" value="" placeholder="Search"></div></form>';

		setTimeout(function() {
			if(mobile.find('form').length == 1) return;
			mobile.html(search);
		}, 500);		
	});
})(jQuery);
</script>
<?php
}

!!! Only difference is the value “?” – then a magifier symbol is seen

( get a bigger magnifier: )

#av-burger-menu-ul #searchsubmit {
    font-size: 25px;
}

yes this little additional information that it is a multisite would have been good to know. ;)

that one line i marked with: // —- here

is the line you had to edit – you can add more lines like this to replace other tags
the script takes over all attributes of the original tag and transfers them to the new tag.
But this is not necessary on your page.

to your child-theme functions.php:

function replace_tags_with_tags(){
?>
<script>
  (function($) {       
      function replaceElementTag(targetSelector, newTagString) {
        $(targetSelector).each(function(){
          var newElem = $(newTagString, {html: $(this).html()});
          $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
          });
          $(this).replaceWith(newElem);
        });
      }
      replaceElementTag('.tab_inner_content.invers-color h6', '<p></p>'); // ---- here
  }(jQuery)); 
</script>
<?php
}
add_action('wp_footer', 'replace_tags_with_tags');

but for SEO purpose as mike said allready – maybe it is better to change it manually in the albs.

i see that you are not working with a child-theme!

where did you enter the snippet?

add_filter('avf_logo_link','av_change_logo_link');
function av_change_logo_link($link){   
    $link = get_site_url().'/zeroprojectconference2021/';
    return $link;
}

Next: you have activated the merging of css and js files.
Did you refresh those files ?

Edit : I must have been somewhat misguided by the headline. One should read just yet also the content ;)
I had thought that you wanted to set the Title attribute at the submenu list item.
_________________
forget about that here:
or you put this to your child-theme functions.php:

function set_menu_text_as_title(){
?>
<script>
(function($){
		$('.av-subnav-menu a').each(function(){
			var menuName = $(this).find('>.avia-menu-text').text();
			$(this).attr('title', menuName);
		});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_menu_text_as_title');

but for me the alt attribute is much more important – so i have on that line instead:
$(this).attr('alt', menuName);

First of all: if you want to post code – please use the code tags here. It’s much easier to inspect and check if a code will work or not.

Sorry didn’t saw that you want to achieve this only by custom fields. My way offers a real meta box. A meta box has different advantages.

you then can use the meta box for your f.e. loop-index.php
you see the post-meta-info starts from 373

f.e. if you like to show the saved “Outlet” after categories
look for:

if( ! empty( $cats ) )
{
	echo '<span class="blog-categories minor-meta">' . __( 'in','avia_framework' ) . ' ';
	echo	$cats;
	echo '</span><span class="text-sep text-sep-cat">/</span>';
}

and insert after that:

$outlet = get_post_meta($post->ID, 'outlet', true);
if(!empty($outlet))
{
	echo '<span class="outlets minor-meta">'. __( 'Outlet:','avia_framework' ) . ' ';
	echo $outlet;
	echo '</span><span class="text-sep text-sep-cat">/</span>';
}

it will show then as:

Thanks