[Resolved] Customize Footer Background Image and Widget layout

[Sara Genone]

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!

[David]

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/

[Sara Genone]

Thank you!

[David]

You’re welcome

[Cynthia]

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?

[Ying]

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!

[Cynthia]

Oops didn’t realize it wasn’t activated. Thank you!

[Ying]

No problem 🙂

[Grey]

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!

[Elvin]

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.

[Grey]

Great! Thank you!

[Elvin]

No problem. 😀

[Author]

Posts