If you have downloaded the svg – you can open the svg in a good text editor.
F.e. on OSX with sublime text or on Windows notepad++

you can see that the structure of a svg file is similar to a html code. There are styling infos and a heading part. etc. pp.

on illustrator you can group objects. You can have layers and you can place images f.e. that man as a png file with transparent background – and place it where you like.

On saving as svg you can decide if the image is embeded (as base64 png file) or just link to it. For your usage the embedded image is best.
But makes the svg bigger.

The groups in illustrator are in the svg code represented by the <g> – tag and can have on that ID and classes.
If a group is surrounded by an <a xlink:href="https://webers-testseite.de/" > … </a> they can link to what you like.

See f.e. this svg: https://webers-testseite.de/pureinstall/wp-content/uploads/test2.svg

it is nearly the same as the svg above – but has a little info in head area of svg:
preserveAspectRatio="xMinYMin meet"
that means the svg shrinks to the top left corner xMidYMid would be the center center etc. pp.

And you do not like to use the advanced layerslider on that?

______
Next hint: if you are in illustrator – why don’t you save the image as svg ( and embed images – this man in overalls )
then use the svg as inline svg – you can have links in areas – on headings etc. pp in your svg – that is the
<a xlink:href="url" > svg group </a> option
look at – and hover the enter now on this: https://webers-testseite.de/pureinstall/wp-content/uploads/test.svg

• This reply was modified 5 years, 6 months ago by Guenni007.

well i guess the excerpt codes could be transformed to a given selector f.e.:

function limit_character_length(){
?>
<script>
(function($){
	$(window).load(function(){
	    $('.av_textblock_section').each(function() {
	     	$(".avia_textblock > p").text(function(index, currentText) {
	     		return currentText.substr(0, 50);
			});
	    });
	});
})(jQuery);
</script>
<?php
}
add_action('wp_head', 'limit_character_length');

i guess its best to see your site to give better advice.

i think it would be best to have on text editor a character counter.
Unfortunately the word counter has also disappeared when using the Advanced Layout Builder in the Text Editor.

if you use that png above from my post : allthough it is set to #eeeeee it is rendered as : #ececec
so if you do not like to see a difference you can change the color-section background to that #ececec

Next: you had to replace every background-image on your page. You did it only for the first one.

Solution is private :) ;)

this is a problem on many wordpress themes – Günter here wrote a little plugin for it: https://github.com/KriesiMedia/enfold-library/tree/master/integration%20plugins/Enfold/Special%20Character%20Translation

It is based on the usage of entities – but even if you can use on those places an entity – you will not see it after editing in your backend.
f.e. you can use a softhyphen to set on headings a “predetermined breaking point” for long headings. But if you want to edit again – this sign is lost.

so this little plugin sets a softhyphen when it comes to a : ###shy###

on that link above you see a translation.txt – there you got some replacements.
The only thing i changed is not to have 3# before and 3#after and i have added some special characters.
this is my list in that plugin:

there are a lot of settings – some you can set on the editing mode of that page like transparency but i let it in the code to show you how.
this code comes to child-theme functions.php:

add_filter('avf_header_setting_filter','av_change_header_layout', 10, 1);
function av_change_header_layout($header){
    if(is_page(123456)){
		// for example like the choice in enfold options: logo: left menu: right
		$header['header_position'] = 'header_top header_stretch';
		$header['header_class']	.= " av_header_top av_header_stretch";
		
		$header['header_layout'] 	= 'logo_left menu_right';
		$header['header_class']	.= " av_logo_left av_menu_right";

		// for example you like to have header transparent and glassy 
		$header['header_transparency']	 = 'header_transparency header_glassy';
		$header['header_class']			.= " av_header_transparency av_header_glassy";

		// header sticky (by the way the space on adding class is important)
		$header['header_sticky'] = 'header_sticky';
		$header['header_class'] .= " av_header_sticky";
    }
    return $header; 
}

so let all what you can not directly set in the page on top – the rest you can erase
you see that there is a space when adding a class by .= let it in the code.

you can see here in action: https://webers-testseite.de/pureinstall/
this is only one svg.
The letters are filled with different color on scroll down or if not transparency header.
The class in that svg for the letters is web9:

#header.header-scrolled #letters .web9,
#header:not(.av_header_transparency) #letters .web9  {
    fill: #112b3f;
}

these settings could be done by simple css – but if you want to style hover state or some transitions. It will be better to not have input but f.e. button tag here.
See example-page and hover this input-button: https://webers-testseite.de/pureinstall/alb-testseite/

well – with filter : avf_header_setting_filter it may be possible.
what kind of header setting you like to have. Maybe show an example page on demo pages : https://kriesi.at/themes/enfold-overview/

i will check – if it is done by enfold settings. sorry.

can you try:

.avia_ajax_form .button {
    border-radius: 5px;
    text-transform: uppercase !important;
}

• This reply was modified 5 years, 6 months ago by Guenni007.

have you seen your hamburger menu on ipad portrait ?
Maybe it is just a mediaquery problem. ( 768px til 1118px ) the menu must be styled.
It is hard to find out on a merged css with developer tools.
i guess that problem is more urgent than the popup on scroll.

With this scroll problem I will build a page, and see if it does not work.

• This reply was modified 5 years, 6 months ago by Guenni007.

what maybe a nice thing to have here is – if that button is clicked an automatic theme settings file will be generated and f.e. saved in dynamic_avia folder.

• This reply was modified 5 years, 6 months ago by Guenni007.

Best would be to install Contact Form 7 – it has that implemented allready in a way that it is more save than other methods.
You can set a limit for upload depending on file format – you can limit fileformat there too – ( f.e. only pdf , jpg , png files are allowed) etc. pp.
You can even style it as drag&drop field with preview image below:

• This reply was modified 5 years, 6 months ago by Guenni007.

Best would be to the site it concerns.