This all started out with the idea of turning a Divi module into a 3D css flipcard (flipper, flipbox or whatever you call it). After figuring out how do code up a flipcard at codepen with great and easy success, I tried to apply the lesson to various Divi modules without success. Giving up early after somebody suggested to use a shortcode, I decided to create a Divi Licious Flipper shortcode.
This exercise went pretty well until I started over complicating it by adding in various options one would expect users to want/need. Take size for example. Not everybody is going to want a pre-set flipper size. Then consider whether to use a graphic or solid color for the front and or back of the flipbox. Then comes text, both title and content text sizes and color.
Does it need a read more link or not. I decided yes, and hard coded it it. Later I decided no and made it an option, discovering in the process that I lost the ability to exactly position it at the bottom of the content, so I put it back in. a better developer would have made it optional and I was going to go that direction until I took a peek at codecanyon and found these:
- http://codecanyon.net/item/flipping-cards-3d-wordpress/full_screen_preview/4135044
- http://codecanyon.net/item/css3-card-flips/2330342?s_phrase=flip&s_rank=11
- http://codecanyon.net/item/card-flip-js-plugin/full_screen_preview/2211676
- http://codecanyon.net/item/17-animated-flip-cards-package/full_screen_preview/12379935
And more! Those cost money. This is free to do whatever you feel like with it.
Available Parameters
Baseball
We count on winning. And if we lose, don’t beef. And the best way to prevent beefing is – don’t lose.
Usage:
Use shortcode:
“Make My Day”
From the movie Dirty Harry
Lau Tzu
Being deeply loved by someone gives you strength,
while loving someone deeply gives you courage.
Learn to Cook
Have you always wanted to know how to cook fabulous meals? My cooking classes offer you the opportunity to learn how to prepare some of your foods and favorite menus with less fat, sodium and preservatives.
Usage:
Use shortcode:
Nature
The woods are lovely, dark and deep. But I have promises to keep, and miles to go before I sleep.
Usage:
Use shortcode:
Los Angeles
L.A., it’s nice, but I think of sunshine and people on rollerblades eating sushi. New York, I think of nighttime, I think of Times Square and Broadway and nightlife and the city that never sleeps.
Usage:
Use shortcode:
Notes
You have to know a little something about how to use shortcodes. For example, sample shortcodes have a space after the opening bracket and before the closing bracket to disable them here so you can see the shortcode to copy and paste.
ie. [ deactivated ] [active]I’m using Loreum Pixel for the sample images. That server is often kinda slow so sometimes my demo images don’t show 🙁
New!
Now add text to the front image. Thank you Jeannie!
Shortcode now supports a new fronttext variable. See the the example on the right. You can also use inline styles on the text, but instead of double quotes, you’ll have to use single quotes:
Wrong: fronttext=“<p style=”color: white; font-weight: bold; font-size: 18px;“>Your fancy text.</p>
Right: fronttext=”<p style=‘color: white; font-weight: bold; font-size: 18px;‘>Your fancy text.</p>
Nature
The woods are lovely, dark and deep. But I have promises to keep, and miles to go before I sleep.
Usage:
Use shortcode:
Divi♥Licious Flipper Plugin
Grab Yours Today!