0
Welcome Guest! Login
0 items Join Now

Ambrosia: Recreating the Demo - FAQ Page

Your Guide to Recreating Elements of the Ambrosia Demo for Joomla

details download demo support

Introduction

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.

Modules and Particles

Below is a brief rundown of the modules and particles used to make up the demo page.

1
Showcase - Custom HTML (Module)
2
Feature - Custom HTML (Module)
3
Mainbar - Page Content
4
Extension - Custom HTML (Module)
5
Bottom - Custom HTML (Module)
  1. Showcase
  2. Feature
  3. Mainbar
  4. Extension
  5. Bottom

Showcase Section

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.

Custom HTML (Module)

Details

Field Setting
Title Frequently Asked Questions - Header
Show Title Hide
Position showcase-a
Status Published

Custom Output

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>

Basic

Option Setting
Prepare Content No
Select a Background Image Blank

Advanced

Option Setting
Module Class Suffix flush center

Feature Section

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.

Custom HTML (Module)

Details

Field Setting
Title Email - Phone - Chat
Show Title Hide
Position feature-a
Status Published

Custom Output

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>

Basic

Option Setting
Prepare Content No
Select a Background Image Blank

Advanced

Option Setting
Module Class Suffix Blank

Mainbar Section

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}

Extension Section

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.

Custom HTML (Module)

Details

Field Setting
Title FAQ List
Show Title Hide
Position extension-a
Status Published

Custom Output

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>

Basic

Option Setting
Prepare Content No
Select a Background Image Blank

Advanced

Option Setting
Module Class Suffix Blank

Bottom Section

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.

Custom HTML (Module)

Details

Field Setting
Title FAQ Didn't Solve Your Problem?
Show Title Hide
Position bottom-a
Status Published

Custom Output

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>

Basic

Option Setting
Prepare Content No
Select a Background Image Blank

Advanced

Option Setting
Module Class Suffix flush center
Found errors? Think you can improve this documentation? Please edit this page. You can also view the history of this page.