Divi Tutorials

Learn how to use the Divi theme to it’s full potential!

How to make a full screen slider in Divi

Although Divi has a full width slider module, and also a full screen header module, it unfortunately doesn't have a native way to make a full screen slider. Luckily though with a few lines of CSS it's very easy to customise the normal slider module into a full screen...

read more

How to add a tap to WhatsApp button to your Divi website

In a previous tutorial I showed you how to add a tap-to-text button to the bottom of your website. (Here’s the demo if you’d like to check it out. It’s only visible on mobile, so if you’re on desktop just drag your screen thinner.) Someone asked a question though as...

read more

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

read more

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

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

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

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

read more

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

read more