SITE GUIDELINES

I use Divi from Elegant Themes in 99.9% (fine! 100%) of the sites I create for myself or for my friends.

Divi is a website building framework. There is a little learning curve (it does help if you have used frameworks or site builders in the past), and once you “get it”, it is a breeze to play with.

Out of the box it allows you to create a nice looking site, especially because there are a very large number of child themes designed specifically for Divi, of which some are premium (paid) and some are free. You can download a child theme, upload it to your WordPress installation, activate it, and you are done. Replace the content and images and you have your site up and running in no time.

A plugin allows you to extend the functionality of add new features to your WordPress site. There are thousands of free and premium plugins available, allowing you to do pretty much anything you can think of with your website.

I understand that a lot of the plugins I use could be replaced by code (CSS or JavaScript), and I will slowly replace the ones that make sense as I learn how to do the switch.

Here are the plugins I am currently using on this website (in alphabetical order):

Akismet Anti-Spam

Used by millions, Akismet is quite possibly the best way in the world to protect your blog from spam. Akismet checks your comments and contact form submissions against our global database of spam to prevent your site from publishing malicious content.

Free plugin

Check out Akismet

Divi 100 Hamburger Menu

The Divi Hamburger Menu Styles Extension adds twenty new hamburger menu styling options to Divi’s Fullscreen and Slide-in Header Formats.

Free plugin

Download the Divi 100 Hamburger

Divi Booster

Divi Booster makes customizing Divi a breeze. It adds 100s of new configuration options to Divi, and it is super easy to use.

Because Divi Booster is a Premium plugin, my suggestion is that you hold off buying it for now if you are totally new to Divi. Play with Divi for a little bit. This will allow you to understand what you can and cannot do with Divi out-of-the-box. Once you have that knowledge, you will start looking for solutions to help you get the look and feel you want. Then you should consider Divi Booster.

Premium plugin

Download Divi Booster

Divi Extended Google Fonts

A neat little plugin to hugely extend the number of available Google Fonts within divi from 50 to over 700! Just activate the plugin and it will work straight away. This is a premium (paid) plugin, albeit super inexpensive.

Premium plugin

Purchase Divi Extended Google Fonts

Divi Section Manager

The Divi Section Manager controls the section dividers in the Divi Builder via a very easy to use set of buttons and controls. This is the plugin I use to create the waving section dividers you see here on this page.

Premium plugin

Purchase the Divi Section Manager plugin

Divi SVG Module

SA SVG Module is a great Plugin to add more interactivity to your website. You just add your SVG images / icons or illustration to the module and it will add some fantastic effects to your SVG.

You don’t need to do any coding or add any SVG Helper plugin. Just pick one of the animations, or combine them, and it will add magic to your website.

Premium plugin

Purchase SA SVG Plugin

Logonizer

Loginizer is a WordPress plugin which helps you fight against bruteforce attack by blocking login for the IP after it reaches maximum retries allowed. You can blacklist or whitelist IPs for login using Loginizer. You can use various other features like Two Factor Auth, reCAPTCHA, PasswordLess Login, etc. to improve security of your website.

Free plugin

Download Logonizer

Material Blurb for Divi

Material Blurb for Divi is the perfect module to show off stuff on your Divi site. It perfectly integrates into the Divi Builder and has endless customizing options.

The module makes use of Material Designs elevation principles. That means that the module either lies flat on the surface or hovers above it. You can choose between 6 levels of elevation. Elevation can be set separately for regular and hover state.

Premium plugin

Purchase the Material Blurb for Divi plugin

SG Optimizer

The SG Optimizer plugin comes with my SiteGround hosting services.

This plugin is designed to link WordPress with the SiteGround Performance services. It WILL NOT WORK on another hosting provider. The SG Optimizer plugin has few different parts handling specific performance optimizations:

SuperCacher Config
The main functionality of SuperCacher part of the plugin is to purge your dynamic cache whenever your content updates.

HTTPS Config
The HTTPS Config allows you to force SSL usage on your site. It will redirect your entire traffic over secure connections and will fix mixed content issues.

PHP Config
This tool will allow you to check if your website is compatible with the recommended by SiteGround PHP version(7.0) and switch to it with a click. It is highly advisable to keep your WordPress running on the recommended PHP for best security and performance.

Free plugin with SiteGround hosting package.

Check out SiteGround.com hosting

Divi Popup Module

Divi does not include a popup option (yes! I know, right?), and I use this plugin to create the popups you see on my Career page (for each company I worked for, at the end of the description there is an “About” button. Click on it to see this plugin in action.

The plugin also allows you to define both the content of the popup and the trigger element. A trigger is what causes the popup to show. These can be as simple as a text link, image or button but may also be more advanced such as showing on page load or showing if an element with a specific class or ID is clicked.

Premium plugin

Purchase the Divi Popup Module

According to Wikipedia, “Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed. The arrangement of type involves selecting typefaces, point sizes, line lengths, line-spacing (leading), and letter-spacing (tracking), and adjusting the space between pairs of letters (kerning). The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process.”

HEADER

Font Montserrat

BODY

Font Open Sans

Coolors Exported Palette - coolors.co/edffab-654597-f7f7ff-2d3047-508991
I use the the colors Pale Goldenrod (#EDFFAB) and Rebecca Purple (#654597) to create gradients (mostly). I have a radial gradient on my home page, and slanted gradients for my page headers.
For my links, I use the Steel Teal (#508991) color.

To highlight certain sections, I use Ghost White (#F7F7FF) as a background color.

For the font color, unless it is a link, I use Gunmetal (#2D3047).

To keep the branding on point, whenever possible, I will apply a color overlay to my black and white images using Pale Goldenrod (#EDFFAB) and Rebecca Purple (#654597).

On Photoshop I apply a large brush to the left side of the image with the Pale Goldenrod, I set the layer to overlay, and set the opacity anywhere from 30% to 50%.

I do the same on the right side of the image using Rebecca Purple.

Hover on the image to see what I mean.

There are many sites that can help you find some great color palettes, and one of my favorites ones is Coolors.com.

You start by clicking on the “Start the Generator, it’s free!” button located on their home page. You will be presented with five columns, each containing a different color. If you do not like any of the colors, simply press the spacebar to generate a new color scheme.

When you find at least one color you like, hover over it and you will see a few options, one of them being the lock icon. Click on it to lock that color.

The next time you press the space bar, your locked color will not change, and a new set of colors will be shown.

If you set up an account, you can save your color palettes for future use. You can also export the color palette as as URL, a PDF, PNG, SVG, etc. The animation you see above was used by saving the color palette as an SVG, and using it with the SA SVG plugin.

I absolutely love this tool!