Desktop · 1280px · shown at 0% · edit the text, images and colours in the panel
SaaS Split Hero — Free Website Section Template
Hero · v1.0.0 · Updated 2026-10-20 · Responsive · GSAP animation · HTML, React & Vue
What's included
Features
About this section
SaaS Split Hero — Free Two-Column Hero Section Template
SaaS Split Hero is a free, responsive hero section for SaaS and startup landing pages. Text sits on the left (an announcement badge, a bold headline with a highlighted phrase, supporting copy, primary and secondary buttons and a social-proof line) and a product screenshot sits on the right in a soft, glowing frame. It's the most common hero layout on software websites because it explains the product and shows it in the same glance.
Edit everything in the browser
Change every word, link and image from the panel: the badge text and link, the headline (wrap words in *asterisks* to colour them with your brand colour), the supporting text, both buttons and the social-proof line. Upload your own screenshot, which is resized in your browser and never uploaded, or paste an image URL. Switch the badge and social proof on or off, and leave the second button empty to hide it.
Your brand, one theme
Colours, fonts, corner radius and content width are theme settings shared by every section in the library, so this hero matches the features, pricing and footer sections you add next. Pick a preset or set exact colours, choose any Google Font or upload your own, and apply your saved brand kit in one click.
Responsive and animated
The layout uses CSS container queries, so it responds to the width of its container, not the browser window: two columns on desktop, stacked and centred on tablets and phones. It also includes a GSAP entrance animation (text staggers in, the screenshot rises) that plays once when the section scrolls into view, keeps content visible without JavaScript and turns off for people who prefer reduced motion.
Export the way you build
Copy a single HTML file with the CSS included, download a ZIP with your images, copy a React or Vue component, or fork it into My Code to keep editing the code. Looking for individual components instead? Browse the UI Snippets library.
Why use it
Why Use the SaaS Split Hero
How it’s different
How It’s Different From Other Free Section Templates
Step by step
How to Use
- 1Edit the contentFill in the announcement badge, headline & text, buttons, social proof and screenshot in the panel. Switch the announcement badge and social proof on or off. Wrap words in *asterisks* to colour them.
- 2Add your imagesUpload your own images (resized in your browser and kept on your device) or paste a hosted image URL.
- 3Match 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.
- 4Animate and previewChoose a GSAP entrance effect and speed, press Play animation, and check the section on desktop, tablet and mobile.
- 5Save 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
Got questions?
Frequently Asked Questions
Edit the text, images and colours, then open Export. Download a ZIP or .html file and copy the <section class="st …"> element and its CSS into your page, or copy the React or Vue component into your app. Every colour and font is a CSS variable you can change later.
Yes. It uses CSS container queries, so it adapts to the width of the element it sits in: two columns on wide screens, stacked and centred on tablets and phones. Preview desktop, tablet and mobile in the editor before exporting.
Yes. The Export menu copies a React component (JSX with the CSS included) or a Vue single-file component. The animation runtime loads GSAP from a CDN and runs after the component mounts.
The text and screenshot animate in with GSAP and ScrollTrigger once the section scrolls into view. Content is visible without JavaScript, and the animation is skipped for visitors who prefer reduced motion. You can change the effect and speed, or turn it off.
In your browser’s IndexedDB storage. Nothing is uploaded to a server. Use Save to keep named designs, and the Import / Export tab to download a backup file with your designs, images, uploaded fonts and brand kit.
It saves an editable copy of your SaaS Split Hero 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.