in other words – css has agreed to shorten the specifications for many of the properties.
Sizes that can be set to four settings because an up/down – left/right exists is as follows:

2 values instead of 4:

margin: 0 auto; /*** on the following that is interpretation of the given short form ***/
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

so two values if there could be 4 means that we have same values for top/bottom and right/left
3 values :

margin: 0 auto 30px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 30px;
    margin-left: auto;

you see the values are set clockwise beginning from top value: top, right, bottom, left

Values that refer to corners starts top-left and then clockwise:

border-radius: 2px 3px 4px 5px;
    border-top-left-radius: 2px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 5px;

on hex-color settings there is only if the value inside a color-channel is the same you can not it f.e.:
#33FF22 short to : #3F2
Thats all so if you have white : #FFFFFF this is the only shortform for it : #FFF
etc. pp:
for your setting above:

.custom-class .container {
  max-width: 1500px;
  padding-left: 0 20px;  /** maybe here is an !important necessary **/
  margin: 0 auto;  /** this is standard value - no need to change it **/
}

you can see here a brilliant list of css settings : https://tympanus.net/codrops/css_reference/

see now: https://webers-testseite.de/cynthia/

By the way working on that – i recognized that it might be more easy to use the normal header style: logo: left – menu right !

I would strongly recommend to install a child theme for Enfold.
You could of course place it in the functions.php of the parent theme, but these entries would be lost with the next update.
So you have exactly one place for such snippets – the child-theme functions.php.

See here some info and donwload a predefined child-theme: https://kriesi.at/documentation/enfold/child-theme/

I do that from the beginning of all my installations – but Enfold offers some tools to take over the parent-theme settings.
On Enfold – Import/Export there are some buttons that could help you.

My experience and the reading here on board show that the following procedure is probably the most successful:

• Parent Theme active : export theme settings file
• Child Theme activate then : import that file.

for responsive case maybe you decide to shrink a bit or to remove parts of the content:

@media only screen and (max-width: 767px) {
  .page-id-37941 .add-in-slider {
    transform-origin: left top;
    transform: scale(0.6);
    transition: all 0.7s ease
  }
}

@media only screen and (max-width: 480px) {
  .page-id-37941 .add-in-slider img,
  .page-id-37941 .add-in-slider .hr-short{
    display: none
  }
}

As Rikard said – you had to adjust it to your page-id

By the way – on that page i have only in account the scroll event. If it should be perfect there had to be an onresize event too. Because on resize the offsetTop changes. But i didn’t want to make it too complicate on that page.
Because on resize function are very performance intensive. So a debounce function had to be prepared too.
Etc. pp.

if you have : logo center, menu below
and : menu show as burger always
and : show search in menu
then we are nearby:

after that : you can see on my test-page for that: https://webers-testseite.de/cynthia/
a little quick css:

@media only screen and (min-width: 990px) {
  .html_header_top.html_logo_center #header_main_alternate .main_menu #avia-menu {
      display: inline-flex !important;
      width: 100%;
      flex-flow: row nowrap;
      justify-content: space-between;
  }

  .html_header_top #top .av_header_stretch .container.av-logo-container {
    width: 60%;
    z-index: 101;
  }

  #header_main_alternate {
    margin-top: -60px;
    border: none;
    position: relative;
    min-height: 58px;
  }
  
  .html_header_top.html_header_sticky.html_large.html_bottom_nav_header #main {
    padding-top: 116px;
   }
}

@media only screen and (max-width: 989px) { 
  .responsive.html_header_top #top .av_header_stretch .container .inner-container .logo {
    width: 50% !important;
    z-index: 101;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .main_menu {
    width: 100% !important;
  }
  .av-main-nav-wrap {
    width: 100% !important;
  }
  .av-main-nav-wrap > ul {
    display: inline-flex !important;
    width: 100% !important;
    flex-flow: row nowrap;
    justify-content: space-between;
  }
  .responsive #top #wrap_all #header .container {
    width: 95% !important;
    max-width: 95% !important;
  }
}

If you like to have the burger symbol on the left and the search on the right you only had to change the flex-flow to:
flex-flow: row-reverse nowrap;

if you like to have the burger slide out from the left then – please do a search this is often asked.

that test page is gone to heaven :)
but the solution on https://kriesi.at/support/topic/diagonal-background-image/#post-912999 is a nice starting point.

you can do that for quick css only – it has an own ID so :
If your developers have all admin right – you might want to have it globaly

function admin_head_mod() {
echo '<style type="text/css">
	#avia_quick_css { 
		display: none !important
	}
</style>';
}
add_action('admin_head', 'admin_head_mod');

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