Everything stayes the same but you have instead of:

jQuery(window).load(function(){

that:

jQuery(window).on('load', function () {

do not forget to clear all browser cache and to refresh (if used) the merged files in enfold (see performance tab in enfold options)

See here in the first yellow frame: https://api.jquery.com/load-event/

maybe a jQuery ( no SEO influence on that) solution will be ok for you –
try this in child-theme functions.php:

Edit: ok i see you began to insert manually – what is best for SEO Purpose too.

Have you thought about editing the first of the 1/4 columns of each row so that it is set to no-margin?
Unfortunately, the first in a row is always assigned the default value: “space between columns”.

Be carefull to do this each time – when you change positions in your layout ( by moving the columns e.g.)

it is because of this rule in enfold settings:

.responsive .av_one_fourth.first + .av_one_fourth.flex_column_div {
 margin-left: 4%
}

so you got two options here – either you think of that to edit each first column in that layout – or you overwrite it by:
( and that is much more comfortable )

.responsive #top .four-in-a-row .flex_column {
 margin-left: 0 !important
}

• This reply was modified 4 years, 5 months ago by Guenni007.

2. pictures have 0 padding & margin. BUT have a 50px left and right padding to the parent container.(again exactly like the website I mentioned above)

i do not see that on the image in your example page – as on my test page too

so more and precise input for those who want and could help.

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. ;)