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.



About Javed Iqbal

Mr. Javed Iqbal is a senior php developer and co-founder at MZ Creative Studio. His experience is more than 8 years in this field. He loves working on challenging projects.

11 thoughts on “How to create flipbox in divi theme

  1. 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.

    1. 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.

  2. 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

    1. 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!

  3. 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

Leave a Reply

Your email address will not be published. Required fields are marked *

Do you have a website project you’d like to discuss?

Get in touch