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 Templates
4 sections · Responsive · GSAP animation · HTML, React & Vue
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.
Browse other categories
More Section Categories
| Category | What it is for | Sections | Includes |
|---|---|---|---|
| Hero | Above-the-fold hero sections with a headline, supporting text, call-to-action buttons and an image, screenshot or background photo. | 5 | SaaS Split Hero, Centred Gradient Hero, Image Background Hero, App Product Hero, Personal Portfolio Hero |
| Navbar | Responsive navigation bars with a logo, links and a call-to-action button. | 3 | Simple Sticky Navbar, Floating Pill Navbar, Navbar With Announcement Bar |
| Features | Feature grids, alternating image-and-text rows and benefit lists. | 5 | Icon Grid Features, Split Features With Image, Bento Grid Features, Alternating Feature Rows, How It Works Steps |
| Pricing | Pricing tables and plan cards with highlighted plans and feature lists. | 5 | Three-Tier Pricing, Dark Glow Pricing, Single Plan Pricing, Pricing List Rows, Pricing Comparison Table |
| Testimonials | Customer quotes, review walls and case-study highlights. | 6 | Testimonial Wall, Testimonial Carousel, Testimonial Marquee, Testimonial Spotlight, Case Study Showcase, Reviews Summary & Rating |
| FAQ | Frequently asked question sections with expandable answers. | 3 | FAQ Accordion, Split FAQ With Contact Card, FAQ Grid |
| Call to action | Closing call-to-action banners and sign-up blocks. | 4 | Gradient CTA Banner, Split CTA With Image, Newsletter Signup CTA, CTA Strip |
| Stats & logos | Social-proof numbers and customer logo strips. | 3 | Animated Stats Counters, Scrolling Logo Cloud, Stats With Logos (Dark) |
| Team | Team grids with photos, names and roles. | 4 | Team Grid, Team Carousel, Interactive Team Accordion, Team With Hiring CTA |
| About us | About us and our story sections: a picture, the story, the founder, key facts and company values. | 1 | About Us & Our Story |
| Contact | Contact sections with details, maps and forms. | 5 | Contact Form With Details, Contact Options Cards, Contact With Map, Booking Request Form, Opening Hours & Location |
| Blog | Blog and article grids with cover images. | 6 | Blog Post Cards, Featured Post With List, Editorial Post List, Legal & Long-Form Text Page, Blog Post Page (Single Article), Blog Grid with Pagination |
| Gallery & media | Photo galleries with filters and a lightbox, video sections and before-and-after sliders. | 3 | Filterable Image Gallery, Video Section with Poster, Before & After Slider |
| Scroll effects | Scroll-driven sections built with GSAP: horizontal scroll galleries, pinned scroll stories and stacking cards. | 6 | Horizontal Scroll Gallery, Pinned Scroll Story, Stacking Cards, Scroll Path Timeline, 3D Scroll Carousel, Scroll Zoom Image Stack (Ken Burns) |
| Menus & listings | Industry sections: restaurant menus with prices, property listings and class timetables. | 4 | Restaurant Menu, Property Listings, Product Grid, Class Timetable |
| Music | Sections for bands, artists and labels: a music hero, an audio player with a track list, tour dates with tickets, a discography grid, a release countdown and streaming links. | 6 | Music Artist Hero, Audio Player & Track List, Tour Dates & Tickets, Discography Grid, New Release Spotlight, Streaming Links Bar |
| Login & Sign up | Login and register screens with email and password, social sign-in buttons, show password and a password strength hint. | 2 | Login Form (Sign In Page), Register Form (Sign Up Page) |
| Popups | Popups that open after a delay, on exit intent or on scroll, for sign-ups, offers and announcements. | 1 | Popup & Promo Modal |
| Accessibility | Floating accessibility toolbars that let visitors enlarge text, change contrast, hide images, pause animations and more. | 1 | Accessibility Toolbar Widget |
| Cursor & page effects | Page-wide effects that take no space in the layout: cursor followers that invert what is under them and floating back-to-top buttons. | 2 | Cursor Follower (Blend Mode Circle), Back to Top Button |
| Timelines | Timelines for company history, roadmaps and milestones, laid out along a scrollable line. | 1 | Horizontal Timeline |
| Social share | Floating social share bars that take no space in the layout, with share buttons for the popular networks. | 1 | Floating Social Share Bar |
Real-world uses
Best Uses for Footer Sections
How it’s different
How These Section Templates Are Different
Step by step
How to Use
- 1Pick a sectionOpen one of the footer sections above. Your edits autosave in your browser as you go.
- 2Edit the contentChange the text, buttons, links and images in the panel, and switch optional parts on or off.
- 3Add your brandPick colours, fonts, radius and width, or apply your saved brand kit; every section shares the same theme.
- 4Animate and previewChoose a GSAP entrance effect, press Play animation, and check desktop, tablet and mobile.
- 5ExportDownload 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 work, with no account, no watermark and no attribution: export it on its own as HTML, React, Vue or Next.js from its page, or use it in a website you build and export in the Website Builder.