Website kits
Nonprofit home page
Nonprofit home page: mission hero with Donate, Volunteer and pantry hours, program cards, gift amounts, a family story, volunteer shifts and newsletter.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The front page of a local food pantry, written for the two kinds of visitor it gets. The hero states the mission in one sentence and offers Donate and Volunteer buttons, but the blush panel directly beneath them gives this week’s pantry hours, because someone who needs food should not have to scroll past a fundraising appeal to find them. Three program cards explain what the pantry actually does, then the gift section turns $25, $50 and $100 into specific groceries, which persuades better than a general plea. One family’s story, told with permission and a changed name, puts a face to those numbers. The volunteer band lists real shift types, the partner names show local backing, and a monthly newsletter signup closes the page. Replace the hours and the gift costs first, since both must match what you actually do, and ask before publishing any story — offer to change names as a matter of course.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 28
- Container (grid) × 4
- Container (grid, 3 columns) × 2
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 25
- Heading × 7
- Button × 6
- Image × 3
- Image Box × 3
- Icon Box × 3
- Icon List × 1
- Form × 1
Things worth knowing
- The three program cards (one image, one heading, one paragraph each) convert to Image Box widgets, and the three gift cards convert to Icon Box widgets with heart, star and check icons and the amount as the title.
- The volunteer shift list becomes an Icon List widget with check icons, provided the Icons option is set to match the Elementor icon library.
- The newsletter signup converts to an Elementor Pro Form with a first-name and a required email field. It needs Elementor Pro, and the original action is removed, so set Actions After Submit, such as your email marketing service, after import.
- The hero, story and volunteer photos become Image widgets and the program cards keep empty image slots; select your own photos from the Media Library after import. Partner names are Text Editor widgets in bordered Containers, not logos.
- Below 780px every row stacks to one column, the partner grid drops to two columns and the form fields stack under the newsletter text.
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>Bramwell Community Pantry — groceries for every neighbor</title>
<style>
body{margin:0;font-family:'Nunito Sans',Helvetica,Arial,sans-serif;color:#3b2346;background:#faf6ee}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#3b2346;font-weight:700}
h1{font-size:54px;line-height:1.1;letter-spacing:-.015em;margin:0 0 18px}
h2{font-size:38px;line-height:1.18;letter-spacing:-.01em;margin:0 0 14px}
h3{font-size:22px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.7;color:#6b5b70;margin:0 0 18px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#4f7a3a;margin:0 0 12px}
.button{display:inline-block;padding:15px 28px;border-radius:10px;background:#f2a93b;color:#3b2346;text-decoration:none;font-weight:800;font-size:16px}
.ghost{display:inline-block;padding:14px 26px;border-radius:10px;border:2px solid #3b2346;color:#3b2346;text-decoration:none;font-weight:800;font-size:16px}
.actions{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 26px}
.hero{padding:64px 0 80px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.help{margin:0;padding:16px 20px;border-radius:10px;background:#f6e3d6;font-size:16px;color:#3b2346}
.help a{color:#3b2346;font-weight:800}
.hero-img{width:100%;height:500px;object-fit:cover;border-radius:18px;display:block;background:#f6e3d6}
.head{max-width:660px;margin:0 0 40px}
.programs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:0 0 36px}
.program img{width:100%;height:280px;object-fit:cover;border-radius:14px;display:block;margin:0 0 18px;background:#f6e3d6}
.program p{font-size:16px;margin:0}
.blush{background:#f6e3d6}
.gifts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0 0 30px}
.gift{padding:30px;border-radius:14px;background:#faf6ee}
.gift-icon{display:inline-block;color:#4f7a3a;font-size:24px;line-height:1;margin:0 0 14px}
.gift h3{font-size:26px}
.gift p{font-size:16px;margin:0}
.small{font-size:14px;color:#6b5b70;margin:0 0 24px}
.story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.story-img{width:100%;height:520px;object-fit:cover;border-radius:18px;display:block;background:#f6e3d6}
.dark{background:#3b2346}
.dark h2{color:#faf6ee}
.dark p{color:#f6e3d6}
.dark .eyebrow{color:#f2a93b}
.volunteer{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.shifts{display:flex;flex-direction:column;gap:12px;margin:4px 0 30px}
.shifts > div{display:flex;gap:12px;align-items:center;font-size:17px;color:#faf6ee}
.tick{color:#f2a93b;font-size:16px}
.vol-img{width:100%;height:420px;object-fit:cover;border-radius:18px;display:block;background:#6b5b70}
.partners{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.partner{display:flex;align-items:center;justify-content:center;padding:20px 18px;border:2px solid #f6e3d6;border-radius:12px;background:#faf6ee;text-align:center}
.partner p{margin:0;font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:700;line-height:1.35;color:#3b2346}
.newsletter{padding-top:0}
.news{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding:44px;border-radius:18px;background:#f6e3d6}
.news h2{font-size:32px}
.news p{margin:0}
form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:12px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px}
label{font-size:14px;font-weight:800;color:#3b2346}
input{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #6b5b70;border-radius:8px;background:#faf6ee;color:#3b2346}
.submit{padding:14px 22px;border:0;border-radius:10px;background:#3b2346;color:#faf6ee;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:36px 0 56px}
.hero .wrap,.programs,.gifts,.story,.volunteer,.news,form{grid-template-columns:minmax(0,1fr);gap:24px}
.partners{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
h1{font-size:38px}
h2{font-size:29px}
.hero-img{height:280px}
.story-img{height:320px}
.vol-img{height:260px}
.program img{height:230px}
.news{padding:28px 20px}
.partner p{font-size:16px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Bramwell Community Pantry</p>
<h1>No one in Bramwell should have to skip a meal to pay the rent</h1>
<p>We are a volunteer-run food pantry on Quarrystone Road. Every week we share fresh groceries with families, students and older neighbors across the Corran Valley — no paperwork, no questions about why.</p>
<div class="actions">
<a class="button" href="/donate/">Donate groceries</a>
<a class="ghost" href="/programs/#volunteer">Volunteer with us</a>
</div>
<p class="help">Need food this week? Pantry Market is open Tue 3–7 pm, Thu 10 am–2 pm and Sat 9 am–noon. <a href="/programs/">See hours and locations</a></p>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/volunteers-sorting.jpg" width="1600" height="1000" alt="Volunteers in aprons sorting fresh vegetables into crates at long tables in a bright warehouse">
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">What we do</p>
<h2>Three ways we get groceries to the people who need them</h2>
<p>Most people shop with us at the Pantry Market. For children and neighbors who cannot come to us, we bring the food to them.</p>
</div>
<div class="programs">
<article class="program">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/pantry-market.jpg" width="1200" height="1200" alt="Woman choosing apples and greens from wooden shelves at a community pantry market">
<h3>Pantry Market</h3>
<p>A small grocery store where everything is free. Shoppers choose their own produce, dairy, bread and staples three days a week.</p>
</article>
<article class="program">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/backpacks.jpg" width="1200" height="1200" alt="Volunteers packing cereal, fruit cups and pasta into children’s backpacks on a folding table">
<h3>Weekend Backpacks</h3>
<p>Every Friday, students at six Bramwell schools take home a backpack of easy meals so they are not hungry until Monday.</p>
</article>
<article class="program">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/delivery.jpg" width="1200" height="1200" alt="Volunteer handing a box of groceries to an older woman at her front door">
<h3>Doorstep Delivery</h3>
<p>Volunteer drivers bring a box of groceries every other Friday to neighbors over 60 and anyone who cannot leave home.</p>
</article>
</div>
<a class="ghost" href="/programs/">See all programs</a>
</div>
</section>
<section class="blush">
<div class="wrap">
<div class="head">
<p class="eyebrow">What your gift does</p>
<h2>Every dollar is turned into food within weeks</h2>
<p>We buy in bulk from regional growers and wholesalers, so a small gift stretches a long way.</p>
</div>
<div class="gifts">
<div class="gift"><span class="gift-icon">♥</span><h3>$25</h3><p>Fills one family’s grocery bag with fresh produce, milk, eggs and staples for a week.</p></div>
<div class="gift"><span class="gift-icon">★</span><h3>$50</h3><p>Packs Weekend Backpacks for five children for a month of Fridays during the school year.</p></div>
<div class="gift"><span class="gift-icon">✓</span><h3>$100</h3><p>Covers a month of Doorstep Delivery for two older neighbors, including the fuel for our drivers.</p></div>
</div>
<p class="small">Sample costs for this template — replace them with what each item really costs your organization.</p>
<a class="button" href="/donate/">Give today</a>
</div>
</section>
<section>
<div class="wrap story">
<img class="story-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/family-kitchen.jpg" width="1000" height="1250" alt="Mother and young daughter washing carrots and peppers together at a home kitchen counter">
<div>
<p class="eyebrow">One family’s year</p>
<h2>“We came in for one week. The pantry helped us through the winter.”</h2>
<p>When Ana’s hours at the distribution center were cut last November, the family budget stopped covering groceries. A teacher at her daughter’s school mentioned the Weekend Backpacks, and the next Saturday Ana visited the Pantry Market for the first time.</p>
<p>She shopped with us every week until March, when a full-time job came through. Today she volunteers on Tuesday evenings, helping new shoppers find their way around the shelves.</p>
<p class="small">Name changed at the family’s request.</p>
<a class="ghost" href="/impact/">Read our impact report</a>
</div>
</div>
</section>
<section class="dark" id="volunteer">
<div class="wrap volunteer">
<div>
<p class="eyebrow">Volunteer</p>
<h2>Two hours a month keeps the shelves full</h2>
<p>About 640 neighbors volunteer with us each year. No experience is needed, shifts are short, and you can bring a friend or your whole team.</p>
<div class="shifts">
<div><span class="tick">✓</span><span>Market shifts on Tuesday, Thursday and Saturday</span></div>
<div><span class="tick">✓</span><span>Backpack packing on Wednesday evenings, ages 10 and up</span></div>
<div><span class="tick">✓</span><span>Delivery routes every other Friday, with your own car</span></div>
</div>
<a class="button" href="/programs/#volunteer">Pick a shift</a>
</div>
<img class="vol-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/volunteer-group.jpg" width="1600" height="900" alt="Group of smiling volunteers of different ages standing together in a community hall">
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Our partners</p>
<h2>Local businesses and groups who keep us stocked</h2>
<p>Food donations, delivery vans, warehouse space and volunteer teams all come from neighbors like these.</p>
</div>
<div class="partners">
<div class="partner"><p>Corran Valley Growers</p></div>
<div class="partner"><p>Maple Row Bakery</p></div>
<div class="partner"><p>Bramwell Public Library</p></div>
<div class="partner"><p>Quarrystone Credit Union</p></div>
<div class="partner"><p>Eastbank Neighbors Association</p></div>
<div class="partner"><p>Hollis & Pine Hardware</p></div>
<div class="partner"><p>Bramwell School District</p></div>
<div class="partner"><p>Riverside Dairy Cooperative</p></div>
</div>
</div>
</section>
<section class="newsletter">
<div class="wrap">
<div class="news">
<div>
<h2>One email a month, no more</h2>
<p>Pantry news, volunteer shifts that need filling and the items we are short on this week.</p>
</div>
<form action="#" method="post">
<div class="field"><label for="n-name">First name</label><input id="n-name" name="first_name" type="text" autocomplete="given-name"></div>
<div class="field"><label for="n-email">Email</label><input id="n-email" name="email" type="email" autocomplete="email" required></div>
<button class="submit" type="submit">Sign up</button>
</form>
</div>
</div>
</section>
</body>
</html>
