how to get a complex layout with “sidebar” and with containers inside content etc. pp.

you can mimic it by having a fullwidth layout without sidebar!
for the “sidebar” we use the alb element : “Widget Area” in a container.
To be more flexible with layout you can use as surrounding container the grid-row ( because you can nest columns inside)
we can have that grid-row as not full-width by some little snippet in child-theme functions.php.

see here : https://webers-testseite.de/layout-mimic/

If it is interesting to you – i give you advice.

what do you think of those rules above could handle bullets ?

.avia_mega_div .avia-bullet {
  …
}

the border top, bottom, left creates that triangle (old trick to have a triangle in pure css)
but maybe the margin-top ? change your child-theme rule to

/* Size bullets mega menu ok */
.avia_mega_div .avia-bullet {
  margin-top: 6px;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 6px solid #6e6d75;
}

didn’t you like to get rid of outer lines ?

/* Nascondere per nascondere barra sinistra delle categorie OK */
#header .avia_mega_div .avia_mega_menu_columns_first {
    padding-left: 15px;
    border-left: none;
}

/* Nascondi per nascondere la barra di destra delle categorie solo in alto OK */
#header .avia_mega_div :not(.avia_mega_hr) .avia_mega_menu_columns_last {
    border-right: none !important;
}

then it will look like this

on 1)

1) I actually do not need the scrolling bar. What I would need is that the mega manu scrolls down with the page. If I scroll down the page the mega menu has to stay above. By doing this I will not need the scrolling bar within the mega menu. Here you have an example of what I am trying to get
https://sos-wp.it/blog/ Put the cursor of the mouse on the blog above

you decided to have a sticky header – if this not the case ( like on your example page) the mega menu scrolls out .

it is hard to style a border-top width – means you can not influence it without making changes to ul itself.
but we can get rid of that little border top (dashed) and insert between these rows a html that we can style. Even a custom hr of enfold would be possible.

so to get rid of dashed border:

#top #header .avia_mega_div > .sub-menu.avia_mega_hr {
	border-top: none;
}

put this to child-theme functions.php:

function insert_mega_div_separator() { 
?>
<script>
(function($){
$('<div style="margin-top:20px; margin-bottom:20px;" class="hr hr-custom hr-center"><span class="hr-inner inner-border-av-border-fat" style=" width:90%; border-color:#010660;"><span class="hr-inner-style"></span></span></div>').insertBefore('.avia_mega_hr');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_mega_div_separator');

you see here that you can have influence via width 90% etc

Result:

can you first add this:

#top #header .avia_mega_div > .sub-menu > li {
    flex: 0 1 25%;
}

#header .mega_menu_title {
    font-size: 22px !important;
}

.avia_mega_div .avia-bullet {
  margin-top: 9px;
  border-top: 6px solid transparent !important;
  border-bottom: 6px solid transparent !important;
  border-left: 6px solid #010660;
}

then we will see how to go on …

Nice, thank you!! I only use the background image overlay in first section and the layer is overlapping the 2nd section. How can I fix that?

first get rid of that negative margin: margin-top: -330px; maybe you set it on alb element ?

your png : 744/2480 = 0,3 that is the reason vor 30vw ( videoscreen width)
you can change your code to – that will work too – but is not so precise ( vectorbased svg is much better)

.test3 {
    position: relative !important;
    z-index: 1 !important;
    background-color: transparent !important;
    background-size: cover !important;
    width: 100vw;
    height: 31vw;
    top: -30vw;
}

but think of the same non-transparent color : it has to be the same vallue as the following container ( #f5f3ed )
Important: z-index has to be 1 otherwise the overlayed color will overlay the next section too

after that your content of the next color-section has to go up:
maybe:

.test3 + div .container {
    margin: -40vw auto 0 !important;   
    position: relative;
}

margin here is important for responsive case too!

you can select it directly as #av_section_3 but the code above will automatically take the next sibling container.

what would i do?

i prefer to work with svg – more precise and you can influence fillings with quick css if svg is an inline svg.

i do always use that little svg support plugin. It has a lot of advantages. ( f.e. seeing in media library svg previews and you can replace img src svgs by inline svgs etc. pp.)

your png – i created a svg of it – code is very simple so i decided to insert it via child-theme functions.php to the page.

function insert_svg_mask(){
?>
<script>
(function($){
	$('.avia-section.maskierung').prepend('<svg version="1.1" id="bright-mask" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"y="0px" viewBox="0 0 1500 350" style="enable-background:new 0 0 1500 350;" preserveAspectRatio="xMaxYMax meet" xml:space="preserve"><style type="text/css">.maske0{fill:#6CB52D;}</style><path class="maske0" d="M0,185.5l99.4,89.4c42.8,38.5,100.7,55.7,157.6,46.7l1081.2-170.8c57.9-9.1,108-45.5,134.7-97.7l27.1-53v361.6 H0V185.5z"/></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_svg_mask');

what you now have to do is to give to the following color-section the custom class: maskierung
because of aspect ratio ( 1500:350) we can have this in quick css:

.maskierung svg {
    width: 100vw;
    height: 23.33vw;
    top: -23.33vw;
    position: relative;
    z-index: 1;
}

.maskierung .maske0 {
    fill: #a9c9c4;
}

.maskierung .container {
    margin: -35vw auto 0 !important;
}

you see i can influence the filling of the non transparent part of that svg. So you can use that for all your “deviders”

see result here: https://webers-testseite.de/bright-mask/

first of all – the png file has to have the color on non-transparency part like the following color-section – in your case: #f5f3ed

now i will see …

for the headings you can do it – like the function above and set the content as the alt tag.
But that might be too long.

you can use my edited heading.php – if there is a link on the heading there will be an input field for alt attribute:

https://webers-testseite.de/edited-enfold-alb-elements/

for the logo you can put this into child-theme functions.php:

function custom_logo_attriubtes(){
?>
<script>
(function($){
  $('.logo img').attr({ title:"custom_title", alt:"custom_alt" });
  $('.logo img.alternate').attr({ title:"transparent Logo", alt:"Alt Transparent" });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_logo_attriubtes');

ok

the height of the second color-section is set here via css – you can do that too on alb element.
This height has to be the amount of border-radius of the first color-section plus that little extra height to have the bottom distance.
the negative margin-top has to be on minimum the border-radius.

edit: as you can see on example page – you can have here on the left another border-radius.

can you name your site here?

Read carefully – i give you more than one solution.
It depends on what you like to do.
If you only want to change the the heading of the first slide – or if you want to change all headings of the slider. etc. pp

the line : replaceElementTag('.page-id-309 .avia-slideshow-1 .slide-1 h2.avia-caption-title', '<h1></h1>');

is for what you like to transform.
it is only for that specific page: page-id-309
it is only for the first slider on that page: avia-slideshow-1
it is only for the first slide : slide-1
if you erase that : slide-1 class – then all headings in the first slider will be replaced
_________________________

the method with the “is-h1” is another method – but that will replace all headings of the slider.

____________________
for me it is important to have the complete possibility to set the heading tag on each slide – so i decided to edit this alb element to have an input field for heading-tag. – that was the method mentioned here: https://kriesi.at/support/topic/how-do-i-create-h1-tag-from-the-caption-title-in-fullscreen-slider-element/#post-1122102

to better find the reason for it – can you please use not the merging – that we could look through your custom code.