Site logo

Archived topic

2 features I would like to see.

8 replies · Started by Jacob on October 16, 2020

Viewing posts 1–9 of 9

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.

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.

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

Thank you David.

Worked great by the way. Thank you.

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

Would really appreciate that, yes. Thanks.

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);
}

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.

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 :)

This archived topic is closed to new replies.