Building a Charity Website with Divi – A Real World Example – Part 1

I’m going to show you step by step how I built a great charity website using the Divi WordPress theme for a real charity company.

This will be quite a long process so I’ll be splitting it up into multiple posts. I hope you enjoy these posts and they help you learn the ins and outs of the Divi theme.

Id you need to learn more about Divi, you can check out my full Divi theme review too.

Anyway, let’s get started!

Why Divi?

Before we get started on the details, I need to explain why we would use Divi at all. The main reason is time saving. Many smaller charities don’t have budgets for large, complex web builds and many charities are run by individuals trying to make a difference in the world. Divi provides a great framework to build a good website quickly and cheaply, but there are lots of pitfalls you could fall into along the way.

Divi sure isn’t perfect and I’d choose a custom design and build in an ideal world but that doesn’t mean that you can’t get great results with an off the shelf theme. The premade layouts Divi provides are very high quality, but you will need to spend quite a bit of time learning how Divi works.

Setting Up

Before we do anything, we will need somewhere to host our website. If you already have hosting, great. If not, then I recommend Siteground as the perfect host for this kind of website. You can read about why I recommend Siteground in my post on cheap WordPress hosting and you can learn how to set your website up on Siteground in this post.

I would always recommend some kind of testing website too, so once your website is live you can make changes on your test website without breaking your live website. You could do this on your hosting by setting up a subdomain such as testing.yourdomain.com and setting everything up just like you did with the live website, or you could set up a local host. This takes more knowledge but this handy video will show you how it is done:

The next thing you will obviously need is a copy of Divi. Currently, Divi costs just $89 per year. You’ll get a powerful all in one theme and great support for that price. You can use the theme for unlimited websites and you can keep it forever, even if you don’t renew your membership. You really can’t go wrong with this theme.

From this point on, I’m assuming that you have got hosting set up, and you’ve got WordPress and Divi installed on your website.

Project Background

As this is a real world project, we need something to base it on. I’ll be making a website for Arian Teleheal, a charity run by the inspirational Dr Waheed Arian. Arian Teleheal provides medical support using technology to medics in war zones and low resource countries. It is common for medics in war zones to have very little support from world-class medical professionals as it is too dangerous for doctors to reach them.

Waheed has developed innovative ways that he and his supports can provide help. I’m sure you’ll agree that this is a great charity and they deserve an awesome website.

The charity already has a logo and an existing website. I won’t have any control of the branding and most content will be taken from the current website. Here’s a peek at the current website:

Believe it or not, this website was created by a professional company.

It has many basic usability issues and messy, unprofessional design. It could be improved a great deal.

We should also be able to make it much easier to edit the website. The current one uses the 123-reg website builder so WordPress will be far more feature rich and easier to use.

A quick glance at the old website made me think of the following improvements that could be made:

• Add a relevant hero area to the top that helps show what the website is about
• Fix the spacing issues that appear all over the website
• Tidy up the navigation and branding so it is neater and doesn’t take up so much of the screen
• Use images and videos to better explain the charity
• Communicate why people should donate and make it easier to do so
• Fix basic design issues such as the messy logos in the ‘as seen on’ section

Choosing a Template

Our first main job and one of the most fun parts is choosing a pre-made layout from Divi.

First, create your homepage by going to Pages > Add New and save your page.

Then click the button that says ‘Use Divi Builder’. This is where the fun (and frustration) begins!

You’ll see a page that asks you how you want to build your layouts. Choose the use premade layout option:

You’ll then see a page with lots of awesome pre-made layouts for you to choose from:

Now as this is a charity website you may be tempted to stick to the community and non-profit category but there are lots of templates to choose from that may be more suitable. You need to have a vision in your head of how your website will look.

Think about what the most appropriate look and feel would be for your audience and the message you are trying to convey. Check out some of your competitors and see what styling they use. You may want to find a similar style, or something completely different.

The advantage of using these pre-made layouts is that they are very current and up to date with modern trends. If you don’t have design experience then there is no point in trying to reinvent the wheel. Just choose the one you think will work and play around with it.

After experimenting with a few layouts myself, I chose the travel agency layout. Obviously, the demo is a completely different niche but I knew the general style and layout would work well with a few tweaks here and there.

Here’s an example of the travel agency default hero area:

And here’s an example of my header changes in progress:

This is still early days but the look and feel is more appropriate and it’s a good start.

The changes I made to get here are:

• Changed the logo by going to Divi theme options in WordPress
• Changed the background image by using the Divi builder
• Changed the default button and typography options by going to Divi > Theme Customizer in WordPress
• Changed the text and buttons again in the front end builder. Each title and button can have its own style so you need to edit each one to make it look like the defaults you set in the Theme Customizer. This is where the frustration comes in that I mentioned earlier!

For you to make your own changes, I recommend trial and error. Once you are used to the front end builder it’s pretty easy to change things, but it might feel frustrating until you learn where the various options are.

Next Steps

To get the homepage looking better, I added some photos, changed the menu and added some placeholder empty pages, removed some sections I didn’t need and placed more content from the current site into the new one. I then spent some time with smaller tweaks like adding padding to the buttons and making them the same size so that things look neater.

After a few hours of tinkering, this is what I had:

Summary

After a few hours of work, I had a nice looking homepage that I thought would be great for this charity. The design was coming together nicely and I was enjoying using the Divi editor even though I did have some frustration finding certain options in the modules.

Next Steps

There is still a lot of work to do but things are coming along nicely. My jobs for the next posts in this series are:

• Layouts for all internal pages
• Building a great donation system
• Improving speed and security

Stay tuned and keep an eye out for the next posts in the series!