Listing Category: Modules

Animated Border Effect for Divi Button Module

In this tutorial we will apply a nice animated border effect to Divi Button module on hover state.

Create a scrolling image on hover – Great for previews or to showcase something

Recently I’ve seen a number of folk ask how to reproduce the scrolling image effect that seems to becoming more popular these days so I decided to figure it out and create a tutorial on how to do it. You can check it out on in here…

Clickable Body Text in Divi Blurb Module

“I had a go at writing something about extending the clickable area in blurbs to include the body text as well. Hope this is useful to someone…”

Four Column Blog Grids in Divi Theme

“We don’t know why the default for Divi Blog Modules in Grid layout uses three columns only. We suspect that, given the default word count for blog excerpts, using four colums would have made blog grids look very narrow (and very tall). This article is going to…..”

How to give Image Hover Zoom Effect on Divi Blurb Module

“Blurb modules are incredibly handy because they package up an image and some text into one module. This makes it easy to move them around and to style them. We will use some CSS to achieve the effect we are looking for. We strongly recommend you use a child theme for this…”

Adding a Title On Top of An Image in Divi Theme

“A Blurb Module is a much better choice for this, simply because it provides a handy package containing both an image and a piece of text (in fact two pieces of text – the title and content) into a single element that we can style with CSS….”

Two Line Titles for a More Responsive Layout in Divi

“When you write a title it’s a reasonably assumption that it is only going to take up one line. But that isn’t always the case and if the row is narrowed, the title may wrap onto a second line, pushing everything below it down the page and miss-aligning other elements…”

Image Hover Zoom Effect in Divi Theme

“Adding a zoom effect to an image on hover isn’t enormously difficult and it creates interest and, if you have a link on the image, gives some visual feedback. “

Divi Blog Module Image Hover Zoom Effect

“A few months ago we wrote about how to add a zoom effect to Divi images on mouse hover. It turns out that it is even easier to do this with Divi Blog modules. This is because the Blog featured image is already sitting inside a container and it is this ‘parent container’ that can be used to constrain the zoom so that any expansion of the image is hidden.”

TUTORIAL AWESOMENESS

TUTORIAL AWESOMENESS

Join our mailing list to receive latest news and updates from Divi theme tutorials directory.

Get inspired once a week with a list of hand-curated tutorials by top experts on how to increase your website building skills. It's quick, it's easy, it's the best way to increase your productivity.

 

You have Successfully Subscribed! Please Confirm the Subscription from your mail