Flipping your Blurb

by Sep 14, 2016Divi, tutorial

Not updated for CUSTOM MODULES yet

Hi guys, thanks for stopping by. I haven’t updated this post yet to accommodate front-end accessibility. I’m working on it and hope ti have it updated soon.

Sincerely,
Rebekah

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:

A Flipping Blurb

#DiviRocketPlaceholder#

A Flipping Blurb

#DiviRocketPlaceholder#

A Flipping Blurb

#DiviRocketPlaceholder#

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.
[crayon-6467e7b0ac751886541578/]

Once you’ve added the bit above, you’ll need to add the shortcode via your functions.php.
[crayon-6467e7b0ac75a893323783/]
Now, the Card Blurb will be a new module.
Lastly, we need to add our CSS to make things happen.
[crayon-6467e7b0ac75c329607691/]
That’s it, you should be ready to rock. This effect can be rather tricky. Because of the absolute positioning of several elements, a fixed height is required. In this example, it’s 300 X 300. This may or may not work for you. You can change the size in the last line of the css. 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 that have the same structure.

Sign up for blog releases!

We promise to not send you crap you didn't sign up for. We also won't sell/share your info with others.
Sending