if you open that progress-bar alb element – you see this –

both entries could be clicked again – and a new popup will arise. On this you have the styling mode of each progress par – including colors

Guess the default color will be the theme-color – and this is set on enfold options : general styling : primary color
( this is dependent on if the element is main content or alternate content etc. )

2) what do you mean by admin panel – what do you like to change there ?
Do you mean on dashboard – users – your profile: the admin color scheme ?

i would do this with a custom-class that you set in your quick css:
f.e.: alluppercase

.responsive #top #wrap_all .alluppercase {
  text-transform: uppercase !important
}

if you like to have this in your layout – put to the alb itself – or to one parent element that custom-class.
For special positions ( like footer widgets etc. you had to know that selector then – because there are no possibilities to set a custom-class.

But: keep in mind that on internet writing all in uppercase mode : UPPER CASE LOOKS AS IF YOU’RE SHOUTING! ;)

if you open a new page and style it with enfold advanced layout editor – you can pull a single button-row alb element into the layout.
( Nothing else – no columns etc. pp – except if you like to have it in your widget too )
if you have activated the debug mode under the layout input area – there is the shortcode area.
this shortcode represents the button-row.
So style it til you are satisfied with all colors and links etc.

copy paste it then – and put that shortcodes into the html widget of header2

But you see on my link that it worked this way i described !
One widget area above header ! ( in this case with a button-row inside )

impossible mine is 188 kb big. And layerslider is active on that installation.
i got 3500 lines of extra code in my child-theme funtions.php.

but this isn’t the real link to this file! isn’t it?
these two merged files are in the uploads folder – dynamic_avia folder.

if i go through your js file there are no enfold things inside – f.e. avia- etc
where did you get the file from?

no working link.
PS – gerne können wir uns auch auf deutsch weiter austauschen.
Das mit dem 5×5 grid ist willkürlich – reicht aber für diesen Einsatz aus. Die einzelnen Grid-Items werden nur per css definiert – das untere Bild auf meiner Beispielseite ist ein Screenshot der Developer Tools des Chromebrowsers ( der setzt wie der Safari auch die Linienbeschriftung ).
Man kann nämlich das Grid Modul anklicken in den Developer Tools – dann werden die eingeblendet.
Also hier:

in the second snippet the : $icons['TikTok'] = 'tiktok'; on the left determines the way it is shown in the dropdown-list on enfold – social profiles – Your social profiles ( you can have here: $icons['Mein TikTok Icon'] = 'tiktok'; )
the “tiktok” is used to create the corresponding classes – so here now : social_bookmarks_tiktok and av-social-link-tiktok
and the title and aria-label – with a big letter at the beginning.
If you like to change that – the display_name will be set.

these two had to be the same:

ok – even if it is possible you should know that an overlapping does not mean that your content inside breaks on the container on top:
https://webers-testseite.de/veloryana/

it works for blog alb pages and for blog page ( set on enfold-child – theme options – “And where do you want to display the Blog?” ) if this is a page showing posts ( not portfolios )
So let this options free ( not selected ) – then it will work everywhere

PS : i do not know why ismaels code does work this way – i got that on the beginning too – that only one of those tags is shown – and the rest not. ( if i insert it now – there are all tags – but in a line – don’t know if he changed the code above )
All queries match mine (or vice versa). Also the each loop should work. I only added some surrounding containers, a separator and a condition to be fullfilled – and the filter to use to place the tags on a different location.

you can change his code the way i did with some surroundings etc. and that condition.:

function new_avf_post_slider_entry_excerpt($excerpt, $prepare_excerpt, $permalink, $entry ) {
    $tags = get_the_tags($entry->ID);
    $tags_output = "";
    if('blog-meta-tag' == avia_get_option('blog-meta-tag') && $tags ){
        $tags_output .= '<div class="post-tags" style="display:block"><p class="post-tags-inner">';
        foreach ( $tags as $tag ) {
            $tags_output .= '<a href="  '.get_tag_link( $tag->term_id ).'  ">';
            $tags_output .= '<strong> '.$tag->name.' </strong>';
            $tags_output .= '</a>' ;
            if(next($tags)){
                $tags_output .= '<span class="text-sep"> | </span>' ;
            }
        }
        $tags_output .= '<br></p></div>';
        $excerpt = $tags_output . $excerpt;
    };
    return $excerpt;
}
add_filter('avf_post_slider_entry_excerpt', 'new_avf_post_slider_entry_excerpt', 10, 4);

you got the choice

and if you like to show this only if you have set on enfold-child – blog layout – blogpost meta elements : Blog Post Tags to show.

function new_avf_post_slider_meta_content($meta_content, $entry, $index, ) {
    $tags = get_the_tags($entry->ID);
    $tags_output = "";
    if('blog-meta-tag' == avia_get_option('blog-meta-tag') && $tags ){
        $tags_output .= '<div class="post-tags" style="display:block"><p class="post-tags-inner">';
        foreach ( $tags as $tag ) {
            $tags_output .= '<a href="  '.get_tag_link( $tag->term_id ).'  ">';
            $tags_output .= '<strong> '.$tag->name.' </strong>';
            $tags_output .= '</a>' ;
            if(next($tags)){
                $tags_output .= '<span class="text-sep"> | </span>' ;
            }
        }
        $tags_output .= '<br></p></div>';
        $meta_content = $tags_output . $meta_content;
    };
    return $meta_content;
}
add_filter('avf_post_slider_meta_content', 'new_avf_post_slider_meta_content', 10, 4);

Of course, you can also use other separators there …

if(next($tags)){
     $tags_output .= '<span class="text-sep"> , </span>' ;
}

https://webers-testseite.de/blog-seite/

please consider the next post.

Yes Mike is right – i do have for that a different Plugin : restrict-widgets
i still works on newest WordPress and Enfold.
you will have under each widget a choice to show or hide on selected :
if you click on the fiels to add other options you can choose page names or post or categories, tags, single-posts etc. pp.

Mike’s recommendation seems to be more powerful, but possibly also a bit more complex to handle.
I will now also test it.

Edit: i lost the common view of all widget areas. Only archives widget is seen – and no widget-areas. ?
Maybe only a bug inside my installation.

PS : i only do not know for what the function h() is inserted

Guess this will be enough :

function ava_custom_script(){
?>
<script>
(function($){
	$('#top .product').each(function() {
		var onsale = $(this).find('.onsale'),
		thumb = $(this).find('.woocommerce-LoopProduct-link');
		onsale.appendTo(thumb);
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_custom_script');

Try this for the first snippet:
i found on functions.php the way LinkedIn and WhatsApp was set – so this might be the right way to do it.

function avia_add_tiktok_icon($icons) {
	$icons['tiktok'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue8fa' , 'display_name' => 'TikTok');
	return $icons;
}
add_filter('avf_default_icons','avia_add_tiktok_icon', 10, 1);

i guess – best would be with your page the standard widget area: ava_main_header
because you got a non sticky header.

add_action( 'ava_main_header', 'header_widget_area' );
function header_widget_area() {
  dynamic_sidebar( 'header2' );
}