Contents |
Introduction
We have been getting a few requests on how to create our FAQ page, http://themes.mysitemyway.com/elegance/pages/faqs/
We'll break this up into two steps, the intro and the content.
Intro
Go ahead and create a new page and call it something like FAQ. Scroll down some and you'll notice the intro options.
Paste this code inside the "Custom Raw HTML" section,
[margin20] <h1 style = "text-align: center;">Frequently Asked Questions</h1> [margin40] [one_half] <h5>Sample Question Section A</h5> <ol> <li><a href="#a1">Sample Question a1?</a></li> <li><a href="#a2">Sample Question a2?</a></li> <li><a href="#a3">Sample Question a3?</a></li> </ol> [margin20] <h5>Sample Question Section B</h5> <ol> <li><a href="#b1">Sample Question b1?</a></li> <li><a href="#b2">Sample Question b2?</a></li> <li><a href="#b3">Sample Question b3?</a></li> </ol> [margin20] [/one_half] [one_half_last] <h5>Sample Question Section C</h5> <ol> <li><a href="#c1">Sample Question c1?</a></li> <li><a href="#c2">Sample Question c2?</a></li> <li><a href="#c3">Sample Question c3?</a></li> </ol> [margin20] <h5>Sample Question Section D</h5> <ol> <li><a href="#d1">Sample Question d1?</a></li> <li><a href="#d2">Sample Question d2?</a></li> <li><a href="#d3">Sample Question d3?</a></li> </ol> [margin20] [/one_half_last]
As you can see the only shortcode we have used so far is the column shortcode. We are using ordered lists here but feel free to change them to our other list shortcodes if you want. The most important part though is the links, notice we have set a "#" and an ID for their href parameter.
We need to remember these ID's when we create the answers in the page content to "link" them.
Content
Next add this code inside your page content (the HTML editor),
[one_fourth] <h1 style = 'font-size: 90px; text-align: right;'>01</h1> <h3 style="text-align: right">Sample<br />Questions<br />A</h3> [/one_fourth] [three_fourth_last] <h4 id="a1">Sample Question a1?</h4> <p>Here is a sample answer to the question.</p> <h4 id="a2">Sample Question a2?</h4> <p>Here is a sample answer to the question.</p> <h4 id="a3">Sample Question a3?</h4> <p>Here is a sample answer to the question.</p> [divider_top] [/three_fourth_last] [one_fourth] <h1 style = 'font-size: 90px; text-align: right;'>02</h1> <h3 style="text-align: right">Sample<br />Questions<br />B</h3> [/one_fourth] [three_fourth_last] <h4 id="b1">Sample Question ab1?</h4> <p>Here is a sample answer to the question.</p> <h4 id="b2">Sample Question b2?</h4> <p>Here is a sample answer to the question.</p> <h4 id="b3">Sample Question b3?</h4> <p>Here is a sample answer to the question.</p> [divider_top] [/three_fourth_last] [one_fourth] <h1 style = 'font-size: 90px; text-align: right;'>03</h1> <h3 style="text-align: right">Sample<br />Questions<br />C</h3> [/one_fourth] [three_fourth_last] <h4 id="c1">Sample Question c1?</h4> <p>Here is a sample answer to the question.</p> <h4 id="c2">Sample Question c2?</h4> <p>Here is a sample answer to the question.</p> <h4 id="c3">Sample Question c3?</h4> <p>Here is a sample answer to the question.</p> [divider_top] [/three_fourth_last] [one_fourth] <h1 style = 'font-size: 90px; text-align: right;'>04</h1> <h3 style="text-align: right">Sample<br />Questions<br />D</h3> [/one_fourth] [three_fourth_last] <h4 id="d1">Sample Question d1?</h4> <p>Here is a sample answer to the question.</p> <h4 id="d2">Sample Question d2?</h4> <p>Here is a sample answer to the question.</p> <h4 id="d3">Sample Question d3?</h4> <p>Here is a sample answer to the question.</p> [divider_top] [/three_fourth_last]
We are splitting the content into a one_fourth and three_fourth column structure with the section title on the left and the answers on the right.
Notice that we are setting an ID to our H4 headings which correspond to the question ID's. This links them so when you click on a question you get sent to the correct answer.
Feel free to get creative by using our other shortcodes such as toggles, toogltips, etc etc.
Tip: If your having trouble editing your content then switch to Google Chrome and you can drag the textareas to make them bigger.
