Divi and the Blurb

Again with the Blurb? I know, I know. I am a little obsessed. This time we’re making it flip. Right now card style layouts are all the rage. This is tutorial will incorporate another wonderful tutorial from Tymapnus. There are many styles to chose from but, I am using #7 with some modifications. I want mine to turn to the right instead of turn down. Example below:

What's your problem? Let's work together to see how your website can perform better. Learn More

Of course it needs to be beautiful but, more importantly, it needs to be functional. We design beautiful sites that are easy to use. Learn More

We use WordPress and Divi to build just about anything you can imagine. Learn More

Necessary Notes!

As always, this tutorial is meant to be used in a CHILD THEME! Otherwise, you’ll lose all of the awesome when you update your theme. Another important note: Divi changed a little structure in 3.0. This tutorial is for Divi 3.0 or later. It won’t work correctly pre 3.0.

The Code

Of course, you can find the files on github.  The first thing we are going to do is create a new file for our custom modules folder. The file is going to be creatively called, card_blurb.php. In this file we are going to add our custom module data. The real changes happen around line 401 with the changing of the output.



%2$s %3$s





Once you’ve added the bit above, you’ll need to add the shortcode via your functions.php.

Now, the Card Blurb will be a new module.

Lastly, we need to add our CSS to make things happen.

That’s it, you should be ready to rock. You can play with the transform values and change the direction that the blurb rotates. It can be both fun and frustrating to figure out. You could also incorporate a different Tymapanus example.