How to Create Flipbox in Gutenberg (without Plugin)

In web design, a flipbox is an element that, when hovered over, reveals a second, alternate side with different content. You can showcase features, services, products, testimonials, or other content interactively and engagingly with flip boxes on your website.

Unfortunately, the WordPress Gutenberg editor does not come equipped with any tools for making the flipbox by default. In this article, we will show you how to create a flipbox in Gutenberg without using any plugins. A combination of custom CSS and native Gutenberg blocks, like Column, Group, etc., can be used to achieve this.

Steps to Create Flipbox in Gutenberg

Step 1: Add the Column Block

We will start everything from scratch, so go to the WordPress Gutenberg editor to create a new post type (page or post). Afterward, add the Column block to the content area.

In this example, we add the Column block with three columns.

Once you add the columns, assign the CSS class flip-box to each column.

Step 2: Add the Group Block

The Inner Flipbox

Next, please add the Group block inside each column.

Once you add the Group block inside each column, assign the CSS class flip-box-inner to each Group block.

Step 3: Create the Front-Side Flipbox

Now, we’re going to start to create a front-side flipbox.

First, inside each flip-box-inner group, please add another Group block.

Next, assign the CSS class flip-box-front to each Group block you’ve just created.

Next. it’s time to add your content for the front side of the flipbox using any Gutenberg blocks with CSS class flip-box-front.

For this example, we add the Image block to each front side’s content and set those image’s resolution to Medium.

Step 4: Create the Back-Side Flipbox

Alright, it’s time to create the back side of your fipbox.

You can simply duplicate each front-side Group block with a CSS class flip-box-front.

Once you duplicate those groups, change its CSS class to flip-box-back. Afterward, you can change the back-side flipbox content to your preference. For this example, we change the images and add the Button block to each back side’s content.

Step 5: Add the Custom CSS

Well, as you can see from the image above, now you have front-side and back-side content. In the last step of this tutorial, we will add the custom CSS

On your WordPress dashboard, go to Appearance -> Customizer -> Additional CSS. Copy the CSS snippet below and paste it into the input field. If you use a block theme, you may need to enable the theme customizer first. We have a separate post covering how to enable a theme customizer on a block theme you may want to read.

Here is the CSS snippet you can use:

.flip-box {
  display: inline-block;
  perspective: 1000px;
  margin: 0 auto;
  width: 400px;
  height: 300px;
}

.flip-box-inner {
  position: relative;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
	margin: 0 auto;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-box-back {
  transform: rotateY(180deg);
} 

Once you finish adding the CSS snippet, apply it by clicking the PUBLISH button.

That’s it. To see the result, you can preview your page by clicking the Preview button. Don’t forget to save or publish your project if you want to.

Note: The custom CSS snippet we gave you applied a horizontal flipbox (see the GIF above). If you want to create a vertical flipbox, you can customize the CSS snippet by replacing the values rotateY with rotateX (lines 16th and 28th).

The Bottom Line

This article shows how to leverage the power of Gutenberg’s core blocks and custom CSS to build responsive flipbox elements. By combining some Gutenberg blocks and targeted CSS transformations, you can achieve engaging flip effects without relying on any third-party plugins. This method gives you more design control and avoids plugin conflicts, making it a valuable skill for you as a web developer or design enthusiast.

However, we have to admit that this method has its drawbacks and limitations. WordPress plugins like Elementor and Divi give you much more flexibility and ease of use when creating flipbox pages. Therefore, if you are looking for a more straightforward approach or are unhappy with the outcomes of your flipbox made using this method (without the plugin), we suggest trying out those plugins.