Getting started with Divi

Hello! My name is Neil and I own a Geelong web design business. I’ve been designing websites for businesses since 2009 and was a graphic designer previously.

As an owner of a Geelong web design business, I wanted a way to streamline the design and development process. To date the best solution I have found which speeds up the web design process is to use WordPress and Divi Theme. Divi Theme gives you so much control and is being constantly improved.

In this post I am going to talk about getting started with Divi and let you know the set up process I go through when preparing to design a website with Divi Theme.

Essential Plugins

When creating a Divi theme website I install a few core plugins for security and to improve usability etc. The list is below.

All-in-One WP Migration

This plugin provides a simple process for you to backup your website. You can export the backup as a file and save to your desktop or export directly to third party cloud storage such as DropBox or Google Drive. It’s so easy to use!

If you want to export a website and install it on another web hosting account you will also need the All-in-One WP Migration Unlimited Extension. This will enable you to upload an All-in-One backup file to another WordPress installation and restore the site there.

I’ve been using this plugin for a long time now and love the simplicity of it.

Visit: https://wordpress.org/plugins/all-in-one-wp-migration/

Post SMTP

If want to ensure form submission reach the recipient you will need to use SMTP on your site. What does this even mean? SMTP stands for Simple Mail Transfer Protocol.

Basically, the website needs to use a real email address instead of an alias to send form submissions. This is better than using the default WordPress PHP mail (alias) which can often be flagged as spam by mail clients like Office 365 etc.

Create an email account to be used by your website. Example: enquiries@ or sales@

Install the plugin Post SMTP Mailer/Email Log and run the Wizard to configure the plugin. This will ensure all form enquiries and order emails are received.

Additional Tips:

1. If you are using a Gmail or Google Workspace email account make sure you add Googles SPF record to the DNS.
2. Enable Less Secure Apps for the email account used by the website.
3. Enable Unlock Captcha for the email account used by the website.

Rank Math SEO

Every website needs to apply good on-page SEO metadata to stand a chance of being found. I have found Rank Math SEO be the best plugin to use with Divi Theme. Install the plugin and run through the installation Wizard.

Every page should include the following:

1. 600 words +.
2. A page title less than 60 characters that includes the target keyword phrase.
3. A permalink that includes the keyword phrase.
4. A description less than 160 characters that includes the target keyword phrase.
5. An image with the keyword phrase used in the alt description.

For more information on website SEO see:  https://rankmath.com/

Install the plugin and use these settings which work best with Divi Theme.

Go to Wordfence / All Options.

• Click Expand All. I’ll just list the settings you need to adjust.
• Check: Update Wordfence automatically when a new version is released?
• Check: Hide WordPress version.
• Check: Disable Code Execution for uploads directory.
• Check: Bypass the Litespeed “noabort” check.
• Check: Enable email summary to once a month.
• Web Application Firewall Status – Initially set this to Learning Mode for about 2 weeks.
• Lock out after how many login failures – Set to 5.
• Lock out after how many forgot password attempts – Set to 5.
• Count failures over what time period – Set to 4 hours.
• Amount of time a user is locked out – Set to 4 hours.
• If anyone’s requests exceed 240 per minute then throttle it.
• If a crawler’s page views exceed 240 per minute then throttle it.
• If a crawler’s pages not found (404s) exceed 120 per minute then throttle it.
• If a human’s page views exceed 240 per minute then throttle it.
• If a human’s pages not found (404s) exceed 60 per minute then throttle it.
• How long is an IP address blocked when it breaks a rule : 1 hour.
• Monitor background requests from an administrator’s web browser for false positives.
• Uncheck both Front-end Website and Admin Panel. When these are checked they can often generate false positives and stop you editing the website.
• Check: Use low resource scanning (reduces server load by lengthening the scan duration)

Save changes.

WPS Hide Login

