Switch The Normal Divi Menu To the Hamburger Menu on Smaller Screens
If you've got a particularly wide menu that's wrapping on smaller screens, there's an easy fix for it. Using a simple media query, you can swap the normal desktop menu out for the mobile version (hamburger - the three horizonal bars you see on mobile phones). Add the...
Increase The Width of the Divi Vertical Navigation Header Format
While working on a new site for a client who wanted the Vertical Navigation Header Format, I decided that the width needed to be increased. After a little scratching I got it right with the CSS below. As you make your side menu wider your logo will grow with it....
Your Guide to the Google Fonts Available in the Divi Theme (Printable)
A great looking website is a combination of layout, images, and typography and as the tone of your voice sets the scene of a conversation so too does the typography, giving your site a particular personality. Typography is the art and technique of arranging type. It...
Revolutionise your Theme Installation Process – Use the TGM Plugin Activation Library to Install Your Favourite WordPress Plugins
In this tutorial you’ll learn how to use the TGM Plugin Activation library to list recommended or required plugins when you activate your child theme.
Sketch your layouts on paper with the Divi Theme printable Browser Window by Divi Notes
For those of you who use paper to do your wireframing, here's a printable that I hope you'll find useful. I've worked on a Full HD display width of 1920 pixels, and a standard Divi column width of 1080 pixels. On a Full HD display, your viewport (above the fold) is...
CodeLights Plugin and Divi – Flipbox (Part 1)
Update: This plugin is now basically completely compatible with Divi and Extra. I haven't tested it thoroughly but flipbox component is, in my experience, 100% compatible. Although I'm not fond of the little things, I regularly get requests for flipboxes. This was the...
Fullwidth Header – Open Button #1 Link in a New Tab
Here's a quick tip on how to open the Divi Fullwidth Header module's first button (Button #1) in a new tab. Navigate to the Divi Theme Options screen and then choose the Integration tab and add the following code to the <head> section: Now make sure you've...
How To Add Additional Google Fonts To Your Divi Website
Although the Divi theme comes with over 80 fonts, Google Fonts has over 700 to choose from. Adding additional fonts to your Divi installation is extremely easy. Here are a few easy steps you'll need to follow. Find Your Font Head on over to Google...
How to Tile the Background of a Divi Module
Ever thought you could tile the background of a Divi Section by adding an image to the module's Background Image field? But instead of the getting the perfect effect you were hoping for, you ended up with this: Two Ways to Tile a Background Image To tile the...
Image Optimization For Wordpress
Who hasn’t put their site through Google’s PageSpeed Insights and thought “how on earth am I going to get those images any smaller”? I know I have. Well, even though you won’t necessarily be able to satisfy Google, you can at least get your images as lean as possible...
New Website Workflow – How To Get Started
You've just landed another web design job! Woohoo! You've done all the groundwork, now it's time to roll up your sleeves and get going. There are some obvious thing to do like registering the domain and configuring the hosting (here's our top Divi Hosting...
