Blog - Divi Resources

Tips & tricks for making the most out of the Divi WordPress theme
Divi layout – Image hover effect

Divi layout – Image hover effect

The image module hover effect tutorial has been far & away the most popular post on yatesdesign.com.au. Adapted from Codrops' "Ideas for Subtle Hover Effects" it's a nice way to display links and images. I've been meaning to make some small changes to it for a while,...

read more
Divi secondary menu customisations

Divi secondary menu customisations

Divi's secondary menu is great for displaying important information to your site's visitors. I use this layout on a lot of sites, recently on Torquay Sports Medicine Centre's site I used it to make sure that contact details and booking information are easy to find at...

read more
Divi Tutorial – create a full width call to action button

Divi Tutorial – create a full width call to action button

At the bottom of each page on yatesdesign.com.au I've got a button that reads "Ready to launch a new project? Let's work together →". It's a full width button that changes colour on hover and I get asked about it often so here's a tutorial on how I did it. The...

read more
Divi Tutorial – The Final Countdown

Divi Tutorial – The Final Countdown

After seeing Andy Tran's article on The Best Hidden Feature of Divi, I decided I'd try and build something using inline JS, HTML & CSS  to test Divi's code module out. I really hadn't used the code module at all and it didn't even occur to me that I could inline CSS...

read more
Divi Tutorial – Blurb Cards

Divi Tutorial – Blurb Cards

This is an idea I had for the services section of the front page of yatesdesign.com.au that I didn't end up using. It uses Divi's blurb module to handle the card and icon and the button module to turn the entire card into a link. If you’d prefer to skip the tutorial,...

read more
Divi Tutorial – Image module hover effect

Divi Tutorial – Image module hover effect

I've posted an updated version of this tutorial with an easy to download layout file and a few extra options. Divi's 3.0.49 update seems to have broken this effect. To fix it add this code to your CSS: .border-hover .et_pb_promo_description { position: static...

read more
Divi tutorial – Blurb Module hover effects

Divi tutorial – Blurb Module hover effects

This is a hover effect that I used on the front page of yatesdesign.com.au. In those blocks I used Font Awesome icons as I needed a Drupal icon. In the following tutorial, I'll use the Divi Blurb module to make things a little simpler. If you'd prefer to just skip the...

read more
Divi tutorial – reveal footer on scroll

Divi tutorial – reveal footer on scroll

When redesigning yatesdesign.com.au I wanted to add this curtain reveal effect to the footer of the site. It's a fun effect & relatively easy to do. Scroll to the bottom of this page to take a look. The effect is done completely in CSS. Put simply, you set the footer...

read more

Ready to launch a new project? Let's work together 

Pin It on Pinterest