10. Let's Celebrate!

Nu firar vi!You are a star!

 

6.9d Design a FAQ Layoput With Divi

  • Your progress:

Let’s create a list of frequently asked questions and answers using a toggle format. When visitors click a question, it will expand to display the answer. To get started, return to our development site and follow these steps:

1. Click the blue plus sign to add a new section. Choose a regular section with a two-column 50/50 design.

2. Insert a toggle module into one of the columns. Before making any changes, close the module.

3. Go to the section settings and set the background color to dark gray (#1c1c1c).

4. Return to the toggle module and start by adding your questions and answers. You can use placeholder text (e.g., Lorem Ipsum) for now.

5. In the “State” tab, set the toggle to be closed by default.

6. Customize the design by changing the background color of the toggle to dark gray.

7. Go to the “Design Settings” for the icon and make it gold. Adjust the size if necessary.

8. Configure the toggle background color to match the dark gray.

9. Customize the text settings. Make the title text white and increase the font size. Consider using your chosen font (e.g., Cormorant Garamond).

10. Adjust the body text settings. Change it to “Carla,” set the font size to 16 pixels, and use a light gray text color.

11. Add a gold border to the toggle, either for all sides or just the bottom, based on your preference.

12. Duplicate the toggle module to create more FAQs. Copy and paste modules to speed up the process.

Don’t forget to add a heading at the top of the FAQ section. Here’s how:

1. Add a new row with a single column.

2. Insert a text module and write “FAQ.”

3. Customize the text settings. Center-align the text, set the color to light, and adjust the font size.

That’s it! You now have a stylish and functional FAQ section for your website.

All links, files and code snippets mentioned in the chapter is available below.

This is a free course about how to design a website with WordPress and Divi. The course is funded by affiliate links. If you purchase something from these links, we'll receive a commission but it will never cost more for you. Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes or SiteGround. DiviMundo is 100% independent. We only promote services that we like and use ourselves on a daily basis.

Victor Duse
Victor Duse was born in Sweden in 1980 and has over 20 years experience of web design, web development and teaching in sectors like media, marketing, energy, industry and the public sector. He's the founder of DiviMundo and the WordPress Agency Duse Media in Malmö, Sweden. Victor is a Brazilian Jiu-Jitsu black belt and he has a soft spot for dark chocolate.

Comments

Feel free to ask questions and leave feedback on the tutorial here.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo