How to add a tap to text bar on your Divi website

Making it easy for your website visitors to get in touch with you is a crucial part to having a website which turns those visitors into actual customers. Most websites will have a contact page with all the details of how to get in touch. But what about the people who...

read more

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...

read more

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...

read more

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....

read more

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...

read more

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...

read more

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...

read more
Change image on hover in Divi with CSS

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...

read more

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...

read more

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...

read more

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...

read more

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...

read more