[Resolved] GP Footer template

[Nico]

Good morning!

Unfortunately, our footer still looks pretty boring. Is it possible to import footer templates for GeneratePress?

Thanks for the help
Nick

[David]

Hi there,

there aren’t any methods to import a footer for classic widget areas.
If you’re using the Block Editor then you can construct one use Block Elements:

https://docs.generatepress.com/article/block-element-overview/

YT video of one from our site library being broke down:

[Nico]

Does that mean that if you are still working with the Classic Editor, you cannot use GP Elements to create a footer?

[Elvin]

Hi there,

Does that mean that if you are still working with the Classic Editor, you cannot use GP Elements to create a footer?

That’s right. You can’t use Block element specifically because it uses the Block Editor.

But you can still replace the site footer w/ a manually coded site footer using a Hook Element.

If I may suggest, while I understand that learning a new thing may be tedious, it’s good to get into using Gutenberg Editor as Classic Editor will be fully obsolete by the end of the year. 😀

You’re missing out on a big part of GP Premium (and great tool like GenerateBlocks) if you stay out of Block Editor. 😀

[Nico]

Thank you Elvin for your feedback. You are absolutely right with your comment and you hit the mark. The use of Gutenberg or the Block Editor is also one of the reasons why we are switching to GeneratePress.

We will also activate it in the course of next year.

However, in order not to create too much uncertainty on the editorial side, we are separating the relaunch from the introduction of the Gutenberg Editor.

From your point of view, do we have a possibility to recreate the “old footer” as you can see at the link to our old website 1:1 without the block editor in GP?

[David]

Hi there,

take a little bit of customization but it should be possible to match that footer.

First off set your Customizer > Colors > Footer – for the background and the text.

Now in Customizer > Typography – in the list of elements there is one called Custom – add one of them.
In the CSS Classes field add:

.site-footer .widget-title

You can now style your widget titles.

Now create another custom typography element and use this CSS selector:

.inside-footer-widgets a

And you can set the styles for your links.

Once thats done i can help with some CSS for the other styling.

[Nico]

Hey David!

Thank you for the “recipe”. Your hints are already having an effect. We are happy to take the next steps.

[David]

OK so for the titles:

1. Add this CSS:

.footer-widgets .widget-title {
    border-bottom: 3px solid #00a1b7;
}

2. In your custom Customizer typograpghy settings increase the Line Height of the widget-title to give it some more space.

For the link underlines this CSS:

.footer-widgets ul li {
    padding-bottom: 4px;
    border-bottom: 1px dotted rgba(255,255,255,0.3);
}

And you can remove the default link underlines in Customizer > General.

[Nico]

Good Morning Dave. I’ve built in all of your steps. Looks like we’re almost there.

[David]

Ok so what we got left for the Foot widget area:

1. your custom widget-title typography you can reduce the bottom margin to close the gap between title and widget content.
2. the link colors – you can set them to #fff in Customizer > Colors –> Footer Widgets >>> Link color

Then its just the Footer Bar.

1. In Customizer > Colors –> Footer Bar you can set the footer bars background and text colors.
2. Now some CSS for the top border, left alignment and reduced padding:

.site-info {
    border-top: 3px solid rgba(255, 255, 255, 0.3);
    text-align: left;
}
.inside-site-info {
    justify-content: flex-start;
    padding: 10px 40px
}
.site-footer:not(.footer-bar-active) .copyright-bar {
    margin: unset;
}

[Nico]

Hi Dave!

Then I have two remaining questions.

To point 1:
Where can I “…reduce the bottom margin to close the gap between title and widget content…”? I do not find this setup.

And the last question:
You will see different font sizes (author) and the word “bei” in the comments. Can you tell me where I can adjust this?

[Nico]

or even better; can we get rid off “Author” + “bei”?

[David]

To point 1:
Where can I “…reduce the bottom margin to close the gap between title and widget content…”? I do not find this setup.

Doh … thats only option in the default list.

So edit this CSS:

.footer-widgets .widget-title {
    border-bottom: 3px solid #00a1b7;
}

to:

.footer-widgets .widget-title {
    border-bottom: 3px solid #00a1b7;
    margin-bottom: 0.5em;
}

And last question:

option a) to adjust font sizes – edit your Customizer > Typography –> .inside-footer-widgets a and cahnge the CSS selector to just: .inside-footer-widgets

To remove the author and bei – unfortunately there isn’t an option in the widget for that and theres no filter hook either. And i wouldn’t recommend hiding them with CSS as they are links.

[Nico]

Oh my god we have it. Dave, thank you very much for that.

The only remaining question is; Wine or beer and where should it be sent? ☺

[David]

Awesome – glad to be of help!!

We like coffee 🙂 And it you want to contribute to our development please feel free:

https://generatepress.com/ongoing-development/

[Author]

Posts