Use the Page Builder for Pop Ups

*Fair Warning - This may take some playing about with. This tutorial is offered as a guide on getting it started.  I've been having a lot of fun getting the Divi modules to work in a pop up. Here's how I did it... Installing a pop up plugin First off, I'm not reinventing the wheel with this one. At its base we're relying on a tried and tested...

Cleaner Comments for your Divi website

If you're using the standard commenting system that comes with Divi then you may find this CSS snippet useful. It cleans up a few little quirks and adjusts the layout in a few ways: 1. Only the first comment will indent from now on, so you won't end up with the comment text getting crazy thin when conversations happen. 2. Sub-comment avatars are...

Add a ‘YouTube Style’ loading bar to the top of your Divi Theme

Here's how to add a 'loading bar' effect to the top of your page. This type of loading bar is used on sites like YouTube. We're adding it to Divi in this example but its the same concept for any WordPress website. We've based the code in this tutorial on code found here. Adding a loading bar to Divi This modification requires editing two files;...

A better mobile menu style for Divi

Here's a modification for your Divi mobile menu that does three main things. 1. Reduces the distance between the logo and the left side of the screen, and the closed mobile menu and the right side of the screen. This creates more of an 'app style' look and feel. 2. Changes the menu icon from three bars (or a burger) into a cross when the menu is...

Changing the standard Divi slider transitions

The default slider module that comes with Divi is pretty cool and for the most part, it does the job. If, however, you have used a third party slider before you may notice that it has a distinct lack of je ne sais quoi (that's French for transitions ;)). By default, there are two slider transitions happening in the slider. 1. The slider...

Divi Module Editor: A very special discount

I absolutely love babies and love being a father. If I wasn't building websites I'd run some sort of daddy daycare. I truly believe humans are at their most interesting before they can talk. I have two step-daughters, two daughters and a son. They are nothing less than the best thing to ever happen to me. No exceptions. Period. For me, the...

Fixing the ‘jumping header’ issue in Divi.

What's the one pain that every Divi user shares? That's right, the jumping header. If you don't know what I'm referring to here then you are the chosen one and I'd appreciate you leaving your contact information in the comments. Here's why it happens; The Customizer - A great tool, but not a perfect one. When you make changes to the appearance of...

Browser Prefixes Explained

To understand why browser prefixes are needed we must first understand how CSS comes to be: The rules and guidelines around how CSS works is decided by the World Wide Web Consortium. Before it is released into general use for browsers it undergoes rigorous testing to see how it behaves with existing CSS and other design language rules. This could...

Divi Media Queries

Media queries Media queries can be used to tell your browser what to do at certain screen sizes or resolutions. For example; It is media queries that decide when the top navigation stops and the mobile menu begins. On screens 981px or larger…   On screens 980px or smaller… How it works A media query is made up of a media type and at least...

Changing the order that Divi column’s stack on mobile.

The Divi Page Builder is my favourite tool for quickly building web pages. The modules, columns, rows, and sections all have a smorgasbord of settings that make it easy to change almost any aspect of the set-up. One thing that's missing from those options (at least for now) is the ability to change the way that columns stack on mobile devices. By...

The incredible versatility of the Divi default font

By default, the Divi Theme uses Open Sans as the font for all headers and paragraph text. You may sometimes find it boring, but hopefully after looking at this, you'll be filled with ideas on how to jazz it up. We offer you five examples of the default text and the CSS we used to change it.   1. Try auto capitalizing the first letter in...

Custom Single Post Template for Multiple Author Sites

  If you have a number of authors on a single site, you may like this single post template. It makes a couple of adjustments to the standard (non-page-builder) template used in Divi, as you'll see in the image above. A new meta style This template scraps the usual 'author | category | date' layout in favour of the author's avatar, name and...

Use the Page Builder for Pop Ups

*Fair Warning - This may take some playing about with. This tutorial is offered as a guide on getting it started.  I've been having a lot of fun getting the Divi modules to work in a pop up. Here's how I did it... Installing a pop up plugin First off, I'm not reinventing the wheel with this one. At its base we're relying on a tried and tested...

Cleaner Comments for your Divi website

If you're using the standard commenting system that comes with Divi then you may find this CSS snippet useful. It cleans up a few little quirks and adjusts the layout in a few ways: 1. Only the first comment will indent from now on, so you won't end up with the comment text getting crazy thin when conversations happen. 2. Sub-comment avatars are...

Add a ‘YouTube Style’ loading bar to the top of your Divi Theme

Here's how to add a 'loading bar' effect to the top of your page. This type of loading bar is used on sites like YouTube. We're adding it to Divi in this example but its the same concept for any WordPress website. We've based the code in this tutorial on code found here. Adding a loading bar to Divi This modification requires editing two files;...

A better mobile menu style for Divi

Here's a modification for your Divi mobile menu that does three main things. 1. Reduces the distance between the logo and the left side of the screen, and the closed mobile menu and the right side of the screen. This creates more of an 'app style' look and feel. 2. Changes the menu icon from three bars (or a burger) into a cross when the menu is...

Changing the standard Divi slider transitions

The default slider module that comes with Divi is pretty cool and for the most part, it does the job. If, however, you have used a third party slider before you may notice that it has a distinct lack of je ne sais quoi (that's French for transitions ;)). By default, there are two slider transitions happening in the slider. 1. The slider...

Divi Module Editor: A very special discount

I absolutely love babies and love being a father. If I wasn't building websites I'd run some sort of daddy daycare. I truly believe humans are at their most interesting before they can talk. I have two step-daughters, two daughters and a son. They are nothing less than the best thing to ever happen to me. No exceptions. Period. For me, the...

Fixing the ‘jumping header’ issue in Divi.

What's the one pain that every Divi user shares? That's right, the jumping header. If you don't know what I'm referring to here then you are the chosen one and I'd appreciate you leaving your contact information in the comments. Here's why it happens; The Customizer - A great tool, but not a perfect one. When you make changes to the appearance of...

Don’t leave before entering to win an iPad Pro! It’s Free!

You may be too early for our Black Friday specials, but you can still enter our competition! Leave your details below and you could win an iPad Pro!

Great you've entered our giveaway! Only one step remaining! Please check your email and confirm it.