Multi-Column Footer

Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel

Related Section Templates

44 sectionsView all →
1–5 of 44
Footer

Multi-Column Footer

Responsive · Animated
Footer

Footer With Newsletter

Responsive · Animated
Footer

Minimal Footer

Responsive · Animated
Footer

Big Wordmark Footer

Responsive · Animated
Hero

SaaS Split Hero

Responsive · Animated

Multi-Column Footer — Free Website Section Template

Footer · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue

CategoryFooter
Tagsfootercolumnslinkssocial iconsback to topsaaslight
Updated October 20, 2026

What's included

Features

Logo, tagline and social icons beside link columns
Up to 5 link columns, each written as "Label | URL" lines
Social icons: X, LinkedIn, GitHub, YouTube, Instagram and more
Bottom bar with copyright, legal links and back to top
Back to top scrolls smoothly with GSAP ScrollToPlugin
Unsafe link URLs replaced automatically
Columns reflow to two on phones
Export HTML, a ZIP, React or Vue

About this section

Multi-Column Footer — Free Website Footer Template

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.

Multi-Column Footer is the classic footer that tidily holds everything a site needs at the bottom of every page: your logo with 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 notice, legal links and a back-to-top button.

Columns that are easy to edit

Each column is an item in a list with a title and its links, written one per line as Label | URL (for example Pricing | /pricing/). Add, reorder or remove whole columns, and the grid reflows from four columns to two on phones. Links are checked before use, so unsafe URLs never make it into the page.

Social icons included

Pick icons for X (Twitter), LinkedIn, GitHub, YouTube, Instagram, Facebook, Dribbble or Figma, each with a screen-reader label and link, or switch the social row off.

Smooth back to top

The back-to-top button scrolls smoothly to the top of the page with GSAP's ScrollToPlugin; without JavaScript it's still a normal link to the top, and for reduced-motion users it jumps instantly. Leave its text empty to hide it.

Export it

Download HTML, a ZIP, React or Vue, or fork into My Code. It shares the theme with the navbars and every other section, so a whole page looks consistent.

Why use it

Why Use the Multi-Column Footer

🗺
A sitemap for people
Grouped link columns help visitors (and search engines) find every important page.
✎
Fast to edit
Writing links as "Label | URL" lines is quicker than filling in dozens of separate fields.
↑
Small touches
A smooth back-to-top button and hover states make the footer feel finished.

How it’s different

How It’s Different From Other Free Section Templates

✎
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. 1
    Edit the contentFill in the logo & tagline, social links, link columns and bottom bar in the panel. Switch the social links on or off. Wrap words in *asterisks* to colour them.
  2. 2
    Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
  3. 3
    Match your brandPick a colour preset or exact colours, choose heading and body fonts from Google Fonts or your own uploaded font, set the corner radius and width, or apply your brand kit.
  4. 4
    Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
  5. 5
    Save and exportSave it to My designs, then export a single HTML file, a ZIP with your images, a React or Vue component, or fork it into My Code.

Real-world uses

Common Use Cases

🚀
SaaS website
Organise Product, Company and Resources columns with links to features, pricing, careers, docs and status.
🏢
Company site
List services, locations, about and contact pages, with legal links for privacy and terms.
🛍️
Online store
Use Shop, Help and About columns for categories, shipping, returns and your story.
📚
Documentation or blog
Link to popular guides, categories and community pages from every article.

Got questions?

Frequently Asked Questions

Write one link per line as Label | URL, for example Pricing | /pricing/. A line without a URL links to #. Add whole columns with + Add column.

Yes. Add a social link and choose its icon: X (Twitter), LinkedIn, GitHub, YouTube, Instagram, Facebook, Dribbble or Figma. Each has a label for screen readers.

It is a link to the top of the page. With JavaScript, GSAP ScrollToPlugin scrolls there smoothly; with reduced motion it jumps instantly.

Yes. It uses a footer element, each column is a labelled nav, social icon links have text labels, and all links are real anchors.

It saves an editable copy of your Multi-Column Footer in My Code, the UI Snippets code editor: the section markup goes in the HTML panel, its CSS (theme variables, base styles and layout) in the CSS panel, and the GSAP library is added as a CDN link, so you can keep refining the code and save your own versions.

Yes. It is free for personal and commercial websites, with no sign-up, no watermark and no attribution required. Everything runs in your browser and your edits are saved locally.