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

Nicht dafür.
PS : ich konnte auch nur die Seite sehen, weil im Screenshot oben die Domain zu sehen war.

And you realy inserted to the caption input field some text? There is no reason why the other images have that – and the one not.

I’m afraid you’ll have to reset the footer widgets.
They will have been reset to the default values.

well one thing is that on touch devices ( mobile phones ) there is no hover effect.
you can do this to show it always on the touch device case:

.avia_mobile #top .av-active-gal-item .av-horizontal-gallery-link {
   opacity: 1 !important;
}

or use that class instead touch-device

but that one thing you mentioned i could not reproduce : that there is only a half lightbox button.
Next: on my simulated mobile devices – your gallery do that what you like to have – it opens directly the lightbox on click.

Edit: aha – i know now why – you make the button a 100% width and height.

Das sind custom made svgs. Schau dir die svgs von Enfold mal mit einem Guten Texteditor an ( OSX: Sublime Text oder Windows: notepad++ )
Der Aufbau ist recht ähnlich – ein wenig was über svgs sollte man wissen.

PS : das svg liegt ja im DOM als inline svg file explizit vor. Niemand hindert dich das svg aus dem DOM herauszukopieren ;)
Anleitungen wie man custom svgs einbindet gibt es nicht nur von mir hier an Board genüge :)

PPS: was überigens bei den meisten svg dividern der Fall ist – so auch bei Elementor und Konsorten.

schau mal die Stadt-Silhouette: https://guenterweber.com/#footer