Your Guide to Recreating Elements of the Salient Demo for Joomla
The Pricing example page demonstrates how you can create a beautiful page with the Salient 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 | Awesome Plans - 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">Awesome Plans</h2>
<div class="g-layercontent-subtitle">Choose the Plan that Suits Your Needs</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 | Pricing Table |
Show Title | Hide |
Position | above-a |
Status | Published |
Enter the following in the Custom Output text editor.
<div class="g-grid">
<div class="g-block size-33-3">
<div class="g-content">
<ul class="g-pricingtable">
<li class="g-pricingtable-title">Basic
</li>
<li class="g-pricingtable-price">$28
</li>
<li class="g-pricingtable-desc">Globally incubate standards compliant channels
</li>
<li class="g-pricingtable-item">5GB Storage
</li>
<li class="g-pricingtable-item">10 Users
</li>
<li class="g-pricingtable-item">20 Emails
</li>
<li class="g-pricingtable-item">Online Store
</li>
<li class="g-pricingtable-item">Custom Domain
</li>
<li class="g-pricingtable-item">Unlimited Departments
</li>
<li class="g-pricingtable-cta">
<a class="button button-3" href="http://www.rockettheme.com/joomla/templates/salient">Sign Up</a>
</li>
</ul>
</div>
</div>
<div class="g-block size-33-3">
<div class="g-content">
<ul class="g-pricingtable">
<li class="g-pricingtable-title">Standard
</li>
<li class="g-pricingtable-price">$58
</li>
<li class="g-pricingtable-desc">Globally incubate standards compliant channels
</li>
<li class="g-pricingtable-item">5GB Storage
</li>
<li class="g-pricingtable-item">10 Users
</li>
<li class="g-pricingtable-item">20 Emails
</li>
<li class="g-pricingtable-item">Online Store
</li>
<li class="g-pricingtable-item">Custom Domain
</li>
<li class="g-pricingtable-item">Unlimited Departments
</li>
<li class="g-pricingtable-cta">
<a class="button button-3" href="http://www.rockettheme.com/joomla/templates/salient">Sign Up</a>
</li>
</ul>
</div>
</div>
<div class="g-block size-33-3">
<div class="g-content">
<ul class="g-pricingtable">
<li class="g-pricingtable-title">Pro
</li>
<li class="g-pricingtable-price">$88
</li>
<li class="g-pricingtable-desc">Globally incubate standards compliant channels
</li>
<li class="g-pricingtable-item">5GB Storage
</li>
<li class="g-pricingtable-item">10 Users
</li>
<li class="g-pricingtable-item">20 Emails
</li>
<li class="g-pricingtable-item">Online Store
</li>
<li class="g-pricingtable-item">Custom Domain
</li>
<li class="g-pricingtable-item">Unlimited Departments
</li>
<li class="g-pricingtable-cta">
<a class="button button-3" href="http://www.rockettheme.com/joomla/templates/salient">Sign Up</a>
</li>
</ul>
</div>
</div>
</div>
Option | Setting |
---|---|
Prepare Content | No |
Select a Background Image | Blank |
Option | Setting |
---|---|
Module Class Suffix | Blank |
The Mainbar section includes the Pricing article, displayed through the Page Content particle. Here are the settings found in the Pricing article.
Option | Setting |
---|---|
Title | Pricing |
Alias | pricing |
Status | Published |
Featured | No |
Category | Sample Pages |
Content Body
<div class="g-block size-100">
<div class="g-content">
<h2 class="g-title">
Try it Out for 10 Days Free
</h2>
<ul>
<li>All plans come with awesome support by email and phone. There is no hidden fee!
</li>
<li>Free <strong>10 days trial</strong> on all plans. No credit card needed! Need a bigger plan? <a href="http://www.rockettheme.com/joomla/templates/salient">View Professional Plan</a>.
</li>
</ul>
</div>
</div>
This area of the page is an Image Grid particle placed within a Gantry 5 Particle module in the extension-a
module position. We have included the settings for this particle below.
Field | Setting |
---|---|
Particle Name | Image Grid |
CSS Classes | Blank |
Title | Blank |
Description | Blank |
Grid Column | 4 Columns |
Album Name | clients |
Info Lists Item 1 Name | Image 1 |
Info Lists Item 1 Promo Image | Custom |
Info Lists Item 1 Caption | Image 1 |
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 | No Hidden Fees |
Show Title | Hide |
Position | bottom-a |
Status | Published |
Enter the following in the Custom Output text editor.
<div class="g-layercontent">
<h2 class="g-layercontent-title">No Hidden Fees</h2>
<div class="g-layercontent-subtitle">No Credit Card Required and No Long-Term Contracts</div>
<a href="http://www.rockettheme.com/joomla/templates/salient" class="button">Sign Up</a>
</div>
Option | Setting |
---|---|
Prepare Content | No |
Select a Background Image | Blank |
Option | Setting |
---|---|
Module Class Suffix | flush center |
The Footer section is made up of two modules and one particle in a single row. This includes a Newsletter particle surrounded by two Custom HTML modules.
Settings used in our demo for each of these modules and particle can be found below.
Field | Setting |
---|---|
Module Title | About Salient |
Show Title | Show |
Position | footer-a |
Custom HTML
Salient is available for purchase or part of a club membership from RocketTheme, inclusive of the RocketLauncher, template, addons and sources.
Field | Setting |
---|---|
Particle Name | Newsletter |
CSS Classes | Blank |
Title | Newsletter |
InputBox Text | Email Address |
Button Text | Join |
Feedburner URI | rocketthemeblog |
Button Classes | button-4 |
Heading Text
Subscribe to our newsletter and stay updated on the latest developments and special offers!
Field | Setting |
---|---|
CSS ID | Blank |
CSS Classes | Blank |
Variations | Blank |
Tag Attributes | Blank |
Block Size | 33.3% |
Field | Setting |
---|---|
Module Title | Sample Sitemap |
Show Title | Show |
Position | footer-c |
Custom HTML
<div class="g-grid g-sample-sitemap">
<div class="g-block">
<ul class="nomarginall noliststyle">
<li><a href="/index.php">Home</a></li>
<li><a href="/component/gantry5/?amp;view=custom&Itemid=105">Features</a></li>
<li><a href="/component/gantry5/?amp;view=custom&Itemid=106">Typography</a></li>
<li><a href="/component/gantry5/?amp;view=custom&Itemid=106">Particles</a></li>
<li><a href="/?amp;view=article&id=3&Itemid=107">Variations</a></li>
</ul>
</div>
<div class="g-block">
<ul class="nomarginall noliststyle">
<li><a href="/component/gantry5/?amp;view=custom&Itemid=106">Buttons</a></li>
<li><a href="/?amp;view=article&id=4&Itemid=111">Pages</a></li>
<li><a href="http://www.rockettheme.com/docs/joomla/templates/salient">Guide</a></li>
<li><a href="http://www.rockettheme.com/forum/joomla-template-salient">Support</a></li>
<li><a href="http://www.rockettheme.com/joomla/templates/salient">Download</a></li>
</ul>
</div>
</div>