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 the pencil in top right hand corner of HTML box, select 'Properties' and paste the code below. You can then change the questions and answers in BLUE 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, How to add a FAQ page
  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

ACCESS AND OPEN WEBBUILDERPRO

You want to build your very own website using our WebBuilderPro. Open through Client Area Log...

Common mistakes people make in WebBuilderPro

If you are using our FREE WebBuilderPro website builder to build your website then you may have...

Contact Us page email setup

Setting up your Contact Us form on your website to use one of your hosting plans email accounts...

How to add a Live Chat feature

There are three Live Chat plugins available: tawk.to Olark ZopimWe propose using  tawk.to....

How to add a menu item

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