Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #608463

    I would like to make a page exactly like this one using Enfold:

    I would want to use a full page video with a text banner superimposed, just like the above link, and then have the video scroll up but keep playing, again just like this page… and then as the user scrolls down, another video assume a background with text of the page in the foreground, again just like this page from the NY times. Can Enfold do that?

    If so, can you tell me which content elements I should use and generally how I should configure them? Do I put them inside other elements?


    • This topic was modified 8 years, 3 months ago by goldengate415.

    Hi @goldengate415 ;
    Yes you can have it by using ;
    Color Section (Layout Elements),
    – In section Layout : chose the height, padding, borders …
    – In Section Background : add your video “Background Video”,
    – In Section Backgroudn Overlay : chose or not an overlay color.


    Thanks much! Perfect timing as I am just working on this now.
    Doing that, how do you then superimpose text over the video? I would like to include a banner like in the New York Times example.




    You can add any element inside your color section element to display banner :)

    thanks as always :)



    Hi @goldengate415 ;
    If you would like to have a text layer, you should look into “Fullscreen Slider” then.


    @Yigit when I have tried that in the past, I have a difficult time specifying exact location of text inside the color section.. any tips on how to place the text? Does that require CSS expertise?

    thanks, I tried the fullscreen slider and that it working much better! I could not figure out how to do the effect you see on the NY Times page as you start to scroll down from the top… I like how the video starts to fade out as the text fades in. It looks like they are doing a semi transparent white overlay to get that effect?

    Here’s the page I am working on….

    I also can’t figure out how to get the video to loop… I tried the &loop=1 on the url parameter but that didn’t work.

    Thanks so much!!




    Add this in the functions.php file:

    // fade
    add_action('wp_footer', 'ava_custom_script');
    function ava_custom_script(){
    <script type="text/javascript">
    (function( $ ) {
        $( window ).scroll(function( i ){
            var scroll = $( window ).scrollTop();
            $( '.avia-fullscreen-slider' ).css( { 'top' : .7 * scroll } );
            $( '.avia-fullscreen-slider' ).css( {'opacity' : ( 1000 - scroll ) / 100 / 10 } );  
    })( jQuery );

    If you want to apply this to a specific slider, turn on the custom css class:



    Thanks, I will try that!



    Great, please let us know if you should need any more help on the topic.

    Best regards,

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