Creating a multi-use footer template for all my websites

I want to create a template of a footer that I can use on every website that I own or make. And I also want it to be as clean and simple as possible. The goal is to have a base file of a footer, a separate CSS file for styling the footer and a footer folder with images and other media used in the footer.

Learning from the best

For the start I’m going to surf the web and find some really nice footer examples. So, I managed to find 10 websites with a footer that I really like. I’m going to use those as an example to build up my own custom multi-use footer.

Dividing footer into sections

There are many sections among the footer examples that I examined. For example: About us, contact, social media, community, customer service, terms and conditions, privacy policy, sitemap, terms of use, help, products, support etc. I want these to be divided into a separate sections. That’s why I created footer menu groups and will place them into a separate sections.

Footer.php and footer.css

As the main style sheet for the whole site is getting too long and messy I want to keep some parts of the website in a collection of different files. That means keeping the footer information in a separate PHP and CSS file.

Sections into inline-box

I want all the sections of the footer to respond and place accordingly to the screen size. So in order to get them rearrange according to the screen i’m going to put them inside an inline-box.

Everything else as a paragraph

Everything else will be set up as a paragraph. Some paragraphs need more styling some less. Mostly just aligning them to keep things organised and keep them apart for the sake of readability.

Footer elements from top to bottom

Sections (as many as needed)

• About section
• Products section
• Topics section
• Company section

Community, social media area

Language area

Disclaimer area

Copyright area

Last update: 2018-09-26 (Y,M,D)

Read similar posts

2018-10-08 Creating a template for a vector based design applications
2018-09-26 Creating a multi-use footer template for all my websites
2018-09-13 I made a HTML and Javascript only replica of a popular WordPress template
2018-09-11 Best webpages for royalty-free stock photos
2018-04-30 Scalable Vector Graphics Chart with PHP Variables
2018-04-30 PHP Echo and Variable Inside SVG
2017-03-06 How to create custom video transitions using Blender 3D
2017-03-06 How to create custom sounds using audio editor