what is the reason for making it white ? what you try to obtain with it?
To completly remove it it is much easier:

.trail-begin {
  display: none !important;
}

BUT
if there is no floating text around the images – there is no need to do it this way.
It was much easier than to have a column with the images – or put a image gallery to the layout –
and then beneath a column with the text.

yes – read here further a bit more in detail : https://kriesi.at/support/topic/problem-with-hyphens/#post-1179376

i only changed a bit the code to not always use before and after those substitutes 3#
and i added new entries
you can see here the edited php file: https://pastebin.com/jttc230x

First – these are snippets for child-theme functions.php!

to reduce the compression level of calculated images :

/**** abstellen der von Enfold auf 100 gesetzten jpeg Qualität  *****/
add_filter("avf_jpeg_quality", "avf_set_quality_mod", 9999, 1);
add_filter("avf_wp_editor_set_quality", "avf_set_quality_mod", 9999, 1);
function avf_set_quality_mod($quality) { $quality = 55; return $quality;}

A) for WordPress image size formats

// Remove unneeded WP image sizes
// Remove default image sizes here. 
function prefix_remove_default_images( $sizes ) {
// do NOT remove small and medium sizes, they are used in backend Media Library!
// unset( $sizes['small']); // 150px
// unset( $sizes['medium']); // 300px
 unset( $sizes['large']); // 1024px
 unset( $sizes['medium_large']); // 768px
 return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );

B) for Enfold image size formats

function remove_enfold_image_sizes() {
// do NOT remove widget size, is used in backend portfolio items!
// remove_image_size('widget');
  remove_image_size('square');
  remove_image_size('featured');
  remove_image_size('featured_large');
  remove_image_size('portfolio');
  remove_image_size('portfolio_small');
  remove_image_size('gallery');
  remove_image_size('magazine');
  remove_image_size('masonry');
  remove_image_size('entry_without_sidebar');
  remove_image_size('entry_with_sidebar');
  remove_image_size('shop_thumbnail');
  remove_image_size('shop_catalog');
  remove_image_size('shop_single'); 
  remove_image_size('shop_gallery_thumbnail');
}
add_action('init', 'remove_enfold_image_sizes');

After inserting these snippets you had to recalculate thumbnails – use a plugin for that
i prefer: regenerate-thumbnails-advanced

the text inside that image ?
then just take the full image as before

are your svg’s monochrome black?
then go to fontello.com – and drag&drop the svg’s to the input field on top of that page.
give a name to your set and download the zip from there. this zip upload to enfold.

if fontello got some error warnings – f.e. on compound path – this little detour can help: https://kriesi.at/support/topic/custom-icons-showing-blank/#post-1357932

if not ( multicolor svg’s) we had to find a different solution.

the only thing i would change is the check – if there is a post thumbnail:

so change ismaels code by surrounding it with an if clause:

$searchthumb = get_the_post_thumbnail( $the_id, 'large' );
if( ! empty( $searchthumb ) ) {
	echo "<span class='search-result-counter {$counterclass}'>{$searchthumb}</span>";
}

_____________________________________________________________________________________________

i prefer to have the link on the image too and use square images : so i insert on that area instead:

$searchthumb = get_the_post_thumbnail( $the_id, 'square' );
if( ! empty( $searchthumb ) ) {
	echo "<a class='slide-image search_image' href='".get_permalink()."'><span class='search-result-image'>{$searchthumb}</span></a>";
}

my solution needs this in quick css:

.search-result-image {
    display: block;
}
.search-result-image img {
    width: 120px;
    border: 1px solid #aaa
}
a.slide-image.search_image {
  overflow: visible !important;
}
a.search_image .image-overlay.overlay-type-extern {
  left: 0 !important
}

see what it looks like on: https://webers-testseite.de/?s=portfolio

i do not know if the get_field function is as it should. the rest of the code is ok i think

do you like to insert it manually with a shortcode?
this to child-theme functions.php :

function insert_page_title_shortcode() {
  $page_title = "<h1 class='main-title'>". get_the_title() ."</h1>";
  return $page_title;
}
add_shortcode( 'page_title', 'insert_page_title_shortcode' );

and use as : [page_title]
change h1 to whatever you like.

for the automatic insertion we have to know where it should be placed.
There will be jQuery methods or using some hooks – or you can edit the page templates and have child-theme versions of them
There is a problem with pages that then needs to be solved: how to deal with transparent headers – how to deal with fixed header etc. pp

the last one is easier to get –

avia_appear (a bit less fast than on testimonial)
f.e. only for the image:

.team-img-container img {
    -webkit-animation:  avia_appear 0.8s 1 cubic-bezier(0.175,0.885,0.320,1.275);
    animation:  avia_appear 0.8s 1 cubic-bezier(0.175,0.885,0.320,1.275);
}

the first has more settings – there is a keyframe animation – but on addition some other settings. i will have a look on that

and that sample page has no url ?
there are a lot of demos : https://kriesi.at/themes/enfold-overview/
And inside every demo page there are a lot of suppages …

What do you like to do? When should animation start – on load, on hover etc. What kind of animation? …

you can use f.e.: some of the predefined keyframe animations on enfold :
https://kriesi.at/documentation/enfold/animation/#customizing-animation-for-alb-elements
animate the whole container and image too

.avia-team-member {
    -webkit-animation: avia-btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
    animation:  avia-btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275)!important; 
}

.team-img-container img {
    -webkit-animation:  avia-fadein 3s 1 linear  !important ; 
    animation:  avia-fadein  3s 1 linear  !important; 
}

Yes – the rule that manages the font size is set to !important – so the rule can’t override that unless you do the same – then the higher specificity decides:

#footer .widget p.widgettitle {
  font-size: 30px !important;
  font-weight: 500;
  line-height: 33px;
}

It is difficult to give advice only from screenshots. As a semi-transparent color definition, there may be several reasons for the differences.

There are many places where the heading tag is predefined as h3 in the source code of enfold.
Editing all those entries and have a child-theme file is too complex.
The filter : avia_custom_widget_args will not work on those headings you like to influence.

– you can try this here from Yigit : https://kriesi.at/support/topic/change-h3-tags-in-footer-widget-child-theme-of-enfold/#post-728320
and pay attention of his comment:

You would need to update your widget areas.

In Shortform this will be ( and comes to child-theme functions.php ) :

function ava_re_register_footer_widgets(){
	$footer_columns = avia_get_option( 'footer_columns', '5' );
	for( $i = 1; $i <= $footer_columns; $i++ ){	
		unregister_sidebar('av_footer_' . $i );
		register_sidebar( array(
			'name'		=> 'Footer - Column ' . $i,
			'before_widget'	=> '<section id="%1$s" class="widget clearfix %2$s">',
			'after_widget'	=> '<span class="seperator extralight-border"></span></section>',
			'before_title'	=> '<p class="widgettitle">',
			'after_title'	=> '</p>',
			'id'		=> 'av_footer_' . $i
		) );
	}
}
add_action( 'widgets_init', 'ava_re_register_footer_widgets', 11 );

the settings you mentioned had to be set via quick css

#footer p.widgettitle {
	font-size: 30px; 
	font-weight: 500; 
	line-height: 33px;
}

(For SEO reasons, this will probably be the better method. )