Blog

Jan 8, 2018

How to fill buttons on hover in Divi with CSS

The button hover animations which come with Divi are quite basic. The default animation where the button expands and the icon slides in to the right is also the quickest way to tell a sites been built with Divi. (Not that there's anything wrong with that, I just like...

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

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

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

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

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

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

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

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

How to change the color of the mobile menu icon in Divi

By default, the color of the mobile menu icon in Divi will be whichever color you select for your "Theme Accent Color" in the Theme Customizer options. Depending on the style of navbar you're using, this might not always be ideal. For example, when using a transparent...

How to add a paint stroke highlight to text using CSS in Divi

Highlighted text is super cool! Highlighting text is a great way to draw attention to a certain word or area of a page, as well as looking really cool! Although basic highlighting is achievable through simple html, adding a brush stroke effect requires just a little...

How to change the color of the footer social icons in divi

Changing the color of the footer social icons in Divi is simple to do using the Theme Customiser. However, it only lets you choose the same color for all social icons. Here's a simple CSS fix that will let you pick out the colors of each social icon independently. Add...

February 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 missed my...

January Web Design Inspiration: Crpyto Currency Special

I’ve set myself the challenge this year to create at least one blog post per month. The problem is however, I’m not a writer. Not even a little bit. So to achieve this goal I’ve had to think up some different ways I can create content, that people will find useful,...