[Support request] 2 features I would like to see.

Home Forums Support 2 features I would like to see.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1491626
    Jacob

    Dont get me wrong. GP is awesome. But I just saw the Sticky Footer extension on OceanWP. I would really like to have that function in GP. Link: https://oceanwp.org/extension/ocean-sticky-footer/

    I also would like to have the Full Screen-extension. But it requires Elementor. So, not really that big a deal with that dependency.

    But, I have a feeling that with your awesome support you might be willing to share a solution to the sticky footer problem. Of course I am not in any way suggesting that you should provide such a solution.

    But if it takes you 4 minutes to make a solution, I imagine you would do that.

    Thanks.

    #1491753
    David
    Staff
    Customer Support

    Hi there,

    creating a sticky footer is not too difficult. Its something that can be done with a little CSS using either the Theme Footer or a Block Element.

    My approach would be this:

    1. Add this CSS to your site:

    @media(min-width: 769px) {
        .sticky-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    
        body {
            margin-bottom: 50px;
            /* adjust to height of sticky element */
        }
    }

    2. Install the GenerateBlocks Plugin
    3. Create a new Block Element
    4. Build out your footer element using GB Container Blocks, Buttons etc.
    5. Select the Container Block – Settings > Advanced > Additional CSS Class – add: sticky-footer
    6. Select the after_footer hook
    7. Set the Display Rules to Entire Site.

    The Full Screen thing – i am not sure what that even does lol – static images on their site doesn’t really give the game away.

    #1491760
    Jacob

    Does that solution include the on of switch of the footer-element ?

    Thank you David.

    #1491768
    Jacob

    Worked great by the way. Thank you.

    #1491878
    David
    Staff
    Customer Support

    The close button would require a little JS – i can take a look at what i have in my GISTs if you want ?

    #1491881
    Jacob

    Would really appreciate that, yes. Thanks.

    #1493000
    David
    Staff
    Customer Support

    Ok so something like this should work:

    1. Add a Container Block that is set to Full Width and full width inner. Give it an Additional CSS Class of: sticky-footer

    2. Inside the parent Container you need to add 2 x Container blocks.
    The first ( top ) container will be used for the Toggle – give it a class of: sticky-footer-toggle
    The second (bottom) container you will add whatever you want in your footer. Give that a class of: sticky-footer-panel

    3. Below the parent container block ( not inside it ) add a HTML block. This will contain your JS and CSS:

    Javascript:

    <script>
    var stickyEl = document.querySelector('.sticky-footer-toggle');
    
    stickyEl.onclick = function() {
      stickyEl.classList.toggle('active');
    }
    </script>

    CSS:

    <style>
    @media(min-width: 769px) {
        .sticky-footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
        }
    
        body {
            margin-bottom: 50px;
            /* adjust to height of sticky toggle element */
        }
        .sticky-footer-toggle {
            cursor: pointer;
        }
        .sticky-footer-panel {
            max-height: 0;
            overflow: hidden;
            transition: all 0.4s ease-in-out;
        }
    
        .sticky-footer-toggle.active+.sticky-footer-panel {
            max-height: 1000px;
        }
    }
    </style>

    For bonus points if you place a Headline with Icon in your sticky-footer-toggle container eg.an UP Caret
    You can add this CSS to flip it when the footer is open:

    .sticky-footer-toggle.active .gb-headline-wrapper .gb-icon {
        transform: rotatex(180deg);
    }
    #1493448
    Jacob

    eg.an UP Caret

    ???? Do not understand.

    But working beautifully. But only after I acidently clicked on something. Then added background and some content in both child containers so I could see it, haha … I guess it is padding or margin or something, but unlike the first solution it does not attach itself to the frame of the bottom (as in body: margin and padding= 0px;)

    Thanks a bunch. You really should implement it as a feature in your theme. To me it serves minimum three purposes.

    1. Get rid of that neverending scrolling-down-depressing feeling of uncertainty about whether something good will eventually come up, while I am scrolling down – and engage the visitor in that moment of scrolling discovery.
    2. Make use of the attention that is going downwards, when scrolling – keeping visitors action-orientered and reminding them about that they are in control with relevant tools – that is of another kind than the top menu.
    3. E-mail sign-up form in the bottom. Maybe if it has to be clicked, that could reduce spam. But anyways, when toggled away it is less disturbing.

    Makes sense ?

    Thank you.
    4. As a communicative channel separate from the main top menu.

    #1493867
    David
    Staff
    Customer Support

    Caret – example of here – or any icon to highlight it can be opened/closed.

    Do you have it set up on a site? Happy to take a look at what needs tweaking.

    Its quite a niche requirement that we haven’t had (m)any requests for but is a nice feature that got me interested lol. I think this is something we would look at within a GB Pro Block Template. It is at the end of the day just a sticky Accordion 🙂

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