I like to keep web design simple so I pick a theme that gives me total control over page layout and functionality, customise the look of the site using custom CSS and don’t make any changes to the theme’s PHP files… well hardly any.
I use the Divi theme because it has a great Page Builder, which allows you to create pages using a simple drag and drop interface, no coding required, and it allows you to add just about any functionality you can think of using more than thirty Divi Modules.
It also comes with a great customiser, which is where I start my customisation.
For me customisation is a three step process:
- Use the Divi customiser – customise the overall appearance of your site including header, navigation, colours and fonts using Divi’s built-in customiser.
- Add your own custom CSS – make additional CSS changes and save the CSS in your ePanel or use the Simple Custom CSS plugin.
- Make complex changes with the Divi Booster – for more complex changes use the Divi Booster plugin.
I don’t use a child theme, for reasons I’ll explain later, and because all my customisation is saved via the Divi theme or plugin database tables, I don’t lose any changes when I update my theme.
My Affiliate Links Disclosure
Hi everyone. Just to let you know that many of the links on this site are my affiliate links. What that means is that if you click one of them and buy something… I get a commission. It doesn’t cost you anything extra and I only recommend things that I’ve tried and tested, so please, please, please… use my links.
Start your customisation with the Divi theme customiser
We all know about Divi’s fabulous Page Builder, but don’t forget that it also has a powerful customiser.
The customiser is where you should start your customisation and you’ll find it from your WordPress dashboard via Appearance > Customize which will launch the Divi Customiser and give you access to all the Divi settings.
The customiser allows you to customise your header, navigation, colours, fonts and lots more.
This short video shows you all that you need to know about the Divi customiser and gives you a few ideas on how to use it:
Find, change and save your own custom CSS
The Divi customiser does all the customisation heavy lifting, but there are always additional aspects of your site that you want to change… that’s when you need to add your own custom CSS.
To make the CSS changes you need to find the CSS you want to modify, make the changes and then save those changes to make them permanent.
Find the CSS you want to modify and make the changes
Fortunately there are a few tools that you can use to help you find the CSS that you need to change and to see what effect those changes have.
If you’re a Mozilla Firefox user you can use the Firebug add-on and this video by Carrie Dills shows you how to use Firebug to find the CSS for a particular element and then change it in real time.
Carrie also shows you how to find where that particular chunk of CSS is located on your theme’s stylesheet.
Don’t worry if you’re a Chrome user because the Chrome browser comes with the Chrome Developer Tools, which make it easy to find and change that pesky CSS.
To show you how to use the Chrome Developer Tools (formerly known as the Chrome Inspector), here is a great video by Andrea Whitmer of Nuts and Bolts Media.
Save your CSS changes to make them permanent
The changes you make to your CSS using Firebug and the Chrome Developer Tools are not permanent, they disappear as soon as you refresh your browser.
To make them permanent you have to add them to the Custom CSS section of your ePanel or, as I do, save them using the Simple Custom CSS plugin.
This video shows you how easy it is to install and add your custom CSS using this great free plugin:
Having problems finding and changing your CSS?
If you’re new to the black art of CSS or just having problems finding the selector that you need to change then you can try two things:
- Check out the CSS Hero plugin – CSS Hero is a premium WordPress plugin that allows you to customise your themes’ CSS via a point and click interface. It’s not free, but it’s well worth giving it a try if you’re new to CSS.
- Join the Divi Facebook group and ask for help – the Divi Facebook group was founded by Eileen Corrigan Lonergan and currently has over 4,500 members. The members range in abilities from newbies to devs and you’ll always find someone who will help you out.
Child theme, child theme… did you mention child theme?
So why don’t I use a child theme on my Divi sites?
When I use the Genesis framework I use child themes because that’s what the Genesis framework is designed to do. The Genesis base theme is a lightweight theme built with minimum styling, which is provided by your child theme.
When I use the Divi theme I don’t use a child theme because Divi is a full blown theme with all the bells and whistles that you’d expect from a full theme.
To customise Divi I use the Divi customiser, add my own custom CSS and use a Divi related plugin to make a PHP changes and complex CSS changes. Using plugins means that all my precious customisation changes are safe from updates.
To find out more about the pros and cons of child themes or frameworks take a look at Why I don’t like WordPress child themes and frameworks. Don’t be angry. And be sure to read the comments including this one from Justin Tadlock:
“I mostly agree on the issues of using parent/child themes though. If you’re wanting to do much more than some CSS changes and add a handful of custom functions, then you’re probably going about it all the wrong way. At some point, you’re just building a custom theme.” Justin Tadlock
Make more complex changes with Dan Mossop’s Divi Booster plugin
By now your site should be looking pretty much the way you want it, but maybe there are just a few things that still don’t look quite right… time to give the Divi Booster plugin a run out.
The Divi Booster is a Divi specific WordPress plugin which makes customizing Divi a breeze.
Divi Booster adds 50+ new configuration options to Divi and Dan Mossop, the developer, is constantly adding new ones.
Want to change the height of your slider? Or stop the header from shrinking? Or change the look of just one page? You can do all that with the Divi Booster.
I’ve used the Booster to change my footer links on this site and I used it to style the pricing tables for this ZenCache caching plugin splash page.
Changing those pesky Divi theme footer links
The footer links are the “Designed by Elegant Themes | Powered by WordPress” links at the bottom of this site. You may want to change these links, but there’s no obvious way to do it and even if you know where to look… it’s not easy.
With the Divi Booster plugin all you have to do is go to the Footer section of the plugin and where it says “Replace footer links with this text / HTML:” you just add your own text complete with HTML links… how easy is that?
We love you Dan Mossop.
Pick up your copy of Divi and make it your own with a little customisation
That folks is my take on customising your Divi theme website, without using a child theme.
A simple three step process that starts with the Divi theme customiser, moves on to adding your own custom CSS and finishes with the Divi Booster plugin for the more complex changes.
If you’d like to join the Divi community and create your content using the advanced Drag and Drop Page Builder, then sign up with Elegant Themes, download your copy of the Divi theme and make it your own with a little customisation.
The Divi Builder allows you to create beautiful and unique layouts visually, without touching a single line of code. The builder gives anyone the ability to create truly dynamic websites with ease.
Elegant Themes
I hope that you enjoyed the post and that it helps you with your own Divi customisation.
if you have any thoughts about Divi, the Divi Booster plugin, child themes or anything else mentioned in this post, then please leave a comment and if you’d like to spread the word about Divi customisation, please use my social sharing icons below.
Credits:
My thanks and gratitude to:
Elegant Themes for the header graphic and Divi Customiser video used in this post.
Carrie Dills for her Firebug demo video
Andrea Whitmer for her Chrome Inspector/ Dev tools demo video
