Blog
Categories: Divi Tutorials Design Resources Free Downloads
Does your website pass the grunt test?
The "Grunt Test" is a quick and powerful way to evaluate your website, created by Donald Miller, the founder of StoryBrand. It get’s it’s name from the idea that if you showed your website to a caveman, could they “grunt” exactly what you do just by looking at the...
FREE DOWNLOAD: SaaS Landing Page Template
I've put together my first free divi template! Checkout the demo → I used a SaaS company as the niche for the template, but it could be used as a landing page for a lot of different industries. I wanted to create a template which couldn't be achieved with just the...
How to centre align text vertically in a column in Divi
It's really simple to centre text horizontally in Divi just using the builder settings. However there's no setting to vertically align the text within the column. This can cause layouts to look messy, especially if you try to centre things using padding or margin....
How to add the word “Menu” next to the Divi mobile menu
As Web Designers, we known that the mobile menu icon (or burger menu) is how you open the menu on mobile. However this isn't as obvious for everyone, especially for people who didn't grow up with the internet! This can be an issue if people viewing the website on...
How to make a full width button in Divi
Divi doesn't currently allow you to make a button full width with just the settings inside the Divi builder. Luckily though, it's very easy to make a full width button with just a little bit of CSS. All you need to do is add the class "full-width-btn" to your button...
How to increase the width of the Divi menu bar
Have you ever found yourself in the situation where you can’t fit all your links in the menu without it breaking onto two lines? Or maybe you wanted to have a full width navbar like I have on this site? Although the Divi options lets you increase the max-width of the...
Change image on hover in Divi with CSS
Demo → Having an image which changes on hover is a cool effect, but unfortunately it's not a native feature of Divi. Luckily though with a little bit of CSS it's an easy effect to build yourself. In part 1 of this tutorial I'll walk you through step-by-step on...
October 2018 Web Design Inspiration
If you’re new here, welcome to my monthly web design inspiration post. For each month of 2018 I’ll be putting together a list of my favourite websites I’ve found that month, in the hope that I can inspire others with the amazing work I’ve found. If you've found some...
3 Divi blurb hover effects (CSS)
Now Divi has the option of turning any module into a link, I often find myself making sections with blurbs which are linked to other areas of the website. The only issue though is it’s not that obvious these blurbs are links, as the only thing to show they’re...
CSS 3D Website Mockups in Divi
3D mockups are a great way to show off your web design work, and also a lot easier to make than you might think! There are a couple different ways you can achieve this look: 1. Photo editing software (e.g. Photoshop) 2. CSS The problem with the first method is 1) you...
How to change the sub menu font size in Divi
Changing the font size of the header menu in Divi is simple to do using the Theme Customiser. However, it only lets you choose the font size for the main links, not the sub-menu that drops down when grouping menu items. Here's a simple CSS fix that will let you change...
September 2018 Web Design Inspiration
If you’re new here, welcome to my monthly web design inspiration post. For each month of 2018 I’ll be putting together a list of my favourite websites I’ve found that month, in the hope that I can inspire others with the amazing work I’ve found. If you've found some...