Footer Templates

4 free, editable footer section templates. Website footers with link columns, newsletter sign-up and social links. Change the text, images, colours and fonts in your browser, add a GSAP animation, then export HTML, React or Vue.

Footer

Footer Templates

4 sections · Responsive · GSAP animation · HTML, React & Vue

Updated October 20, 2026

About these sections

Footer Templates

The footer is the last thing on every page: it helps visitors find what they missed, builds trust with legal and contact links, and gives one more chance to sign up or get in touch.

The Multi-Column Footer is the classic sitemap footer with link columns, social icons and a smooth back-to-top button. The Big Wordmark Footer ends with a closing call to action and your brand name in giant type, revealed with GSAP SplitText. The Footer With Newsletter adds a working email sign-up form, and the Minimal Footer keeps it to one tidy row.

Links are written one per line as "Label | URL", so even big footers are quick to edit, and unsafe URLs are replaced automatically. Social icons cover X, LinkedIn, GitHub, YouTube, Instagram, Facebook, Dribbble and Figma. Every footer shares the theme with the navbars and sections above it and exports to HTML, React or Vue.

Multi-Column Footer: The classic website footer: your logo, a one-line description and social icons on the left, up to five columns of links on the right, and a bottom bar with the copyright, legal links and a back-to-top button that scrolls smoothly with GSAP.

Big Wordmark Footer: A bold, modern footer: a closing call to action with a button at the top, a row of links and social icons in the middle, and your brand name as a giant wordmark across the full width at the bottom, revealed letter by letter with GSAP SplitText. A favourite of agencies, studios and design-led startups.

Footer With Newsletter: A footer that grows your list: on the left your logo, a short newsletter pitch and an email form that posts to any email service; on the right columns of links; underneath, social icons, the copyright and legal links. Shown in a deep navy theme.

Minimal Footer: A small, tidy footer for landing pages and simple sites: logo on the left, a single row of links in the middle and social icons on the right, with a thin divider and the copyright line underneath. On phones everything stacks and centres.

Real-world uses

Best Uses for Footer Sections

🚀

SaaS website (Multi-Column Footer)

Organise Product, Company and Resources columns with links to features, pricing, careers, docs and status.

🏢

Company site (Multi-Column Footer)

List services, locations, about and contact pages, with legal links for privacy and terms.

🎨

Design studio (Big Wordmark Footer)

End your portfolio with "Have a project in mind?", a start-a-project button and your studio name in giant type.

🧑‍💻

Freelancer or creator (Big Wordmark Footer)

Use your own name as the wordmark and link to your work, writing and socials.

📰

Blog or media site (Footer With Newsletter)

Grow your newsletter from every article with a weekly digest sign-up in the footer.

🛍️

Online store (Footer With Newsletter)

Offer early access to sales for subscribers, with Shop, Help and About link columns.

How it’s different

How These Section Templates Are Different

✎

Editable, not just copyable

Change text, links, images, colours and fonts in the browser before you export, instead of editing someone else’s code by hand.

◐

One theme for every section

Colours, fonts, radius and width are shared CSS variables, so every section you combine looks like one website.

⇲

Responsive by container

Container queries make each section adapt to its own width, in a full page, a column or a page builder.

✦

GSAP animation built in

Every section animates in with GSAP and ScrollTrigger, stays visible without JavaScript and respects reduced motion.

</>

HTML, React and Vue

Export a single HTML file, a ZIP with your images, a React component or a Vue component, or fork the code into My Code.

◍

Free, private, saved

No account and no watermark. Designs, uploaded images and fonts stay in your browser, with a backup file you can restore anywhere.

Step by step

How to Use

1
Pick a sectionOpen one of the footer sections above. Your edits autosave in your browser as you go.
2
Edit the contentChange the text, buttons, links and images in the panel, and switch optional parts on or off.
3
Add your brandPick colours, fonts, radius and width, or apply your saved brand kit; every section shares the same theme.
4
Animate and previewChoose a GSAP entrance effect, press Play animation, and check desktop, tablet and mobile.
5
ExportDownload HTML or a ZIP, copy a React or Vue component, or fork it into My Code.

Got questions?

Frequently Asked Questions

Your logo, the most useful links (product, company, help), contact or social links, the copyright notice and legal links such as privacy and terms. Optionally a newsletter sign-up or a closing call to action.

They help visitors and search engines discover your important pages from every page of the site. Keep them focused on genuinely useful pages rather than long lists of keywords.

In these footers, each links box takes one link per line as Label | URL, for example Pricing | /pricing/. Columns themselves can be added, reordered and removed.

Multi-Column Footer: The classic website footer: your logo, a one-line description and social icons on the left, up to five columns of links on the right, and a bottom bar with the copyright, legal links and a back-to-top button that scrolls smoothly with GSAP. Big Wordmark Footer: A bold, modern footer: a closing call to action with a button at the top, a row of links and social icons in the middle, and your brand name as a giant wordmark across the full width at the bottom, revealed letter by letter with GSAP SplitText. A favourite of agencies, studios and design-led startups. Footer With Newsletter: A footer that grows your list: on the left your logo, a short newsletter pitch and an email form that posts to any email service; on the right columns of links; underneath, social icons, the copyright and legal links. Shown in a deep navy theme. Minimal Footer: A small, tidy footer for landing pages and simple sites: logo on the left, a single row of links in the middle and social icons on the right, with a thin divider and the copyright line underneath. On phones everything stacks and centres.

Yes. Every section is free for personal and commercial websites, with no account and no watermark. Everything runs in your browser and your edits are saved locally.