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

Welcome back!

In part one, we choose a Divi layout and got to work creating the homepage of our charity website. In part 2, we will be creating the internal pages.

If you need to learn more about Divi, you can check out my full Divi review.

Before we create any designs, I decided to change the website structure slightly. The old website had quite a few very weak pages without much content on them. There were also confusing menu items such as ‘Thankyou’ (this was a page about partnerships). The content on these pages would be much better consolidated into other pages, so I decided on these pages for the website:

• Home
• About us
• Dr Arian
• Contact
• Volunteer
• Donate

The first page I needed to get designing was the about us page. I wanted this page to tell the story of the charity and also pull in content that was scattered across other pages on the old website such as testimonials and partnerships.

To start designing the page, I created a new page in WordPress and chose ‘Edit with the Divi Builder’:

I then choose the about us page from the travel agency premade layout pack:

When you choose a pre-made layout, all the styling that was built into that layout was different from the style I established for the homepage. For example, all the fonts were a different typeface and the font sizes were completely different. The colours were different too.

There were also lots of sections I didn’t need in the pre-made layout so I got to work deleting the sections (easily done with a few clicks), and I went into the module settings and set the font styles so that they matched the styles chosen for the homepage.

This left me with a fairly blank slate. I wanted some simple content sections on this page, mainly just an image with text next to it, so I used the insert row button to add some sections with a narrow content area for the image next to a wide content area for the text:

Once I had my sections set up, I copied some content over from the old site. After about 30 minutes of work, I had a page with some simple modules added that contained all the content I needed. I used various rows, testimonials and images to create the page.

All simple stuff. Once I had added the content, I went through each module and changed the design options. This was mainly just changing the typeface, font size and line heights and adjusting the spacing between various elements.

Here’s what my page looked like after some tweaking:

More Internal Pages

Now that the about us page was done, I needed to do the contact page, a volunteer page, a donate page and a page about the founder of the charity, Dr Arian.

These pages were all very simple. I just used the page builder to create rows and used content modules and the contact form module for the forms used on the volunteer and contact pages.

The form module built into Divi is nowhere near the quality of a plugin such as gravity forms, or even contact form 7, but it did the job for now. The most frustrating thing about it for me is that it does not give you the option to style the validation messages. They just show as plain text on the page background so you can barely even notice them.

Divi doesn’t add any CSS classes to allow you to style the success or failure messages differently either. If you make the form redirect after submission instead of showing the ugly messages, the messages still show briefly before the redirect is done. All in all, it’s a very weak module and Divi should do better here.

If you have the time, I’d definitely recommend changing your forms and using a better plugin such as gravity forms.

You can see how these internal pages turned out by visiting arialteleheal.com.

Final Thoughts

Divi made it really quick and easy to create these internal pages. There were some frustrations and you do end up having to do very repetitive tasks over and over again but the main thing is that you can build good looking pages quickly and easily. The contact form module is a disappointment but it will get you started whilst you find the time to upgrade to something better.

Next Steps

In the next post, I’ll talk you through finding the best charity donation plugin for WordPress. This is probably the most important part of the website and the bit most people will struggle with when setting up a charity website, so be sure to check out this post.