How to add a FAQ page

You have created your website using our WebBuilderPro website builder and now need to add a FAQ page.

The script below must be copied and pasted into an HTML module.

1. How to insert a HTML module in WebBuilderPro

insert html module

Copy and paste the text below into an HTML module in WebBuilderPro. Right click on pencil in top right hand corner of HTML box, select 'Properties' and paste code below. You can then change the questions and answers in RED text below accordingly. The background colour and font colour can also be changed in the code below (answers, questions)

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FAQs Template</title>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>

$( function() {
$( "#faqs" ).accordion( {
active: false,
collapsible: true,
animate: 300,
classes:{
"ui-accordion-header": "questions",
"ui-accordion-header-active": "questions-active",
"ui-accordion-content": "answers",
}});
} );
</script>
<style>
.questions {
background-color: #fff;
padding: 10px;
color: #888888;
cursor: pointer;
border: none;
margin: 0px;
outline: none;
}

.questions h3{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 15px;
}

.answers p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 15px;
color: #888888;
padding-left: 15px;
margin: 0px;
}

.questions-active, .questions:hover{
background-color: #d2d2d2;
}

.ui-accordion-header-icon {
display: none;
}

.answers {
height: auto;
padding:10px 0px;
background-color: #fff;
}

</style>
</head>
<body>
<div id="faqs">
<h3>How much do we charge?</h3>
<div>
<p>
We charge a minimum of $300 per website.
</p>
</div>
<h3>Do you provide online support?</h3>
<div>
<p>
Yes, we have a LiveChat.
</div>
<h3>Do you have a trial hosting plan?</h3>
<div>
<p>
Absolutely!
</p>
</div>
<h3>How long will you take to build a website?</h3>
<div>
<p>
It will take you less than 2 hours.
</p>
</div>
<h3>Can I upgrade my account anytime?</h3>
<div>
<p>
Yes, from within your Client Area.
</div>
</div>
</div>
</body>
</html>

  • faq
  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

My Google Map is not working

If your Google maps is not displaying on your website and shows "Oops something went wrong..."...

Social Media Share buttons

When adding a Social Media Share Button on your website and someone clicks on the social media...

How to add/change a favicon

This tutorial video shows you how to add/change a favicon in WebBuilderPro. See How to add/change...

How to add a menu item

This tutorial video shows you how to add a menu item to an existing menu in WebBuilderPro. See...

How to add a product to your e-commerce site

This tutorial video shows you how to add a product to your website in WebBuilderPro. See How to...