Hey engage24,
I achieved this by adding 5 color sections each with a custom class of: white, blue, red, yellow, and purple and each with a height of 100% with a special heading for reference:

then I added this css:

.turn-white {    
background-color: #fafaf8;
} 
.turn-blue {    
background-color: #3860be;
}   
.turn-red {    
background-color: #c7102a;
transition: background-color .5s ease;
}    
.turn-yellow {    
background-color: #ffa100;
}    
.turn-purple {    
background-color: #2b1378;
}

and added this script to the end of your child theme functions.php file in Appearance ▸ Editor:

function waypoint_change_background_color_scroll() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
    var $sections = $('.avia-section');
    var $white = $(".white");
    var $blue = $(".blue");
    var $red = $(".red");
    var $yellow = $(".yellow");
    var $purple = $(".purple");
    

    $white.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-white');
         $sections.removeClass('turn-purple');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-white');
      	$sections.addClass('turn-purple');
      }
    }, {
      offset: '50%'
    });
    $blue.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-blue');
         $sections.removeClass('turn-white');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-blue');
      	$sections.addClass('turn-white');
      }
    }, {
      offset: '50%'
    });
    $red.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-red');
         $sections.removeClass('turn-blue');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-red');
      	$sections.addClass('turn-blue');
      }
    }, {
      offset: '50%'
    });
    
    $yellow.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-yellow');
         $sections.removeClass('turn-red');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-yellow');
      	$sections.addClass('turn-red');
      }
    }, {
      offset: '50%'
    });
    
    $purple.waypoint(function(direction) {
      if (direction === 'down') {
         $sections.addClass('turn-purple');
         $sections.removeClass('turn-yellow');
      }
      if (direction === 'up') {
      	$sections.removeClass('turn-purple');
      	$sections.addClass('turn-yellow');
      }
    }, {
      offset: '50%'
    });
 
  })(jQuery);
});
 </script>
  <?php
}
add_action('wp_footer', 'waypoint_change_background_color_scroll');

See my demo page here.

Best regards,
Mike

Hey Armin-H,
Thanks for the login to your site, your titillium-for-enfold font zip had two folders in it:
__MACOSX
titillium-for-enfold
there should be no folders in your zip file, only fonts, I corrected this for you and tried to install but still had the error.
I tested on my test site and the new font zip installed correctly.
I believe the issue is that your server is using PHP 7.2.34 and the minimum recommended PHP version for WordPress is v7.4
Please check WordPress ▸ Dashboard ▸ Tools ▸ Site Health and ask your webhost to update your PHP version

Best regards,
Mike

Hey Beekster,
Thanks for the login, you had an old custom header.php in your child theme directory, I updated it for you and solved the error.
Please check.
I noticed in your WordPress ▸ Dashboard ▸ Tools ▸ Site Health that you are using PHP v7.3.33 and the minimum recommended version of PHP is 7.4.
You should ask your webhost to update this for you.

Best regards,
Mike

Hi,

Thank you for the update.

The theme is not adding this attribute or schema by default. The only vocabulary schema that is generated by the theme is for the breadcrumb but this has been removed since version 4.7.2.1. You can find it in the enfold/framework/php/class-breadcrumb-trail.php file around line 445.

		//google rich snippets
		if( $richsnippet === true )
		{
//				removed 4.7.2.1 as google will deprecate data-vocabulary
//				https://meetanshi.com/blog/fix-data-vocabulary-org-schema-deprecated-error/
//				https://github.com/KriesiMedia/wp-themes/issues/2650
//
//			if( is_ssl() )
//			{
//				$vocabulary = 'xmlns:v="https://rdf.data-vocabulary.org/#"';
//			}
//			else
//			{
//				$vocabulary = 'xmlns:v="http://rdf.data-vocabulary.org/#"';
//			}
		}

It is possible that the schema is being generated by a third party plugin. Did you activate a new plugin just recently?

Best regards,
Ismael

Hi,
Thanks for your question, I created a test page based on @Guenni007’s instructions and replaced the button element with a text block element with a text link:

note the class: bio-link

then I changed the script to look for the text link instead of the button:

