Your Guide to Recreating Elements of the Salient Demo for Joomla
The Contact 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 | Contact - 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">Contact</h2>
<div class="g-layercontent-subtitle">Keep in Touch with Us</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 | above-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 is set to 60
% width and both the Sidebar and Aside sections are set to 20
%.
The page's content is sourced from a Single Contact menu item assigned to the outline. This creates the contact form as seen in our demo.
Settings used in our demo for each of these particles can be found below.
Field | Setting |
---|---|
Particle Name | Page Content |
Field | Setting |
---|---|
CSS ID | Blank |
CSS Classes | Blank |
Variations | Blank |
Tag Attributes | Blank |
Block Size | 100% |
The Aside section is set to 20
% width.
This area of the page is an Contact particle. You will find the settings used in our demo below.
Field | Setting |
---|---|
Particle Name | Contact |
CSS Classes | Blank |
Title | Contact Details |
Contact Item 1 Name | Call Us |
Contact Item 1 Icon | fa fa-phone fa-fw |
Contact Item 1 Value | +1(555)-555-555 |
Map Position | Top |
Maps | Blank |
The Extension section consists of an Info List particle assigned to the extension-a
module position.
You will find the settings used in our demo below.
Field | Setting |
---|---|
Particle Name | Info List |
CSS Classes | Blank |
Title | Common Queries and Questions |
Description | Blank |
Grid Column | 2 Columns |
Info Lists Item 1 Name | What prices are your services? |
Info Lists Item 1 Image | Blank |
Info Lists Item 1 Image Location | Left |
Info Lists Item 1 Text Style | Compact |
Info Lists Item 1 Image Style | Compact |
Info Lists Item 1 Description | Proactively envisioned multimedia based expertise and cross-media growth strategies. Seamlessly visualize quality intellectual capital without superior collaboration and idea-sharing. |
Info Lists Item 1 Tag | Blank |
Info Lists Item 1 Sub Tag | Blank |
Info Lists Item 1 Label | Blank |
Info Lists Item 1 Link | # |
Info Lists Item 1 Icon | Blank |
Info Lists Item 1 CSS Classes | Blank |
This area of the page is a Custom HTML module assigned to the bottom-a
module position. 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 | Got Billing and Payments Questions? |
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">Got Billing and Payments Questions?</h2>
<div class="g-layercontent-subtitle">Email Us for Questions Involving Payments, Billing, and Membership.</div>
<a href="http://www.rockettheme.com/joomla/templates/salient" class="button">Send Email</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>