Archived topic
Footer design
3 replies · Started by Pheonix on January 1, 2021
How do I make my footer look like this: https://prnt.sc/wdducn
Hello Pheonix,
The easiest way is to use block element.
https://docs.generatepress.com/article/block-element-overview/
Choose Site Footer as Block Type, choose location depends on your needs.
Recommend to use our block editor plugin GenerateBlocks, then build footer structure as the screen shot:
https://tinyurl.com/yb5d8xvw
Let me know if it works :)
Hey Ying! I downloaded GenerateBlocks and activated Elements. But I have no idea how to do it.
By chance, could you do it for me if I provide you with login?
By chance, could you do it for me if I provide you with login?
Unfortunately that is out of the scope of this forum but I'm happy to walk you through it.
That layout is actually quite simple to create with the default footer widget area:
https://docs.generatepress.com/article/footer-widgets/
Footer widgets 1, 2, 4 and 5 would be a navigation menu widget as seen here:
https://youtu.be/TkwmOnyOlSs?t=525
Then footer widget 3 can be a Lightweight Social Icons widget:
https://en-ca.wordpress.org/plugins/lightweight-social-icons/
Then you can use this CSS to make the footer widget title 3 bigger:
.footer-widget-3 h2.widget-title {
font-size: 22px;
}
And this CSS to center all the footer widget content:
.footer-widgets .inside-footer-widgets {
text-align: center;
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if you get stuck somewhere :)