Website kits
Nonprofit programs page
Programs page for four food programs, each with who it serves, how to get help, schedule and location, and volunteer roles, plus a volunteer sign-up form.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page a person in a hard week opens to find out whether they qualify and where to go, so every program answers the same four questions in the same order: who it serves, how to get help, when and where, and how to volunteer for it. Keeping that order identical across all four programs means a reader who learns the pattern on the first one can scan the rest in seconds. A dark panel at the top gives a phone number for anyone who needs food today, before any program description. A volunteer form closes the page, so the Volunteer buttons on the home page and inside each program all lead to one place. Replace the schedules and addresses first and keep them identical to the footer and home page. Write the eligibility lines plainly — say “no income test” if there is none — because uncertainty about qualifying stops many people from asking for help at all.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 34
- Container (grid) × 6
- Container (grid, 4 columns) × 4
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 28
- Heading × 23
- Button × 5
- Image × 4
- Icon List × 5
- Form × 1
Things worth knowing
- Each program converts to a Container with an Image widget, a Heading and Text Editor widgets, followed by four fact cards; the schedule lines in each When and where card become an Icon List widget, five Icon Lists in total with the volunteer steps.
- The fact cards mix a heading, text and a list or button, so they stay as Containers rather than Icon Boxes, which keeps every line editable on its own.
- The volunteer sign-up converts to an Elementor Pro Form with six fields (text, email, tel, two selects with their options and a textarea) and keeps the labels. It needs Elementor Pro; set Actions After Submit after import.
- Section IDs such as volunteer and market become CSS IDs with a short prefix the converter adds (for example hte-1a2b3c4d-volunteer), and the in-page links are rewritten to match, so the four shift buttons still jump to the form; the Call button keeps its tel: link.
- Below 780px each program stacks photo, intro and then the four fact cards in one column.
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>Programs — Bramwell Community Pantry</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:72px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#3b2346;font-weight:700}
h1{font-size:52px;line-height:1.1;letter-spacing:-.015em;margin:0 0 18px}
h2{font-size:36px;line-height:1.18;letter-spacing:-.01em;margin:0 0 14px}
h3{font-size:19px;line-height:1.3;margin:0 0 10px}
p{font-size:17px;line-height:1.7;color:#6b5b70;margin:0 0 16px}
.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:10px 18px;border-radius:10px;border:2px solid #3b2346;color:#3b2346;text-decoration:none;font-weight:800;font-size:15px}
.intro{padding:64px 0 72px}
.intro .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.need{padding:32px;border-radius:18px;background:#3b2346}
.need h2{font-size:28px;color:#faf6ee}
.need p{color:#f6e3d6;font-size:16px}
.need .button{margin-top:6px}
.blush{background:#f6e3d6}
.top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:48px;align-items:center;margin:0 0 36px}
.prog-img{width:100%;height:380px;object-fit:cover;border-radius:18px;display:block;background:#f6e3d6}
.blush .prog-img{background:#faf6ee}
.top p{margin:0}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.fact{padding:24px;border:2px solid #f6e3d6;border-radius:14px;background:#faf6ee}
.fact p{font-size:15px;line-height:1.65;margin:0 0 14px}
.fact p:last-child{margin:0}
.times{display:flex;flex-direction:column;gap:8px;margin:0 0 14px}
.times > div{display:flex;gap:10px;align-items:baseline;font-size:15px;line-height:1.5;color:#3b2346}
.dot{color:#4f7a3a;font-size:10px}
.dark{background:#3b2346}
.dark h2{color:#faf6ee}
.dark p{color:#f6e3d6}
.dark .eyebrow{color:#f2a93b}
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:start}
.steps{display:flex;flex-direction:column;gap:12px;margin:8px 0 0}
.steps > div{display:flex;gap:12px;align-items:baseline;font-size:17px;line-height:1.5;color:#faf6ee}
.tick{color:#f2a93b;font-size:16px}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;padding:32px;border-radius:18px;background:#faf6ee}
.field{display:flex;flex-direction:column;gap:6px}
.full{grid-column:1 / -1}
label{font-size:14px;font-weight:800;color:#3b2346}
input,select,textarea{font:inherit;font-size:16px;padding:12px 14px;border:1px solid #6b5b70;border-radius:8px;background:#faf6ee;color:#3b2346}
textarea{min-height:100px;resize:vertical}
.submit{grid-column:1 / -1;justify-self:start;padding:15px 28px;border:0;border-radius:10px;background:#f2a93b;color:#3b2346;font:inherit;font-size:16px;font-weight:800;cursor:pointer}
@media(max-width:780px){
section{padding:52px 0}
.wrap{padding:0 16px}
.intro{padding:36px 0 52px}
.intro .wrap,.top,.join,form{grid-template-columns:minmax(0,1fr);gap:24px}
.facts{grid-template-columns:minmax(0,1fr);gap:14px}
.top{margin:0 0 24px}
h1{font-size:38px}
h2{font-size:29px}
.prog-img{height:250px}
.need{padding:26px 20px}
form{padding:24px 18px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<div>
<p class="eyebrow">Our programs</p>
<h1>Four ways to get groceries, and four ways to help</h1>
<p>Every program is free and open to anyone in Bramwell and the Corran Valley. Choose the one that fits your week — and if you would rather give your time, each program says which volunteer shifts keep it running.</p>
</div>
<div class="need">
<h2>Need food today?</h2>
<p>Call or text us and we will tell you the nearest open pantry, even if it is not ours. Lines are answered Monday to Saturday, 9 am to 5 pm.</p>
<a class="button" href="tel:+15550184470">Call (555) 018-4470</a>
</div>
</div>
</section>
<section class="blush" id="market">
<div class="wrap">
<div class="top">
<img class="prog-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">
<div>
<p class="eyebrow">Groceries · three days a week</p>
<h2>Pantry Market</h2>
<p>A free grocery store set up like any small market. Shoppers take a cart and choose what their household will actually eat, from fresh produce, milk, eggs and bread to rice, beans and cooking oil.</p>
</div>
</div>
<div class="facts">
<div class="fact">
<h3>Who it serves</h3>
<p>Any household living in Bramwell or the Corran Valley. There is no income test, and every household can shop once a week.</p>
</div>
<div class="fact">
<h3>How to get help</h3>
<p>Come in during open hours. On your first visit bring something with your address on it — a bill or a letter is fine — and we register you in about ten minutes.</p>
</div>
<div class="fact">
<h3>When and where</h3>
<div class="times">
<div><span class="dot">●</span><span>Tuesday 3:00–7:00 pm</span></div>
<div><span class="dot">●</span><span>Thursday 10:00 am–2:00 pm</span></div>
<div><span class="dot">●</span><span>Saturday 9:00 am–noon</span></div>
</div>
<p>75 Quarrystone Road, side entrance. Step-free access.</p>
</div>
<div class="fact">
<h3>Volunteer for it</h3>
<p>Stock shelves, greet shoppers or help at checkout. Shifts last two and a half hours; ages 14 and up.</p>
<a class="ghost" href="#volunteer">Market shifts</a>
</div>
</div>
</div>
</section>
<section id="backpacks">
<div class="wrap">
<div class="top">
<img class="prog-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">
<div>
<p class="eyebrow">For school children · Fridays</p>
<h2>Weekend Backpacks</h2>
<p>Kid-friendly food that needs no cooking skills — cereal, shelf-stable milk, fruit cups, peanut-free snacks and two simple dinners — packed in a plain backpack so no child stands out from their classmates.</p>
</div>
</div>
<div class="facts">
<div class="fact">
<h3>Who it serves</h3>
<p>Students at Bramwell’s six elementary and middle schools whose families ask for it, through the school year.</p>
</div>
<div class="fact">
<h3>How to get help</h3>
<p>Tell your child’s teacher or school counselor, or call us. Sign-up is confidential, and the backpack goes home with your child every Friday.</p>
</div>
<div class="fact">
<h3>When and where</h3>
<div class="times">
<div><span class="dot">●</span><span>Packed Wednesday 5:30–7:30 pm</span></div>
<div><span class="dot">●</span><span>Delivered to schools Thursday</span></div>
<div><span class="dot">●</span><span>Sent home Friday afternoon</span></div>
</div>
<p>Packing takes place at 75 Quarrystone Road.</p>
</div>
<div class="fact">
<h3>Volunteer for it</h3>
<p>Join the Wednesday packing crew. Children 10 and up are welcome with an adult, so it is a popular family shift.</p>
<a class="ghost" href="#volunteer">Packing shifts</a>
</div>
</div>
</div>
</section>
<section class="blush" id="delivery">
<div class="wrap">
<div class="top">
<img class="prog-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">
<div>
<p class="eyebrow">For older and homebound neighbors</p>
<h2>Doorstep Delivery</h2>
<p>A box of produce, dairy and staples delivered every other Friday, by the same volunteer driver each time, so neighbors get to know who is knocking — and the driver notices if something is wrong.</p>
</div>
</div>
<div class="facts">
<div class="fact">
<h3>Who it serves</h3>
<p>Residents aged 60 and over, and adults of any age who cannot get to the pantry because of illness, disability or caring duties.</p>
</div>
<div class="fact">
<h3>How to get help</h3>
<p>Call (555) 018-4470 and ask for delivery. A relative, social worker or neighbor can sign someone up on their behalf.</p>
</div>
<div class="fact">
<h3>When and where</h3>
<div class="times">
<div><span class="dot">●</span><span>Every other Friday</span></div>
<div><span class="dot">●</span><span>Between 10:00 am and 2:00 pm</span></div>
<div><span class="dot">●</span><span>We call the day before</span></div>
</div>
<p>Routes cover Bramwell and the Corran Valley townships.</p>
</div>
<div class="fact">
<h3>Volunteer for it</h3>
<p>Drivers need a car, a valid license and two hours every other Friday. Each route has six to eight stops.</p>
<a class="ghost" href="#volunteer">Become a driver</a>
</div>
</div>
</div>
</section>
<section id="mobile">
<div class="wrap">
<div class="top">
<img class="prog-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/nonprofit/distribution-day.jpg" width="1600" height="1000" alt="Volunteers handing out bags of produce from folding tables to neighbors in a parking lot on a sunny morning">
<div>
<p class="eyebrow">Pop-up markets · monthly</p>
<h2>Mobile Pantry</h2>
<p>Once a month our truck sets up a pop-up market in three neighborhoods that are a long bus ride from the warehouse. Same food, same free choice, and no sign-up at all.</p>
</div>
</div>
<div class="facts">
<div class="fact">
<h3>Who it serves</h3>
<p>Anyone who comes. Mobile Pantry has no registration and no address check, so it is a good first step if you are unsure.</p>
</div>
<div class="fact">
<h3>How to get help</h3>
<p>Bring a bag or a cart if you can and arrive any time in the two-hour window. We plan quantities from last month’s visits, so arriving later is fine.</p>
</div>
<div class="fact">
<h3>When and where</h3>
<div class="times">
<div><span class="dot">●</span><span>1st Saturday · Hillcrest Library lot, 10 am–noon</span></div>
<div><span class="dot">●</span><span>2nd Wednesday · Eastbank Community Center, 4–6 pm</span></div>
<div><span class="dot">●</span><span>3rd Thursday · Pine Hollow Apartments, 4–6 pm</span></div>
</div>
</div>
<div class="fact">
<h3>Volunteer for it</h3>
<p>Set up tables, carry crates and pack bags. Mobile shifts last three hours, including setup and pack-down.</p>
<a class="ghost" href="#volunteer">Mobile Pantry shifts</a>
</div>
</div>
</div>
</section>
<section class="dark" id="volunteer">
<div class="wrap join">
<div>
<p class="eyebrow">Volunteer</p>
<h2>Give two hours, take home a good afternoon</h2>
<p>Tell us which program interests you and when you are free. Groups from workplaces, schools and faith communities are welcome — mention it in the form.</p>
<div class="steps">
<div><span class="tick">✓</span><span>Send the form — we reply within three working days</span></div>
<div><span class="tick">✓</span><span>Join a 20-minute orientation, any Tuesday at 6 pm</span></div>
<div><span class="tick">✓</span><span>Book your shifts and swap them when life gets busy</span></div>
</div>
</div>
<form action="#" method="post">
<div class="field"><label for="v-name">Full name</label><input id="v-name" name="name" type="text" autocomplete="name" required></div>
<div class="field"><label for="v-email">Email</label><input id="v-email" name="email" type="email" autocomplete="email" required></div>
<div class="field"><label for="v-phone">Phone</label><input id="v-phone" name="phone" type="tel" autocomplete="tel"></div>
<div class="field"><label for="v-program">Program</label><select id="v-program" name="program"><option>Pantry Market</option><option>Weekend Backpacks</option><option>Doorstep Delivery</option><option>Mobile Pantry</option><option>Wherever help is needed</option></select></div>
<div class="field full"><label for="v-when">When are you usually free?</label><select id="v-when" name="availability"><option>Weekday mornings</option><option>Weekday afternoons</option><option>Weekday evenings</option><option>Saturdays</option><option>It varies</option></select></div>
<div class="field full"><label for="v-notes">Anything we should know? (group size, access needs, school service hours)</label><textarea id="v-notes" name="notes"></textarea></div>
<button class="submit" type="submit">Send my details</button>
</form>
</div>
</section>
</body>
</html>
