Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • August 26, 2025 at 11:16 am #1488534
    dondela

    Dear support,

    i want to show an fullscreen image for about 5 seconds and then go on with the main page. Like in this example: https://ibra-boxing.de
    Is this possible with enfold?

    August 27, 2025 at 7:48 am #1488588
    Ismael

    Hey dondela,

    Thank you for the inquiry.

    Have you tried using the preloader option? Please toggle the Enfold > Theme Options > Page Preloading option, then configure the settings as needed.

    Best regards,
    Ismael

    August 27, 2025 at 8:22 am #1488594
    dondela

    Hey Ismael,
    i tried this – but the preloading-logo is to small. Is there a way to increase the size of the preloading-Logo?

    Thanks for your help

    August 27, 2025 at 11:11 am #1488598
    Guenni007

    what kind of image is it – like in your example – or could it be set to cover (but then it is maybe cropped) or should it be set to background-size : contain – with background-color around ?

    August 27, 2025 at 11:28 am #1488599
    Guenni007

    try inside your child-theme functions.php:

    // Inject the HTML overlay into the body
add_action('ava_after_body_opening_tag', function() {
    echo '<div id="fullscreen-overlay"></div>';
});

function timed_overlay_fullscreen_image(){
?>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var overlay = document.getElementById('fullscreen-overlay');
        if (overlay) {
            overlay.classList.add('hidden');
        }
    }, 5000); // 5000 milliseconds = 5 seconds
  });
</script>
<?php
}
add_action('wp_footer', 'timed_overlay_fullscreen_image');

    and in quick css:

    #fullscreen-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; 
    background-image: url(/wp-content/uploads/2016/07/corporate-buildings-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9999;
    opacity: 1;
   transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

#fullscreen-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disable interaction when hidden */
}

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

    if you just want to have that on your front page – than we had to adjust those snippets.

    August 27, 2025 at 11:36 am #1488600
    Guenni007

    f.e. – on my test page i do only have set it for front-page and impressum:

    add_action('ava_after_body_opening_tag', function() {
    if (is_page(array(330,1128))){ 
        echo '<div id="fullscreen-overlay"></div>';
    }
});

function timed_overlay_fullscreen_image(){
if (is_page(array(330,1128))){ 
?>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(function() {
        var overlay = document.getElementById('fullscreen-overlay');
        if (overlay) {
            overlay.classList.add('hidden');
        }
    }, 5000); // 5000 milliseconds = 5 seconds
  });
</script>
<?php
}
}
add_action('wp_footer', 'timed_overlay_fullscreen_image');

    btw: if you like you can have page-title or different text included to that hook
    replace f.e. to :
    echo '<div id="fullscreen-overlay"><h1>'.get_the_title().'</h1></div>';

    see example page from above with get_the_title (and only 3 seconds)

    #fullscreen-overlay {
    position: fixed;
    display: flex;
    justify-content: center; 
    align-items: center; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Example: black background */
    background-image: url(/wp-content/uploads/2016/07/corporate-buildings-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 9999;
    opacity: 1;
   transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

#fullscreen-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; 
}

