Footer Widget 4 to be below 1,2,3 Widgets and span all 3. Is that possible?

[nomadiceman]

Im working with the Avery site template https://gpsites.co/avery/

I like the 3 widget areas but want to have another widget area under the 3 existing widgets?

What is the best way to achieve that?

I am already using the GP Premium and using the Footer Bar.

I need an area that I can put simple text, which will be a legal disclaimer sentence.

Would using the Footer Widget 4 be the best way? If so how do I do that in CSS

Thank you for your help and time. Very much appreciated

[David]

Hi there,

If its just some plain text or HTML you want to add then use a Hook Element:

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

Add your HTML in a wrapper like so:

<div class="custom-footer-bar footer-widgets">
	<!-- add you custom footer content here -->
</div>

And select the after_footer_widgets hook

NOTE: In the HTML above you will see the footer-widgets class – this will match the style of the footer widget area

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nomadiceman]

this is great, i was so focused on CSS i completely forgot about the Hooks, It worked great

How would I style this area now? For example add right and left padding and change font and font size?

[David]

Try this CSS for example:

.custom-footer-bar {
    padding: 20px 40px;
    font-size: 14px;
    /* Other styles here */
}

This will vary depending on the HTML you have within that wrapper – if its not working as you need it then provide a link to the site so i can take a look.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nomadiceman]

this works but the padding isn’t good on mobile

[nomadiceman]

Hmm still can’t figure it out. It works ok on desktop but I want padding that doesn’t work on mobile

ill add the url now for you to take a look

[David]

Remove the padding from your CSS and edit your HTML to include an inner grid-container wrapper like so:

<div class="custom-footer-bar footer-widgets">
    <div class="grid-container">
        <!-- add you custom footer content here -->
    </div>
</div>

Now you only need CSS for the font-size.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[nomadiceman]

perfect that worked great. thank you once again

Apologies for the basic questions Im learning as I go, so thanks for your help its very much appreciated

[David]

Not basic at all 🙂 Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts