Build a Nonprofit Website [Step-by-Step Guide, Templates, Examples]

The internet is filled with advice on how to build a nonprofit website. People will tell you, you MUST have this feature or this type of design, or “this is what really matters.” The reality is you need to pick something that fits your needs and budget.

If you’re looking to refresh your nonprofit website or you’re building one from scratch, we got you. At Slam Media Lab, we’ve helped dozens of nonprofits build award-winning websites that serve their needs, from accepting donations to hosting courses and resources, to growing a community. 

We’ll walk you through what are the must-haves for your site, why it’s important, and include templates and examples. Plus, we’ll include nonprofit SEO tips, so you are optimized for search engines from day one! Read on.

How to Create a Nonprofit Website: Planning & Prep

Putting together a list of items you need to collect before creating the website for your nonprofit will save you a lot of time. Before picking a template or building it, at Slam, we ask the following questions:

1. What are the goals of my website?
2. Who’s my target audience?
3. What are websites I really love, content-wise and design-wise? Why?
4. What are websites I really dislike, content-wise and design-wise? Why?
5. What are the best platforms, website builders, or content management systems that fit my needs? How much do they cost?

Let’s go over each!

Goals for Your Nonprofit Website Build

The most common goals and call-to-actions from our nonprofit clients include:

• Getting more donations
• Growing its email list and following
• Sharing resources that are helpful to their community
• Spreading awareness of topics that are relevant to its mission
• Find partners in the work

You’ll likely fall under this category.

Target Audience for Your Nonprofit

This one should be straightforward. You already know the answer. The question is: do you have multiple audiences? This is normal.

Take one of our clients – Peer Health Exchange (PHE). PHE is a national nonprofit creating healthier communities for young people. Their primary audience is young people, but they also work with schools to give them health education resources. Their site is designed for youth by youth and it has also pages for schools and other organizations to partner with them.

‍

This means that when you’re creating a website for your nonprofit organization, you need to lay out a sitemap to help you figure out what pages you need, and how they’ll be structured. Having this sitemap will also help you get quotes from nonprofit marketing agencies faster because they’ll have an idea on how long it’ll take.

Nonprofit Websites You Love & Dislike

As part of Slam’s web design process for nonprofits, we have all of our clients complete our brand discovery guide, where they complete multiple sections. We have them answer prompts like:

1. Finish this sentence: As a visitor of [nonprofit website name] site, I should feel…
2. What are the 3 most important feelings/values you want to communicate with the nonprofit website?
3. What are 3 examples of nonprofit websites you like the design?
4. What are 3 examples of nonprofit website you dislike the design?
5. List 3 examples of icons or illustrations you like
6. List 3 examples of icons or illustrations you do not like
7. List 3 examples of websites with content/structure that you like
8. List 3 examples of websites with content/structure that you do not like

‍

We go a step further and ask them about their nonprofit TikTok and nonprofit Instagram strategy and what examples they love! Questions include:

• List 3 examples of branded TikTok videos that you like
• List 3 examples of branded TikTok videos that you do not like
• List 3 examples of social media graphics (Instagram, Twitter, Linkedin) that you like
• List 3 examples of social media graphics (Instagram, Twitter, Linkedin) that you do not like

Best Website Platform, Builder, & CMS for Nonprofits

Our recommendation for the best nonprofit website platform, builder, and CMS is Webflow.

As opposed to platforms like WordPress, using Webflow as your website builder will require you almost no plugins and can accomplish a lot without purchasing extra features. Plus, Webflow is really great for SEO because sites load so much faster without these plug-ins.

What about Wix, Weebly, and Squarespace? The issue with Wix and Squarespace is the low customization and very slow sites.

Here are some of the benefits of using Webflow as your nonprofit CMS:

1. Optimized for mobile experience. You can design and develop directly on Webflow and view how it looks like on mobile, desktop, and tablet.  
2. A fast site with quick load time. Important for SEO and experience of your users. Webflow sites are quick to load because don’t require a million plug-ins.
3. An easy to use website. Overwhelmed by how ugly WordPress’ back-end can be and how long it’s taking you to make a new landing page or edit some copy? Webflow is perfect for marketing teams and for nonprofits with no marketing staff because with their Editor mode, you can make changes to the copy directly on the page while you see the design.
4. A solution that scales with you. Use a site that adapts and scales with your new reality. Nonprofits add new programs and add chapters all the time. With Webflow’s features and collections, you can make site-wide changes in a couple of seconds. No need to manually add things to each page.
5. SEO that works. Most of the features you need to optimize as you build your nonprofit website are already built into Webflow natively. From metas to OpenGraph fields, to creating a sitemap, 301 redirects, and adding alt-text, you can do it without spending extra money.
6. A powerful nonprofit CMS. Webflow uses “Collections” or custom database of information to map out your site. These can be referenced anywhere and automatically update if you add new stuff in it

