Build Beautiful WordPress Websites Using Divi and Divi Builder

How To Design A Creative FAQ Section With Divi

Rifat Divi Tutorials May 21, 2021

"Frequently Asked Question(FAQ)" is a special section where a service provider shares important information or clarifies doubts that people usually ask. This is a vital section for any website that provides any service because people usually visit their first to find answers to their queries. A FAQ page with creative design is a great way to tell how beauty thirsty you are, and at the same time, you care about their inquires.

FAQ section is a fixed section with several questions and answers. It is essential to keep them organized. In today's tutorial, we will learn how we can use Divi to design a creative FAQ section with clickable tabs.

Sneak Peek

This is how our final design will look like.

Building The Structure

Add: Section 1

Background Color

We will start by adding a background color on the initial section of our working page. Open the section settings and apply the background color.

Download Divi The Best WordPress Theme

The Most Popular WordPress Theme In The World And The Ultimate WordPress Page Builder

Download Divi
  • Background Color: #fffbf2

Spacing Settings

We'll make some adjustments on spacing.

  • Bottom Padding: 0px

Border Settings

Now, we will apply a custom border to the section.

  • Border Width: 1vw
  • Border Color: #fffbf2

Box Shadow Settings

Add a box shadow.

  • Box Shadow Vertical Position: 0px
  • Box Shadow Spread Strength: 1px
  • Shadow Color: #000000
  • Box Shadow Position: Inner Shadow

Z Index Settings

Increase the Z-index value in advanced tab and we are done with this section settings.

Add: Row 1 On Section 1

Column Structure

Add a new row (mentioned in the image) to the newly finished section.

Sizing Settings

Open the row settings and make the following adjustments.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Max Width: 1380px

Spacing Settings

Make some adjustments on the spacing tabs too!

  • Top Margin: 3%
  • Bottom Margin: 3%
  • Left Padding: 1%
  • Right Padding: 1%

Add: Column Text Module

H1 Content

Add a text module to the row and add some H1 tag.

H1 Text Settings

Modify the H1 texts settings.

  • Heading Font: Cormorant Garamond
  • Heading Font Weight: Bold
  • Heading Text Size: Desktop: 60px, Tablet: 42px, and Phone: 36px

Add: Divider Module On Column

Add a divider module below text module.

Visibility Setting

Ensure that Show Divider Option is enabled.

  • Show Divider: Yes

Line Settings

Switch to the design tab and change the color of the divider.

  • Line Color: #000000

Sizing Settings

Below line settings, make some adjustments to sizing.

  • Divider Weight: 2px
  • Max Width: 150px
  • Height: 2px

Spacing Settings

Now, add some margin from the spacing settings.

  • Top Margin: 4%

Add: Row 2 On Section 1

Column Structure

Add a 2nd row below the 1st one with same column structure.

Sizing Settings

Change the sizing settings of newly created row from design tab.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 1
  • Max Width: 1380px

Spacing Settings

Make some little adjustments on spacing section too.

  • Top Padding: 0px
  • Bottom Padding: 0px

Add: Column Text Module 1

H3 Content

Add a new Text module and add some H3 content.

Background Color

Add a background color.

  • Background Color: #ffffff

H3 Content Settings

Make these settings to H3 text.

  • Heading 3 Font: Karla
  • Heading 3 Font Weight: Bold
  • Heading 3 Font Style: Uppercase
  • Heading 3 Text Alignment: Center
  • Heading 3 Text Size: 15px
  • Heading 3 Letter Spacing: 4px

Sizing Settings

Change the sizing settings for different screen sizes.

  • Width: Desktop - 22%, Tablet & Mobile - 44%

Spacing Settings

Customize spacing values.

  • Right Margin: 1%
  • Top Padding: 30px
  • Bottom Padding: 20px
  • Left Padding: 5%
  • Right Padding: 5%

Border

Add a border to our running design.

  • Border Width: 1px

Box Shadow

Add a box shadow to make the design more vibrant.

  • Box Shadow Vertical Position: 0px
  • Shadow Color: #fff3dd
  • Box Shadow Position: Inner Shadow

Main Element CSS

As a final task for this text module, we will add a custom CSS code from the advanced tab. This CSS will combine with the entire text design and allow to display multiple module side by side of the same category

display: inline-block;

Duplicate The Text Module 3 Times

Now clone the newly finished text module 3 times.

Change Content On Cloned Modules

Now change the content on cloned modules according to you need.

Add: Section 2

Spacing

Now, add a "Regular" section right beneath the previous one and change the spacing settings from the design tab.

  • Top Padding: 100px
  • Bottom Padding: 100px

Add: Row 1 On Section 2

Column Structure

Now, add a new row to this section. Use the column structure marked on the image.

Sizing Settings

Open the row settings and make adjustments on sizing from design tab.

  • Use Custom Gutter Width: Yes
  • Gutter Width: 2
  • Max Width: 1380px

