2 features I would like to see.

This topic has 8 replies, 2 voices, and was last updated 5 years, 6 months ago by David.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
October 16, 2020 at 3:02 am #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.

October 16, 2020 at 4:39 am #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.
October 16, 2020 at 4:42 am #1491760

Jacob

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

Thank you David.

October 16, 2020 at 4:52 am #1491768

Jacob

Worked great by the way. Thank you.

October 16, 2020 at 6:42 am #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 ?

October 16, 2020 at 6:43 am #1491881

Jacob

Would really appreciate that, yes. Thanks.

October 17, 2020 at 4:48 am #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);
}
```
October 17, 2020 at 10:09 am #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.

October 17, 2020 at 11:34 pm #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 🙂
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

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

Popular Articles

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

Popular Articles

Start building better websites today.