SaaS product footer
Dark software footer with a wordmark, short description and trial button, four link columns and a small-print row.
When to use it
The footer for a software site, where visitors scroll to find the links that do not fit in the header: changelog, API reference, system status, careers and the legal pages a buyer’s procurement team asks for. The four columns group them the way people look for them, and the brand column repeats the trial button for readers who reach the bottom of a long page. The small print carries the company name, a postal address and a note that prices exclude tax, which saves a support question for anyone buying from outside the US. Replace the link targets first; a footer full of placeholder anchors is easy to miss and looks careless to anyone checking your terms or data processing agreement. If you do not have a public status page or changelog yet, remove those links rather than pointing them somewhere empty.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 9
- Container (grid) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 21
- Button × 1
- Heading × 4
Things worth knowing
- Converts to Containers, four Heading widgets for the column titles, one Button and Text Editor widgets for every link, the description and the small print.
- The column titles are H2 elements styled small, so they become real Heading widgets; change the HTML tag to a paragraph in Elementor if your SEO setup prefers fewer headings.
- Below 780px the five-column grid becomes two columns with the brand block spanning the full width, and the small-print row stacks.
- Use it as a Theme Builder footer (Elementor Pro). Without Pro, paste it at the bottom of each page.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SaaS footer</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;color:#eeecfd;background:#16152e}
.site-footer{background:#16152e;padding:64px 0 28px}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px;padding-bottom:44px;border-bottom:1px solid #5c5b78}
.logo{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;font-size:23px;font-weight:800;letter-spacing:-.03em;color:#ffffff;margin:0 0 12px}
.about{font-size:14.5px;line-height:1.7;color:#eeecfd;margin:0 0 20px;max-width:300px}
.button{display:inline-block;padding:11px 18px;border-radius:9px;background:#2fd39a;color:#16152e;text-decoration:none;font-weight:700;font-size:14.5px}
.col{display:flex;flex-direction:column;gap:11px}
.col h2{font-family:'Plus Jakarta Sans','Inter',system-ui,sans-serif;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#2fd39a;margin:0 0 4px}
.col a{color:#eeecfd;text-decoration:none;font-size:14.5px;line-height:1.5}
.bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px}
.bottom p{margin:0;font-size:13px;line-height:1.6;color:#eeecfd}
@media(max-width:780px){
.site-footer{padding:48px 0 24px}
.wrap{padding:0 16px}
.top{grid-template-columns:1fr 1fr;gap:32px 20px}
.brand{grid-column:1 / -1}
.bottom{flex-direction:column;align-items:flex-start;gap:8px}
}
</style>
</head>
<body>
<footer class="site-footer">
<div class="wrap">
<div class="top">
<div class="brand">
<p class="logo">Corvane</p>
<p class="about">Project planning for teams of 5 to 150. Boards, timelines and weekly reports in one workspace.</p>
<a class="button" href="#trial">Start free trial</a>
</div>
<nav class="col" aria-label="Product">
<h2>Product</h2>
<a href="#features">Features</a>
<a href="#pricing">Pricing</a>
<a href="#integrations">Integrations</a>
<a href="#mobile">Mobile apps</a>
<a href="#changelog">Changelog</a>
</nav>
<nav class="col" aria-label="Company">
<h2>Company</h2>
<a href="#about">About</a>
<a href="#customers">Customers</a>
<a href="#careers">Careers</a>
<a href="#contact">Contact</a>
</nav>
<nav class="col" aria-label="Resources">
<h2>Resources</h2>
<a href="#docs">Help center</a>
<a href="#api">API reference</a>
<a href="#templates">Board templates</a>
<a href="#status">System status</a>
</nav>
<nav class="col" aria-label="Legal">
<h2>Legal</h2>
<a href="#terms">Terms of service</a>
<a href="#privacy">Privacy policy</a>
<a href="#dpa">Data processing agreement</a>
<a href="#security">Security overview</a>
</nav>
</div>
<div class="bottom">
<p>© 2026 Corvane Inc. · 410 Lantern Row, Suite 5, Portland, OR 97209</p>
<p>Prices in USD, excluding sales tax and VAT.</p>
</div>
</div>
</footer>
</body>
</html>