Add: Toggle Module 1 On Column

Add Content

Add a Toggle module on the row and add content.

Icon Settings

From the design tab, make adjustments on icon settings.

  • Icon Color: #000000
  • Use Custom Icon Size: Yes
  • Icon Font Size: 24px

Toggle Settings

Change the toggle settings .

  • Open Toggle Background Color: #fffbf2
  • Closed Toggle Background Color: #ffffff

Title Text

Its time for customize the title text.

  • Open Title Text Color: #333333
  • Title Text Color: #333333
  • Title Heading Level: H4
  • Title Font: Cormorant Garamond
  • Title Font Weight: Bold
  • Title Text Size: Desktop: 36px, Tablet: 34px, and Phone: 28px

Closed Title Text

Change color for close title text.

  • Closed Title Text Color: #333333

Body Text

We'll customize the body text too.

  • Body Font: Karla
  • Body Text Size: 17px
  • Body Line Height: 1.9em

Spacing Settings

Now, change some spacing values to make it responsive.

  • Top Padding: Desktop: 2%, Tablet: 4%, and Phone: 6%
  • Bottom Padding: Desktop: 2%, Tablet: 4%, and Phone: 6%
  • Left Padding: 5%
  • Right Padding: 5%

Border Settings

Then, change the border color into black.

  • Border Color: #000000

Toggle Content CSS

From the advanced tab, add a CSS code to the toggle content area.

margin-top: 30px;

Duplicate The Toggle Module

As we are done with our first toggle module, clone it as many times you need.

Add Unique Content

Change all the content from cloned toggle modules. This way it will look more unique.

Toggle Module State Settings

Expand the Toggle module 1 and change the state.

  • State: Open

Duplicate Entire Row 3 Times

We have now completed our 1st set of toggle modules. Now we will clone it three times. There will be four toggle module rows. 4 rows for four sections we have created earlier.

Change Content On Duplicated Modules

Change content on cloned modules according to your need.

Functionality Adding

Section 1 Row 2: Consecutive CSS ID Adding

Now we will add some custom CSS ID to our modules. Here we are trying to make a design where a visitor will click on FAQ tabs, and the following FAQ toggles will expand. To make this design functional, open each text module from "Row 2 On Section 1" and add the following consecutive CSS IDs.

  • Text Module #1: faq-item-1
  • Text Module #2: faq-item-2
  • Text Module #3: faq-item-3
  • Text Module #4: faq-item-4

Section 2 All Row: Consecutive CSS ID Adding

Then we will add CSS IDs to all four rows that contains toggle module in Section 2. Also, we will maintain the same consecutive order.

  • First Row: faq-tab-1
  • Second Row: faq-tab-2
  • Third Row: faq-tab-3
  • Fourth Row: faq-tab-4

Add: Code Module To Row 1 On Section 1

Since we have rightly placed all the consecutive CSS IDs, we will now add some CSS and JQuery codes to our page. Add a new Code module in the 1st row of section 1 (below divider module).

Make sure style and script tags are added in the advanced tab.

Add: CSS Code

Copy and paste the following code between style tags.

[id*="faq-item"] {
cursor: pointer; 
}
 
[id*="faq-tab"]{  
position: absolute!important;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
 
 
.active-faq-item {
color: #6b63dd !important;
background-color: #fff;
}
 
.hide-faq-tab{  
visiblity: hidden;
opacity: 0;  
}
 
.show-faq-tab{
visibility: visible !important;
opacity: 1 !important;
z-index: 12;
   
position: relative !important;
left: 0 !important;
transform: translateX(0%) !important;
}
   
.faq-item-active {
background-color: #000 !important;
color: #fff !important;
}
 
.faq-item-active h3{
color: #fff !important;
}

Add: JQuery Code

Now add some JQuery code between script tags.

jQuery(document).ready(function($){
 
$('#faq-item-1').addClass('faq-item-active');
$('#faq-tab-1').addClass('show-faq-tab');
$('[id*="faq-tab"]').not('#faq-tab-1').addClass('hide-faq-tab');
  
$('[id*="faq-item"]').click(function() {
  
var selector = $(this).attr('id').replace('item', 'tab');
var $faqSelect  = $('#' + selector);
 
$('[id*="faq-tab"]').removeClass('show-faq-tab');
$('[id*="faq-tab"]').addClass('hide-faq-tab');
$faqSelect.addClass('show-faq-tab');
  
$('[id*="faq-item"]').removeClass('faq-item-active');
$(this).addClass('faq-item-active');
    
});
});

Final Result

We are done with the job, and our custom-designed FAQ section will look like this.

Final Words

We can make all types of beautiful designs through Divi, which will keep the visitors on the website for a long time. Today's interactive FAQ page design is one of those many. If you want to see more such Divi tutorials, let us know in the comments. Also, if you want us to do the tutorial of your choice, let us know. If you enjoyed today's tutorial, a share would inspire us to bring more tutorials for you.