When it comes to pricing, Webflow has nonprofit templates that can range from $39 to $99. Slam built one that has the most requested nonprofit features and pages and costs $79:

1. Home
2. About (Mission, Vision, Staff, Board)
3. Resources Hub and Template
4. Blog Hub and Template
5. Donate
6. Contact

If you’re looking for something customed, we can help too. We helped NCW Tech Alliance and Microsoft launch their new program Community Upskilling, which helps workers upskill for the future of work. Their nonprofit’s website goal was to get folks to participate in their courses and competition. Plus, they targeted Spanish speakers so we built a translation feature within Webflow. 

We ended up designing a nonprofit website that had the competition infrastructure for Upskill-a-thon 2022, allowing 1000+ participants to upskill and compete for cash prizes. We also automated all their logistics with our Airtable Webflow integration.

If you’d like to partner with Slam, book time with us below for a free 30-minute session:

What’s Next After Prep?

Now decide whether you want to do it yourself or hire a team to help you! Plus:

1. Figure out your exact budget
2. Finalize your sitemap
3. Get stakeholders to agree on your strategy
4. Plan your timeline
5. Start executing!

Before you get rolling, we’ll break down what your nonprofit website must have and what are some nonprofit website best practices.

Setting Up Nonprofit Website Must-Haves

We talked about this earlier. Many clients, friends, partners asks us “What should my nonprofit website include?” Our answer is that your site could have a million features so you have to prioritize based on your budget.

Creating a Nonprofit Website Technical Checklist

Here’s a checklist of what you should have as you create a nonprofit website:

1. A beautiful design that resonates with your audience. Don’t just make it pretty. Make it pretty for them.
2. Simple user experience. Make it easy for your users to get what they need
3. Copy that moves you. Most copywriting sucks. People use words like “best” and “most X” very lightly. They’re merely expressions. Use copy that is specific, makes claims, and brings the curiosity of your users. Everyone wants a secret gift.
4. Fast loading website. No one wants to spend 10 seconds waiting for a site to load. Let’s make it right from day 1.
5. Optimized for SEO. People are googling your resources. Let them find you with a site that is optimized with keywords.
6. Ensure is ADA accessible. No need to comment on this one :). Make the site inclusive so everyone can get a great experience from it.

Creating a Nonprofit Website Pages Checklist

The most requested pages that we build for nonprofits are:

• Home
• About (Mission, Vision, Team, Board)
• Blog Home (ability to search)
• Blog Template
• Partners
• Resources Home
• Resources Template
• Programs Home
• Program Template
• Chapters Home
• Chapters Landing Page
• Volunteer
• Donate
• Contact

Hopefully this helps you create your sitemap! And now that you know what you need, let’s jump into how to create a nonprofit website. We’ll cover the paid and free options.

How to Create & Build a Nonprofit Website

To start building your nonprofit website, you’ll need to:

1. Create a mood board of all the inspo you got from the brand discovery exercise
2. Decide your final sitemap
3. Create content outlines and wireframes on the different sections you have per landing page. Make sure each section has link to others so there aren’t orphan pages
4. Use your brand discovery guide, mood board, and existing brand to mock-up one page. Ideally the homepage
5. Get feedback from your team and build out the rest of the pages
6. Start building your site on your preferred CMS and website builder
7. Add meta titles, meta descriptions, alt texts, and OpenGraph images to each page
8. Integrate your softwares (Salesforce, Donation tools)
9. Set-up Google Business, Google Search Console and Google Analytics
10. Transfer your content to the new site
11. QA the site
12. Set-up the DNS
13. Launch and spread the word
14. Index your new sitemap and website to Google Search Console!

This is exactly the process we use at Slam! And if you use Webflow, you won’t need to add plug-ins to your site. It’ll be so much smoother.

If you’d like to partner with us to build an award-winning nonprofit website, fill out our form and we’ll be in touch within 48 hours.

Free Website for Nonprofit

Now, some of you don’t have a big budget to do all of this. Our recommendation is to buy a template! Unless you have a lot of time and resources, creating a nonprofit website on your own can be quite challenging, especially if you don’t have a lot of design and dev experience.

Templates on Webflow can cost $39-$99. Setting it up is quite easy, especially with a lot of documentation provided by Webflow University and the seller of the template.

At Slam, we can help you out with that, too, at a flat fee! We've developed a nonprofit website template with marketing experts to help you launch a fully-optimized website we know you will love! 

Get started on building your award-winning website with our Nonprofit Website Template! 

Ready to Build Your Nonprofit Website?

You don’t have to do this alone. At Slam, we’ve helped nonprofits perfect their websites and win awards while we’re at it! Book time with us for a free 30-minute strategy session.

‍