Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level.

This week, as part of our ongoing Divi design initiative, we’re going to show you how to create an interactive question card grid for your next about page with Divi. We’ll be using the Internet Service Provider Layout Pack’s about page but you can use the approach on any page you’re working on. It gives a different user experience to visitors and allows you to interact with them on the information you’re sharing. Once you get the approach, you can create alternative question card grid designs of your choice by playing around with Divi’s built-in options.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at the question card grid we’ll be recreating from scratch.

Desktop

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi Creating an Interactive Question Card Grid for Your Next About Page with Divi

Mobile

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-1 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Let’s Start Creating!

Create New Page Using The ISP Layout Pack’s About Page

To create the design we’ve shown above, we’re going to use the Internet Service Provider Layout Pack’s about page so go ahead and create a new page using this layout. As usual, you can find it in your premade layouts.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi Creating an Interactive Question Card Grid for Your Next About Page with Divi

Delete All Sections Between Hero Section & Footer

We’ll replace all the current content with a question grid card. To do that, we’ll first need to remove all sections in between the hero section and footer.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-1 Creating an Interactive Question Card Grid for Your Next About Page with Divi

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-2 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Add New Section in Between

The question card grid we’ll be creating can contain any kind of company questions you want to answer. You can also use the grid to showcase frequently asked questions. Continue by adding a new regular section in between the hero section and footer of the page.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-3 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Add New Row

Column Structure

Without making any changes to the section settings, add a new row using the following column structure:

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-4 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Sizing

We’re going to remove all the default space between columns. Open the row settings and make some changes to the sizing settings.

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Equalize Column Heights: Yes

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-5 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Spacing

We’ll still need some space between columns to have a nice-looking design. Go to the spacing settings and add some custom padding values.

  • Top Padding: 10px
  • Bottom Padding: 10px
  • Column 1 Left Padding: 10px (Desktop), 5px (Tablet & Phone)
  • Column 1 Right Padding: 5px
  • Column 2 Left Padding: 5px
  • Column 2 Right Padding: 5px
  • Column 3 Left Padding: 5px
  • Column 3 Right Padding: 10px (Desktop), 5px (Tablet & Phone)

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-6 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Add New Blurb Module to Column 1

Add Content

To create the hover effect, the only module we’ll be needing is a Blurb Module. We’ll start by creating one and clone it afterwards to create the entire outcome. Add a Blurb Module to column one. Add the question you want to answer to the title field and the answer to the content box.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-7 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Select Icon

Then, select a fitting icon in the image & icon settings. This icon will help your visitors understand that they have to hover the question card to see the answer.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-8 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Default Icon Settings

Continue by changing the icon settings in the design tab.

  • Icon Color: #aaaaaa
  • Icon Placement: Top
  • Use Icon Font Size: Yes
  • Icon Font Size: 40px

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-9 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Hover Icon Settings

And modify the icon color on hover. We’re using an entirely transparent color on hover to make the icon disappear on hover.

  • Icon Color: rgba(255,255,255,0)

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-10 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Text Settings

Next, change the text orientation in the text settings.

  • Text Orientation: Center

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-11 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Default Title Text Settings

Make some changes to the title text settings as well.

  • Title Font: Poppins
  • Title Font Weight: Bold
  • Title Text Color: #333333
  • Title Text Size: 40px
  • Title Letter Spacing: -3px

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-12 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Hover Title Text Settings

And change the title text color on hover. We’re, again, using an entirely transparent color to make sure the question doesn’t show up once someone hovers the Blurb Module.

  • Title Text Color: rgba(255,255,255,0)

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-13 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Default Body Text Settings

Continue by changing the body text settings.

  • Body Font: Open Sans
  • Body Font Weight: Light
  • Body Text Color: rgba(255,255,255,0)
  • Body Text Size: 25px
  • Body Letter Spacing: -2px
  • Body Line Height: 1.6em

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-14 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Hover Body Text Settings

And change the body text color on hover.

  • Body Text Color: #000000

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-15 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Spacing

To shape our module into a square, we’ll add some custom padding values.

  • Top Padding: 9vw
  • Bottom Padding: 9vw
  • Left Padding: 50px
  • Right Padding: 50px

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-16 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Default Rounded Corners

We’re also giving our module ’30px’ of rounded corners.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-17 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Hover Rounded Corners

We’re removing these rounded corners on hover.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-18 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Default Border

And we’ll add a bottom border.

  • Bottom Border Width: 0px
  • Bottom Border Color: #0fffeb

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-19 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Hover Border

Change the bottom border width on hover for it to appear.

  • Bottom Border Width: 10px

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-20 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Box Shadow

To add some depth, we’ll use a box shadow as well.

  • Shadow Color: rgba(0,0,0,0.05)

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-21 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Transitions

Last but not least, we’ll reduce the transition duration in the advanced tab.

  • Transition Duration: 250ms

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-22 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Clone Blurb Module Twice & Place in Remaining Columns

Now that your first Blurb Module is done, you can save time by cloning it and placing the duplicates in the two remaining columns.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-23 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Change Content

Make sure you change the content of each one of the duplicates.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-24 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Change Bottom Border Colors

Along with the bottom border color.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-25 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Clone Entire Row Twice

You can create the question card grid by cloning the row up to as many times as you want.

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-26 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Change Content & Bottom Colors For Each Item Individually

But don’t forget to change the content and bottom colors to make each one of the question cards unique!

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-27 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Preview

Now that we’ve gone through all the steps, let’s take a final look at the end result on different screen sizes.

Desktop

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi Creating an Interactive Question Card Grid for Your Next About Page with Divi

Mobile

creating-an-interactive-question-card-grid-for-your-next-about-page-with-divi-1 Creating an Interactive Question Card Grid for Your Next About Page with Divi

Final Thoughts

In this post, we’ve shown you how to create an interactive question card grid using Divi’s Internet Service Provider Layout Pack. Although we’ve made sure the design matches the layout pack’s style, you can use this method to transform any about page into one that’s interactive as well. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

SEO News and More

SEO News and More

Share This