Flip cards are highly popular due to their sleek animations and ability to store more information in a compact space. When you hover the mouse over the flip card, it will flip to the back side, revealing more content. You can also add a button on the flip card for additional content. In this blog, I will guide you on how to create a flip card in Divi theme modules, both with a plugin and without a plugin using HTML, Custom CSS.

Divi makes it easy to use CSS when there isn’t a built-in option for creating a specific module. You can combine two modules into one, using one side for the front and the other for the back. However, there’s a simpler way. We’ll create flip cards using Divi’s built-in Code module, making the process much easier. You’ll enjoy this journey of creating a flip card.

First, we’ll create a flip card using HTML and CSS. You might wonder: how can we create a flip card using HTML and CSS in Divi? The answer is yes, we can. Divi has a pre-made module called Code where we will simply copy and paste the provided code. Don’t worry about the CSS code, we will provide it for you.

After covering CSS, we’ll show you how to create flip cards without CSS, using a plugin. Creating cards through a plugin is very simple and easier compared to using CSS. However, keep in mind that using too many plugins in WordPress is not good practice for Divi SEO, as it can slow down your website and negatively affect user experience. Therefore, always try to use CSS for any module not available in Divi by default.

Let’s get started with custom CSS. Without further ado, let’s dive in!

Creating Flip Cards Using Custom CSS

Using CSS to create a flip card is easy if you stay focused and determined. Divi provides a Custom CSS option in every module setting and even in the page settings. Don’t worry; I will guide you with a clear and concise explanation, making it very easy for you. Follow our step-by-step instructions, and soon you’ll find this task as simple as child’s play.

Read More:How to Make Gradient Text in Divi Without Code

Step 1: Create a Practice Page

First, create a new page specifically for practice, as illustrated in the image below.

Create a Practice Page

Step 2: Create a code Section

After creating a new page, you should be in the Visual Page Builder, as shown in the image below. Click on the plus icon button to add a new section. Create as many columns as you want; for example, I created three columns in one row, as illustrated in the image below. Once you have completed this step, the Insert Module section will appear. In this section, you will see two options: New Module and Add from Library. Click on New Module, type Code in the search bar, and select the Code module.

Create a code Section

Step 3: How to copy and Paste Custom HTML and CSS

First, open the Code settings and navigate to the Content option. There, you will find a text code box that appears black, similar to a command prompt. Copy and paste the given HTML code into this code box. This will create the body structure of your flip card, where you will see the front and back options written. If you have done this correctly, it means your flip card is ready for content editing.

HTML Code Copy From Here

<!-- Start Here -->
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <img src="URL_TO_YOUR_IMAGE" alt="Image" class="flip-card-image">
      <h3 class="flip-card-heading">Front Heading</h3>
      <p class="flip-card-description">Front Description</p>
    </div>
    <div class="flip-card-back">
      <h3 class="flip-card-title">Back Title</h3>
      <p class="flip-card-description">Back Description</p>
    </div>
  </div>
</div>
<!-- End Here -->

How to copy and Paste Custom HTML

Read More: How To Add Shape Dividers In Divi

Step 4: How to copy and Paste Custom CSS

After adding content, copy and paste the provided CSS code into the Advanced > Custom CSS section.In the Custom CSS section, you will find three CSS pasting options in the shape of boxes, resembling command prompt windows. Paste the CSS code into the Elements box, as shown in the image below.

Create a Practice Page

CSS Code Copy From Here

/* Star from Here */
.flip-card {
  background-color: transparent;
  width: 100%;
  height: auto;
  perspective: 1000px;
  border: 2px solid #000; /* Solid border color */
  border-radius: 10px; /* Optional: to give rounded corners */
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: auto;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

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

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  padding: 10%; /* Padding for content */
}

.flip-card-front {
  background-color: blue; /* Blue color for the front */
  color: white;
  padding-bottom: 5rem; /* Adjust the percentage as needed */
    box-sizing: border-box; /* Ensure padding is included in the total size */
  
}

.flip-card-back {
  background-color: green; /* Green color for the back */
  color: white;
  transform: rotateY(180deg);
  padding-bottom: 5rem; /* Adjust the percentage as needed */
    box-sizing: border-box; /* Ensure padding is included in the total size */
  
}

.flip-card-image {
  width: 100%; /* Thumbnail width */
  height: 100%; /* Thumbnail height */
  object-fit: cover; /* Ensures the image fits within the thumbnail */
  display: block;
  margin-bottom: 15px; /* Space between image and text */
}

.flip-card-heading, .flip-card-title {
  margin: 10px 0; /* Space between heading/title and description */
color:white;
}
}

/* Center-align headings */
h1, h2, h3, h4, h5, h6 {
    text-align: center;
}
.flip-card-description{
  
  text-align: center;
}



.flip-card-description {
  margin: 0;
}
/* End Here */

