The Shelter template is a single-column donation landing page built for affordable housing social enterprises. It guides visitors through one family's full build journey, from an overcrowded motel room to a finished home with a door that locks. Every scroll section deepens emotional investment, maps dollars to real materials, and moves potential donors toward a clear, confident giving decision.
by Rocket studio
Loading preview…
Quick summary
Shelter is a donation landing page template designed for affordable housing non profit organizations. It tells one family's story from start to finish, using emotional storytelling, scroll-linked progress bars, and tiered giving options to turn visitors into committed donors. The page immediately communicates purpose, keeps the donation process frictionless, and makes every dollar feel like a physical act of building.
Who this template is for
This template is built for mission-driven teams who need a landing page that earns trust before it asks for anything. It works especially well for affordable housing non profit groups, community build programs, and social enterprises that raise funds through storytelling rather than statistics alone.
Non profit fundraising teams running active housing campaigns
Community organizations seeking recurring donations from church groups, retirees, and young professionals
Social enterprise founders who want potential donors to feel like crew members, not passive spectators
What problem this template solves
Generic charity pages lose visitors fast. They present a logo, a short paragraph, and a donate button, and then wonder why the bounce rate stays high. Potential donors need a reason to stay, a reason to believe, and a clear path to act. A focused donation landing page with a distraction free layout and a single call to action solves all three problems at once.
Donors leave pages that lack emotional connection or show no evidence of impact
Scattered navigation and competing links pull page visitors away before they reach the donation form
Vague messaging fails to show what specific donation amounts actually build or achieve
What you get with this template
You get a complete, single-column donation landing page structured around one family's build arc. Every section is purposeful. Every component earns its place. The template combines clear messaging, impactful images, and a conversion-focused layout into one cohesive flow that keeps visitors engaged from the headline to the giving form.
A half-page hero with a left-aligned headline and a full-bleed family photograph dissolving into soft overcast white
Theme
Nature-Inspired
Creative direction
Hero's Journey
Color system
Cloud Canvas
Style
Single Column Flow
Direction
Donation/Fundraising
Page Sections
Hero Section with Story-led Headline
Scroll-driven Hero's Journey Arc
Tiered Giving Selector with Custom Amount
Scroll-linked Progress Bars
Sticky Fund a Foundation Button
Volunteer and Family Testimonial Section
Related questions
Who is this donation landing page template built for?
Can I customize the donation amounts in the giving tier selector?
Does this template support both one-time and recurring giving options?
A scroll-driven story arc covering the family's situation, the build journey, and the moment keys change hands
A three-tier giving selector with suggested amounts ($35, $120, $500), a custom amount field, and a sticky "Fund a Foundation" call to action that appears after the page midpoint
Feature list
This section covers the core built-in capabilities of the Shelter donation landing page template. Each feature is grounded in what the template actually delivers.
Hero Section with Emotional Headline
The header uses a half-page photo and text composition. A wide photograph shows a family standing in a doorframe for the first time, shot from inside an unfinished house, natural light wrapping around their silhouettes. The headline, "Every Family Deserves a Door to Close Behind Them," sits left-aligned above the image in soft overcast white space. The two elements meet at a raw, uncropped edge. This opening immediately communicates the organization's mission before a single word of body copy is read. Using strong visuals at the entry point is one of the most reliable ways to create an emotional connection with potential donors.
Scroll-Driven Build Story Arc
The page follows a Hero's Journey creative direction. Visitors scroll through one family's experience, from a shared motel room, through permit delays and framing days, to the climax of a key handover. Each section adds emotional weight while layering in concrete evidence. Pull quotes from volunteers and families alternate like a conversation. Emotional storytelling at this depth is essential for creating a connection with potential donors on donation pages and for keeping visitors engaged through the full page.
Dollar-to-Material Giving Tiers
The donation form includes a three-tier giving selector. $35 funds a window, $120 covers a subfloor, and $500 frames a full wall. A custom amount field sits alongside the tiers for donors with different preferences or larger giving intentions. Tangible giving tiers like these simplify decision making for potential donors by linking each donation amount to a physical outcome. This transparency helps build credibility and reduces hesitation during the donation process.
Scroll-Linked Progress Bars
Fundraising goals are displayed as visual progress bars that fill with new-growth green as visitors scroll. A visual progress tracker like this motivates donors to contribute by showing how close the campaign is to its next milestone. The bars also reinforce social proof by making collective fundraising efforts feel visible and real, encouraging supporters to add their contribution before the goal closes.
Sticky "Fund a Foundation" Call to Action
After the page midpoint, a sticky button anchors to the bottom of the viewport on all screen sizes. It uses action oriented language and a high-contrast new-growth green color to remain visible without being intrusive. A secondary path, "Join a Build Day," offers a non-monetary conversion option for visitors who want hands-on community involvement. Clear calls to action at key scroll depths keep the donation landing page focused on guiding visitors toward a single decision.
Alternating Volunteer and Family Voices Section
A dedicated voices section presents pull quotes from volunteers and families in alternating order. Donor stories and beneficiary testimonials serve as social proof, building trust with new visitors who have not yet decided to donate. Compelling narratives supported by real testimonials strengthen emotional connections and credibility on donation pages. Authentic quotes placed near the giving form help turn visitors who are close to deciding into confirmed donors.
Page sections overview
Section
Purpose
Hero photo headline
Opens with family image and mission statement
The Reality
Sets emotional stakes with family's starting situation
The Build Story
Tracks arc from permits through key handover
Dollar-to-Material Map
Links each donation amount to a physical build component
Progress bar tracker
Shows fundraising goal completion in real time
Voices and quotes
Delivers social proof through volunteer and family testimonials
Giving tier selector
Presents three donation options and custom amount field
Sticky donate button
Keeps the call to action accessible after midpoint scroll
Footer split layout
Logo and tagline left, navigation links right
Design & branding system
The Shelter template uses a Nature-Inspired theme built on the Cloud Canvas color system. The palette feels like an overcast morning before groundbreaking: gentle, unhurried, and quietly purposeful. Every color choice reinforces the emotional tone of the page without competing with the photography or the story.
Overcast white (#F4F1EC) as the primary background, weathered cedar (#7A6655) for body text and grounding elements, and horizon fog (#C5CCD3) for section dividers and secondary surfaces
New-growth green (#5B8C5A) used exclusively for buttons and progress indicators to draw the eye without visual noise
Fraunces serif for all headlines and Dm Sans for body text, creating a warm, legible contrast between structure and story
Mobile & speed optimization
Donors often give on mobile devices after an emotional scroll. This template is built mobile-first, meaning every layout decision prioritizes mobile users before desktop. The single-column flow means no layout shifts or broken grids on smaller screens. The donation form is simple, uncluttered, and mobile-responsive by design, minimizing friction for mobile users at the point of giving.
The sticky call to action button remains fixed and tappable on all screen sizes, ensuring mobile responsiveness without any layout adjustment needed
Scroll-linked animations and staggered reveals use minimal JavaScript, keeping the page light for mobile devices on slower connections
Optimized image handling keeps the hero photograph and supporting visuals sharp without degrading load speed for page visitors on any device
How this template helps you convert
The page is designed to earn the donation before it asks for it. By the time visitors reach the giving form, they have already walked through the house in their minds. The donation landing page does not ask visitors to take a leap of faith; it asks them to finish something they have already started emotionally. Combining clear messaging, emotional appeal, and structured conversion paths makes this an effective donation landing page for any non profit housing campaign.
The Hero's Journey scroll arc builds emotional investment section by section, so that guiding visitors to the donation form feels like a natural next step rather than an interruption.
The distraction free layout removes competing links and navigation, keeping the focus on a single conversion goal. This directly reduces the bounce rate and keeps potential donors moving through the page.
Tiered donation amounts, a custom amount field, and a secondary "Join a Build Day" path offer donation options that accommodate different preferences, allowing supporters to engage at their own level and increasing overall conversion.
Other information about this template
This template is designed to support broader fundraising efforts beyond a single campaign. It can serve as a dedicated landing page for seasonal appeals, emergency relief drives, or ongoing recurring donations programs. The page structure works for campaigns that raise funds for housing in crisis zones, post-disaster recovery, or long-term affordable home builds. It is especially effective for non profit teams who want data driven decisions about what messaging connects, since the layout can be paired with tools like Google Analytics to track visitor behavior and conversion flow. Google Analytics integration allows teams to monitor which sections keep visitors engaged and which points in the scroll drive the most donation activity.
The giving tier structure can be adapted to reflect different campaign goals, for example a one time gift for a window versus a monthly donation toward a full build
The template is compatible with no-code platforms like Landingi and Unicorn Platform, which are dedicated landing page builders that enable non profit teams to launch and customize donation pages without coding skills. Unicorn Platform allows users to design a custom donation landing page in minutes. Landingi is a dedicated landing page platform built specifically for non profit landing page campaigns.
High-performing non profit landing pages like those modeled by Charity: Water and Great Ormond Street Hospital demonstrate that combining clear calls to action, emotional storytelling, and strong visuals consistently raises more money than generic charity pages
Transparency about how donation funds are used, for example showing certifications or mapping funds to materials, helps build credibility and encourages potential donors to complete their giving
A water charity example shows how tangible impact mapping, where each suggested amount corresponds to a specific outcome, inspires visitors and drives higher average donation amounts
Post-donation experience is accounted for in the layout, allowing teams to redirect donors to a branded thank you page that sustains the emotional connection after the donation process is complete
The footer uses a split layout, with logo and tagline on the left and navigation links on the right, giving the page a resolved, professional close without distracting visitors before they reach the form
For non profit teams focused on converting visitors and raising funds over time, this landing page can serve as a sustainable source of campaign traffic and donor engagement when paired with paid or organic traffic strategies
