Author: Rob Hobson

CodeLights Plugin and Divi – Interactive Banner (aka, image hover effects) (Part 2)

A couple of posts ago I started the first in a series of reviews of the free CodeLights plugin called SiteOrigin Widgets. My first post in this series was on the Flipbox component of this plugin. Now I will explore the image hover effects or as they call it, the Interactive Banner component with the Divi or Extra Theme. This component essentially offers 8 image overlay/hover effects (they call them animation types) to which you can apply one of four animation easings. The Demo Here’s an example of each effect, all with the same Animation Easing, which in these examples,...

Read More

Using the Divi Tabs Module to create a Filterable Image Gallery

In a recent project I was asked to create a filterable image gallery. As Divi doesn’t do this out of the box, I had to look for options, one of them being Essential Grid but as I didn’t want to fork out for a plugin that would have been overkill, I decided to see if I could turn the Divi Tabs module into the same kind of thing and, with a little bit of tinkering, I managed to come right. The Example Here’s a quick example of what you can achieve with the Divi Tabs module, a little bit...

Read More

Typing Text Effect Using Divi Code Modules

In the never ending quest to delight our clients and their customers, we are always on the lookout for something different, something special, so when I saw the Terminal Text Effect pen on codepen.com, I thought I must adapt it for Divi. So, if you’ve been looking to recreate that typewriter typing effect, here is an easy to follow tutorial that’ll have you typing away in no time. The Example Here is my variation of the pen I mentioned earlier: _ How To For simplicity sake I’m going to use three Code Modules on the page. You could probably just put...

Read More

Create An Image That Scrolls Up When You Hover Over It

Okay, I have to admit, I love this image scroll effect! It’s looks so cool and I’ve spotted it quite a few times in the wild recently. The best thing is, it’s actually quite easy to achieve in the Divi theme. Before we go any further, let’s begin with an example. Scrolling Image Example As a web designer, one of the best use cases for this effect would be to show off my Divi layouts and also to show off the sites I’ve built on  a portfolio page. In this example I’ve made a full page screenshot of my...

Read More

Advertising

Get Caldera Forms

Subscribe

WARNING

This site contains affiliate links. Hopefully you'll click on them and help keep this site online and fresh! :) Oh! And then there are those cookies! It's the way the web remembers things. If you don't like them please don't use this site.