Finally, the WPS Hide Login plugin allows you to change the default WordPress login URL to something less obvious. This is good because it immediately put off most brute force hackers trying to guess their way into your website.

Example: www.mysite.com/wp-admin becomes www.mysite.com/y0urs3cretw0rd

Getting Started With Divi – Theme Settings

When getting started with Divi, I use the following Divi Theme settings. These settings allow you to design and develop quickly.

Click Divi / Theme Options

Add your logo.

Define Color Pickers Default Palette. For most sites I use 6 colours.

Primary Colour – Used as theme accent colour.
Secondary Colour – Used for heading colours.
Tertiary Colour – Used for highlight and link colour.
Body Colour – Used for body copy colour.
Background 1 – Usually a light grey colour to help differentiate sections on a page.
Background 2 – Usually white.

A great site for creating colour palettes is Coolors.co

Use Google Font – Enable.

Back to Top Button – Enable.

Smooth Scrolling – Enable.

Enable Responsive Images – Enable.

Under General / Performance disable everything while you develop your site. These caching settings are useful once your site is complete.

Next click Builder / Advanced. Only enable Enable The Latest Divi Builder Experience.

Click Divi / Theme Customizer

In this part of your site you need to make some additional settings.

General Settings
Site Identity – Set the website page title, tagline and favicon.
Layout Settings – I usually leave most settings and only apply the theme accent colour to be the Primary Colour I defined earlier.
Typography – Define the default body and header sizes. Also define the default font, link colour, body copy colour and header colour.
Background – Define the background colour as the Primary Colour we set earlier.

Buttons
Make sure you have a button on the home page. Then edit the default button style settings here.

Presets & Global Colours

Finally, it can really help speed up your web design process if you define your website global colours and presets.

Global Colours – These are colours are different from the colours you defined under Theme Options. These colours are Divi’s colours you can use in your design. The main benefit of global colours are that you decide to change or update a colour, it will be reflected throughout the entire website wherever you have used the colour.

Presets – Presets are styles. You can create a style for anything including Sections, Rows and Modules. In most cases it makes sense to create a preset for the Text module. You can define all headings, body copy, link design, fonts and save it as a preset. If you ever need to change all the headings used in the text module, simply edit the preset, save and all headings will be updated globally throughout your website.

For more information about presets see this link: https://www.elegantthemes.com/documentation/divi/divi-global-presets/

Header & Footer Design

When I am getting started with Divi Theme for my client websites, I usually want to design a custom header and footer layout.

When developing a new website design, I’ll create a temporary page with dummy content and design the header and footer layouts. Once I am happy with the header and footer designs I’ll save each Section to the Divi Library. Note: When saving your header or footer section, you don’t need to make it global because Theme Builder items are global by default.

• Next, to create your own custom website header go to Divi / Theme Builder.
• Add / Edit the Global Header.
• When the page loads in add a Section and choose the section you saved to your library.
• Save.

Do the same for your global footer design.

Divi Child Theme

Finally, It’s always advisable that you use a Child Theme for your WordPress Divi Theme website. A child theme allows you to make changes to functionality, CSS, style etc without affecting the parent Divi theme.

When you make changes using a child theme, those changes will be retained when you update Divi Theme. If you don’t have a child theme, any changes you make would be overwritten by an future updates.

Creating a child theme is easy with Divi Cake’s Divi Child Theme Generator

• Visit: https://divicake.com/divi-child-theme-generator/
• Create your theme and it will be emailed to you.
• Then download the theme and install it via Appearance / Themes.
• Set your child theme to be the active website theme.

When you do this, your website will still be using Divi Theme and Divi Builder. It’s just that we have set a child theme for customisations. Any changes we make using the child theme will not be overwritten when we update Divi.

For more information on child themes watch Josh Hall’s video here:

Divi Child Theme Explained + FREE CHILD THEME

So that concludes my post for getting started with Divi. I hope you found it useful.

All the best creating Divi Theme websites!