Download Caridad - Charity WordPress Theme

Two anchors only (per requirement)

• Explore layout references and category patterns → Blog WP Template
• Theme page for hands-on testing and build notes → Caridad - Charity WordPress Theme

Orientation: what donors need in one scroll

People don’t visit a charity site to be impressed by motion; they’re looking for certainty. On the first scroll, answer three questions without drama:

1) What problem are you solving and where? (mission clarity)
2) What will my gift do? (impact and timeframe)
3) How do I give right now? (short path to donate or volunteer)

Treat Caridad - Charity WordPress Theme as your presentational baseline and add boring, reliable engineering: predictable templates, server-first validation, and a field performance budget. We’ll reference Caridad - Charity WordPress Theme again when we pin the first fold, sketch program cards, and finalize the donation path.

Style mix: #7 技术方案书（Engineering Playbook） + #3 案例拆解（Case Study Lite） for how-to plus proof.

What “good” looks like for a charity homepage

• Donation-first fold: One-line mission, one-line qualifier (“Local partners • Monthly reports”), and a single primary CTA: Donate.
• Impact cards: 3–6 programs; each shows a metric chip (“125 families/month”), geography, and a plain-English sentence.
• Trust & governance: board snapshot, annual report link later on page, privacy note near the form.
• Volunteer path: short intake first (name/email/role), long form later; upcoming dates visible.
• Performance (field): LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 on home/donate/volunteer/contact.
• Accessibility: keyboardable forms, visible focus, 4.5:1 contrast, descriptive labels, and error messages that explain fixes.
• Rollback plan: every third-party widget ships with an owner, a metric, and a kill switch.

Quick-start checklist (pin this before you decorate)

• [ ] Mission + subline + Donate above the fold; no carousel, no auto video.
• [ ] Hero image is still, sized (width/height), fetchpriority="high".
• [ ] Program cards with consistent 4:3 images and one metric chip.
• [ ] Donation form: preset amounts + custom; monthly toggle; inline server-validated errors.
• [ ] Reassurance near button: “Secure processing • Instant receipt by email.”
• [ ] Volunteer intake: short-first; dates next to the form.
• [ ] Policies close to decisions: fee coverage note, data privacy microcopy.
• [ ] Critical CSS ≤ ~15 KB inline; analytics/chat load on interaction.
• [ ] Field LCP/INP/CLS monitored per template; Android mid-range segmented.
• [ ] Governance snapshot: board, recent report, “how funds are used” in plain text.

Tutorial: from blank install to donation-ready in five moves

Move 1 — Freeze the tokens (layout rhythm you can defend)

Decide container, spacing, and type steps. Tokens keep components from drifting.

:root{
  --container: 1200px;
  --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --step-0: clamp(1rem, 0.9rem + 0.6vw, 1.125rem);
  --step-1: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-4)}
.section{padding:var(--space-8) 0}
.u-stack>*+*{margin-top:var(--space-4)}
h1{font-size:var(--step-1);line-height:1.2;letter-spacing:-0.01em}

Move 2 — Compose the first fold (decisive, honest)

One message, one action, one reassurance. No sliders; they burn trust and CLS.

<section class="hero container u-stack">
  <h1>Together, we turn donations into meals and medicine</h1>
  <p>Local partners • Transparent reports • Results you can track</p>
  <div class="actions">
    <a class="btn" href="/donate">Donate</a>
    <a class="btn-ghost" href="/volunteer">Volunteer</a>
  </div>
  <p class="micro">Secure processing • Instant email receipts</p>
  <img src="/media/hero-1200x675.webp" alt="Volunteers delivering food"
       width="1200" height="675" fetchpriority="high" decoding="async" loading="eager">
</section>

Closing

Clarity raises funds. Treat your theme as a quiet, stable baseline; your discipline turns it into a site that converts attention into action. Keep the first fold decisive, the forms respectful, and the copy concrete. That’s how a calm page—and a careful build—delivers outsized impact.