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:
And more! Those cost money. This is free to do whatever you feel like with it.
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 🙁
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>
Divi♥Licious Flipper Plugin
Grab Yours Today!