you only want that the button opens the youtube iframe video?
like here: https://webers-testseite.de/fullwidth-button-on-slider-to-youtube/
on caption you got the possibility to attach a ( or two) button. The link must be set manually.
you can insert the iframe url form the code you get from youtube ( you even can set the start time in seconds here)
the iframe=true opens the iframe

https://www.youtube-nocookie.com/embed/_c6mLFovnqs?start=97&autoplay=1&iframe=true

yes – and all your troubles gone-
maybe a bit less than 100vh to have for those pages who will fit the socket in viewport

well this is something on request long time ago:
https://webers-testseite.de/colorsection-toggle/

ich schreibe jetzt mal gerade deutsch, geht mir besser aus den Händen.
Eigentlich steht alles ganz gut auf der Seite.
Ich habe allerdings den Button ( full-width button) unter die Toggle Section gesetzt.

den code musst du dann deinen Wünschen entsprechend anpassen. die Button Beschriftung kannst du dann auch toggeln. Button Anfangstext und im Code sollte aber übereinstimmen!:

// color-section toggle
function add_custom_toggler(){
?>
<script>
(function($){
  $(window).load(function () {
    $('#toggle-color-section').addClass('notseen');
    $('.avia-button-wrap.color-section-toggler').click(function () {
     $('#toggle-color-section').toggleClass('notseen');
     $('.avia-button-wrap.color-section-toggler span.avia_iconbox_title').text(function(i, v){
             return v === 'Studiengänge, die perfekt zu Ihren Fähigkeiten passen' ? 'Danke für die Info' : 'Studiengänge, die perfekt zu Ihren Fähigkeiten passen'
     })   
    });
  });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_custom_toggler');

Wenn noch fragen sind – gerne

first of all you can avoid that menu problem on setting the z-index to 10.
second do you realy want to show always your footer half height of the screen?
or is it the fact you like to avoid on pages with less content that there is at the bottom a gap which has different color then content background?
i would get that result on giving the #main a min-height of 100vh

the linked page is from 2015 and for a layout with header on top.
you have to think of that your header takes away 300px form 100% width – and on responsive case the header width is 27% so for footer width is 73% etc pp.
So you had to calculate the max-width to 1010px ( on default it is 1310px) and the width as a difference etc. pp. –
you see that will be complicate enough.
By the way – you had to give a padding-bottom to #main to see all content under the footer.

Try first the code above. But it only removes the enfold support for loading google fonts form Google Servers.
But there are a lot of Google Font GDPR conflicts – f.e. on loading a google map the Roboto Font is always loaded. So it might be good to totaly refuse Goolge Server loading

and you have truely activated the fonts localy?

so here is the code to hamper loading of Google Fonts from google in Enfold
it comes to your child-theme functions.php:

add_action( 'init', 'enfold_customization_switch_fonts' );
function enfold_customization_switch_fonts() {
    global $avia;
    $avia->style->print_extra_output = false;
}

by the way – this little plugin i got additionally loaded: remove-google-fonts-references
Allthough it is not tested for new WordPress- on my end i can say that it works for WP 5.0.3.

Yes – and again – your search is white color for responsive case – but then header isn*t transparent so- maybe it is better to have your default color then:
(maybe it is necessary to put it in media query for the small screen option)

#menu-item-search {
    color: #109bc5;
}

Yes but the links are not working – you don’t like the links to be set?
by the way: if you like to have more distance between the spans in responsive case add line-height attribut:

.responsive #header_meta .phone-info span {
    color: #fff;
    margin-left: 15px;
    line-height: 25px;
}

i would do it with this code in telephone extra input field:

<a href="https://link-to-map"><span class="map">XXX</span></a><a href="https://link-to-contact"><span class="contact">YYY</span></a><a href="tel:+492289768293"><span class="tel">ZZZ</span></a>

And this would be my quick css entry for it:

.phone-info {
    float: left !important;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.responsive #header_meta .phone-info span {
    color: #aaa;
    margin-left: 15px;
}

.phone-info span::before {
    font-family: entypo-fontello;
    font-size: 24px;
    padding-right: 5px;
    position: relative;
    top: 4px;
}
.map::before { content: "\e842"}
.contact::before { content: "\e805"}
.tel::before { content: "\e854"}

you need to adjust that to your needs.
F.e. if you like to colorize the icons:
replace the part above with:

.map::before { content: "\e842"; color: #900}
.contact::before { content: "\e805"; color: #090}
.tel::before { content: "\e854"; color: #009}

see here example: https://webers-testseite.de/

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

something like this: https://webers-testseite.de/mute-unmute/

every container you like : f.e.:

.postid-2064 #main .container_wrap {
    background-image: url(https://www.sayitwithstyle.co.uk/wp-content/uploads/2018/03/1920-wide-logo-with-30-opacity.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

but on that case i would delete the background for:
There must be an inline-style on

.fpd-container .fpd-main-wrapper {
…………
}

then it will look like this:

You’re welcome – but
Ismael told you to set the padding to zero : if it’s not effective immediately; try it with !important or it is a caching / merged file reason.

But as I said: thanks for the tip – I wouldn’t have noticed that without the A/B comparison.

we now have to look for ipad view – because fixed positioning is always a problem on those mobile devices.

yes – but that is indeed something totaly different. It is a kind of flyout
look for flyout plugins: https://de.wordpress.org/plugins/tags/flyout/
i got this – but it is a premium plugin and costs some money: http://demo.bnecreative.com/flyouts/
if you like the solution with the button on my page – it will be best to have a lifelink from you where you have styled sofar all Elements.
This sticky technique works with a sticky-wrapper div and a sticky element.

if you have a lifelink for us – the class lightbox-added comes with the method above automatically to the image. So i do not understand why your code does not work as it should

See here my test page: https://webers-testseite.de/images-in-table-cells/

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