Archived topic
Customize Footer Background Image and Widget layout
11 replies · Started by Sara Genone on October 27, 2020
Dear David
I’,m working on customize the web site footer.
I need to be able to put an image as background and also equally distribute spacing bwteween 4 widgets.
How can I do this?
I have to build a custom element?
Thank you for suggestions
Sara
P.S. I love your theme 🙂 is very very performant!
Hi Sara,
the Site you installed adds this CSS to the Customizer > Additional CSS:
@media (min-width: 1025px) {
.footer-widgets .footer-widget-1 {
flex-basis: 65%;
padding-right: 80px;
}
.footer-widgets .footer-widget-2 {
flex-basis: 15%;
}
.footer-widgets .footer-widget-3 {
flex-basis: 20%;
}
}
@media (max-width: 900px) {
.inside-footer-widgets {
flex-direction: column;
text-align: center;
}
.inside-footer-widgets>div {
padding: 20px;
}
}
You can delete that to reset the widgets to their usual settings.
To add a background image you can enable the Background Images module:
https://docs.generatepress.com/article/backgrounds-overview/
Thank you!
You're welcome
GP for some reason no longer has the background image option anymore in Customize > Background Images :(......
Why?
what is the easiest way to apply a background image to the footer?
Hi Cynthia,
Can you make sure the Backgrounds module is activated at Appearance > GeneratePress?
If you need further assistance, please open a new topic.
Thanks!
Oops didn't realize it wasn't activated. Thank you!
No problem :)
Hello,
I am using the "Coach" site from the library and can't find the way to change the orange picture in the footer.
Activated the background module and chose a different picture but still shows the original orange picture.
Also, where can I edit the social media buttons?
Thank you!
Hi Alfonso,
Coach's footer related edits can be done by opening the Block Element that adds it.
Go to Appearance > Elements and edit the Block Element that adds in the Site footer template for your site.
As for the orange background:
Select it's main Container block and go to its colors tab. You can remove the color set on Background.
AS for the socmed buttons:
You can also edit it within the same Block element.
Great! Thank you!
No problem. :D