Save your changes by clicking the green tick mark button. You will now see a beautiful flip card created, but it will be simple, in black and white, and without images or content.

Don’t worry—in the next steps, we will guide you on how to customize the flip card by uploading images, headings, and descriptions on both sides of the card.

Result of Flip Card After Pasting HTML and CSS

Step 5: How to Set the Height of a Row

To create a more aesthetically pleasing flip card, it is essential to set the height of the row. If the card contains a lot of content, it may increase in size and overlap the borders of the row section. To prevent this issue, we need to adjust the row height beforehand.

Click on the settings icon of the row, as shown in the image below. Navigate to the Design section.

Click on Sizing, scroll down, and find the Height option. Set the height to your desired value and press the tick button to save.

Your row height will now be appropriately adjusted. In the next step, we will guide you on how to upload data to the flip card.

Set the Height of a Row

Step 6: Customize Your Flip Card

In this step, we will customize the flip card according to our needs and the content we want to upload. First, click on the flip card, and you will see a coding-like structure. Don’t worry—just follow these steps as illustrated in the image below: First, paste your image URL within the quotation marks. If you can’t copy the image URL, don’t worry; I will explain that in the next step. For now, just follow along.

Next, you will see an “H3” tag, which stands for “Heading 3”. You can easily change this to “H1” or” H2” if needed. Your task is to change the heading text between the two “H3’ tags.
Scroll down, and you will find a “P” tag, which stands for paragraph. Paste your description between the two “P” tags, and follow the same process for the back side of the flip card. Congratulations! Your flip card is now ready, and you can add it to the specific page.

Customize Your Flip Card

Read More: Adding Divi Theme Fade-in effect to Text, Images, Modules and Buttons

Step 7: How to Copy Image URL

Copying an image URL is straightforward and simple. There are two ways to copy an image URL. If you want to copy the URL of an image already uploaded to the WordPress Library, follow these steps: Click on Media > Library in the WordPress Dashboard. Then, to select a pre-uploaded image as shown in the image below, simply click on that particular image. The image will open, and on the right side, you will find the URL. Copy it from there.

How to Copy Image URL

If you want to upload a new image from your PC, click on Media > Library > Add New Media File > Drop the file to upload and select the particular image. Once the image is uploaded to the WordPress Media Library, click on it as illustrated above and follow the same methods to copy and paste the URL.

How to Copy Image URL Uploaded From Pc

Your issue is resolved! The HTML and CSS creation of the flip card is now complete and your Flip Card is Ready as Shown in the below Screenshot.

If you still have questions, please proceed to the next step, where we will guide you on how to create a flip card using a plugin.

Result after Uploaded Image

Read More: How to Include a Scroll Down Button in Your Divi Website

Step 8: How To Create Flip Card Using Plugin

Creating a flip card using a plugin is a simple task. However, finding a free plugin that works well can be challenging, as some free plugins may not meet our expectations. Fortunately, we found a highly-rated plugin that is easy to use. To get started, go to the Plugins section under Appearance and click on Add New. In the search bar, type “Flip Cards Module For Divi” and search for it, as shown in the image below. Install the plugin.

Create Flip Card Using Plugin

Step 9: Customize Flip Card Using Plugin

After installation of the plugin, enable the Visual Page Builder for the page where you want to add the Flip Card. Create a row and decide how many Flip Cards you want to add. For instance, if you want to create three columns in a single row, insert three columns as illustrated in the image below. Then, click on one of the plus buttons to open the settings menu. Select New Module and either search for “Flip Card” or scroll down to find the Flip Card module. Click on it to add it to the particular column, as shown in the image below.

Customize flip Card

Read More: Adding Divi Theme Fade-in effect to Text, Images, Modules and Buttons

Step 9.1: Changing the Content of the Flip Card

Your Flip Card is now ready for content uploading. Click on the Flip Card settings, then select Content. Under the Front tab, as shown in the image, you’ll first see the Front Title option. Click on it to change the title as needed. Next, scroll down to find the Description option and update it accordingly. After making these changes, save your work. In the next step, we will guide you on how to modify the back content of the Flip Card.

Changing the Content of the Flip Card

Now, reopen the same settings and click on Content. You will see the same options for Front and Back. This time, click on Back and change all the content, including the Title and Description. Save your changes as you did previously.

Changing the Content of the Flip Card

Read More: Creating Blog Posts and Blog Pages Using Divi

Step 9.2: Upload Image to the Flip Card

To upload an image to the Flip Card, click on the Flip Card settings and select Content. Click on Front and scroll down past the description to find the Image Uploading option, as shown in the image below. Upload the image as instructed previously. After uploading the image for the front side, click on Back, scroll down, and upload the image similarly. Once you have uploaded the images for both sides, the image uploading is complete.

Upload Image to the Flip Card

