The Divi theme is a powerhouse for creating stunning websites, but sometimes, adding custom styles can make your site truly stand out. One design trend that never goes out of style is the card layout – a clean, elegant way to showcase content. In this article, we’ll walk you through a CSS snippet that enhances your Divi modules with a modern card design, perfect for portfolios, blog posts, team member sections, or feature highlights.

What Is a Card-Style Design?

A card-style design mimics physical cards with subtle shadows, rounded corners, and defined spacing. This design trend is widely used on platforms like Pinterest, Trello, and Google Material Design for its simplicity and visual appeal. By adding a card layout to your Divi modules, you create a polished and professional look that improves both readability and user engagement.

The CSS Snippet: Modern Card Style for Divi

Below is a custom CSS snippet to apply a card-style layout to any Divi module. The design includes a clean background, rounded corners, subtle shadows, and a hover effect for interactivity.

/* Add a card-style appearance to any Divi module */
.custom-card {
    background: #ffffff; /* Card background color */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    padding: 20px; /* Inner spacing */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

/* Add hover effect for interactivity */
.custom-card:hover {
    transform: translateY(-5px); /* Slight lift */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
}

/* Style the title inside the card */
.custom-card h2 {
    font-size: 1.5rem; /* Title font size */
    color: #333; /* Title color */
    margin-bottom: 15px; /* Space below the title */
    text-align: center; /* Center align the title */
}

/* Style paragraph text inside the card */
.custom-card p {
    font-size: 1rem; /* Paragraph font size */
    color: #555; /* Text color */
    line-height: 1.6; /* Improve readability */
}

/* Optional: Adjust image style inside the card */
.custom-card img {
    width: 100%; /* Full-width responsive images */
    border-radius: 10px; /* Rounded image corners */
    margin-bottom: 15px; /* Space below the image */
}

How to Apply the CSS Snippet in Divi

Step 1: Add the CSS

Navigate to your WordPress dashboard and go to Divi > Theme Options > Custom CSS. Paste the CSS snippet above into the text area and save your changes.

Step 2: Assign the Class

In the Divi Builder, add the class custom-card to the module, row, or section you want to style. To do this:

  1. Open the settings for your module, row, or section.
  2. Go to the Advanced tab and find the CSS Class field.
  3. Enter custom-card.

Step 3: Customize the Content

Add your content – images, text, or headings – to see the card-style layout in action. The snippet is responsive by default and will adapt to various screen sizes.

Why Use a Card-Style Layout?

Cards are visually appealing and functional. Here are some benefits:

  • Clarity: Each card acts as a self-contained content block, making information easy to digest.
  • Interactivity: Subtle hover effects enhance user engagement without overwhelming the design.
  • Flexibility: Cards work well for various types of content, from blog posts to product listings.

Customizing the Card Design

The CSS snippet is highly customizable. Here are some quick tweaks you can make:

  • Background Color: Change the background property to match your site’s color scheme.
  • Shadow Intensity: Adjust the box-shadow values for lighter or more dramatic effects.
  • Rounded Corners: Modify the border-radius to create sharper or softer corners.
  • Hover Effects: Experiment with the transform and box-shadow in the :hover rule for unique animations.