Aber du hast es doch ganz gut gemacht. Der Wechsel mit den Color-Sections und dem Einsatz von einmal einem Image und zum Anderen einem Hintergrund Bild.
Wo genau willst du jetzt was ausblenden?

i did it this way – an for simplicity reasons i only take html entities to form the arrows:
this to child-theme functions.php

function ava_tab_section_arrows(){
?>
<script>
(function($) {
    $('.av-tab-section-container').each(function() {
        $(this).find('.av-tab-section-outer-container').prepend("<div class='av-tabsection-navs av-tabsection-nav-prev'>&lang;</div><div class='av-tabsection-navs av-tabsection-nav-next'>&rang;</div>");
        var arrowColor = $(this).find('.av-tab-section-tab-title-container').css('background-color');
        $(this).find('.av-tabsection-navs').css('color', arrowColor);

        var that = this;
        $('.av-tabsection-nav-prev', this).on('click', function(){	
        	$(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').prev().trigger('click');  
        });
        $('.av-tabsection-nav-next', this).on('click' , function(){	
            $(this).closest('.av-tab-section-outer-container').find('.av-active-tab-title').next().trigger('click');
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_tab_section_arrows');

this to quick css:

.av-layout-tab .container {
  padding-left: 100px;
  padding-right: 100px;
}
.av-tabsection-navs {
  opacity: 0.1;
  position: absolute;
  top: 55%;
  cursor: pointer;
  z-index: 5;
  font-family: arial;
  font-size: 40px;
  font-weight: bold;
  color: #333;
  height: 40px;
  width: 40px;
  transition: all 1s ease
}
.av-tab-section-outer-container:hover .av-tabsection-navs {
  opacity: 1;
  transition: all 1s ease;
  text-shadow: 8px 1px 5px #aaa;
}
.av-tab-section-outer-container:hover .av-tabsection-navs {
  transition: all 1s ease;
  transform: scale(1.5);
}
.av-tabsection-navs.av-tabsection-nav-prev {
  left: 0;
  text-align: right;
}
.av-tabsection-navs.av-tabsection-nav-next {
  right: 0;
  float: left;
}
@media only screen and (max-width:767px)  {
  .responsive #top #wrap_all .av-layout-tab .container {
    padding: 0 30px;
  }
  .av-tabsection-navs {
    width: 25px;
  }
}

Result page: https://webers-testseite.de/tab-section/
If your tab-title background is white – overwrite the calculated color of the arrows by css with important.

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

this is called curtain effect and you can try this:
https://kriesi.at/support/topic/fixed-curtain-footer/#post-691135

see result here ( only starting page ) : https://webers-testseite.de/pureinstall/

on my testpage i use this in child-theme functions.php:

// curtain effect of footer - 
function add_curtain_footer_effect(){
if(is_home()){  
?>
<script type="text/javascript">
(function($) {
    $(window).bind("load resize", function() {
	    setTimeout( function() {
			var socketh = $('#socket').outerHeight();
			var footerh = $('#footer').outerHeight();
			var spacerh = socketh + footerh - 5 ;

			$('#distance').css('height', spacerh );
			$('#footer').css('bottom' , socketh);
	    }, 150) 
    });
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'add_curtain_footer_effect');

and on quick css ( pay attention as the script above this is all only for home – so adjust to your needs):

.home #main > div  {
    z-index: 3 !important;
    position: relative !important;
}

.home #footer { 
    left: 0;
    width: 100%;
    z-index: 2;
   position: fixed
}

.home #socket {
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    position: fixed
}

.home #main #distance  {
    clear: both;
    z-index: 0 !important;
}

or for example per season:
please read the code carefully. The selector where this should happen is an ID !
And the images should then also be named as in the code and the location would be in the case then /uploads/season-images

Insert on the Element to have that scheduling an image – maybe the one that is set on default and style it as you like (cover – contain – left – top etc. pp – scroll – fixed etc)

function scheduling_per_season(){
?>
<script>
  var currentTime = new Date();
  var month = currentTime.getMonth() + 1;
  var imglocation = "/wp-content/uploads/season-images/";  // put the images in this folder

	switch(true) {
		case (month >= 6 && month <= 8):
			var seasonImg = "summer.jpg";
			var season = "summer";
			break;
		case (month >= 9 && month <= 11):
			var seasonImg = "fall.jpg";
			var season = "fall";	  
			break;
		case (month == 12 || month == 1 || month == 2):
			var seasonImg = "winter.jpg";
			var season = "winter";
			break;
		default:
			var seasonImg = "spring.jpg";
			var season = "spring";
	}
  	document.getElementById('changed_on_season').style.backgroundImage = 'url(' + imglocation + seasonImg + ')';
	document.body.classList.add(season);
</script>
<?php
}
add_action('wp_footer', 'scheduling_per_season');

it will attach in addition to body a class according to the season. this seems to be more simple – because you can have on quick css rules related to the season.

Result-Page: https://webers-testseite.de/season-scheduling/

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

you can take a different hook – you don’t need the header as widget area:
f.e: there is :

ava_after_body_opening_tag

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

add_action( 'ava_after_body_opening_tag', 'burger_widget_area' );
function burger_widget_area() {
  dynamic_sidebar( 'burgerwidget' );
}

and then :

function body_widget_to_burger(){
?>
<script>
(function($){
  $('body > .widget').css('display' , 'none');
  $('#header').one('click', '.av-main-nav-wrap', function() {
    var isMobile  = $('.av-burger-menu-main').css('display');
    $('#top #av-burger-menu-ul').css({
      'display' : 'block',
      'height' : 'auto',
      'vertical-align' : 'top',
      'padding' : '140px 0 0',
    });
    var burger_widget = $('body > .widget').detach();
    
    burger_widget.each(function() {
      $(this).appendTo('.av-burger-overlay-inner').css({
        'display' : 'block',
        'position': 'relative',
        'width': '84%',
        'text-align': 'left',
        'margin-left': '8%',
        'border-top': '1px dashed #333',
      });
    });
    
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'body_widget_to_burger');

create a widget area : burgerwidget
place in this area all your “hamburger widgets”

sorry – you can see how gradient are made f.e. here: https://www.cssportal.com/css-gradient-generator/
the code you got there is meant for css like quick css. If you like to define a color via script you can do that via:

element.css( "color", "#333");
or if you have more than one attribute:

element.css({ 
	"color" : "#333",
	"background-color" : "#900",
	"display": "block" ,
});

so for script you have to replace in the markup you got there https://www.cssportal.com/css-gradient-generator/
f.e:

background: #121FCF;
background: -webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%);
background: -moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%);
background: linear-gradient(to top right, #121FCF 0%, #CF1512 100%);

to:

"background": "#121FCF",
"background": "-webkit-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",
"background": "-moz-linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",
"background": "linear-gradient(to top right, #121FCF 0%, #CF1512 100%)",

now you only have to replace the static colors with the script calculated
and because it is a script variable you had to interrupt the html markup (close doubel qoute – insert script calculated values ( “+color1+” and “+color2+” ) – and open again the html markup. ( :lol: it is javascript crispr ;) )

now there is :

"background": "#121FCF",
"background": "-webkit-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
"background": "-moz-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
"background": "linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",

but btw: i see there is a syntax error in the css setting :

$('#gradient').css({
	   background: "-webkit-gradient(linear, left top, right top, from("+color1+"), to("+color2+"))"}).css({
	    background: "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)"     });

it works because the -moz-linear-gradient is working – but the first background couldn’t work.

this is better:

$('#gradient').css({
	"background" : "-webkit-linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)",
	"background" : "-moz-linear-gradient(left, "+color1+" 0%, "+color2+" 100%)",
	"background" : "linear-gradient(to left, "+color1+" 0%, "+color2+" 100%)",
});

you can change it to diagonal :

$('#gradient').css({
   "background": "-webkit-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
   "background": "-moz-linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
   "background": "linear-gradient(to top right, "+color1+" 0%, "+color2+" 100%)",
});

the background without double quotes is ok – and will work too – but this is more proper with quotes.
the comma on the last background is not needed – but looks better – not necessary
but the second .css in the rules is nonesense

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

it is enough to delete or comment out these lines :

if( burger_menu.is(":visible") )
{
	this.css({top: 'auto', position: 'absolute'}); fixed = false;
	return;
}

This : .responsive #top .av-switch-990.av-submenu-container on media querries setting had to be changed because:
these are unfortunately set to “!important” in the corresponding menu.css these are very difficult to write over afterwards. Therefore we must also generate a child-theme menu.css. So it is probably best if we upload all changed menu files into the shortcodes child-theme folder.
Download all from here: https://webers-testseite.de/menu-files.zip

Upload them to your child-theme shortcodes folder – so that these are loaded then, you should have this in child-theme functions.php.

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

and this comes to quick css

@media only screen and (max-width: 989px) {
  #top .sticky_placeholder {
    position: absolute;
  }
}

Result see here: https://webers-testseite.de/transparent-header/

PS: i did not test it for fixed-frame – maybe there had to be some adjustments on that calculation.

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

you can see here the Enfold Font List on Google
type in everything you like – maybe a pangram to see all letters.
on the end of the list you can see a preview – one click on those squares – you come to the site for the single font and on bottom – very nice – popular font pairings.

sorry my image hoster is temporarly down :
just before line 834 : require_once( 'functions-enfold.php');

you have no link on that animated gif so in Enfold Options you insert only #
in the quick css rule – you had to adjust the url to your animated gif
this part from above:

background: url(/wp-content/uploads/2021/04/arrows.gif) no-repeat center center;

wenn du das Logo lieber bündig mit der Navigatin haben möchtest:

#header_main .av-logo-container {
    padding: 0 5px;
}

no private content for me – i’m participant as you are

ok – i thought it is your website – is there a test site with that?
your site http://peterloew.eu/ shows me not the equal height option

ohne die Seite zu sehen ist es quasi unmöglich dir exakte Tips zu geben.