How to create flipbox in divi theme
Are you looking for a cool way to add flip-boxes in your Divi website, it’s now super simple. You can use this approach for various purposes on your website like team member descriptions, services and more. In this article, we’ll create flip-box using blurb module and style it using built-in options in blurb module.
Step: 1
We’ll start with adding a standard section to a new or existing page, then choose columns for that section. For this post we’ll choose 3 columns.
Step: 2
Edit row and add class name “item-category” in each column css class field.
Step: 3
Add blurb modules like this:
Step: 4
Now edit first blurb module from column 1 and add css class name “info-item-category”:
1) After that put Title text
2) Choose icon or image
3) Choose Background image, Gradient or Background color
Edit second blurb module from column 1 and add following css classes “info-item-category under”:
1) After that put Title text
2) Add content
3) Choose Background image, Gradient or Background color
Repeat step 4 for other blurb modules.
Step: 5
Add the following CSS to your child theme or Divi theme options -> Custom CSS area.
I’ve been trying to figure the flipbox for a long time, thank you for the tutorial!
I’m having some problems and was hoping you’d be able to help. I have it set up as described with the 2 rows of blurbs and “under” in the CSS Class for the lower row, but when I add the CSS it doesn’t end up looking like your demo. It makes the front side image much smaller and the title and text are below the image. Then on hover the image gets slightly bigger (but not as large as the demo – my image is larger than the demo size) and the text gets pushed down and a portion is no longer visible.
Any help would be greatly appreciated.
It is hard to figure-out the issue without website link. Where you added css code, looks like your css code is not added correctly, try to paste css into Divi theme options or within page custom css area. Let me know if still issues.
Very helpful, thank you for this. How would you modify this code for it to work with 4 columns?
You will need to choose 4 column layout in builder and then need to add class name “item-category” to 4th column as well as per step 2 above. Thanks!
This code is very good. Thank’s.
For I.e. / Edge, the flip doesn’t work good. Is there a bug fix for this?
Thank’s
Hey just wanted to thank you for this. Your code helped a lot!
You’re Welcome!
How would I change the flip to work on :active instead of :hover for mobile devices?
For this you will have to add last three classes code with :active too. You can place comma after :hover class and then add similar class with :active instead of :hover. Use like this below:
item-category:hover .info-item-category,
item-category:active .info-item-category { }
.item-category:hover .info-item-category.under,
.item-category:active .info-item-category.under { }
.item-category:hover .info-item-category.under .et_pb_blurb_content,
.item-category:active .info-item-category.under .et_pb_blurb_content { }
Thanks!
I have the same problem as Brian, the front image looks so smaller and the back one gets bigger when hover over. Have you found any solution for this @Brian
THIS IS AWESOME! Thank you!