Building a Charity Website with Divi – Finishing Touches – Part 4

13th September. Posted in Guides.

Howdy!

This is the final part of this series of blog posts. I hope you’ve enjoyed it so far. If you would like to catch up by reading the previous posts, here they are:

Part 1 – Introduction and homepage setup

Part 2 – Internal Pages

Part 3 – The Donation Plugin

At this point, I already had a nice looking website with a great donation system built into it, but I still had some work to do!

Next up, I needed to improve the website speed, make the website more secure and fix some minor issues with the layout (mainly on smaller screens).

Fixing Layout Issues

The first thing I wanted to fix was the issues with the layout. I was disappointed that the Divi layout I chose for the theme was very poor at adapting to smaller screens. The font sizes did not change to fit smaller screens, the margins between the sections in the layout were far too big and there were lots of sections such as full-width headers where there was no padding to the left and right of the screen on smaller screens.

I really would have expected a modern theme from one of the worlds best all in one website builders to do a better job of responsive layouts to be honest. You can see an example of how poor the layout looked on smaller screens below:

In order to fix these issues, I started off by adding some custom CSS into the theme options in Appearance → Customize. This was fine for a few small issues but when I realised that I would need to add quite a bit of CSS, I knew that I’d need a better solution, so I decided to set up a Divi child theme.

Child themes mean that you can keep your changes to a theme separate from the main theme, so if the main theme ever gets updated, you don’t lose your changes. It is also a neater, simpler way to work and means that you don’t have to mix all your code in with somebody else’s.

Creating a Divi Child Theme

There are quite a few ways to create a child theme including:

  • Manually creating the child theme folder and files
  • Using an online child theme generator
  • Using a plugin
  • Downloading a pre-made child theme

I wanted a completely blank slate for my child theme and I wanted to get started quickly, so I choose to use a plugin to generate my Divi child theme. The plugin I used was called Child Theme Wizard.

I simply installed the plugin and navigated to Tools → Child Theme Wizard and entered the details for the theme:

Once this was done and the theme was activated, I could now add my own CSS to the style.css file within the child theme.

Adding My Own CSS

At this point, you may have noticed that things are getting more complicated than you may have expected. The whole point of an all in one theme like Divi is that you don’t need to know any code, but here I am, about to tell you how I added a load of CSS to make the website look better.

Unfortunately, this is an issue with all the multipurpose themes I’ve worked with. They are fine when you stick to pre-made layouts and don’t change much but you can quickly run into issues when something doesn’t work quite right. When that happens, it can be very frustrating and it can be very useful to have basic web development skills.

So, to fix the layout issues I had, I opened the style.css file within the child theme. I personally chose to download the file using FTP and edit on my computer so that I could use my usual text editor. You could also choose to edit the file via WordPress though by going to Appearance → Theme Editor and choosing the CSS file to edit there.

This is where it becomes useful to know some basic CSS and have some web dev skills. I went through the site and found issues with the layout then used the inspect tool in my browser to find the code I needed to override in my CSS file. This didn’t take too long but for users with no web development experience, this step is likely to be quite difficult and the Divi support team would be the best people to ask to help you fix any issues you may have with your own website.

Speeding Up the Website

All in one-page builders have a reputation for being slow and cumbersome and from looking at the bloated code within the Divi theme I was quite worried that the performance would never be as good as I wanted it to be. I was pleasantly surprised to be able to achieve a good page speed on the website though with minimal work.

All I did to increase the page speed for the website was to choose a good host (Siteground) and install the awesome W3 Total Cache plugin. I’ve already written a guide on speeding up your website, so please check that out if want to know how to configure the W3 Total Cache plugin.

This is the result of the speed test in GT Matrix after taking 10 minutes to install and configure the plugin (the original page score was a D):

The only thing letting the website down was the ability to serve scaled images which was scored as an F. This is something the theme should take care of so it is another disappointment with Divi. Overall though, I was happy with the score.

Summary

That brings me to the end of this overview of how I set up a real charity website with Divi. The owners of the website were happy with the end results and the website is far more effective than the previous one so overall this was a great success for the Divi WordPress theme.

My experience of using Divi was overall a good one, but it definitely helped having development skills to fix minor issues.

I would certainly recommend Divi to anyone who wants to build a modern website quickly and easily. The more you stick to the pre-made layouts, the easier your experience will be. I’d only recommend changing things a lot if you have web development skills.

Even though Divi is great, I’d love to see the theme improve in a few ways. Here’s a few of the things that bugged me during this project:

  • The mobile menu is very poor. Divi should include some modern alternative menu styles for mobiles.
  • The visual editor can be very slow and buggy, please improve this!
  • The responsive layouts were very poor and you could tell that there was little time dedicated to their design on the page template I chose. This is unacceptable at a time where many websites have just as many if not more mobile visitors than desktop visitors.

So that wraps up this series on making a real website with Divi. You can read my full review of the Divi theme too. I’d be interested in hearing your thoughts on this series, so please comment below.

We hope you’ve found this Divi theme review helpful. We are a part of Elegant Themes’ affiliate program. If you decide to try Divi after following one of the links on this page, we will get a small commission at no extra cost to you. Our participation in this program does not alter our opinion of this theme.

Get Your Copy of Divi

There are no comments yet.

Leave a Comment

Your email address will not be published. Required fields are marked *