function link_for_biography(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () {	
	(function($) {
		$('#people').each(function(){
		var that = this;
			$('.flex_column', this).each(function(i){
				if($(this).find('.mfp-hide').length){
					$(this).find('.bio-link').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.avia_image').attr('href','#bio-'+(i+1)).addClass('no-scroll');
					$(this).find('.mfp-hide').attr('id','bio-'+(i+1)).addClass('white-popup');
				}
			});
		});

		$('#people .flex_column').find('a[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'avia-popup mfp-fade people',
			gallery: { 
				enabled:true,
			},
		});

		$('#people .flex_column').find('.avia_image[href^="#bio-"]').magnificPopup({
			type:'inline',
			midClick: true,
			removalDelay: 500,
			mainClass: 'avia-popup mfp-fade people',
			gallery: { 
				enabled:true,
			},
		});

	})(jQuery);
}); 	
</script>
<?php
}
add_action( 'wp_footer', 'link_for_biography');

Please give this a try

Best regards,
Mike

Hi,

We applied a unique ID to the slider (edunao-slider) and edited the script a bit. Let us know if this works.

function ava_equal_slider_height() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
	var width = $(window).width();
	if ((width >= 767)) {
      $('#top #edunao-slider .avia-slideshow-inner li.slide-1').each(function(index){
          $('#top #edunao-slider .avia-slideshow-inner li.slide-2').find('img').eq(index).css('height', $(this).css('height'));
          $('#top #edunao-slider .avia-slideshow-inner li.slide-3').find('img').eq(index).css('height', $(this).css('height'));
      });
	} else {}
})(jQuery);
});
  </script>
  <?php
}
add_action('wp_footer', 'ava_equal_slider_height');

Thank you for your patience.

Best regards,
Ismael

Hi,
Thanks for the login, this is the css I added:

@media only screen and (max-width: 1024px) {
#full_slider_1 .avia-slideshow-1 {
	min-height: 500px;
} 
.avia-slide-wrap > img {
object-fit: cover;
width: 100%;
height: 500px;
}
}

this is the updated script:

function equal_slider_height() { ?>
  <script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
	var width = $(window).width();
	if ((width >= 767)) {
      $('#top.home #full_slider_1 .avia-slideshow-inner li.slide-1').each(function(index){
          $('#top.home #full_slider_1 .avia-slideshow-inner li.slide-2').find('img').eq(index).css('height', $(this).css('height'));
          $('#top.home #full_slider_1 .avia-slideshow-inner li.slide-3').find('img').eq(index).css('height', $(this).css('height'));
      });
	} else {}
})(jQuery);
});
  </script>
  <?php
}
add_action('wp_footer', 'equal_slider_height');

please clear your browser cache and check.

Best regards,
Mike

Hi,
Please note that the code you posted and the code Nikko posted are two different codes, so this code that was on line 17 in your functions.php is not correct and will cause the error, if you see it please remove:

function av_breadcrumbs_shortcode( $atts ) {
    return avia_breadcrumbs(array('separator' => '/', 'richsnippet' => true));
}
add_shortcode( 'av_breadcrumbs', 'av_breadcrumbs_shortcode' );

this is the correct code that you should add to your child theme functions.php so that your shortcode will work:

function av_breadcrumbs_shortcode( $atts ) {
return Avia_Breadcrumb_Trail()->get_trail( array( 'separator' => '/', 'richsnippet' => true ) );
}

add_shortcode( 'av_breadcrumbs', 'av_breadcrumbs_shortcode' );

If you are not using a child theme then you can add this to your parent theme functions.php, but note that it will be lost when to update.
If you still have trouble then please include admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

Hey Protohill,
Thanks for the link to your site, I see that you are using Enfold v4.7.4 with WordPress v6.0.2
I recommend updating to Enfold v5.1.2 and ensure your PHP version is at least v7.4

To update your version of Enfold you will need to download the latest version from your Theme Forest account and upload it to your WordPress ▸ Appearance ▸ Themes ▸ Add Themes ▸ Add New

after you choose the zip file and click install, you will see a This theme is already installed message because you are updating, you can continue

then you will see the Theme updated successfully message.

Best regards,
Mike