Home › Forums › Support › Footer Widget 4 to be below 1,2,3 Widgets and span all 3. Is that possible?
- This topic has 8 replies, 2 voices, and was last updated 7 months ago by
David.
-
AuthorPosts
-
June 23, 2020 at 4:04 am #1338489
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
June 23, 2020 at 7:00 am #1338706David
StaffCustomer SupportHi 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
hookNOTE: In the HTML above you will see the
footer-widgets
class – this will match the style of the footer widget areaDocumentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/June 23, 2020 at 2:57 pm #1339441nomadiceman
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?
June 24, 2020 at 2:24 am #1339870David
StaffCustomer SupportTry 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/June 24, 2020 at 2:36 am #1339882nomadiceman
this works but the padding isn’t good on mobile
June 24, 2020 at 2:45 am #1339893nomadiceman
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
June 24, 2020 at 4:00 am #1339985David
StaffCustomer SupportRemove 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/June 24, 2020 at 4:21 am #1340008nomadiceman
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
June 24, 2020 at 6:20 am #1340097David
StaffCustomer SupportNot basic at all 🙂 Glad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.