Your Guide to Recreating Elements of the Ambrosia Demo for Joomla
The FAQ example page demonstrates how you can create a beautiful page with the Ambrosia template. Here is some information to help you replicate this page as it appears in the demo.
Below is a brief rundown of the modules and particles used to make up the demo page.
This area of the page is a Custom HTML module. You will find the settings used in our demo below.
Any mod_custom (Custom HTML) modules are best handled using either RokPad or no editor as a WYSIWYG editor can cause issues with any code that exists in the Custom Output field.
Field | Setting |
---|---|
Title | Frequently Asked Questions - Header |
Show Title | Hide |
Position | showcase-a |
Status | Published |
Enter the following in the Custom Output text editor.
<div class="g-layercontent g-layercontent-small">
<h2 class="g-layercontent-title">Frequently Asked Questions</h2>
<div class="g-layercontent-subtitle">Common Queries and Questions</div>
</div>
Option | Setting |
---|---|
Prepare Content | No |
Select a Background Image | Blank |
Option | Setting |
---|---|
Module Class Suffix | flush center |
This area of the page is a Custom HTML module. You will find the settings used in our demo below.
Any mod_custom (Custom HTML) modules are best handled using either RokPad or no editor as a WYSIWYG editor can cause issues with any code that exists in the Custom Output field.
Field | Setting |
---|---|
Title | Email - Phone - Chat |
Show Title | Hide |
Position | feature-a |
Status | Published |
Enter the following in the Custom Output text editor.
<div class="g-grid">
<div class="g-block box-blue center size-33-3">
<div class="g-content ">
<span class="fa fa-envelope fa-3x"></span>
<h2 class="g-title">Email</h2>
<p>Collaboratively administrate empowered markets via available great networks.</p>
<a class="button button-4" href="/">Send Email</a>
</div>
</div>
<div class="g-block box-orange center size-33-3">
<div class="g-content ">
<span class="fa fa-phone fa-3x"></span>
<h2 class="g-title">Phone</h2>
<p>Collaboratively administrate empowered markets via available great networks.</p>
<a class="button button-4" href="/">Talk Now</a>
</div>
</div>
<div class="g-block box-grey center size-33-3">
<div class="g-content ">
<span class="fa fa-comments fa-3x"></span>
<h2 class="g-title">Chat</h2>
<p>Collaboratively administrate empowered markets via available great networks.</p>
<a class="button button-4" href="/">Ask Us</a>
</div>
</div>
</div>
Option | Setting |
---|---|
Prepare Content | No |
Select a Background Image | Blank |
Option | Setting |
---|---|
Module Class Suffix | Blank |
The Mainbar section includes the Frequently Asked Questions article, displayed through the Page Content particle. Here are the settings found in the Frequently Asked Questions article.
Option | Setting |
---|---|
Title | Frequently Asked Questions |
Alias | frequently-asked-questions |
Status | Published |
Featured | No |
Category | Sample Pages |
Content Body
{loadposition faq-body}
This area of the page is a Custom HTML module. You will find the settings used in our demo below.
Any mod_custom (Custom HTML) modules are best handled using either RokPad or no editor as a WYSIWYG editor can cause issues with any code that exists in the Custom Output field.
Field | Setting |
---|---|
Title | FAQ List |
Show Title | Hide |
Position | extension-a |
Status | Published |
Enter the following in the Custom Output text editor.
<section id="g-mainbar">
<div class="g-grid">
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Installation</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Basic Usage</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Customization</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Development</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
</div>
<div class="g-grid">
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Accounts</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Subscription</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Security</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Organization</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
</div>
<div class="g-grid">
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Partnership</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Live Widget</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Web API</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
<div class="g-block size-25">
<div class="g-content ">
<h2 class="g-title">Legal Stuff</h2>
<ul>
<li><a href="/">Lorem Ipsum</a></li>
<li><a href="/">Dolor Amat</a></li>
<li><a href="/">Figus Terido</a></li>
<li><a href="/">Savios Menor</a></li>
</ul>
</div>
</div>
</div>
</section>
Option | Setting |
---|---|
Prepare Content | No |
Select a Background Image | Blank |
Option | Setting |
---|---|
Module Class Suffix | Blank |
This area of the page is a Custom HTML module. You will find the settings used in our demo below.
Any mod_custom (Custom HTML) modules are best handled using either RokPad or no editor as a WYSIWYG editor can cause issues with any code that exists in the Custom Output field.
Field | Setting |
---|---|
Title | FAQ Didn't Solve Your Problem? |
Show Title | Hide |
Position | bottom-a |
Status | Published |
Enter the following in the Custom Output text editor.
<div class="g-layercontent g-layercontent-small">
<h2 class="g-layercontent-title">FAQ Didn't Solve Your Problem?</h2>
<div class="g-layercontent-subtitle">Get Direct Access to the Team Via Phone, Email or Live Chat.</div>
<a href="http://www.rockettheme.com/joomla/templates/ambrosia" class="button">Contact Us</a>
</div>
Option | Setting |
---|---|
Prepare Content | No |
Select a Background Image | Blank |
Option | Setting |
---|---|
Module Class Suffix | flush center |