Archived topic
2 features I would like to see.
8 replies · Started by Jacob on October 16, 2020
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 :)