Step 9.3: Customization of Flip Card

Open the Flip Card settings again and go to the Design section, where you can further customize your Flip Card. The first two options are for Front and Back Icon Alignments, allowing you to center or align the icons to any side depending on your preference. However, if there is no icon in your Flip Card, as in the case where you used an image instead of an icon, there is no need to adjust the alignment, as shown in the screenshot. If you use an icon, you can align it as desired.

Customization of Flip Card

Read More: 7 Best Accordion Layouts for Divi to Enhance Your Website’s Visual Appeal in 2024

Step 9.4: Flip Animation and 3D Settings

The next customization in the Design section is Animation, which makes the Flip Card more attractive. After the back icon alignment, the third section is for animation. There are four animation options: Up, Down, Left, and Right. You can animate your Flip Card in any of these four directions. Following the animation section is a brief section for the 3D Effect, as illustrated in the image below. Toggle the button to Yes to enable the 3D effect and see the beautiful and attractive result in the screenshot.

Flip Animation and 3D Settings

Step 9.5: Text Alignments Setting

The next section in the Design settings is Text Settings. The first option here is Text Alignment, with four choices: Right, Center, Left, and Full Screen. Adjust these settings according to your preference. The text settings section is optional, so you can apply only the settings you need to create your desired design. Another option in text settings is Text Shadow, which adds a shadow to the text for more attraction.

Step 9.10:  Front Title Text settings

After text settings, proceed to the Front Title Text Settings. The first option is Front Heading Level, allowing you to choose or change from H2 to H3, etc, depending on your preference. Next is Font Title Font Style, where you can select the font style that matches your website’s design. The next is Front Title Weight option lets you adjust the weight of the font. After weight, you can choose the Front Title Font Style, such as Italic, Underline, or Bold. The Front Title Text Alignment is similar to the previously described text alignment options. You can also set the Front Title Color and Height according to your website’s needs. Lastly, there is a Shadow option for the front title, which has already been described.There is no need to explain the Back Title settings separately, as the process is the same. Apply the same steps for the back title settings.

Front Title Text settings

Read More: Divi Slider Module Pack: Unlock 100+ Stunning Sliders

Step 9.11: Front Body Text Settings

This section covers the Front Body Text settings, but since the steps are similar to the Front Title settings, there’s no need to explain everything again. We will only cover a few settings that were not clearly explained previously.

In the Front Body Text settings, you will find options for Text Size, Text Spacing, and Line Height. Text Size should be consistent with the rest of your website to ensure a uniform user experience. Headings should all be the same size, and paragraphs should also maintain consistent sizing. Text Spacing allows you to adjust the space between letters, making the text either clearer by increasing spacing or more compact by decreasing it. Line Height controls the space between lines of text, ensuring readability and a visually pleasing appearance. Finally, the Shadow option, which we’ve already discussed, can add a 3D effect to your text.After configuring the Front Body Text, you can move on to the Back Body Text settings, which follow the same process. No further explanation is needed—just follow the same steps as shown in the screenshot below.

Front Body Text Settings

The next setting option provided by the Flip Card ”Button Setting” is not functioning, so there’s no need to explain it. After the button settings, there are a few options that are default Divi settings, including Sizing, Spacing, Border, Box Shadow, Filter, Transform, and Animation. These have already been explained, if you want to learn more about Divi Click.

Final Design on Desktop

Final Design on Desktop

Conclusion

In this blog post, we’ve explored two effective methods for adding flip cards to your Divi website: using custom CSS and employing a plugin. Flip cards are a visually appealing way to display information in an interactive format, enhancing user engagement on your site.

Custom CSS Method: We began by demonstrating how to create flip cards using HTML and CSS. This approach gives you precise control over the design and behavior of your flip cards by leveraging Divi’s Code module. By following the step-by-step guide, you can customize the flip cards to match your site’s aesthetic and functionality needs. We also covered how to set the row height to ensure the flip card content displays correctly without overlap.

Plugin Method: We then introduced a simpler alternative using a plugin. While plugins like the “Flip Cards Module For Divi” offer ease of use and quicker setup, it’s important to consider their impact on site performance and SEO. This method allows you to integrate flip cards into your site with minimal effort, directly through the Divi Page Builder.

Customization: Regardless of the method you choose, both options provide ample customization capabilities. You can easily add images, headings, and descriptions to both sides of the flip card, tailoring it to fit your specific requirements.

Creating flip cards in Divi can add a dynamic and engaging element to your website. Whether you prefer the hands-on approach with custom CSS or the convenience of a plugin, both methods offer valuable tools for enhancing your site’s visual appeal and user experience. If you encounter any challenges or need further guidance, don’t hesitate to explore additional resources or seek assistance. Happy designing!

Read More: 10 Free Divi Child Themes Perfect for All-Purpose Websites in 2024