Edit footer content

[Heike_Eco]

Hi there,

I have noticed this weird subfooter space above my footer that I cannot seem to edit. Ideally I would like to add some information into this space - such as pictures, texts and buttons. Any idea on how I can edit this space?

Any help is much appreciated. Thanks, Heike

[friech]

Hi Heike,

Thank you for writing in, that is the Footer Widget Areas, you can set how many Columns (or disable it) under X > Theme Options > Footer

Then to put content in there, navigate to Appearance > Widgets and fill the Footer 1 - Footer 2 (depends how many footer columns) areas with available widgets from the left side.

Hope it helps,
Cheers!

[Heike_Eco]

Wow - mind blown! Thanks for sharing this insight with me

[basanta]

You are most welcome!

[Heike_Eco]

Hi Basanta,

I have now added in the information I want in the footer however the footer is very high and also the images I have added to the footer widgets do not line up in one straight line. Any suggestions on how I can reduce the height and get the widget images aligned?

Thanks,
Heike

[Heike_Eco]

I have now added in the information I want in the footer however the footer is very high and also the images I have added to the footer widgets do not line up in one straight line. Any suggestions on how I can reduce the height and get the widget images aligned?

Thanks

[Prasant]

Hello @Heike_Eco,

Thanks for updating the thread.

Please add following CSS under X > Theme Options > CSS to adjust the footer spacing and image alignment:

footer.x-colophon.top {
    padding-top: 2%;
    padding-bottom: 2%;
}

footer.x-colophon.top h2 {
    margin-top: 0;
}

Regarding the image that’s placed in center, you need to crop the image appropriately as the space is in image itself and then re-upload. Please see screenshot.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.