sorry again

ok – if this is ok for you – see: https://webers-testseite.de/jak-contact/
( due to maintainance mode of my hoster – page might be not seen today )

snippet for child-theme functions.php and the contakt form 7 Form code is on that page.

snippet:
(The script is necessary because CF7 does not provide a way to select whether an input field is in focus or filled.)

function class_on_active_form_fields(){
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {     
    $('.wpcf7-form-control').each(function() {
      $(this).on('focus', function() {
        $(this).parent().addClass('active');
      });
      $(this).on('blur', function() {
        if ($(this).val().length == 0) {
          $(this).parent().removeClass('active');
        }
      });
    });
  })(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'class_on_active_form_fields');

the css ( with your wrapper class ):

.form-wrapper {
  position : relative !important;
}

.form-wrapper .placeholder {
  position: absolute;
  top: 5px;
  left: 5px;
  opacity: 0.5;
  transition: opacity 1s ease;
  pointer-events: none;
}

.form-wrapper .asterisk {
  color: red !important;
}

.wpcf7-form-control-wrap.active + .placeholder { 
  opacity: 0 !important;
}

the form in this setup:

<div class="form-wrapper">[text* first-name placeholder ""]<span class="placeholder">First name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[text* last-name placeholder ""]<span class="placeholder">Last name <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[email* your-email placeholder " "]<span class="placeholder">E-Mail <span class="asterisk">*</span></span></div>
<div class="form-wrapper">[textarea* textarea-716 placeholder " "]<span class="placeholder">Placeholder <span class="asterisk">*</span></span></div>

<div class="form-wrapper">[submit "Send"]</div>

I would have to look up what has changed since then (almost 5 years ago). Unfortunately, this test page of mine is so bloated with tests for other participants in this forum that some code snippets may be interfering with others. The functions.php of the child themes is already 3750 lines long.

by the way – that might be an older post of mine.
since jQuery 3

$(window).load(function(){  

is deprecated

now you had to use:

$(window).on('load', function(){

or – maybe a simpler idea – we use the left header sidebar ! – and just handle the #wrap_all as a flex container – and define the order in this way that the header goes to the right side

@media only screen and (min-width: 768px) {
  #wrap_all {
    display: flex !important;
    flex-flow: row nowrap;
  }

  #wrap_all #header {
    order: 2;
    flex: 0 1 27%;
    right: 0;
    left: auto;
  }

  #wrap_all #main {
    order: 1;
    flex: 0 1 73%;
    margin-left: 0 !important;
    border-left: none !important;
  }
  
  .responsive #top .header_bg {
    box-shadow: -5px 0px 5px -5px #666;
  }

  /*** because submenu is defined to a width of 208px ***/
  #top #avia-menu > li.dropdown_ul_available > ul.sub-menu {
    left: -207px
  }

  /*** have a bit more space from main menu-item to the fly-out submenu ***/
  .html_header_sidebar #header .av-main-nav>li {
    margin-left: 5px !important;
    padding-left: 13px;
  }
}

@media only screen and (min-width: 990px)  {
  #wrap_all #header {
    flex: 0 1 300px;
  }

  #wrap_all #main {
    flex: 0 1 calc(100% - 300px);
  }
}

see: https://enfold.webers-webdesign.de/
( the scroll away after some time does not belong to that settings here. – this is part of the inital Headersetting )

this is not styled to the end – becaue i want to go back to the original setting of header on top.
above all, you now have to extend the subnavigation to the left – but that shouldn’t be a problem using css.

But please read here carefully : https://themeforest.net/licenses/terms/photodune_extended

Especially that part : “Whoa there! Things you can’t do with the Item”

8.While you may create End Products using the Item for multiple different clients, you must not allow your clients to extract, repurpose, or reuse the Item in any other way. If your clients wish to make full use of the original Item themselves and use it within their own separate End Products, they will need to purchase their own license.

For example: You can use the photo to create customized flyers for different clients, but your clients can’t then reuse the original photo to create their own flyers in the future, without obtaining their own individual license for the photo (e.g. by purchasing it themselves, or you purchasing one on their behalf).

I interpret this to mean that we, as customers of Enfold, are not allowed to use these images for our own projects! I urge you to be careful. There are plenty of free alternatives on the market, e.g. via unsplash or pixabay.
To use it in the demo is o.k. but if you use it for our customers not – In fact, we would have to tell our clients not to use the images for any other purpose.

Sometimes the rel=0 does work – sometimes not – i do not know why.

thats my comment on the page language – where to find that screenshot page?

if you look to Ismaels code – he placed an order at the end – maybe that will do the job:

function sticky_posts_first($query, $params) {

  $include = array();
  $sticky = get_option( 'sticky_posts' );

  $args = array(
  'post__not_in' => $sticky,
  'order' => 'ASC', 
  'orderby' => 'date',   // here you can influence the orderby option of the non sticky post to your needs 
  'numberposts' => -1  // if you like to show not only a few 
  );
  $posts = get_posts( $args );

  foreach($posts as $post) {
    $include[] = $post->ID;
  }
  if ( !is_sticky() ) {
    $include = array_merge($sticky, $include);
  };

  $query['post__in'] = $include;
  $query['orderby'] = 'post__in';
  $query['order'] = 'ASC';

return $query;
}
add_filter('avia_post_slide_query','sticky_posts_first', 10, 2);

yes – i tested it too – and with the video element it does not start with autoplay – even if i mark the mute Option:

you can try a code block element with embed code:

<iframe id="ytplayer" type="text/html" width="720" height="405" src="https://www.youtube.com/embed/J9GuhL89q0I?autoplay=1&cc_load_policy=1&enablejsapi=1&loop=1&mute=1&rel=0&playsinline=1&color=white&iv_load_policy=3" frameborder="0" allowfullscreen>

Vielen Dank! Sind alle Demobilder aus dieser Quelle (Photodune) ?

PS – das Zertifikat ist nur im Private Content sichtbar?

on masonry – where you have set the grayscale effect – there is above that animation choice.

for example One : you can use the normal flyout and try to influence the slide-out behaviour.

f.e.:

.html_av-overlay-side.av-burger-overlay-active-delayed .av-burger-overlay-scroll {
  transform: translateY(0);
}
.html_av-overlay-side .av-burger-overlay-scroll {
  transform: translateX(0px);
  width: 100%;
  transform: translateY(-100%);
  transition: transform 2s ease
}

see: https://basis.webers-testseite.de/

PS: you do not need to set the width to 100% if you like to have smaller burger menus
and if you like to have not the whole height (standard for av-burger-overlay-scroll is 100% on enfold ) – and like to scroll inside burger menu – but then the height has to be synchronised with the transformY value
f.e: height set to 50% – then transformY(-50%)

try this as selector above in the snippet from: https://kriesi.at/support/topic/disable-image-title-tooltip-on-hover/#post-1467222
var links = document.querySelectorAll('a, img, *[title]');

Unfortunately, this disturbs the animation. I don’t know how I could prevent this. Sorry

Ok – put only your 1/4 columns in one color-section – nothing else – the heading and separator had to be in an extra section.
Because as mentioned on may page – every element will be part of that grid layout.

For your anchor navigation : maybe your heading including the separator got that ID.
For the grid layouted section do not forget to set the custom class – and put all ( like on my preview image of the layout ) in that section ( all 7 )