#fullscreen-overlay h1 {
  font-size: 4em;
  color: #FFF;
  margin: 0;
  padding: 20px;
  text-shadow: 2px 3px 5px #000;
}
    August 27, 2025 at 12:07 pm #1488601
    dondela

    Hi Guenni,
    thanks for your help, awesome!
    I tried your code and itv looks like this: https://houseoffreedom.de/2025/
    Would it be possible to center the image, independent from screen size ?

    August 27, 2025 at 12:25 pm #1488603
    Guenni007

    can you post here please the path to your logo svg file?

    it is best to have here your logo and the text part as text and img – and have a black background then.

    August 27, 2025 at 12:34 pm #1488604
    dondela

    Ah, ok. This ist the path to the sag-Logo: https://houseoffreedom.de/2025/wp-content/uploads/2025/08/QueensGym-Logo-2.svg

    August 27, 2025 at 12:48 pm #1488605
    Guenni007

    try with your current solution:

    #fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-image: url('https://houseoffreedom.de/2025/wp-content/uploads/2025/08/QueensGym-Logo-2.svg');
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 9999;
  opacity: 1;
  transition: opacity 1s ease-in-out,visibility 0s linear 1s;
  background-position: center center;
}
    August 27, 2025 at 12:51 pm #1488606
    dondela

    Awesome, thank you so much Guenni007!

    August 27, 2025 at 1:11 pm #1488607
    Guenni007

    you can have that with text and inline svg aswell:

    add_action('ava_after_body_opening_tag', function() {
    if (is_page(array(2))){   // add your conditions here , for more pages : separate by commata
        echo '<div id="fullscreen-overlay"><div class="overlay-content"><svg title="QueensGym" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 340 85"><path fill="#fff" fill-rule="nonzero" d="M229.42 21.558c9.745 0 16.113 5.096 16.893 13.392h-6.068c-.708-4.887-4.594-7.663-10.824-7.663-7.088 0-10.988 4.076-10.988 11.477v7.358c0 7.4 3.9 11.478 10.988 11.478 9.08 0 10.987-4.944 10.987-9.09v-1.547h-9.929V41.54h15.967v6.97c0 9.004-6.683 14.82-17.025 14.82-10.501 0-17.026-6.594-17.026-17.208v-7.358c0-10.612 6.525-17.206 17.026-17.206m0-1.12c-10.79 0-18.144 6.619-18.144 18.326v7.358c0 11.707 7.354 18.327 18.144 18.327 10.972 0 18.144-6.252 18.144-15.939v-8.09H229.36v7.662h9.93v.428c0 5.152-3.065 7.97-9.87 7.97-6.435 0-9.868-3.556-9.868-10.358v-7.358c0-6.804 3.433-10.357 9.869-10.357 5.945 0 9.563 2.697 9.807 7.661h8.277c-.307-9.93-7.725-15.63-18.084-15.63m51.354 12.336-11.61 44.042h-6.04l2.91-9.942.072.297.714-2.989.413-1.404h-.075l.036-.153 7.15-29.851h6.43Zm-22.908 0 7.15 29.851.037.153h-5.866l-7.757-30.004h6.436Zm24.361-1.12h-8.767l-7.354 30.71-7.358-30.71h-8.764l8.336 32.244h7.418l-4.109 14.037h8.4l12.198-46.28Zm36.747.57c6.73 0 11.078 4.01 11.078 10.217v20.337h-5.423V44.036c0-4.193-2.663-6.697-7.126-6.697-4.03 0-6.636 2.63-6.636 6.697v18.742h-5.423V44.036c0-4.193-2.663-6.697-7.127-6.697-4.032 0-6.637 2.63-6.637 6.697v18.742h-5.423V32.774h5.423v2.815l1.806-1.394c1.26-.974 3.027-1.971 6.548-1.971 3.682 0 6.651 1.199 8.588 3.468l.824.964.854-.937c2.148-2.353 4.984-3.495 8.674-3.495m0-1.12c-5.456 0-8.214 2.45-9.5 3.862-2.146-2.516-5.457-3.862-9.44-3.862-3.924 0-5.885 1.163-7.234 2.206v-1.655h-7.663v32.243h7.663V44.036c0-3.248 1.961-5.577 5.517-5.577 4.597 0 6.008 2.76 6.008 5.577v19.862h7.662V44.036c0-3.248 1.96-5.577 5.516-5.577 4.599 0 6.006 2.76 6.006 5.577v19.862h7.663V42.44c0-7.17-5.272-11.337-12.198-11.337M70.866 31.6h7.662v20.963c0 7.174-5.09 11.832-13.608 11.832-8.52 0-13.609-4.658-13.609-11.832V31.6h7.663v20.107c0 4.045 2.39 5.639 5.946 5.639 3.556 0 5.946-1.594 5.946-5.639V31.6Zm11.941 19.433v-6.622c0-8.334 5.948-13.361 14.16-13.361 8.215 0 14.099 5.027 14.099 13.361v6.439h-20.78v.549c0 4.476 2.76 6.255 6.681 6.255 3.311 0 5.946-1.41 6.253-3.864h7.723c-.735 6.683-6.376 10.606-13.976 10.606-8.212 0-14.16-5.028-14.16-13.363m20.78-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.922 0-6.681 2.084-6.681 5.7v1.165h13.302Zm11.453 6.192v-6.622c0-8.334 5.946-13.361 14.16-13.361s14.098 5.027 14.098 13.361v6.439h-20.781v.549c0 4.476 2.759 6.255 6.683 6.255 3.31 0 5.945-1.41 6.252-3.864h7.725c-.738 6.683-6.376 10.606-13.977 10.606-8.214 0-14.16-5.028-14.16-13.363m20.779-6.192v-1.165c0-3.309-2.696-5.7-6.62-5.7-3.923 0-6.682 2.084-6.682 5.7v1.165h13.302ZM148.007 31.6h7.663v1.655c1.346-1.04 3.618-2.206 7.54-2.206 6.925 0 12.258 4.168 12.258 11.341v21.454h-7.662v-19.86c0-2.82-1.531-5.58-6.129-5.58-3.679 0-6.007 2.33-6.007 5.58v19.86h-7.663V31.6Zm31.007 21.333h7.663c.06 2.084 1.655 4.23 6.008 4.23 4.107 0 5.821-1.535 5.821-2.944 0-1.226-.611-2.328-3.125-2.696l-6.376-.859c-4.78-.613-8.704-3.739-8.704-9.5 0-5.457 5.025-10.115 12.75-10.115 7.848 0 12.873 4.78 12.873 10.728h-7.662c-.063-2.146-2.268-3.679-5.21-3.679-2.82 0-4.72 1.348-4.72 2.882 0 1.225.858 2.267 2.759 2.512l6.741.92c6.743.918 8.827 5.456 8.827 9.44 0 5.393-4.966 10.545-13.974 10.545-7.602 0-13.547-3.986-13.67-11.464M46.283 38.71c0-11.706-7.355-18.327-18.142-18.327-10.79 0-18.146 6.62-18.146 18.328v7.356c0 11.709 7.356 18.328 18.146 18.328 4.351 0 8.214-1.105 11.155-3.187l6.987 5.885 4.245-5.325-6.575-5.71c1.473-2.696 2.33-6.068 2.33-9.99V38.71Zm-8.273 7.357c0 1.654-.185 3.125-.613 4.413l-.01-.007c-.802 2.546-2.363 4.33-4.545 5.327l.018.014c-.129.06-.272.101-.407.154l-.347.134c-.194.066-.392.129-.593.186a8.318 8.318 0 0 1-.503.128c-.177.04-.353.08-.535.114-.225.04-.461.069-.699.098-.142.017-.28.04-.428.053-.392.032-.793.053-1.207.053a14.9 14.9 0 0 1-1.21-.053c-.148-.014-.285-.036-.428-.053a13.43 13.43 0 0 1-.7-.098c-.181-.034-.356-.074-.533-.114a9.86 9.86 0 0 1-1.095-.314l-.35-.134c-.133-.053-.275-.094-.405-.154l.018-.014c-2.182-.996-3.745-2.781-4.546-5.327l-.007.007c-.431-1.288-.614-2.76-.614-4.413v-7.356c0-6.989 3.738-10.358 9.87-10.358 6.128 0 9.869 3.369 9.869 10.358v7.356Z"/></svg><br><h2 style="text-align: center; color: #FFF;">KAMPF- UND KRAFTSPORT IN</h2><h2 style="text-align: center; color: #FFF;">WIESBADEN - EXKLUSIV FÜR FRAUEN</h2></div></div>';
    }
});

    the other snippet is the same.

    and :

    #fullscreen-overlay {
    position: fixed;
    display: flex;
    justify-content: center; /* Zentriert horizontal */
    align-items: center;    /* Zentriert vertikal */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; 
    z-index: 9999;
    opacity: 1;
   transition: opacity 1s ease-in-out, visibility 0s linear 1s;
}

#fullscreen-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* Disable interaction when hidden */
}

#top .overlay-content {
padding: 20px;
}

#top .overlay-content h2 {
  font-size: min(max(24px, calc(1.5rem + (72 - 24) * ((100vw - 320px) / (1500 - 320)))), 72px);
  min-height: 0vw;
  line-height: 1.5em;
}

    see my test page : https://basis.webers-testseite.de/

    August 27, 2025 at 1:13 pm #1488608
    Guenni007

    wenn du bei der Bildlösung bleibst ändere noch dein svg – weil nach exklusiv kein Zwischenraum ist.

    August 27, 2025 at 2:16 pm #1488610
    dondela

    Klasse, vielen Dank!

    August 27, 2025 at 3:31 pm #1488611
    Guenni007

    ok – meine Bespielseite werde ich jetzt nur noch auf eine andere Seite verlegen , und mit einem anderen svg .

    Demo Page now on: https://basis.webers-testseite.de/our-clinic/

    August 27, 2025 at 4:03 pm #1488612
    Guenni007

    irgendwie hast du dein Logo verloren – falsche Domainzuordnung.

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.